@stackoverflow/stacks 3.0.0-beta.13 → 3.0.0-beta.14

package/dist/css/stacks.css

@@ -1799,181 +1799,277 @@ body.theme-highcontrast .s-card.s-card__muted > * {
 .s-card > :last-child {
   margin-bottom: 0;
 }
-.s-check-control {
-  --_cc-ai: center;
-  align-items: var(--_cc-ai);
+.s-checkbox,
+.s-radio {
+  --_ch-ai: center;
+  --_ch-fc: unset;
+  --_ch-after-fc: unset;
+  --_ch-cursor: pointer;
+  --_ch-label-fc: var(--_ch-fc);
+  --_ch-gap: var(--su8);
+  --_ch-input-baw: var(--su-static1);
+  --_ch-input-bc: var(--black-350);
+  --_ch-input-bg: var(--white);
+  --_ch-input-bg-image: unset;
+  --_ch-input-br: var(--su-static1);
+  --_ch-input-cursor: pointer;
+  --_ch-input-h: calc(var(--su-static12) + var(--su-static2));
+  align-items: var(--_ch-ai);
   display: flex;
-  gap: var(--su8);
+  gap: var(--_ch-gap);
 }
-.s-check-group .s-check-control {
-  --_cc-ai: flex-start;
+@media (forced-colors: active) {
+  .s-checkbox:checked,
+  .s-radio:checked,
+  .s-checkbox:indeterminate,
+  .s-radio:indeterminate {
+    --_ch-input-bg: ButtonText !important;
+  }
 }
-.s-check-control .s-label {
-  font-weight: normal;
+fieldset[disabled] .s-checkbox,
+fieldset[disabled] .s-radio,
+.s-checkbox:has(> input[disabled]),
+.s-radio:has(> input[disabled]) {
+  --_ch-fc: var(--black-300);
+  --_ch-input-bc: var(--black-300);
+  --_ch-input-cursor: not-allowed;
+}
+.s-checkbox:has(> input[disabled]:checked),
+.s-radio:has(> input[disabled]:checked) {
+  --_ch-input-bc: var(--theme-secondary-300);
+}
+.s-checkbox.s-checkbox__checkmark,
+.s-checkbox.s-radio__checkmark,
+.s-radio.s-checkbox__checkmark,
+.s-radio.s-radio__checkmark {
+  --_ch-fc: var(--theme-secondary);
+  --_ch-gap: var(--su4);
+  --_ch-after-fc: unset;
+  border-radius: var(--br-md);
+  color: var(--_ch-fc);
+  cursor: var(--_ch-cursor);
+  width: 100%;
 }
-.s-check-group {
-  --_cg-fd: column;
-  flex-direction: var(--_cg-fd);
-  display: flex;
-  gap: var(--su8);
+.s-checkbox.s-checkbox__checkmark:has(> input:focus-visible),
+.s-checkbox.s-radio__checkmark:has(> input:focus-visible),
+.s-radio.s-checkbox__checkmark:has(> input:focus-visible),
+.s-radio.s-radio__checkmark:has(> input: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-check-group.s-check-group__horizontal {
-  --_cg-fd: row;
+.s-checkbox.s-checkbox__checkmark:has(> input:checked),
+.s-checkbox.s-radio__checkmark:has(> input:checked),
+.s-radio.s-checkbox__checkmark:has(> input:checked),
+.s-radio.s-radio__checkmark:has(> input:checked) {
+  --_ch-after-fc: var(--_ch-fc);
+}
+.s-checkbox.s-checkbox__checkmark:has(> input[disabled]),
+.s-checkbox.s-radio__checkmark:has(> input[disabled]),
+.s-radio.s-checkbox__checkmark:has(> input[disabled]),
+.s-radio.s-radio__checkmark:has(> input[disabled]) {
+  --_ch-cursor: not-allowed;
+}
+.s-checkbox.s-checkbox__checkmark:has(> input:checked[disabled]),
+.s-checkbox.s-radio__checkmark:has(> input:checked[disabled]),
+.s-radio.s-checkbox__checkmark:has(> input:checked[disabled]),
+.s-radio.s-radio__checkmark:has(> input:checked[disabled]) {
+  --_ch-fc: var(--theme-secondary-300);
+}
+.s-checkbox.s-checkbox__checkmark input,
+.s-checkbox.s-radio__checkmark input,
+.s-radio.s-checkbox__checkmark input,
+.s-radio.s-radio__checkmark input,
+.s-checkbox.s-checkbox__checkmark:after,
+.s-checkbox.s-radio__checkmark:after,
+.s-radio.s-checkbox__checkmark:after,
+.s-radio.s-radio__checkmark:after {
+  height: var(--su16);
+  margin-left: 100%;
+  width: var(--su16);
 }
-.s-check-group legend.s-label {
-  margin-bottom: var(--su8);
+.s-checkbox.s-checkbox__checkmark:after,
+.s-checkbox.s-radio__checkmark:after,
+.s-radio.s-checkbox__checkmark:after,
+.s-radio.s-radio__checkmark:after {
+  background-color: var(--_ch-after-fc);
+  content: "";
+  flex-shrink: 0;
+  margin-left: auto;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m14 3.88-.44.44-7.34 7.35-.44.44-.44-.44-2.9-2.9L2 8.34l.89-.88.44.44 2.45 2.45 6.9-6.9.44-.44z'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
 }
-.s-checkbox,
-.s-radio {
-  --_ch-baw: var(--su-static1);
-  --_ch-bc: var(--bc-dark);
-  --_ch-bg: var(--white);
-  --_ch-bg-image: unset;
-  background-color: var(--_ch-bg);
-  border: var(--_ch-baw) solid var(--_ch-bc);
+.s-checkbox.s-checkbox__checkmark input,
+.s-checkbox.s-radio__checkmark input,
+.s-radio.s-checkbox__checkmark input,
+.s-radio.s-radio__checkmark input {
   appearance: none;
-  cursor: pointer;
-  font-size: inherit;
-  height: 1em;
-  margin: 0;
-  outline: 0;
-  vertical-align: middle;
-  width: 1em;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  z-index: -1;
 }
-fieldset[disabled] .s-checkbox,
-fieldset[disabled] .s-radio,
-.s-checkbox[disabled],
-.s-radio[disabled] {
-  cursor: not-allowed;
-  opacity: var(--_o-disabled-static);
+.s-checkbox.s-checkbox__checkmark .s-description,
+.s-checkbox.s-radio__checkmark .s-description,
+.s-radio.s-checkbox__checkmark .s-description,
+.s-radio.s-radio__checkmark .s-description {
+  margin: var(--su2) 0 0;
+  padding: 0;
 }
-.s-check-group .s-checkbox,
-.s-check-group .s-radio {
-  margin-top: calc(var(--su2) + var(--su1));
+.s-checkbox.s-checkbox__checkmark .s-label,
+.s-checkbox.s-radio__checkmark .s-label,
+.s-radio.s-checkbox__checkmark .s-label,
+.s-radio.s-radio__checkmark .s-label {
+  flex-grow: 1;
 }
-input.s-checkbox,
-input.s-radio {
+.s-checkbox:has(> input[disabled]) .s-label,
+.s-radio:has(> input[disabled]) .s-label {
+  --_ch-label-fc: var(--black-300);
+}
+.s-checkbox:not(> input[disabled]):has(input:checked) .s-label,
+.s-radio:not(> input[disabled]):has(input:checked) .s-label,
+.s-checkbox:not(> input[disabled]):has(input:indeterminate) .s-label,
+.s-radio:not(> input[disabled]):has(input:indeterminate) .s-label {
+  --_ch-label-fc: var(--black-600);
+}
+.s-checkbox:has(> .s-label .s-description),
+.s-radio:has(> .s-label .s-description),
+.s-checkbox:has(> .s-label .s-input-message),
+.s-radio:has(> .s-label .s-input-message) {
+  --_ch-ai: flex-start;
+}
+.s-checkbox:has(> .s-label .s-description) input,
+.s-radio:has(> .s-label .s-description) input,
+.s-checkbox:has(> .s-label .s-input-message) input,
+.s-radio:has(> .s-label .s-input-message) input {
+  margin-top: var(--su2);
+}
+.s-checkbox:has( > input:not(:checked)).has-error,
+.s-radio:has( > input:not(:checked)).has-error {
+  --_ch-input-bc: var(--red-400);
+}
+.s-checkbox:has( > input:not(:checked)).has-success,
+.s-radio:has( > input:not(:checked)).has-success {
+  --_ch-input-bc: var(--green-400);
+}
+.s-checkbox:has( > input:not(:checked)).has-warning,
+.s-radio:has( > input:not(:checked)).has-warning {
+  --_ch-input-bc: var(--yellow-400);
+}
+.s-checkbox input,
+.s-radio input {
+  appearance: none;
+  background-color: var(--_ch-input-bg);
+  border: var(--_ch-input-baw) solid var(--_ch-input-bc);
+  border-radius: var(--_ch-input-br);
+  cursor: var(--_ch-input-cursor);
+  height: var(--_ch-input-h);
+  aspect-ratio: 1 / 1;
   flex-shrink: 0;
+  font-size: inherit;
+  margin: 0;
+  outline: 0;
+  vertical-align: middle;
 }
-.s-checkbox:focus,
-.s-radio:focus {
+.s-checkbox input:focus-visible,
+.s-radio input: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-checkbox {
-  background-image: var(--_ch-bg-image);
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  border-radius: var(--br-md);
+.has-error .s-checkbox input:not(:checked),
+.has-error .s-radio input:not(:checked),
+.has-success .s-checkbox input:not(:checked),
+.has-success .s-radio input:not(:checked),
+.has-warning .s-checkbox input:not(:checked),
+.has-warning .s-radio input:not(:checked) {
+  --_ch-input-bc-focus: var(--_ch-input-bc);
+}
+.has-error .s-checkbox input:not(:checked),
+.has-error .s-radio input:not(:checked) {
+  --_ch-input-bc: var(--red-400);
+}
+.has-success .s-checkbox input:not(:checked),
+.has-success .s-radio input:not(:checked) {
+  --_ch-input-bc: var(--green-400);
+}
+.has-warning .s-checkbox input:not(:checked),
+.has-warning .s-radio input:not(:checked) {
+  --_ch-input-bc: var(--yellow-500);
+}
+.s-checkbox .s-label,
+.s-radio .s-label {
+  color: var(--_ch-label-fc);
+  font-size: var(--fs-body1);
+  font-weight: normal;
 }
 @media (prefers-color-scheme: dark) {
-  body.theme-system .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='%23141414'/%3E%3C/svg%3E");
+  body.theme-system .s-checkbox input:checked {
+    --_ch-input-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='%23141414'/%3E%3C/svg%3E");
   }
-  body.theme-system .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='%23141414'/%3E%3C/svg%3E");
+  body.theme-system .s-checkbox input:indeterminate {
+    --_ch-input-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='%23141414'/%3E%3C/svg%3E");
   }
 }
-body.theme-dark .s-checkbox:checked,
-.theme-dark__forced .s-checkbox:checked,
-body.theme-system .theme-dark__forced .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='%23141414'/%3E%3C/svg%3E");
-}
-body.theme-dark .s-checkbox:indeterminate,
-.theme-dark__forced .s-checkbox:indeterminate,
-body.theme-system .theme-dark__forced .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='%23141414'/%3E%3C/svg%3E");
+body.theme-dark .s-checkbox input:checked,
+.theme-dark__forced .s-checkbox input:checked,
+body.theme-system .theme-dark__forced .s-checkbox input:checked {
+  --_ch-input-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='%23141414'/%3E%3C/svg%3E");
 }
-@media (prefers-color-scheme: dark) {
-  body.theme-highcontrast.theme-system .s-checkbox:checked,
-  body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
-    --_ch-bc: var(--black) !important;
-    --_ch-bg: var(--black);
-  }
-}
-body.theme-highcontrast.theme-dark .s-checkbox:checked,
-body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
-  --_ch-bc: var(--black) !important;
-  --_ch-bg: var(--black);
+body.theme-dark .s-checkbox input:indeterminate,
+.theme-dark__forced .s-checkbox input:indeterminate,
+body.theme-system .theme-dark__forced .s-checkbox input:indeterminate {
+  --_ch-input-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='%23141414'/%3E%3C/svg%3E");
 }
-@media (forced-colors: active) {
-  .s-checkbox:checked,
-  .s-checkbox:indeterminate {
-    --_ch-bg: ButtonText !important;
-  }
+.s-checkbox input {
+  background-image: var(--_ch-input-bg-image);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
 }
-.s-checkbox:checked,
-.s-checkbox:indeterminate {
-  --_ch-bc: var(--theme-secondary) !important;
-  --_ch-bg: var(--theme-secondary);
+fieldset[disabled] .s-checkbox input:checked,
+.s-checkbox input[disabled]:checked,
+fieldset[disabled] .s-checkbox input:indeterminate,
+.s-checkbox input[disabled]:indeterminate {
+  --_ch-input-bc: var(--theme-secondary-300);
+  --_ch-input-bg: var(--theme-secondary-300);
 }
-.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='%23ffffff'/%3E%3C/svg%3E");
+.s-checkbox input:checked,
+.s-checkbox input:indeterminate {
+  --_ch-input-bc: var(--theme-secondary);
+  --_ch-input-bg: var(--theme-secondary);
 }
-.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='%23ffffff'/%3E%3C/svg%3E");
+.s-checkbox input:checked {
+  --_ch-input-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='%23ffffff'/%3E%3C/svg%3E");
 }
-.s-radio {
-  border-radius: var(--br-circle);
+.s-checkbox input:indeterminate {
+  --_ch-input-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='%23ffffff'/%3E%3C/svg%3E");
 }
-@media (prefers-color-scheme: dark) {
-  body.theme-highcontrast.theme-system .s-radio:checked {
-    --_ch-bc: var(--black);
-    outline: var(--su-static1) solid var(--black);
-  }
-}
-body.theme-highcontrast.theme-dark .s-radio:checked {
-  --_ch-bc: var(--black);
-  outline: var(--su-static1) solid var(--black);
-}
-.s-radio:checked {
-  --_ch-baw: 0.30769231em;
-  --_ch-bc: var(--theme-secondary);
-  --_ch-bg: var(--white);
-}
-.has-error .s-checkbox,
-.has-error .s-radio:not(:checked),
-.has-success .s-checkbox,
-.has-success .s-radio:not(:checked),
-.has-warning .s-checkbox,
-.has-warning .s-radio:not(:checked) {
-  --_ch-bc-focus: var(--_ch-bc);
-}
-.has-error .s-checkbox,
-.has-error .s-radio:not(:checked) {
-  --_ch-bc: var(--red-400);
-}
-.has-success .s-checkbox,
-.has-success .s-radio:not(:checked) {
-  --_ch-bc: var(--green-400);
-}
-.has-warning .s-checkbox,
-.has-warning .s-radio:not(:checked) {
-  --_ch-bc: var(--yellow-500);
-}
-.s-check-control {
-  --_cc-ai: center;
-  align-items: var(--_cc-ai);
-  display: flex;
-  gap: var(--su8);
+.s-radio input {
+  --_ch-input-br: var(--br-circle);
 }
-.s-check-group .s-check-control {
-  --_cc-ai: flex-start;
+fieldset[disabled] .s-radio input:checked,
+.s-radio input[disabled]:checked {
+  --_ch-input-bc: var(--theme-secondary-300);
 }
-.s-check-control .s-label {
-  font-weight: normal;
+.s-radio input:checked {
+  --_ch-input-baw: calc(var(--_ch-input-h) / 3);
+  --_ch-input-bc: var(--theme-secondary);
+  --_ch-input-bg: var(--white);
 }
-.s-check-group {
-  --_cg-fd: column;
-  flex-direction: var(--_cg-fd);
+.s-form-group {
+  --_fg-fd: column;
+  --_fg-gap: var(--su8);
+  flex-direction: var(--_fg-fd);
   display: flex;
-  gap: var(--su8);
+  gap: var(--_fg-gap);
 }
-.s-check-group.s-check-group__horizontal {
-  --_cg-fd: row;
+.s-form-group.s-menu {
+  --_fg-gap: 0;
 }
-.s-check-group legend.s-label {
+.s-form-group.s-form-group__horizontal {
+  --_fg-fd: row;
+}
+.s-form-group legend.s-label {
   margin-bottom: var(--su8);
 }
 .s-code-block {
@@ -2132,25 +2228,43 @@ pre.s-code-block::-webkit-scrollbar-corner {
   border-color: transparent;
 }
 .s-description {
-  color: var(--fc-light);
+  --_de-fc: var(--black-400);
+  color: var(--_de-fc);
   font-size: var(--fs-caption);
   padding: 0 var(--su2);
 }
 .is-disabled .s-description {
   opacity: var(--_o-disabled-static);
 }
+.has-error .s-description {
+  --_de-fc: var(--red-400);
+}
+.has-success .s-description {
+  --_de-fc: var(--green-400);
+}
+.has-warning .s-description {
+  --_de-fc: var(--yellow-400);
+}
 .s-empty-state {
-  color: var(--fc-light);
   text-align: center;
   margin-left: auto;
   margin-right: auto;
 }
 .s-empty-state p {
-  font-size: var(--fs-body1);
-  margin-bottom: var(--su12);
+  color: var(--black-400);
+  margin-bottom: var(--su32);
 }
-.s-empty-state p strong {
-  color: var(--fc-dark);
+.s-empty-state--title {
+  font-weight: 600;
+  font-size: var(--fs-body3);
+  margin-bottom: var(--su8);
+  color: var(--black-400);
+}
+.s-empty-state .svg-spot {
+  margin-bottom: var(--su24);
+}
+.s-empty-state:last-child {
+  margin-bottom: 0;
 }
 .s-expandable {
   --_ex-after-h: 10px;
@@ -2213,13 +2327,17 @@ pre.s-code-block::-webkit-scrollbar-corner {
 .s-input,
 .s-textarea,
 :has(> .s-textarea) {
+  --_in-ai: unset;
   --_in-bc: var(--black-300);
   --_in-bg: var(--white);
   --_in-br: var(--br-md);
   --_in-bw: var(--su-static1);
   --_in-c: unset;
+  --_in-d: unset;
   --_in-fc: var(--black-600);
   --_in-fs: var(--fs-body1);
+  --_in-fw: unset;
+  --_in-g: unset;
   --_in-lh: var(--lh-base);
   --_in-px: calc(var(--su12) - var(--su1));
   --_in-py: var(--su8);
@@ -2228,11 +2346,15 @@ pre.s-code-block::-webkit-scrollbar-corner {
 .s-input,
 .s-textarea {
   scrollbar-color: var(--scrollbar) transparent;
+  align-items: var(--_in-ai);
   background-color: var(--_in-bg);
   border: var(--_in-bw) solid var(--_in-bc);
   color: var(--_in-fc);
   cursor: var(--_in-c);
+  display: var(--_in-d);
+  flex-wrap: var(--_in-fw);
   font-size: var(--_in-fs);
+  gap: var(--_in-g);
   line-height: var(--_in-lh);
   padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
   border-radius: var(--br-md);
@@ -2358,13 +2480,6 @@ body.theme-highcontrast .has-warning .s-textarea {
   background-color: transparent;
   border-color: transparent;
 }
-.s-input:has(> input.s-input) {
-  display: flex;
-  align-items: center;
-}
-.s-input:has(> input.s-input) input.s-input {
-  flex: 1 1 0;
-}
 .is-disabled .s-input,
 .is-readonly .s-input,
 .has-success .s-input,
@@ -2377,12 +2492,15 @@ body.theme-highcontrast .has-warning .s-textarea {
   --_in-bw: 0;
   --_in-px: 0;
   box-shadow: none;
+  flex: 1 1 0;
   margin: calc(var(--_in-py) * -1) 0;
 }
 .s-input:has(.s-input) {
+  --_in-ai: center;
+  --_in-d: flex;
+  --_in-fw: nowrap;
   --_in-px: var(--_in-py);
-  flex-wrap: wrap;
-  gap: var(--su8);
+  --_in-g: var(--su8);
 }
 .s-textarea {
   --_in-py: var(--su8);
@@ -2529,9 +2647,7 @@ fieldset[disabled] .s-input-message {
   --_la-c: pointer;
 }
 fieldset[disabled] .s-label,
-.is-disabled .s-label,
-.s-check-control .s-checkbox[disabled] + .s-label,
-.s-check-control .s-radio[disabled] + .s-label {
+.is-disabled .s-label {
   opacity: var(--_o-disabled-static);
 }
 fieldset[disabled] .s-label .s-description,
@@ -2541,9 +2657,7 @@ fieldset[disabled] .s-label .s-description,
 fieldset[disabled] .s-label,
 .is-disabled .s-label,
 fieldset[disabled] .s-label[for],
-.is-disabled .s-label[for],
-.s-check-control .s-checkbox[disabled] + .s-label,
-.s-check-control .s-radio[disabled] + .s-label {
+.is-disabled .s-label[for] {
   --_la-c: not-allowed;
 }
 .is-readonly .s-label {
@@ -2865,7 +2979,6 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
   --_me-action-bg: unset;
   --_me-action-fc: var(--black-500);
   --_me-item-p: var(--su8);
-  --_me-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m14 3.88-.44.44-7.34 7.35-.44.44-.44-.44-2.9-2.9L2 8.34l.89-.88.44.44 2.45 2.45 6.9-6.9.44-.44z'/%3E%3C/svg%3E");
   list-style: none;
   margin: 0;
   padding: 0;
@@ -2889,16 +3002,16 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
 .s-menu .s-menu--item:has(> .s-menu--action) {
   --_me-item-p: 0;
 }
-.s-menu .s-menu--item.s-check-control {
+.s-menu .s-menu--item.s-checkbox,
+.s-menu .s-menu--item.s-radio {
   --_me-item-p: var(--su6) var(--su8);
   align-items: flex-start;
 }
-.s-menu .s-menu--item.s-check-control .s-radio,
-.s-menu .s-menu--item.s-check-control .s-checkbox {
+.s-menu .s-menu--item.s-checkbox input,
+.s-menu .s-menu--item.s-radio input {
   margin-top: var(--su4);
 }
-.s-menu .s-menu--item:not(.s-check-control) .s-radio,
-.s-menu .s-menu--item:not(.s-check-control) .s-checkbox {
+.s-menu .s-menu--item:not(.s-checkbox):not(.s-radio) input {
   height: 0;
   pointer-events: none;
   position: absolute;
@@ -2933,17 +3046,6 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
 .s-menu .s-menu--action__danger:hover {
   --_me-action-fc: var(--red-500);
 }
-.s-menu .s-menu--action.is-selected:after,
-.s-menu .s-menu--action:has(input:checked):after {
-  background-color: var(--_me-action-fc);
-  content: "";
-  height: var(--su16);
-  margin-left: auto;
-  width: var(--su16);
-  mask-image: var(--_me-after-mask);
-  mask-size: contain;
-  mask-repeat: no-repeat;
-}
 .s-menu button.s-menu--action {
   border: none;
   font-family: inherit;
@@ -5474,9 +5576,6 @@ body.theme-highcontrast .s-skeleton {
   width: var(--_ta-td-w);
   color: var(--fc-medium);
 }
-.s-table td .s-checkbox {
-  display: block;
-}
 .s-table td.s-table--bulk {
   --_ta-td-w: calc(var(--su32) - var(--su2));
 }
@@ -5507,9 +5606,6 @@ body.theme-highcontrast .s-skeleton {
   color: var(--fc-dark);
   font-weight: bold;
 }
-.s-table th .s-checkbox {
-  display: block;
-}
 .s-table th.s-table--bulk {
   --_ta-th-w: calc(var(--su32) - var(--su2));
 }
@@ -6554,6 +6650,111 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
 .s-user-card .s-user-card--type a:not(.s-link) {
   color: inherit !important;
 }
+.s-vote {
+  --_vo-fd: column;
+  --_vo-child-bg: var(--black-150);
+  --_vo-child-br: unset;
+  --_vo-child-fd: var(--_vo-fd);
+  --_vo-child-g: calc(var(--su8) + var(--su2));
+  --_vo-child-h: unset;
+  --_vo-child-w: calc(var(--su48) + var(--su2));
+  --_vo-child-p: unset;
+  flex-direction: var(--_vo-fd);
+  display: flex;
+}
+.s-vote:not(.s-vote__horizontal) :first-child {
+  --_vo-child-p: calc(var(--su12) + var(--su2)) 0 calc(var(--su12) - var(--su2));
+  --_vo-child-br: var(--br-pill) var(--br-pill) 0 0;
+}
+.s-vote:not(.s-vote__horizontal) :last-child {
+  --_vo-child-p: calc(var(--su12) - var(--su2)) 0 calc(var(--su12) + var(--su2));
+  --_vo-child-br: 0 0 var(--br-pill) var(--br-pill);
+}
+.s-vote:not(.s-vote__horizontal) :only-child {
+  --_vo-child-br: var(--br-pill);
+  --_vo-child-g: calc(var(--su16) + var(--su4));
+  --_vo-child-p: calc(var(--su12) + var(--su2)) 0;
+}
+.s-vote.s-vote__expanded {
+  --_vo-child-g: var(--su2);
+  --_vo-child-p: 0;
+}
+.s-vote.s-vote__expanded .s-vote--total {
+  display: none;
+}
+.s-vote.s-vote__expanded .s-vote--upvotes,
+.s-vote.s-vote__expanded .s-vote--downvotes {
+  display: block;
+}
+.s-vote.s-vote__horizontal {
+  --_vo-fd: row;
+  --_vo-child-h: var(--su32);
+  --_vo-child-p: 0 var(--su4);
+  --_vo-child-w: unset;
+}
+.s-vote.s-vote__horizontal :first-child {
+  --_vo-child-p: 0 var(--su6) 0 calc(var(--su8) + var(--su2));
+  --_vo-child-br: var(--br-pill) 0 0 var(--br-pill);
+}
+.s-vote.s-vote__horizontal :last-child {
+  --_vo-child-p: 0 calc(var(--su8) + var(--su2)) 0 var(--su6);
+  --_vo-child-br: 0 var(--br-pill) var(--br-pill) 0;
+}
+.s-vote.s-vote__horizontal .s-vote--votes:last-child:not(:only-child) {
+  --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 var(--su4);
+}
+.s-vote.s-vote__horizontal :only-child {
+  --_vo-child-br: var(--br-pill);
+  --_vo-child-g: calc(var(--su8) + var(--su2));
+  --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 calc(var(--su8) + var(--su2));
+}
+.s-vote > button {
+  appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+}
+.s-vote .s-vote--btn,
+.s-vote > .s-vote--votes {
+  background-color: var(--_vo-child-bg);
+  border-radius: var(--_vo-child-br);
+  flex-direction: var(--_vo-child-fd);
+  gap: var(--_vo-child-g);
+  height: var(--_vo-child-h);
+  padding: var(--_vo-child-p);
+  width: var(--_vo-child-w);
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+}
+.s-vote .s-vote--upvotes,
+.s-vote .s-vote--downvotes {
+  display: none;
+}
+.s-vote .s-vote--upvotes {
+  color: var(--green-500);
+}
+.s-vote .s-vote--downvotes {
+  color: var(--red-500);
+}
+.s-vote > button:focus-visible,
+.s-vote .s-vote--btn: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-vote > button:hover,
+.s-vote .s-vote--btn:hover {
+  --_vo-child-bg: var(--black-200);
+}
 @font-face {
   font-family: "Segoe UI Adjusted";
   src: local(Segoe UI);