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

package/dist/css/stacks.css

@@ -837,20 +837,14 @@ a.s-badge:hover {
 .s-banner {
   --_no-ty-offset: 0;
   --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
-  --_no-bc: var(--black-225);
-  --_no-bg: var(--black-100);
-  --_no-fc: var(--black-500);
-  --_no-btn-bg-active: var(--black-250);
-  --_no-btn-bg-focus: var(--black-225);
-  --_no-btn-fc: var(--_no-fc);
+  --_no-bg: var(--black-150);
+  --_no-icon-bg: var(--black-200);
+  --_no-fc: var(--black-600);
   --_no-code-bc: var(--black-300);
   --_no-code-bg: var(--black-200);
   --_no-code-fc: var(--_no-fc);
   background: var(--_no-bg);
-  border-color: var(--_no-bc);
   color: var(--_no-fc);
-  border-style: solid;
-  font-size: var(--fs-body1);
   border-width: 0 0 var(--su-static1);
   inset: 0 0 auto 0;
   padding: var(--su12);
@@ -859,140 +853,104 @@ a.s-badge:hover {
   width: 100%;
   z-index: calc(var(--zi-navigation-fixed) - 1);
 }
-body.theme-highcontrast .s-banner {
-  --_no-bc: var(--black-400);
-}
-body.theme-highcontrast .s-banner,
-body.theme-highcontrast .s-banner.s-banner__danger,
-body.theme-highcontrast .s-banner.s-banner__info,
-body.theme-highcontrast .s-banner.s-banner__success,
-body.theme-highcontrast .s-banner.s-banner__warning {
-  --_no-code-bc: var(--black-400);
-  --_no-code-bg: var(--white);
-  --_no-code-fc: var(--black);
-}
-body.theme-highcontrast .s-banner.s-banner__important,
-body.theme-highcontrast .s-banner.s-banner__danger.s-banner__important,
-body.theme-highcontrast .s-banner.s-banner__info.s-banner__important,
-body.theme-highcontrast .s-banner.s-banner__success.s-banner__important,
-body.theme-highcontrast .s-banner.s-banner__warning.s-banner__important {
-  --_no-code-bc: var(--black-200);
-  --_no-code-bg: var(--black);
-  --_no-code-fc: var(--white);
-}
-.s-banner__important:not(.s-banner__danger):not(.s-banner__info):not(.s-banner__success):not(.s-banner__warning) {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--black-500);
+body.theme-highcontrast .s-banner:not(body.theme-highcontrast .s-banner__important) {
+  --_no-icon-bc: var(--_no-code-bc);
+}
+.s-banner__important {
+  --_no-bg: var(--black-400);
+  --_no-icon-bg: var(--black-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-focus: var(--black-600);
-  --_no-btn-bg-active: var(--black-600);
-  --_no-btn-fc: var(--_no-fc);
   --_no-code-bc: var(--black-300);
-  --_no-code-bg: var(--black-600);
+  --_no-code-bg: var(--black-500);
 }
 .s-banner__danger:not(.s-banner__important) {
-  --_no-bc: var(--red-300);
   --_no-bg: var(--red-100);
-  --_no-btn-bg-active: var(--red-200);
-  --_no-btn-bg-focus: var(--red-200);
-  --_no-btn-fc: var(--red-500);
+  --_no-icon-bg: var(--red-200);
   --_no-code-bc: var(--red-300);
   --_no-code-bg: var(--red-200);
 }
-body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
-  --_no-bc: var(--red-400);
-}
 .s-banner__danger.s-banner__important {
-  --_no-bc: var(--_no-bg);
   --_no-bg: var(--red-400);
+  --_no-icon-bg: var(--red-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--red-500);
-  --_no-btn-bg-focus: var(--red-500);
-  --_no-btn-fc: var(--red-100);
   --_no-code-bc: var(--red-300);
   --_no-code-bg: var(--red-500);
 }
-body.theme-highcontrast .s-banner__danger.s-banner__important {
-  --_no-bg: var(--red-500);
-}
 .s-banner__info:not(.s-banner__important) {
-  --_no-bc: var(--theme-secondary-300);
-  --_no-bg: var(--theme-secondary-100);
-  --_no-btn-bg-active: var(--theme-secondary-200);
-  --_no-btn-bg-focus: var(--theme-secondary-200);
-  --_no-btn-fc: var(--theme-secondary-500);
-  --_no-code-bc: var(--theme-secondary-300);
-  --_no-code-bg: var(--theme-secondary-200);
-}
-body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
-  --_no-bc: var(--theme-secondary-400);
+  --_no-bg: var(--blue-100);
+  --_no-icon-bg: var(--blue-200);
+  --_no-code-bc: var(--blue-300);
+  --_no-code-bg: var(--blue-200);
 }
 .s-banner__info.s-banner__important {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--theme-secondary-400);
+  --_no-bg: var(--blue-400);
+  --_no-icon-bg: var(--blue-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--theme-secondary-500);
-  --_no-btn-bg-focus: var(--theme-secondary-500);
-  --_no-btn-fc: var(--theme-secondary-100);
-  --_no-code-bc: var(--theme-secondary-300);
-  --_no-code-bg: var(--theme-secondary-500);
-}
-body.theme-highcontrast .s-banner__info.s-banner__important {
-  --_no-bg: var(--theme-secondary-500);
+  --_no-code-bc: var(--blue-300);
+  --_no-code-bg: var(--blue-500);
 }
 .s-banner__success:not(.s-banner__important) {
-  --_no-bc: var(--green-300);
   --_no-bg: var(--green-100);
-  --_no-btn-bg-active: var(--green-200);
-  --_no-btn-bg-focus: var(--green-200);
-  --_no-btn-fc: var(--green-500);
+  --_no-icon-bg: var(--green-200);
   --_no-code-bc: var(--green-300);
   --_no-code-bg: var(--green-200);
 }
-body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
-  --_no-bc: var(--green-400);
-}
 .s-banner__success.s-banner__important {
-  --_no-bc: var(--_no-bg);
   --_no-bg: var(--green-400);
+  --_no-icon-bg: var(--green-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--green-500);
-  --_no-btn-bg-focus: var(--green-500);
-  --_no-btn-fc: var(--green-100);
   --_no-code-bc: var(--green-300);
   --_no-code-bg: var(--green-500);
 }
-body.theme-highcontrast .s-banner__success.s-banner__important {
-  --_no-bg: var(--green-500);
+.s-banner__featured:not(.s-banner__important) {
+  --_no-bg: var(--purple-100);
+  --_no-icon-bg: var(--purple-200);
+  --_no-code-bc: var(--purple-300);
+  --_no-code-bg: var(--purple-200);
+}
+.s-banner__featured.s-banner__important {
+  --_no-bg: var(--purple-400);
+  --_no-icon-bg: var(--purple-500);
+  --_no-fc: var(--white);
+  --_no-code-bc: var(--purple-300);
+  --_no-code-bg: var(--purple-500);
+}
+.s-banner__activity:not(.s-banner__important) {
+  --_no-bg: var(--pink-100);
+  --_no-icon-bg: var(--pink-200);
+  --_no-code-bc: var(--pink-300);
+  --_no-code-bg: var(--pink-200);
+}
+.s-banner__activity.s-banner__important {
+  --_no-bg: var(--pink-400);
+  --_no-icon-bg: var(--pink-500);
+  --_no-fc: var(--white);
+  --_no-code-bc: var(--pink-300);
+  --_no-code-bg: var(--pink-500);
 }
 .s-banner__warning:not(.s-banner__important) {
-  --_no-bc: var(--yellow-300);
   --_no-bg: var(--yellow-100);
-  --_no-btn-bg-active: var(--yellow-200);
-  --_no-btn-bg-focus: var(--yellow-200);
-  --_no-btn-fc: var(--yellow-500);
+  --_no-icon-bg: var(--yellow-200);
   --_no-code-bc: var(--yellow-300);
   --_no-code-bg: var(--yellow-200);
-  --_no-btn-fc: var(--yellow-600);
-}
-body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
-  --_no-bc: var(--yellow-400);
 }
 .s-banner__warning.s-banner__important {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--yellow-400);
+  --_no-bg: var(--yellow-300);
+  --_no-icon-bg: var(--yellow-400);
   --_no-fc: var(--black);
-  --_no-btn-fc: var(--_no-fc);
-  --_no-btn-bg-active: var(--yellow-300);
-  --_no-btn-bg-focus: var(--yellow-300);
-  --_no-code-bc: var(--yellow-500);
-  --_no-code-bg: var(--yellow-300);
+  --_no-code-bc: var(--yellow-400);
+  --_no-code-bg: var(--yellow-200);
+}
+.s-banner__warning.s-banner__important .s-notice--icon {
+  color: var(--white);
 }
 @media (prefers-color-scheme: dark) {
   body.theme-system .s-banner__warning.s-banner__important {
     --_no-fc: var(--white);
     --_no-code-bc: var(--yellow-300);
     --_no-code-bg: var(--yellow-500);
+    --_no-bg: var(--yellow-400);
+    --_no-icon-bg: var(--yellow-500);
   }
 }
 body.theme-dark .s-banner__warning.s-banner__important,
@@ -1001,32 +959,38 @@ body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
   --_no-fc: var(--white);
   --_no-code-bc: var(--yellow-300);
   --_no-code-bg: var(--yellow-500);
+  --_no-bg: var(--yellow-400);
+  --_no-icon-bg: var(--yellow-500);
 }
 body.theme-highcontrast .s-banner__warning.s-banner__important {
-  --_no-bg: var(--yellow-500);
+  --_no-bg: var(--yellow-400);
+  --_no-icon-bg: var(--yellow-500);
+  --_no-code-bc: var(--yellow-300);
+  --_no-code-bg: var(--yellow-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: transparent;
-  --_no-btn-bg-focus: transparent;
 }
 .s-banner code {
   background-color: var(--_no-code-bg);
   color: var(--_no-code-fc);
   outline: var(--su-static1) solid var(--_no-code-bc);
-  border-radius: var(--br-md);
   padding-left: var(--su2);
   padding-right: var(--su2);
+  white-space: nowrap;
 }
-.s-banner .s-banner--btn {
-  color: var(--_no-btn-fc, inherit) !important;
-  padding: var(--su8);
+button.s-banner--dismiss:active {
+  background-color: var(--_no-fc);
+  color: var(--_no-bg);
 }
-.s-banner .s-banner--btn:active {
-  background-color: var(--_no-btn-bg-active, inherit) !important;
+button.s-banner--dismiss:focus-visible,
+button.s-banner--dismiss:hover,
+button.s-banner--dismiss.focus-inset-bordered {
+  background-color: var(--_no-fc);
+  color: var(--_no-bg);
 }
-.s-banner .s-banner--btn:focus-visible,
-.s-banner .s-banner--btn:hover,
-.s-banner .s-banner--btn.focus-inset-bordered {
-  background-color: var(--_no-btn-bg-focus, inherit) !important;
+:has( > button.s-banner--dismiss) {
+  padding-left: var(--su24);
+  gap: calc(var(--su24) - var(--su2));
+  word-wrap: initial !important;
 }
 .s-banner[aria-hidden="true"] {
   --_no-ty-offset: -1;
@@ -1799,181 +1763,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-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;
+}
+.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-check-group .s-checkbox,
-.s-check-group .s-radio {
-  margin-top: calc(var(--su2) + var(--su1));
+.s-checkbox:has( > input:not(:checked)).has-success,
+.s-radio:has( > input:not(:checked)).has-success {
+  --_ch-input-bc: var(--green-400);
 }
-input.s-checkbox,
-input.s-radio {
+.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");
-}
-@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-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");
 }
-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-form-group.s-menu {
+  --_fg-gap: 0;
 }
-.s-check-group.s-check-group__horizontal {
-  --_cg-fd: row;
+.s-form-group.s-form-group__horizontal {
+  --_fg-fd: row;
 }
-.s-check-group legend.s-label {
+.s-form-group legend.s-label {
   margin-bottom: var(--su8);
 }
 .s-code-block {
@@ -2132,25 +2192,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 +2291,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 +2310,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 +2444,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 +2456,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 +2611,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 +2621,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 +2943,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 +2966,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 +3010,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;
@@ -3265,158 +3331,117 @@ body.theme-highcontrast .s-navigation .s-navigation--item:active {
  * @baseClass - The base class name for the notice component
  */
 .s-notice {
-  --_no-bc: var(--black-225);
-  --_no-bg: var(--black-100);
-  --_no-fc: var(--black-500);
-  --_no-btn-bg-active: var(--black-250);
-  --_no-btn-bg-focus: var(--black-225);
-  --_no-btn-fc: var(--_no-fc);
+  --_no-bg: var(--black-150);
+  --_no-icon-bg: var(--black-200);
+  --_no-fc: var(--black-600);
   --_no-code-bc: var(--black-300);
   --_no-code-bg: var(--black-200);
   --_no-code-fc: var(--_no-fc);
   background: var(--_no-bg);
-  border-color: var(--_no-bc);
   color: var(--_no-fc);
-  border-style: solid;
-  font-size: var(--fs-body1);
-  border-radius: var(--br-md);
-  border-width: var(--su-static1);
-  padding: var(--su16);
+  display: flex;
+  align-items: center;
+  --_no-pd: var(--su8);
+  padding: var(--_no-pd) var(--su12) var(--_no-pd) 0;
+}
+body.theme-highcontrast .s-notice:not(body.theme-highcontrast .s-notice__important) {
+  --_no-icon-bc: var(--_no-code-bc);
 }
-body.theme-highcontrast .s-notice {
-  --_no-bc: var(--black-400);
-}
-body.theme-highcontrast .s-notice,
-body.theme-highcontrast .s-notice.s-notice__danger,
-body.theme-highcontrast .s-notice.s-notice__info,
-body.theme-highcontrast .s-notice.s-notice__success,
-body.theme-highcontrast .s-notice.s-notice__warning {
-  --_no-code-bc: var(--black-400);
-  --_no-code-bg: var(--white);
-  --_no-code-fc: var(--black);
-}
-body.theme-highcontrast .s-notice.s-notice__important,
-body.theme-highcontrast .s-notice.s-notice__danger.s-notice__important,
-body.theme-highcontrast .s-notice.s-notice__info.s-notice__important,
-body.theme-highcontrast .s-notice.s-notice__success.s-notice__important,
-body.theme-highcontrast .s-notice.s-notice__warning.s-notice__important {
-  --_no-code-bc: var(--black-200);
-  --_no-code-bg: var(--black);
-  --_no-code-fc: var(--white);
-}
-.s-notice__important:not(.s-notice__danger):not(.s-notice__info):not(.s-notice__success):not(.s-notice__warning) {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--black-500);
+.s-notice__important {
+  --_no-bg: var(--black-400);
+  --_no-icon-bg: var(--black-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-focus: var(--black-600);
-  --_no-btn-bg-active: var(--black-600);
-  --_no-btn-fc: var(--_no-fc);
   --_no-code-bc: var(--black-300);
-  --_no-code-bg: var(--black-600);
+  --_no-code-bg: var(--black-500);
 }
 .s-notice__danger:not(.s-notice__important) {
-  --_no-bc: var(--red-300);
   --_no-bg: var(--red-100);
-  --_no-btn-bg-active: var(--red-200);
-  --_no-btn-bg-focus: var(--red-200);
-  --_no-btn-fc: var(--red-500);
+  --_no-icon-bg: var(--red-200);
   --_no-code-bc: var(--red-300);
   --_no-code-bg: var(--red-200);
 }
-body.theme-highcontrast .s-notice__danger:not(.s-notice__important) {
-  --_no-bc: var(--red-400);
-}
 .s-notice__danger.s-notice__important {
-  --_no-bc: var(--_no-bg);
   --_no-bg: var(--red-400);
+  --_no-icon-bg: var(--red-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--red-500);
-  --_no-btn-bg-focus: var(--red-500);
-  --_no-btn-fc: var(--red-100);
   --_no-code-bc: var(--red-300);
   --_no-code-bg: var(--red-500);
 }
-body.theme-highcontrast .s-notice__danger.s-notice__important {
-  --_no-bg: var(--red-500);
-}
 .s-notice__info:not(.s-notice__important) {
-  --_no-bc: var(--theme-secondary-300);
-  --_no-bg: var(--theme-secondary-100);
-  --_no-btn-bg-active: var(--theme-secondary-200);
-  --_no-btn-bg-focus: var(--theme-secondary-200);
-  --_no-btn-fc: var(--theme-secondary-500);
-  --_no-code-bc: var(--theme-secondary-300);
-  --_no-code-bg: var(--theme-secondary-200);
-}
-body.theme-highcontrast .s-notice__info:not(.s-notice__important) {
-  --_no-bc: var(--theme-secondary-400);
+  --_no-bg: var(--blue-100);
+  --_no-icon-bg: var(--blue-200);
+  --_no-code-bc: var(--blue-300);
+  --_no-code-bg: var(--blue-200);
 }
 .s-notice__info.s-notice__important {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--theme-secondary-400);
+  --_no-bg: var(--blue-400);
+  --_no-icon-bg: var(--blue-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--theme-secondary-500);
-  --_no-btn-bg-focus: var(--theme-secondary-500);
-  --_no-btn-fc: var(--theme-secondary-100);
-  --_no-code-bc: var(--theme-secondary-300);
-  --_no-code-bg: var(--theme-secondary-500);
-}
-body.theme-highcontrast .s-notice__info.s-notice__important {
-  --_no-bg: var(--theme-secondary-500);
+  --_no-code-bc: var(--blue-300);
+  --_no-code-bg: var(--blue-500);
 }
 .s-notice__success:not(.s-notice__important) {
-  --_no-bc: var(--green-300);
   --_no-bg: var(--green-100);
-  --_no-btn-bg-active: var(--green-200);
-  --_no-btn-bg-focus: var(--green-200);
-  --_no-btn-fc: var(--green-500);
+  --_no-icon-bg: var(--green-200);
   --_no-code-bc: var(--green-300);
   --_no-code-bg: var(--green-200);
 }
-body.theme-highcontrast .s-notice__success:not(.s-notice__important) {
-  --_no-bc: var(--green-400);
-}
 .s-notice__success.s-notice__important {
-  --_no-bc: var(--_no-bg);
   --_no-bg: var(--green-400);
+  --_no-icon-bg: var(--green-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--green-500);
-  --_no-btn-bg-focus: var(--green-500);
-  --_no-btn-fc: var(--green-100);
   --_no-code-bc: var(--green-300);
   --_no-code-bg: var(--green-500);
 }
-body.theme-highcontrast .s-notice__success.s-notice__important {
-  --_no-bg: var(--green-500);
+.s-notice__featured:not(.s-notice__important) {
+  --_no-bg: var(--purple-100);
+  --_no-icon-bg: var(--purple-200);
+  --_no-code-bc: var(--purple-300);
+  --_no-code-bg: var(--purple-200);
+}
+.s-notice__featured.s-notice__important {
+  --_no-bg: var(--purple-400);
+  --_no-icon-bg: var(--purple-500);
+  --_no-fc: var(--white);
+  --_no-code-bc: var(--purple-300);
+  --_no-code-bg: var(--purple-500);
+}
+.s-notice__activity:not(.s-notice__important) {
+  --_no-bg: var(--pink-100);
+  --_no-icon-bg: var(--pink-200);
+  --_no-code-bc: var(--pink-300);
+  --_no-code-bg: var(--pink-200);
+}
+.s-notice__activity.s-notice__important {
+  --_no-bg: var(--pink-400);
+  --_no-icon-bg: var(--pink-500);
+  --_no-fc: var(--white);
+  --_no-code-bc: var(--pink-300);
+  --_no-code-bg: var(--pink-500);
 }
 .s-notice__warning:not(.s-notice__important) {
-  --_no-bc: var(--yellow-300);
   --_no-bg: var(--yellow-100);
-  --_no-btn-bg-active: var(--yellow-200);
-  --_no-btn-bg-focus: var(--yellow-200);
-  --_no-btn-fc: var(--yellow-500);
+  --_no-icon-bg: var(--yellow-200);
   --_no-code-bc: var(--yellow-300);
   --_no-code-bg: var(--yellow-200);
-  --_no-btn-fc: var(--yellow-600);
-}
-body.theme-highcontrast .s-notice__warning:not(.s-notice__important) {
-  --_no-bc: var(--yellow-400);
 }
 .s-notice__warning.s-notice__important {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--yellow-400);
+  --_no-bg: var(--yellow-300);
+  --_no-icon-bg: var(--yellow-400);
   --_no-fc: var(--black);
-  --_no-btn-fc: var(--_no-fc);
-  --_no-btn-bg-active: var(--yellow-300);
-  --_no-btn-bg-focus: var(--yellow-300);
-  --_no-code-bc: var(--yellow-500);
-  --_no-code-bg: var(--yellow-300);
+  --_no-code-bc: var(--yellow-400);
+  --_no-code-bg: var(--yellow-200);
+}
+.s-notice__warning.s-notice__important .s-notice--icon {
+  color: var(--white);
 }
 @media (prefers-color-scheme: dark) {
   body.theme-system .s-notice__warning.s-notice__important {
     --_no-fc: var(--white);
     --_no-code-bc: var(--yellow-300);
     --_no-code-bg: var(--yellow-500);
+    --_no-bg: var(--yellow-400);
+    --_no-icon-bg: var(--yellow-500);
   }
 }
 body.theme-dark .s-notice__warning.s-notice__important,
@@ -3425,32 +3450,49 @@ body.theme-system .theme-dark__forced .s-notice__warning.s-notice__important {
   --_no-fc: var(--white);
   --_no-code-bc: var(--yellow-300);
   --_no-code-bg: var(--yellow-500);
+  --_no-bg: var(--yellow-400);
+  --_no-icon-bg: var(--yellow-500);
 }
 body.theme-highcontrast .s-notice__warning.s-notice__important {
-  --_no-bg: var(--yellow-500);
+  --_no-bg: var(--yellow-400);
+  --_no-icon-bg: var(--yellow-500);
+  --_no-code-bc: var(--yellow-300);
+  --_no-code-bg: var(--yellow-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: transparent;
-  --_no-btn-bg-focus: transparent;
 }
 .s-notice code {
   background-color: var(--_no-code-bg);
   color: var(--_no-code-fc);
   outline: var(--su-static1) solid var(--_no-code-bc);
-  border-radius: var(--br-md);
   padding-left: var(--su2);
   padding-right: var(--su2);
+  white-space: nowrap;
 }
-.s-notice .s-notice--btn {
-  color: var(--_no-btn-fc, inherit) !important;
-  padding: var(--su8);
-}
-.s-notice .s-notice--btn:active {
-  background-color: var(--_no-btn-bg-active, inherit) !important;
-}
-.s-notice .s-notice--btn:focus-visible,
-.s-notice .s-notice--btn:hover,
-.s-notice .s-notice--btn.focus-inset-bordered {
-  background-color: var(--_no-btn-bg-focus, inherit) !important;
+button.s-notice--dismiss:active {
+  background-color: var(--_no-fc);
+  color: var(--_no-bg);
+}
+button.s-notice--dismiss:focus-visible,
+button.s-notice--dismiss:hover,
+button.s-notice--dismiss.focus-inset-bordered {
+  background-color: var(--_no-fc);
+  color: var(--_no-bg);
+}
+:has( > button.s-notice--dismiss) {
+  padding-left: var(--su24);
+  gap: calc(var(--su24) - var(--su2));
+  word-wrap: initial !important;
+}
+.s-notice--icon {
+  background: var(--_no-icon-bg);
+  border: var(--su1) solid var(--_no-icon-bc, var(--_no-icon-bg));
+  padding: var(--_no-pd);
+  margin-right: var(--su12);
+  align-self: stretch;
+  display: flex;
+  align-items: top;
+  margin-top: calc(var(--_no-pd) * -1);
+  margin-bottom: calc(var(--_no-pd) * -1);
 }
 .s-page-title {
   --_pt-ai: flex-end;
@@ -3572,7 +3614,7 @@ ul.s-pagination {
   --_po-bc: var(--bc-medium);
   --_po-bs: var(--bs-md);
   --_po-d: none;
-  --_po-wmn: 12rem;
+  --_po-wmn: 10.5rem;
   --_po-w: 100%;
   --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
   --_po-content-mxh: calc(100vh - var(--_po-topbar-height) - var(--su48));
@@ -3585,7 +3627,7 @@ ul.s-pagination {
   border-radius: var(--br-md);
   color: var(--fc-dark);
   font-size: var(--fs-body1);
-  max-width: 24rem;
+  max-width: 21rem;
   padding: var(--su12);
   position: absolute;
   white-space: normal;
@@ -3913,8 +3955,8 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
   font-size: var(--fs-body3);
   font-weight: normal;
   line-height: var(--lh-md);
-  margin-bottom: 0.3846rem;
-  margin-top: -0.15rem;
+  margin-bottom: 0.3365rem;
+  margin-top: -0.125rem;
   padding-right: var(--su24);
 }
 .s-post-summary .s-post-summary--content-title a {
@@ -4365,11 +4407,11 @@ body.theme-highcontrast .s-prose {
 .s-prose.s-prose__xs,
 .s-prose.s-prose__sm,
 .s-prose.s-prose__md {
-  --_pr-h1-fs: var(--fs-headline1-relative);
-  --_pr-h2-fs: var(--fs-title-relative);
-  --_pr-h3-fs: var(--fs-subheading-relative);
-  --_pr-h4-fs: var(--fs-body3-relative);
-  --_pr-h5-fs: var(--fs-body2-relative);
+  --_pr-h1-fs: 1.75em;
+  --_pr-h2-fs: 1.375em;
+  --_pr-h3-fs: 1.25em;
+  --_pr-h4-fs: 1.125em;
+  --_pr-h5-fs: 1em;
 }
 .s-prose.s-prose__xs {
   --_pr-fs: var(--fs-caption);
@@ -5474,9 +5516,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 +5546,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));
 }
@@ -5717,11 +5753,10 @@ a.s-tag:active {
 }
 .s-toast .s-notice {
   box-shadow: var(--bs-sm);
-  max-width: 44rem;
+  max-width: 38.5rem;
   padding-bottom: var(--su8);
   padding-top: var(--su8);
   pointer-events: all;
-  width: 100%;
 }
 .s-toggle-switch {
   --_ts-bg: var(--black-350);
@@ -6450,109 +6485,207 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
 }
 .s-user-card {
   --_uc-ai: center;
-  --_uc-bg: unset;
-  --_uc-bar: unset;
-  --_uc-d: grid;
-  --_uc-fc: unset;
-  --_uc-g: var(--su4) var(--su8);
-  --_uc-p: var(--su8);
-  --_uc-info-ai: unset;
-  --_uc-info-fd: column;
-  --_uc-link-fs: var(--fs-caption);
-  --_uc-link-ws: unset;
-  --_uc-rep-fc: unset;
-  --_uc-time-fc: var(--black-400);
-  --_uc-time-ws: unset;
-  --_uc-type-fc: var(--theme-primary-400);
+  --_uc-fd: unset;
+  --_uc-column-gap: var(--su6);
+  --_uc-group-gap: var(--su4);
+  --_uc-row-gap: var(--su6);
+  --_uc-username-fs: unset;
   align-items: var(--_uc-ai);
-  background-color: var(--_uc-bg);
-  border-radius: var(--_uc-bar);
-  color: var(--_uc-fc);
-  display: var(--_uc-d);
-  gap: var(--_uc-g);
-  grid-template-columns: auto 1fr;
-  line-height: 1;
-  padding: var(--_uc-p);
-}
-.s-user-card.s-user-card__deleted {
-  --_uc-fc: var(--black-400);
-}
-.s-user-card.s-user-card__highlighted {
-  --_uc-bg: var(--theme-secondary-100);
-  --_uc-bar: var(--br-md);
-  --_uc-time-fc: var(--black-500);
-  --_uc-type-fc: var(--black-500);
-}
-.s-user-card.s-user-card__minimal,
-.s-user-card.s-user-card__small {
-  --_uc-d: flex;
-  --_uc-g: var(--su4);
-  --_uc-p: 0;
-  --_uc-info-ai: center;
-  --_uc-info-fd: row;
-}
-.s-user-card.s-user-card__full {
+  color: var(--black-500);
+  display: flex;
+  flex-direction: var(--_uc-fd);
+  flex-wrap: wrap;
+  font-size: var(--fs-caption);
+  gap: var(--su6);
+}
+.s-user-card.s-user-card__lg {
   --_uc-ai: flex-start;
-  --_uc-link-fs: var(--fs-body2);
+  --_uc-fd: column;
+  --_uc-username-fs: var(--fs-body3);
 }
-.s-user-card.s-user-card__minimal {
-  --_uc-link-ws: nowrap;
-  --_uc-rep-fc: var(--black-500);
-  --_uc-time-ws: nowrap;
+.s-user-card.s-user-card__lg .s-avatar {
+  margin-right: var(--su6);
 }
-.s-user-card .s-user-card--location,
-.s-user-card .s-user-card--role {
-  font-size: var(--fs-caption);
+.s-user-card.s-user-card__lg .s-user-card--username {
+  margin-right: var(--su2);
+}
+.s-user-card.s-user-card__lg .s-user-card--group:has(> .s-user-card--rep) {
+  margin-top: calc(var(--su2) * -1);
+}
+.s-user-card .s-user-card--bio {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--black-400);
+}
+.s-user-card .s-user-card--recognition {
+  --_uc-row-gap: var(--su4);
+}
+.s-user-card .s-user-card--recognition,
+.s-user-card .s-user-card--recognition a {
+  color: var(--theme-primary);
+}
+.s-user-card .s-user-card--rep {
+  color: var(--black-600);
+  font-weight: 600;
+}
+.s-user-card .s-user-card--time {
   color: var(--black-400);
 }
-.s-user-card .s-user-card--awards {
+.s-user-card .s-user-card--username {
+  font-size: var(--_uc-username-fs);
+  font-weight: 500;
+  min-width: 0;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
+.s-user-card .s-user-card--column {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--_uc-column-gap);
+}
+.s-user-card .s-user-card--group {
+  align-items: center;
+  display: flex;
+  gap: var(--_uc-group-gap);
+}
+.s-user-card .s-user-card--group:has(> .s-avatar) {
+  --_uc-group-gap: var(--su6);
+}
+.s-user-card .s-user-card--group:has(+ .s-user-card--time) {
+  margin-right: var(--su2);
+}
+.s-user-card ul.s-user-card--group {
   list-style: none;
   margin: 0;
   padding: 0;
-  align-items: center;
-  display: flex;
-  gap: var(--su6);
 }
-.s-user-card .s-user-card--awards li {
-  font-size: var(--fs-caption);
+.s-user-card ul.s-user-card--group.s-user-card--group__split li:not(:last-child):after {
+  background-color: var(--black-350);
+  content: "";
+  display: block;
+  margin-left: var(--su4);
+  width: var(--su4);
+  height: var(--su4);
 }
-.s-user-card .s-user-card--info {
-  align-items: var(--_uc-info-ai);
-  flex-direction: var(--_uc-info-fd);
-  display: flex;
-  gap: var(--su4);
+.s-user-card ul.s-user-card--group li {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--su2);
 }
-.s-user-card .s-user-card--link {
-  font-size: var(--_uc-link-fs);
-  white-space: var(--_uc-link-ws);
+.s-user-card .s-user-card--row {
   align-items: center;
+  display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
-  min-width: 0;
-  overflow-wrap: break-word;
+  gap: var(--_uc-row-gap);
+}
+.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-user-card .s-user-card--rep {
-  color: var(--_uc-rep-fc);
-  font-weight: 700;
+.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-user-card .s-user-card--tags {
+.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;
-  min-width: 0;
-  flex-wrap: wrap;
+  display: inline-flex;
+  justify-content: center;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
 }
-.s-user-card .s-user-card--time {
-  color: var(--_uc-time-fc);
-  white-space: var(--_uc-time-ws);
-  font-size: var(--fs-caption);
-  grid-column: 1 / 3;
-  grid-row: 1 / 2;
+.s-vote .s-vote--upvotes,
+.s-vote .s-vote--downvotes {
+  display: none;
 }
-.s-user-card .s-user-card--type {
-  color: var(--_uc-type-fc);
-  font-size: var(--fs-caption);
-  grid-column: 1 / 3;
+.s-vote .s-vote--upvotes {
+  color: var(--green-500);
 }
-.s-user-card .s-user-card--type a:not(.s-link) {
-  color: inherit !important;
+.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";
@@ -6604,36 +6737,27 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
   font-style: italic;
   font-weight: 800;
 }
-html,
+html {
+  font-size: 100%;
+}
 body {
   --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
   --ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
   --ff-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
   --theme-body-font-family: var(--ff-sans);
-  --fs-fine: 12px;
-  --fs-caption: 13px;
-  --fs-body1: 14px;
-  --fs-body2: 1.143rem;
-  --fs-body3: 1.286rem;
-  --fs-subheading: 1.429rem;
-  --fs-title: 1.571rem;
-  --fs-headline1: 2rem;
-  --fs-headline2: 2.571rem;
-  --fs-display1: 3.286rem;
-  --fs-display2: 4.143rem;
-  --fs-display3: 5.143rem;
-  --fs-display4: 7.143rem;
-  --fs-body2-relative: 1.143rem;
-  --fs-body3-relative: 1.286rem;
-  --fs-subheading-relative: 1.429rem;
-  --fs-title-relative: 1.571rem;
-  --fs-headline1-relative: 2rem;
-  --fs-headline2-relative: 2.571rem;
-  --fs-display1-relative: 3.286rem;
-  --fs-display2-relative: 4.143rem;
-  --fs-display3-relative: 5.143rem;
-  --fs-display4-relative: 7.143rem;
-  --fs-base: 14px;
+  --fs-fine: 0.75rem;
+  --fs-caption: 0.8125rem;
+  --fs-body1: 0.875rem;
+  --fs-body2: 1rem;
+  --fs-body3: 1.125rem;
+  --fs-subheading: 1.25rem;
+  --fs-title: 1.375rem;
+  --fs-headline1: 1.75rem;
+  --fs-headline2: 2.25rem;
+  --fs-display1: 2.875rem;
+  --fs-display2: 3.625rem;
+  --fs-display3: 4.5rem;
+  --fs-display4: 6.25rem;
   --stacks-internals-lh-unit: 14;
   --lh-xs: 1;
   --lh-sm: calc((var(--stacks-internals-lh-unit) + 2) / var(--stacks-internals-lh-unit));
@@ -6672,7 +6796,7 @@ body {
   --te-ease-out: cubic-bezier(0.39, 0.575, 0.565, 1);
   --default-transition-duration: 0.1s;
   --transition-time: var(--default-transition-duration);
-  --s-full: 97.2307692rem;
+  --s-full: 79rem;
   --s-step: calc(var(--s-full) / 12);
 }
 body {
@@ -23218,7 +23342,7 @@ html,
 body {
   color: var(--theme-body-font-color, var(--black-600));
   font-family: var(--theme-body-font-family);
-  font-size: var(--fs-base);
+  font-size: var(--fs-body1);
   line-height: var(--lh-base);
 }
 body {