@stackoverflow/stacks 2.8.0 → 2.8.2

package/README.md

@@ -22,7 +22,7 @@ Stacks documentation can be found at https://stackoverflow.design/
 
 - [Using Stacks](#using-stacks)
 - [Migrating from v1 to v2](#migrating-from-v1-to-v2)
-- [Building Stacks](#building-stacks)
+- [Local Development](#local-development)
 - [Format Stacks](#format-stacks)
 - [Linting Stacks](#linting-stacks)
 - [Testing Stacks](#testing-stacks)
@@ -38,8 +38,13 @@ Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/
 
 To migrate from Stacks v1 to v2, see our [migration guide](/MIGRATION_GUIDE.md).
 
-## Building Stacks
-To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally. View our [building guidelines](https://stackoverflow.design/product/develop/building).
+## Local Development
+
+To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally:
+```sh
+npm start
+```
+This command will pull up the local dev server at http://localhost:8000. You can also view our [building guidelines](https://stackoverflow.design/product/develop/building).
 
 Having trouble getting these steps to work? Open [an issue](https://github.com/StackExchange/Stacks/issues/new) with a `setup` label.
 

package/dist/css/stacks.css

@@ -1753,7 +1753,6 @@ body.theme-highcontrast .s-btn.s-btn__github {
 }
 .s-btn-group .s-btn .s-btn--text:before {
   content: attr(data-text);
-  content: attr(data-text) / "";
   font-weight: bold;
   height: 0;
   pointer-events: none;
@@ -2947,7 +2946,6 @@ body.theme-system .theme-dark__forced .s-menu {
   position: fixed;
   transition: opacity 100ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms;
   visibility: hidden;
-  will-change: visibility, z-index, opacity;
   z-index: var(--zi-hide);
 }
 @media (prefers-color-scheme: dark) {
@@ -3025,7 +3023,6 @@ body.theme-highcontrast.theme-dark .s-modal {
   transform: translate3d(0, 30%, 0) scale3d(0.6, 0.6, 0.6);
   transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
   visibility: hidden;
-  will-change: visibility, z-index, opacity, transform;
   z-index: var(--zi-hide);
 }
 .s-modal .s-modal--dialog::-webkit-scrollbar {
@@ -3072,6 +3069,7 @@ body.theme-highcontrast.theme-dark .s-modal {
   --_na-item-selected-bg: var(--theme-primary);
   --_na-item-selected-fc: var(--white);
   --_na-item-selected-bg-hover: var(--theme-primary-500);
+  --_na-item-text-ta: center;
   --_na-title-mt: var(--su16);
   flex-direction: var(--_na-fd);
   flex-wrap: var(--_na-fw);
@@ -3115,6 +3113,7 @@ body.theme-highcontrast .s-navigation {
   --_na-fd: column;
   --_na-gap: 0;
   --_na-p: 0;
+  --_na-item-text-ta: unset;
   --_na-item-ws: normal;
 }
 .s-navigation.s-navigation__muted {
@@ -3148,6 +3147,7 @@ body.theme-highcontrast .s-navigation.s-navigation__muted {
   --_na-item-fc: var(--_na-item-selected-fc);
   --_na-item-fc-hover: var(--_na-item-fc);
   --_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;
@@ -3175,6 +3175,19 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
   box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
   outline: var(--su-static2) solid transparent !important;
 }
+.s-navigation .s-navigation--item-text {
+  display: inline-flex;
+  flex-direction: column;
+  text-align: var(--_na-item-text-ta);
+}
+.s-navigation .s-navigation--item-text:before {
+  content: attr(data-text);
+  font-weight: bold;
+  height: 0;
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
 .s-navigation .s-navigation--title {
   margin-top: var(--_na-title-mt);
   font-size: var(--fs-fine);