@stackoverflow/stacks 3.0.0-beta.4 → 3.0.0-beta.5

package/dist/css/stacks.css

@@ -1256,136 +1256,139 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
 }
 .s-btn {
   --_bu-baw: var(--su-static1);
-  --_bu-bc: transparent;
-  --_bu-br: var(--br-md);
-  --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
+  --_bu-br: var(--br-pill);
   --_bu-fs: var(--fs-body1);
-  --_bu-p: 0.8em;
-  --_bu-bc-active: var(--_bu-bc);
-  --_bu-bg-active: var(--theme-button-active-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-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
-  --_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-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));
-  --_bu-badge-o: 0.5;
+  --_bu-lh: var(--lh-base);
+  --_bu-g: var(--su8);
+  --_bu-px: var(--su16);
+  --_bu-py: calc(var(--su8) + var(--su2));
   --_bu-dropdown-bw: var(--su-static4);
-  --_bu-number-fc: var(--white);
-  --_bu-number-fc-filled: var(--theme-button-primary-number-color, var(--theme-secondary-600));
-  --_bu-number-fc-selected: var(--white);
-  background-color: var(--_bu-bg, inherit);
-  border: var(--_bu-baw) solid var(--_bu-bc);
-  border-radius: var(--_bu-br);
-  box-shadow: none;
+  background: linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg) 50%) border-box;
+  border: var(--_bu-baw) solid var(--_bu-bc, transparent);
   color: var(--_bu-fc);
   font-size: var(--_bu-fs);
-  padding: var(--_bu-py, var(--_bu-p)) var(--_bu-px, var(--_bu-p));
+  gap: var(--_bu-g);
+  padding: var(--_bu-py) var(--_bu-px);
+  align-items: center;
+  border-radius: var(--_bu-br);
+  border-style: solid;
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
   font-family: inherit;
-  font-weight: normal;
-  line-height: var(--lh-sm);
+  font-weight: 600;
+  justify-content: center;
+  line-height: var(--_bu-lh);
   position: relative;
-  outline: none;
   text-align: center;
   text-decoration: none;
   user-select: none;
 }
-body.theme-highcontrast .s-btn {
-  --_bu-bc: currentColor;
-  --_bu-outlined-bc: var(--_bu-bc);
-  --_bu-fc-selected: var(--white);
-  --_bu-outlined-fc-selected: var(--white);
-  --_bu-badge-o: 0.8;
-  --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
+.s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google) {
+  --_bu-bg: var(--theme-button-color, var(--theme-secondary));
+  --_bu-bg-disabled: var(--theme-secondary-300);
+  --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
+  --_bu-fc: var(--white);
+  --_bu-fc-hover: var(--theme-button-hover-color, var(--white));
+  --_bu-badge-bg: var(--theme-secondary-200);
+  --_bu-badge-fc: var(--theme-secondary-600);
+  --_bu-badge-bg-disabled: var(--theme-secondary-200);
+  --_bu-badge-fc-disabled: var(--theme-secondary-300);
+}
+.s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
+  --_bu-bg: transparent;
+  --_bu-bg-disabled: var(--_bu-bg);
+  --_bu-bg-hover: var(--theme-secondary-100);
+  --_bu-bg-selected: var(--theme-secondary-100);
+  --_bu-fc: var(--theme-secondary-600);
+  --_bu-fc-disabled: var(--theme-secondary-300);
+  --_bu-fc-hover: var(--_bu-fc);
+  --_bu-badge-bg: var(--theme-secondary-500);
+  --_bu-badge-fc: var(--white);
+  --_bu-badge-bg-disabled: var(--theme-secondary-300);
+  --_bu-badge-fc-disabled: var(--white);
 }
-fieldset[disabled] .s-btn,
-.s-btn[disabled],
-.s-btn[aria-disabled="true"] {
-  opacity: var(--_o-disabled-static);
-  pointer-events: none;
-  text-decoration: none;
+body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
+  --_bu-bc: var(--theme-secondary-600);
 }
-button .s-btn,
-button[type="submit"] .s-btn,
-button[type="reset"] .s-btn {
-  -webkit-appearance: button;
+.s-btn.s-btn__danger {
+  --_bu-bg: var(--red-400);
+  --_bu-fc: var(--white);
+  --_bu-bg-disabled: var(--red-200);
+  --_bu-bg-hover: var(--red-500);
+  --_bu-bg-selected: var(--red-500);
+  --_bu-fc-selected: var(--_bu-fc);
+  --_bu-badge-bg: var(--red-100);
+  --_bu-badge-fc: var(--red-400);
+  --_bu-badge-bg-disabled: var(--white);
+  --_bu-badge-fc-disabled: var(--red-200);
+}
+.s-btn.s-btn__danger.s-btn__clear {
+  --_bu-bg: transparent;
+  --_bu-bg-disabled: var(--_bu-bg);
+  --_bu-bg-hover: var(--red-100);
+  --_bu-bg-selected: var(--red-100);
+  --_bu-fc: var(--red-400);
+  --_bu-fc-disabled: var(--red-200);
+  --_bu-fc-hover: var(--red-500);
+  --_bu-fc-selected: var(--red-500);
+  --_bu-badge-bg: var(--red-400);
+  --_bu-badge-bg-selected: var(--red-400);
+  --_bu-badge-fc: var(--red-100);
+  --_bu-badge-bg-disabled: var(--red-200);
+  --_bu-badge-fc-disabled: var(--white);
 }
-.s-btn.grid {
-  display: flex;
+body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
+  --_bu-bc-disabled: var(--red-300);
 }
-.s-btn.is-loading {
-  padding-left: 2.2em;
+.s-btn.s-btn__featured {
+  --_bu-bg: var(--purple-400);
+  --_bu-bg-disabled: var(--purple-200);
+  --_bu-bg-hover: var(--purple-500);
+  --_bu-bg-selected: var(--purple-500);
+  --_bu-fc: var(--white);
+  --_bu-fc-selected: var(--_bu-fc);
+  --_bu-badge-bg: var(--purple-100);
+  --_bu-badge-fc: var(--purple-400);
+  --_bu-badge-bg-disabled: var(--white);
+  --_bu-badge-fc-disabled: var(--purple-200);
+}
+.s-btn.s-btn__tonal {
+  --_bu-bg: var(--black-150);
+  --_bu-bg-disabled: var(--black-100);
+  --_bu-bg-hover: var(--black-200);
+  --_bu-fc: var(--black);
+  --_bu-fc-disabled: var(--black-300);
+  --_bu-fc-selected: var(--_bu-fc);
+  --_bu-badge-bg: var(--black-500);
+  --_bu-badge-fc: var(--white);
+  --_bu-badge-bg-disabled: var(--black-300);
+  --_bu-badge-fc-disabled: var(--white);
+}
+body.theme-highcontrast .s-btn.s-btn__tonal {
+  --_bu-bc: var(--black-300);
 }
-.s-btn.is-loading .svg-icon:first-child {
-  margin-left: calc((var(--su-static24) - var(--su-static1)) * -1);
-  opacity: 0;
+.s-btn.s-btn__facebook {
+  --_bu-bg: #1877F2;
+  --_bu-bg-hover: #0d6ae4;
+  --_bu-fc: #fff;
+  --_bu-fc-hover: var(--_bu-fc);
 }
-.s-btn.is-selected,
-.s-btn--radio:checked + .s-btn {
-  background-color: var(--_bu-bg-selected);
-  border-color: var(--_bu-bc-selected, transparent);
-  color: var(--_bu-fc-selected);
-}
-.s-btn.is-selected .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--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--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--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);
-  --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
-}
-.s-btn.s-btn__filled {
-  border-color: var(--_bu-filled-bc);
-  background-color: var(--_bu-filled-bg);
-  color: var(--_bu-filled-fc);
-}
-.s-btn.s-btn__filled .s-btn--number {
-  color: var(--_bu-number-fc-filled);
-}
-.s-btn.s-btn__outlined {
-  border-color: var(--_bu-outlined-bc);
-  background-color: var(--_bu-outlined-bg, inherit);
+.s-btn.s-btn__google {
+  --_bu-bg: var(--black-150);
+  --_bu-bg-hover: var(--black-200);
+  --_bu-fc: var(--black-600);
+}
+.s-btn.s-btn__github {
+  --_bu-bg: var(--black-600);
+  --_bu-bg-hover: var(--black-500);
+  --_bu-fc: var(--white);
 }
 .s-btn.s-btn__link,
 .s-btn.s-btn__unset {
   --_bu-baw: 0;
   --_bu-br: 0;
-  --_bu-p: 0;
+  --_bu-px: 0;
+  --_bu-py: 0;
 }
 .s-btn.s-btn__link:focus,
 .s-btn.s-btn__unset:focus,
@@ -1510,188 +1513,49 @@ p .s-btn.s-btn__link {
 .s-btn.s-btn__unset:hover,
 .s-btn.s-btn__unset:active,
 .s-btn.s-btn__unset:focus {
+  --_bu-baw: 0;
   --_bu-bg: none;
+  --_bu-br: unset;
   --_bu-fc: unset;
+  --_bu-fs: inherit;
+  --_bu-g: unset;
+  --_bu-lh: inherit;
   cursor: default;
   font: unset;
   user-select: auto;
 }
-.s-btn.s-btn__dropdown {
-  padding-right: calc(var(--_bu-px, var(--_bu-p)) * 2.5);
-}
 .s-btn.s-btn__dropdown:after {
   border-color: currentColor transparent;
   border-style: solid;
   border-width: var(--_bu-dropdown-bw);
   border-bottom-width: 0;
   content: "";
-  pointer-events: none;
-  position: absolute;
-  right: var(--_bu-px, var(--_bu-p));
-  top: calc(50% - var(--su-static2));
-  z-index: var(--zi-active);
-}
-.s-btn.s-btn__icon .svg-icon {
-  vertical-align: baseline;
-  margin-top: -0.3em;
-  margin-bottom: -0.3em;
-  transition: opacity 200ms var(--te-smooth);
-}
-.s-btn.s-btn__xs {
-  --_bu-fs: var(--fs-fine);
-  --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
-  --_bu-p: 0.6em;
 }
-.s-btn.s-btn__sm {
-  --_bu-fs: var(--fs-caption);
-}
-.s-btn.s-btn__md {
-  --_bu-fs: var(--fs-body3);
-  --_bu-br: calc(var(--br-md) + var(--su-static1));
-  --_bu-p: 0.7em;
-}
-body.theme-highcontrast .s-btn.s-btn__danger,
-body.theme-highcontrast .s-btn.s-btn__featured,
-body.theme-highcontrast .s-btn.s-btn__muted {
-  --_bu-filled-bc: transparent;
-}
-.s-btn.s-btn__danger {
-  --_bu-bg-active: var(--red-300);
-  --_bu-bg-hover: var(--red-200);
-  --_bu-bg-selected: var(--red-300);
-  --_bu-fc: var(--red-500);
-  --_bu-fc-active: var(--_bu-fc);
-  --_bu-fc-hover: var(--red-500);
-  --_bu-fc-selected: var(--red-600);
-  --_bu-filled-bc: transparent;
-  --_bu-filled-bc-selected: var(--_bu-filled-bc);
-  --_bu-filled-bg: var(--red-400);
-  --_bu-filled-bg-active: var(--red-500);
-  --_bu-filled-bg-hover: var(--red-500);
-  --_bu-filled-bg-selected: var(--red-600);
-  --_bu-filled-fc: var(--white);
-  --_bu-filled-fc-active: var(--_bu-filled-fc);
-  --_bu-filled-fc-hover: var(--_bu-filled-fc);
-  --_bu-filled-fc-selected: var(--_bu-filled-fc);
-  --_bu-outlined-bc: var(--red-400);
-  --_bu-outlined-bc-selected: var(--red-500);
-  --_bu-outlined-bg-selected: var(--_bu-bg-selected);
-  --_bu-outlined-fc-selected: var(--_bu-fc-selected);
-  --_bu-number-fc: var(--white);
-  --_bu-number-fc-filled: var(--black);
-}
-.s-btn.s-btn__featured {
-  --_bu-bg-active: var(--purple-300);
-  --_bu-bg-hover: var(--purple-200);
-  --_bu-bg-selected: var(--purple-300);
-  --_bu-fc: var(--purple-500);
-  --_bu-fc-active: var(--_bu-fc);
-  --_bu-fc-hover: var(--purple-500);
-  --_bu-fc-selected: var(--purple-600);
-  --_bu-filled-bc: transparent;
-  --_bu-filled-bc-selected: var(--_bu-filled-bc);
-  --_bu-filled-bg: var(--purple-400);
-  --_bu-filled-bg-active: var(--purple-500);
-  --_bu-filled-bg-hover: var(--purple-500);
-  --_bu-filled-bg-selected: var(--purple-600);
-  --_bu-filled-fc: var(--white);
-  --_bu-filled-fc-active: var(--_bu-filled-fc);
-  --_bu-filled-fc-hover: var(--_bu-filled-fc);
-  --_bu-filled-fc-selected: var(--_bu-filled-fc);
-  --_bu-outlined-bc: var(--purple-400);
-  --_bu-outlined-bc-selected: var(--purple-500);
-  --_bu-outlined-bg-selected: var(--_bu-bg-selected);
-  --_bu-outlined-fc-selected: var(--_bu-fc-selected);
-  --_bu-number-fc: var(--white);
-  --_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);
-  --_bu-fc: var(--black-500);
-  --_bu-fc-active: var(--_bu-fc);
-  --_bu-fc-hover: var(--black-500);
-  --_bu-fc-selected: var(--black-500);
-  --_bu-filled-bc: transparent;
-  --_bu-filled-bc-selected: var(--_bu-filled-bc);
-  --_bu-filled-bg: var(--black-225);
-  --_bu-filled-bg-active: var(--black-300);
-  --_bu-filled-bg-hover: var(--black-250);
-  --_bu-filled-bg-selected: var(--black-350);
-  --_bu-filled-fc: var(--black-500);
-  --_bu-filled-fc-active: var(--_bu-filled-fc);
-  --_bu-filled-fc-hover: var(--_bu-filled-fc);
-  --_bu-filled-fc-selected: var(--black-600);
-  --_bu-outlined-bc: var(--black-300);
-  --_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-bc-hover: currentColor;
-  --_bu-bg-hover: var(--black-225);
-  --_bu-filled-bg: var(--black-400);
-  --_bu-filled-bg-active: var(--black-500);
-  --_bu-filled-bg-hover: var(--black-400);
-  --_bu-filled-bg-selected: var(--black-500);
-  --_bu-filled-fc: var(--white);
-  --_bu-filled-fc-selected: var(--_bu-filled-fc);
-  --_bu-bc-selected: currentColor;
-  --_bu-fc-selected: var(--black);
-  --_bu-number-fc: var(--white);
-  --_bu-number-fc-filled: var(--black);
-  --_bu-number-fc-selected: var(--white);
-}
-body.theme-highcontrast .s-btn.s-btn__facebook,
-body.theme-highcontrast .s-btn.s-btn__github {
-  --_bu-bc: transparent;
+.s-btn.is-selected,
+.s-btn--radio:checked + .s-btn {
+  --_bu-bg-selected-overlay: color-mix(in srgb, var(--_bu-bg-selected, var(--_bu-bg)), var(--white) 25%);
+  background: linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg-selected, var(--_bu-bg)) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg-selected, var(--_bu-bg)) 50%) border-box;
+  color: var(--_bu-fc-selected, var(--_bu-fc));
 }
-.s-btn.s-btn__facebook {
-  --_bu-bc: transparent;
-  --_bu-bg: #385499;
-  --_bu-bg-active: #2a4074;
-  --_bu-bg-hover: #314a86;
-  --_bu-fc: #fff;
-  --_bu-fc-active: var(--_bu-fc);
-  --_bu-fc-hover: var(--_bu-fc);
-  --_bu-hc-bc: transparent;
+.s-btn.is-selected .s-btn--badge,
+.s-btn--radio:checked + .s-btn .s-btn--badge {
+  background-color: var(--_bu-badge-bg);
 }
-.s-btn.s-btn__google {
-  --_bu-bc: var(--bc-medium);
-  --_bu-bg: var(--white);
-  --_bu-bg-active: var(--black-150);
-  --_bu-bg-hover: var(--black-100);
-  --_bu-fc: var(--fc-medium);
-  --_bu-fc-active: var(--fc-dark);
-  --_bu-fc-hover: var(--black-600);
-}
-.s-btn.s-btn__github {
-  --_bu-bg: var(--black-600);
-  --_bu-bg-active: var(--black);
-  --_bu-bg-hover: var(--black-600);
-  --_bu-fc: var(--white);
-  --_bu-fc-active: var(--white);
-  --_bu-fc-hover: var(--white);
-  --_bu-hc-bc: transparent;
+.s-btn.is-selected .s-btn--badge .s-btn--number,
+.s-btn--radio:checked + .s-btn .s-btn--badge .s-btn--number {
+  color: var(--_bu-badge-fc, var(--_bu-fc));
 }
 .s-btn .s-btn--badge {
-  opacity: var(--_bu-badge-o);
+  background-color: var(--_bu-badge-bg);
+  border-radius: var(--br-pill);
   display: inline-block;
-  border-radius: var(--br-md);
-  padding: var(--su2) calc(var(--su4) - var(--su1));
   font-size: var(--fs-caption);
-  line-height: var(--lh-xs);
-  background-color: currentColor;
+  line-height: inherit;
+  opacity: var(--_bu-badge-o);
+  padding: var(--su1) var(--su4) 0;
 }
 .s-btn .s-btn--number {
-  color: var(--_bu-number-fc);
+  color: var(--_bu-badge-fc, var(--_bu-fc));
 }
 .s-btn--radio {
   border: 0;
@@ -1705,52 +1569,66 @@ body.theme-highcontrast .s-btn.s-btn__github {
   position: absolute;
   width: var(--su-static1);
 }
-.s-btn:not(.s-btn__link):not(.s-btn__unset):focus-visible,
-.s-btn--radio:focus-visible + .s-btn {
-  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--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible,
-.s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected).focus-inset-bordered {
-  background-color: var(--_bu-bg-focus, var(--_bu-filled-bg));
-  color: var(--_bu-fc-focus, var(--_bu-filled-fc));
-}
-.s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible:not(:hover) .s-btn--number,
-.s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected).focus-inset-bordered:not(:hover) .s-btn--number {
-  color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled));
+.s-btn.s-btn__xs,
+.s-btn.s-btn__sm {
+  --_bu-lh: var(--lh-sm);
+  --_bu-px: var(--su12);
 }
-.s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):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.s-btn__xs {
+  --_bu-g: var(--su4);
+  --_bu-fs: var(--fs-fine);
+  --_bu-py: var(--su6);
 }
-.s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):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.s-btn__sm {
+  --_bu-g: var(--su6);
+  --_bu-fs: var(--fs-caption);
+  --_bu-py: var(--su8);
 }
-.s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover:not(.s-btn__outlined):not(.s-btn__filled) {
-  border-color: var(--_bu-bc-hover);
+.s-btn.s-btn__lg {
+  --_bu-fs: var(--fs-body2);
+  --_bu-px: var(--su24);
+  --_bu-py: calc(var(--su12) + var(--su1));
 }
-.s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover:visited:not(:active):not(:focus):not(.s-btn__outlined) {
-  background-color: var(--_bu-bg);
-  border-color: var(--_bu-bc);
-  color: var(--_bu-fc);
+.s-btn:not(.s-btn__link):not(.s-btn__unset):focus-visible,
+.s-btn--radio:focus-visible + .s-btn {
+  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-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover:visited:not(:active):not(:focus):not(.s-btn__outlined).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:hover {
+  background: linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg-hover, var(--_bu-bg))) 50%, var(--_bu-bg-hover, var(--_bu-bg-selected, var(--_bu-bg))) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg-hover, var(--_bu-bg))) 50%, var(--_bu-bg-hover, var(--_bu-bg-selected, var(--_bu-bg))) 50%) border-box;
+  color: var(--_bu-fc-hover, var(--_bu-fc));
 }
-.s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):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);
+fieldset[disabled] .s-btn,
+.s-btn[disabled],
+.s-btn[aria-disabled="true"] {
+  cursor: auto;
 }
-.s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):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);
+fieldset[disabled] .s-btn,
+.s-btn[disabled],
+.s-btn[aria-disabled="true"],
+fieldset[disabled] .s-btn:hover,
+.s-btn[disabled]:hover,
+.s-btn[aria-disabled="true"]:hover {
+  background: var(--_bu-bg-disabled, var(--theme-secondary-400));
+  border-color: var(--_bu-bc-disabled, var(--_bu-bc, transparent));
+  color: var(--_bu-fc-disabled, var(--_bu-fc));
+}
+fieldset[disabled] .s-btn .s-btn--badge,
+.s-btn[disabled] .s-btn--badge,
+.s-btn[aria-disabled="true"] .s-btn--badge,
+fieldset[disabled] .s-btn:hover .s-btn--badge,
+.s-btn[disabled]:hover .s-btn--badge,
+.s-btn[aria-disabled="true"]:hover .s-btn--badge {
+  background-color: var(--_bu-badge-bg-disabled);
+}
+fieldset[disabled] .s-btn .s-btn--badge .s-btn--number,
+.s-btn[disabled] .s-btn--badge .s-btn--number,
+.s-btn[aria-disabled="true"] .s-btn--badge .s-btn--number,
+fieldset[disabled] .s-btn:hover .s-btn--badge .s-btn--number,
+.s-btn[disabled]:hover .s-btn--badge .s-btn--number,
+.s-btn[aria-disabled="true"]:hover .s-btn--badge .s-btn--number {
+  color: var(--_bu-badge-fc-disabled);
 }
 .s-btn-group {
   border: var(--su-static1) solid var(--black-300);
@@ -3162,18 +3040,20 @@ body.theme-highcontrast.theme-dark .s-modal {
   --_na-p: var(--su2) 0;
   --_na-gap: var(--su4);
   --_na-item-bg: none;
-  --_na-item-fc: var(--black-500);
+  --_na-item-fc: var(--black-400);
   --_na-item-fs: unset;
-  --_na-item-p: var(--su6) var(--su12);
-  --_na-item-py: var(--su12);
+  --_na-item-p: calc(var(--su12) - var(--su1)) var(--su16);
   --_na-item-ws: nowrap;
-  --_na-item-bg-hover: var(--black-200);
+  --_na-item-bg-hover: var(--black-150);
   --_na-item-fc-hover: var(--_na-item-fc);
-  --_na-item-selected-bg: var(--theme-primary);
-  --_na-item-selected-fc: var(--white);
-  --_na-item-selected-bg-hover: var(--theme-primary-500);
+  --_na-item-selected-bg: none;
+  --_na-item-selected-fc: var(--black-600);
+  --_na-item-selected-bg-hover: var(--_na-item-bg-hover);
+  --_na-item-selected-h: var(--su-static2);
   --_na-item-text-ta: center;
   --_na-title-mt: var(--su16);
+  --_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E");
+  --_na-after-bg-color: var(--black-400);
   flex-direction: var(--_na-fd);
   flex-wrap: var(--_na-fw);
   gap: var(--_na-gap);
@@ -3210,7 +3090,7 @@ body.theme-highcontrast .s-navigation {
 }
 .s-navigation.s-navigation__sm {
   --_na-item-fs: var(--fs-caption);
-  --_na-item-p: var(--su4) var(--su12);
+  --_na-item-p: var(--su6) var(--su4);
 }
 .s-navigation.s-navigation__vertical {
   --_na-fd: column;
@@ -3218,16 +3098,17 @@ body.theme-highcontrast .s-navigation {
   --_na-p: 0;
   --_na-item-text-ta: unset;
   --_na-item-ws: normal;
+  --_na-item-selected-h: 0;
+  --_na-item-p: var(--su6) var(--su8);
 }
-.s-navigation.s-navigation__muted {
-  --_na-item-selected-bg: var(--black-150);
-  --_na-item-selected-fc: var(--black-600);
-  --_na-item-selected-bg-hover: var(--_na-item-bg);
+.s-navigation.s-navigation__vertical .s-navigation--item.is-selected {
+  --_na-item-bg: var(--black-150);
 }
-body.theme-highcontrast .s-navigation.s-navigation__muted {
-  --_na-item-selected-bg: var(--black-600);
-  --_na-item-selected-fc: var(--black-150);
-  --_na-item-selected-bg-hover: var(--black-600);
+.s-navigation.s-navigation__vertical .s-navigation--item:has(.s-navigation--icon) {
+  --_na-item-p: calc(var(--su12) - var(--su1)) var(--su8);
+}
+.s-navigation.s-navigation__vertical .s-navigation--item:has(.s-navigation--avatar) {
+  --_na-item-p: var(--su12) var(--su8);
 }
 .s-navigation .s-navigation--item {
   background-color: var(--_na-item-bg);
@@ -3238,7 +3119,7 @@ body.theme-highcontrast .s-navigation.s-navigation__muted {
   white-space: var(--_na-item-ws);
   align-items: center;
   border: none;
-  border-radius: 1000px;
+  border-radius: var(--br-md);
   box-shadow: none;
   cursor: pointer;
   display: flex;
@@ -3252,28 +3133,41 @@ body.theme-highcontrast .s-navigation.s-navigation__muted {
   --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
   font-weight: bold;
 }
-body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
-  text-decoration: none;
+.s-navigation .s-navigation--item.is-selected:before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--_na-item-selected-h);
+  background-color: var(--_na-item-selected-fc);
+}
+body.theme-highcontrast .s-navigation .s-navigation--item.is-selected:before {
+  height: 0;
 }
-.s-navigation .s-navigation--item__dropdown {
-  padding-right: 2em;
+body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
+  --_na-item-fc-hover: var(--white);
+  box-shadow: inset 0 0 0 var(--su-static1) var(--black-500);
 }
 .s-navigation .s-navigation--item__dropdown:after {
-  border-style: solid;
-  border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
-  border-color: currentColor transparent;
+  mask-image: var(--_na-after-mask);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  background-color: var(--_na-after-bg-color);
   content: "";
-  pointer-events: none;
-  position: absolute;
-  right: 0.9em;
-  top: calc(50% - var(--su-static2));
-  z-index: var(--zi-active);
+  height: var(--su12);
+  width: var(--su12);
+  margin-left: var(--su8);
 }
 .s-navigation .s-navigation--item:hover,
 .s-navigation .s-navigation--item:active {
   background-color: var(--_na-item-bg-hover);
   color: var(--_na-item-fc-hover);
 }
+body.theme-highcontrast .s-navigation .s-navigation--item:hover,
+body.theme-highcontrast .s-navigation .s-navigation--item:active {
+  --_na-after-bg-color: var(--white);
+}
 .s-navigation .s-navigation--item: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;
@@ -3294,13 +3188,19 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
 .s-navigation .s-navigation--title {
   margin-top: var(--_na-title-mt);
   font-size: var(--fs-fine);
-  font-weight: bold;
-  padding: var(--su6) var(--su12);
-  text-transform: uppercase;
+  color: var(--black-400);
+  padding: var(--su16) var(--su8);
 }
 .s-navigation .s-navigation--title:first-child {
   --_na-title-mt: 0;
 }
+.s-navigation .s-navigation--icon {
+  color: inherit;
+  margin-right: var(--su4);
+}
+.s-navigation .s-navigation--avatar {
+  margin-right: var(--su8);
+}
 /**
  * Generate color variables with a given color name
  *
@@ -3666,7 +3566,7 @@ body.theme-system .theme-dark__forced .s-popover {
   float: right;
   top: calc(var(--su8) * -1);
   right: calc(var(--su8) * -1);
-  padding: var(--su8) !important;
+  padding: var(--su6) !important;
 }
 .s-popover .s-popover--content {
   max-height: var(--_po-content-mxh);