@stackoverflow/stacks 1.0.0 → 1.2.0

package/README.md

@@ -1,47 +1,47 @@
-# Stacks
-
-Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
-
-Our documentation is built with Stacks itself, using its [immutable, atomic classes](http://johnpolacek.com/rethinking/) and components.
-
-The Stacks website documents:
-
-### Product
-- Semantic and accessible component markup
-- Cross-browser compatible Less / CSS
-- An [icon library](https://github.com/StackExchange/Stacks-Icons)
-
-### Email
-- Email templates & components
-
-Stacks documentation can be found at https://stackoverflow.design/
-
-## Table of contents
-
-- [Using Stacks](#using-stacks)
-- [Building Stacks](#building-stacks)
-- [Bugs and feature requests](#bugs-and-feature-requests)
-- [Contributing](#contributing)
-- [License](#license)
-
-## Using Stacks
-Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/product/guidelines/using-stacks).
-
-## 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/guidelines/building).
-
-Having trouble getting these steps to work? Open [an issue](https://github.com/StackExchange/Stacks/issues/new) with a `setup` label.
-
-## Testing Stacks
-Stacks has implemented visual regression testing with [Backstop](https://github.com/garris/BackstopJS). To test if your new feature introduces visual regressions, run `npm run test` in a new Terminal window while Stacks is running. After the tests have run, a new browser window with any regressions will show. If the regressions are desired, you can run `npm run approve` to establish the new baseline.
-
-Individual routes to test are found in [backstop.json](/backstop.json)
-
-## Bugs and feature requests
-Have a bug or feature request? First search existing or closed issues to make sure the issue hasn’t been noted yet. If not, review our [issue guidelines](/CONTRIBUTING.md#open-an-issue) for submitting [a bug report](/CONTRIBUTING.md#reporting-bugs) or [feature request](/CONTRIBUTING.md#feature-requests).
-
-## Contributing
-If you’d like to contribute to Stacks, please read through our [contribution guidelines](/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
-
-## License
-Code and documentation copyright 2017-2022 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).
+# Stacks
+
+Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
+
+Our documentation is built with Stacks itself, using its [immutable, atomic classes](http://johnpolacek.com/rethinking/) and components.
+
+The Stacks website documents:
+
+### Product
+- Semantic and accessible component markup
+- Cross-browser compatible Less / CSS
+- An [icon library](https://github.com/StackExchange/Stacks-Icons)
+
+### Email
+- Email templates & components
+
+Stacks documentation can be found at https://stackoverflow.design/
+
+## Table of contents
+
+- [Using Stacks](#using-stacks)
+- [Building Stacks](#building-stacks)
+- [Bugs and feature requests](#bugs-and-feature-requests)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Using Stacks
+Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/product/guidelines/using-stacks).
+
+## 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/guidelines/building).
+
+Having trouble getting these steps to work? Open [an issue](https://github.com/StackExchange/Stacks/issues/new) with a `setup` label.
+
+## Testing Stacks
+Stacks has implemented visual regression testing with [Backstop](https://github.com/garris/BackstopJS). To test if your new feature introduces visual regressions, run `npm run test` in a new Terminal window while Stacks is running. After the tests have run, a new browser window with any regressions will show. If the regressions are desired, you can run `npm run approve` to establish the new baseline.
+
+Individual routes to test are found in [backstop.json](/backstop.json)
+
+## Bugs and feature requests
+Have a bug or feature request? First search existing or closed issues to make sure the issue hasn’t been noted yet. If not, review our [issue guidelines](/CONTRIBUTING.md#open-an-issue) for submitting [a bug report](/CONTRIBUTING.md#reporting-bugs) or [feature request](/CONTRIBUTING.md#feature-requests).
+
+## Contributing
+If you’d like to contribute to Stacks, please read through our [contribution guidelines](/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+
+## License
+Code and documentation copyright 2017-2022 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).

package/dist/controllers/s-popover.d.ts

@@ -80,13 +80,17 @@ export declare class PopoverController extends BasePopoverController {
     private boundHideOnOutsideClick;
     private boundHideOnEscapePress;
     /**
-     * Toggles optional classes in addition to BasePopoverController.shown
+     * Toggles optional classes and accessibility attributes in addition to BasePopoverController.shown
      */
     protected shown(dispatcher?: Element | null): void;
     /**
-     * Toggles optional classes in addition to BasePopoverController.hidden
+     * Toggles optional classes and accessibility attributes in addition to BasePopoverController.hidden
      */
     protected hidden(dispatcher?: Element | null): void;
+    /**
+     * Initializes accessibility attributes in addition to BasePopoverController.connect
+     */
+    connect(): void;
     /**
      * Binds global events to the document for hiding popovers on user interaction
      */
@@ -110,6 +114,11 @@ export declare class PopoverController extends BasePopoverController {
      * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
      */
     private toggleOptionalClasses;
+    /**
+     * Toggles accessibility attributes based on whether the popover is shown or not
+     * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
+     */
+    private toggleAccessibilityAttributes;
 }
 /**
  * Helper to manually show an s-popover element via external JS

package/dist/css/stacks.css

@@ -402,9 +402,8 @@ template {
 .s-activity-indicator {
   display: inline-block;
   min-width: var(--su-static12);
-  height: var(--su-static12);
-  padding-left: var(--su4);
-  padding-right: var(--su4);
+  min-height: var(--su-static12);
+  padding: var(--su2) var(--su4);
   line-height: 1.1;
   background-color: var(--theme-secondary-400);
   box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -600,6 +599,9 @@ a.s-badge:hover {
   margin-right: var(--su1);
   margin-left: calc((var(--su4) + var(--su1)) * -1);
 }
+.s-badge__icon {
+  gap: 0.3em;
+}
 .s-badge__sm {
   min-width: 18px;
   align-self: flex-start;
@@ -726,6 +728,36 @@ body.theme-highcontrast .s-badge__moderator {
 body.theme-highcontrast .s-badge__staff {
   border-color: currentColor;
 }
+.s-badge__danger {
+  color: var(--red-900);
+  background-color: var(--red-100);
+  border-color: var(--red-600);
+}
+.s-badge__danger.s-badge__filled {
+  color: hsl(0, 0%, 100%);
+  background-color: var(--red-500);
+  border-color: transparent;
+}
+.s-badge__info {
+  color: var(--blue-900);
+  background-color: var(--blue-100);
+  border-color: var(--blue-600);
+}
+.s-badge__warning {
+  color: var(--yellow-900);
+  background-color: var(--yellow-100);
+  border-color: var(--yellow-600);
+}
+.s-badge__muted {
+  color: var(--black-900);
+  background-color: var(--black-100);
+  border-color: var(--black-600);
+}
+.s-badge__muted.s-badge__filled {
+  color: var(--white);
+  background-color: var(--black-700);
+  border-color: transparent;
+}
 .s-award-bling {
   display: flex;
   align-items: center;
@@ -2313,7 +2345,7 @@ body.theme-system .theme-dark__forced .s-popover--arrow {
   font-size: var(--fs-body1);
   color: var(--fc-light);
 }
-.s-post-summary--stats .s-post-summary--stats-item {
+.s-post-summary--stats .s-post-summary--stats-item:not(.s-badge) {
   display: inline-flex;
   gap: 0.3em;
   align-items: center;
@@ -2327,6 +2359,11 @@ body.theme-system .theme-dark__forced .s-popover--arrow {
 .s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
   font-weight: 500;
 }
+.s-post-summary--stats .s-post-summary--stats-item.s-badge {
+  font-size: var(--fs-body1);
+  line-height: var(--lh-md);
+  padding: var(--su2) var(--su4);
+}
 .s-post-summary--stats .s-post-summary--stats-item.has-answers,
 .s-post-summary--stats .s-post-summary--stats-item.has-bounty,
 .s-post-summary--stats .s-post-summary--stats-item.is-deleted,
@@ -2552,12 +2589,12 @@ body.theme-highcontrast .s-post-summary--answer:before {
   color: hsl(0, 0%, 100%);
   background-color: var(--red-500);
 }
-.s-post-summary__ignored .s-post-summary--content,
-.s-post-summary__deleted .s-post-summary--content {
+.s-post-summary__ignored .s-post-summary--content > *:not(.s-post-summary--content-menu-button),
+.s-post-summary__deleted .s-post-summary--content > *:not(.s-post-summary--content-menu-button) {
   opacity: 0.6;
 }
-.s-post-summary__ignored .s-post-summary--stats-item:not(.is-deleted),
-.s-post-summary__deleted .s-post-summary--stats-item:not(.is-deleted) {
+.s-post-summary__ignored .s-post-summary--stats-item:not(.s-badge):not(.is-deleted),
+.s-post-summary__deleted .s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
   opacity: 0.6;
   filter: grayscale(100%);
 }
@@ -11638,6 +11675,9 @@ body {
 .m128 {
   margin: var(--su128) !important;
 }
+.m0 {
+  margin: 0 !important;
+}
 .mn1 {
   margin: calc(var(--su1) * -1) !important;
 }
@@ -11716,6 +11756,9 @@ body {
 .mt128 {
   margin-top: var(--su128) !important;
 }
+.mt0 {
+  margin-top: 0 !important;
+}
 .mtn1 {
   margin-top: calc(var(--su1) * -1) !important;
 }
@@ -11794,6 +11837,9 @@ body {
 .mr128 {
   margin-right: var(--su128) !important;
 }
+.mr0 {
+  margin-right: 0 !important;
+}
 .mrn1 {
   margin-right: calc(var(--su1) * -1) !important;
 }
@@ -11872,6 +11918,9 @@ body {
 .mb128 {
   margin-bottom: var(--su128) !important;
 }
+.mb0 {
+  margin-bottom: 0 !important;
+}
 .mbn1 {
   margin-bottom: calc(var(--su1) * -1) !important;
 }
@@ -11950,6 +11999,9 @@ body {
 .ml128 {
   margin-left: var(--su128) !important;
 }
+.ml0 {
+  margin-left: 0 !important;
+}
 .mln1 {
   margin-left: calc(var(--su1) * -1) !important;
 }
@@ -12041,6 +12093,58 @@ body {
   margin-left: var(--su128) !important;
   margin-right: var(--su128) !important;
 }
+.mxn1 {
+  margin-left: calc(var(--su1) * -1) !important;
+  margin-right: calc(var(--su1) * -1) !important;
+}
+.mxn2 {
+  margin-left: calc(var(--su2) * -1) !important;
+  margin-right: calc(var(--su2) * -1) !important;
+}
+.mxn4 {
+  margin-left: calc(var(--su4) * -1) !important;
+  margin-right: calc(var(--su4) * -1) !important;
+}
+.mxn6 {
+  margin-left: calc(var(--su6) * -1) !important;
+  margin-right: calc(var(--su6) * -1) !important;
+}
+.mxn8 {
+  margin-left: calc(var(--su8) * -1) !important;
+  margin-right: calc(var(--su8) * -1) !important;
+}
+.mxn12 {
+  margin-left: calc(var(--su12) * -1) !important;
+  margin-right: calc(var(--su12) * -1) !important;
+}
+.mxn16 {
+  margin-left: calc(var(--su16) * -1) !important;
+  margin-right: calc(var(--su16) * -1) !important;
+}
+.mxn24 {
+  margin-left: calc(var(--su24) * -1) !important;
+  margin-right: calc(var(--su24) * -1) !important;
+}
+.mxn32 {
+  margin-left: calc(var(--su32) * -1) !important;
+  margin-right: calc(var(--su32) * -1) !important;
+}
+.mxn48 {
+  margin-left: calc(var(--su48) * -1) !important;
+  margin-right: calc(var(--su48) * -1) !important;
+}
+.mxn64 {
+  margin-left: calc(var(--su64) * -1) !important;
+  margin-right: calc(var(--su64) * -1) !important;
+}
+.mxn96 {
+  margin-left: calc(var(--su96) * -1) !important;
+  margin-right: calc(var(--su96) * -1) !important;
+}
+.mxn128 {
+  margin-left: calc(var(--su128) * -1) !important;
+  margin-right: calc(var(--su128) * -1) !important;
+}
 .my1 {
   margin-top: var(--su1) !important;
   margin-bottom: var(--su1) !important;
@@ -12093,6 +12197,58 @@ body {
   margin-top: var(--su128) !important;
   margin-bottom: var(--su128) !important;
 }
+.myn1 {
+  margin-top: calc(var(--su1) * -1) !important;
+  margin-bottom: calc(var(--su1) * -1) !important;
+}
+.myn2 {
+  margin-top: calc(var(--su2) * -1) !important;
+  margin-bottom: calc(var(--su2) * -1) !important;
+}
+.myn4 {
+  margin-top: calc(var(--su4) * -1) !important;
+  margin-bottom: calc(var(--su4) * -1) !important;
+}
+.myn6 {
+  margin-top: calc(var(--su6) * -1) !important;
+  margin-bottom: calc(var(--su6) * -1) !important;
+}
+.myn8 {
+  margin-top: calc(var(--su8) * -1) !important;
+  margin-bottom: calc(var(--su8) * -1) !important;
+}
+.myn12 {
+  margin-top: calc(var(--su12) * -1) !important;
+  margin-bottom: calc(var(--su12) * -1) !important;
+}
+.myn16 {
+  margin-top: calc(var(--su16) * -1) !important;
+  margin-bottom: calc(var(--su16) * -1) !important;
+}
+.myn24 {
+  margin-top: calc(var(--su24) * -1) !important;
+  margin-bottom: calc(var(--su24) * -1) !important;
+}
+.myn32 {
+  margin-top: calc(var(--su32) * -1) !important;
+  margin-bottom: calc(var(--su32) * -1) !important;
+}
+.myn48 {
+  margin-top: calc(var(--su48) * -1) !important;
+  margin-bottom: calc(var(--su48) * -1) !important;
+}
+.myn64 {
+  margin-top: calc(var(--su64) * -1) !important;
+  margin-bottom: calc(var(--su64) * -1) !important;
+}
+.myn96 {
+  margin-top: calc(var(--su96) * -1) !important;
+  margin-bottom: calc(var(--su96) * -1) !important;
+}
+.myn128 {
+  margin-top: calc(var(--su128) * -1) !important;
+  margin-bottom: calc(var(--su128) * -1) !important;
+}
 .p0 {
   padding: 0 !important;
 }
@@ -12155,6 +12311,9 @@ body {
 .p128 {
   padding: var(--su128) !important;
 }
+.p0 {
+  padding: 0 !important;
+}
 .pt1 {
   padding-top: var(--su1) !important;
 }
@@ -12194,6 +12353,9 @@ body {
 .pt128 {
   padding-top: var(--su128) !important;
 }
+.pt0 {
+  padding-top: 0 !important;
+}
 .pr1 {
   padding-right: var(--su1) !important;
 }
@@ -12272,6 +12434,9 @@ body {
 .pb128 {
   padding-bottom: var(--su128) !important;
 }
+.pr0 {
+  padding-right: 0 !important;
+}
 .pl1 {
   padding-left: var(--su1) !important;
 }
@@ -12311,6 +12476,9 @@ body {
 .pl128 {
   padding-left: var(--su128) !important;
 }
+.pl0 {
+  padding-left: 0 !important;
+}
 .px1 {
   padding-left: var(--su1) !important;
   padding-right: var(--su1) !important;
@@ -14797,6 +14965,9 @@ ol {
   .lg\:m128 {
     margin: var(--su128) !important;
   }
+  .lg\:m0 {
+    margin: 0 !important;
+  }
   .lg\:mn1 {
     margin: calc(var(--su1) * -1) !important;
   }
@@ -14875,6 +15046,9 @@ ol {
   .lg\:mt128 {
     margin-top: var(--su128) !important;
   }
+  .lg\:mt0 {
+    margin-top: 0 !important;
+  }
   .lg\:mtn1 {
     margin-top: calc(var(--su1) * -1) !important;
   }
@@ -14953,6 +15127,9 @@ ol {
   .lg\:mr128 {
     margin-right: var(--su128) !important;
   }
+  .lg\:mr0 {
+    margin-right: 0 !important;
+  }
   .lg\:mrn1 {
     margin-right: calc(var(--su1) * -1) !important;
   }
@@ -15031,6 +15208,9 @@ ol {
   .lg\:mb128 {
     margin-bottom: var(--su128) !important;
   }
+  .lg\:mb0 {
+    margin-bottom: 0 !important;
+  }
   .lg\:mbn1 {
     margin-bottom: calc(var(--su1) * -1) !important;
   }
@@ -15109,6 +15289,9 @@ ol {
   .lg\:ml128 {
     margin-left: var(--su128) !important;
   }
+  .lg\:ml0 {
+    margin-left: 0 !important;
+  }
   .lg\:mln1 {
     margin-left: calc(var(--su1) * -1) !important;
   }
@@ -15187,6 +15370,9 @@ ol {
   .lg\:p128 {
     padding: var(--su128) !important;
   }
+  .lg\:p0 {
+    padding: 0 !important;
+  }
   .lg\:pt1 {
     padding-top: var(--su1) !important;
   }
@@ -15226,6 +15412,9 @@ ol {
   .lg\:pt128 {
     padding-top: var(--su128) !important;
   }
+  .lg\:pt0 {
+    padding-top: 0 !important;
+  }
   .lg\:pr1 {
     padding-right: var(--su1) !important;
   }
@@ -15304,6 +15493,9 @@ ol {
   .lg\:pb128 {
     padding-bottom: var(--su128) !important;
   }
+  .lg\:pr0 {
+    padding-right: 0 !important;
+  }
   .lg\:pl1 {
     padding-left: var(--su1) !important;
   }
@@ -15343,6 +15535,9 @@ ol {
   .lg\:pl128 {
     padding-left: var(--su128) !important;
   }
+  .lg\:pl0 {
+    padding-left: 0 !important;
+  }
   .lg\:t1 {
     top: var(--su1) !important;
   }
@@ -16340,6 +16535,9 @@ ol {
   .md\:m128 {
     margin: var(--su128) !important;
   }
+  .md\:m0 {
+    margin: 0 !important;
+  }
   .md\:mn1 {
     margin: calc(var(--su1) * -1) !important;
   }
@@ -16418,6 +16616,9 @@ ol {
   .md\:mt128 {
     margin-top: var(--su128) !important;
   }
+  .md\:mt0 {
+    margin-top: 0 !important;
+  }
   .md\:mtn1 {
     margin-top: calc(var(--su1) * -1) !important;
   }
@@ -16496,6 +16697,9 @@ ol {
   .md\:mr128 {
     margin-right: var(--su128) !important;
   }
+  .md\:mr0 {
+    margin-right: 0 !important;
+  }
   .md\:mrn1 {
     margin-right: calc(var(--su1) * -1) !important;
   }
@@ -16574,6 +16778,9 @@ ol {
   .md\:mb128 {
     margin-bottom: var(--su128) !important;
   }
+  .md\:mb0 {
+    margin-bottom: 0 !important;
+  }
   .md\:mbn1 {
     margin-bottom: calc(var(--su1) * -1) !important;
   }
@@ -16652,6 +16859,9 @@ ol {
   .md\:ml128 {
     margin-left: var(--su128) !important;
   }
+  .md\:ml0 {
+    margin-left: 0 !important;
+  }
   .md\:mln1 {
     margin-left: calc(var(--su1) * -1) !important;
   }
@@ -16730,6 +16940,9 @@ ol {
   .md\:p128 {
     padding: var(--su128) !important;
   }
+  .md\:p0 {
+    padding: 0 !important;
+  }
   .md\:pt1 {
     padding-top: var(--su1) !important;
   }
@@ -16769,6 +16982,9 @@ ol {
   .md\:pt128 {
     padding-top: var(--su128) !important;
   }
+  .md\:pt0 {
+    padding-top: 0 !important;
+  }
   .md\:pr1 {
     padding-right: var(--su1) !important;
   }
@@ -16847,6 +17063,9 @@ ol {
   .md\:pb128 {
     padding-bottom: var(--su128) !important;
   }
+  .md\:pr0 {
+    padding-right: 0 !important;
+  }
   .md\:pl1 {
     padding-left: var(--su1) !important;
   }
@@ -16886,6 +17105,9 @@ ol {
   .md\:pl128 {
     padding-left: var(--su128) !important;
   }
+  .md\:pl0 {
+    padding-left: 0 !important;
+  }
   .md\:t1 {
     top: var(--su1) !important;
   }
@@ -17883,6 +18105,9 @@ ol {
   .sm\:m128 {
     margin: var(--su128) !important;
   }
+  .sm\:m0 {
+    margin: 0 !important;
+  }
   .sm\:mn1 {
     margin: calc(var(--su1) * -1) !important;
   }
@@ -17961,6 +18186,9 @@ ol {
   .sm\:mt128 {
     margin-top: var(--su128) !important;
   }
+  .sm\:mt0 {
+    margin-top: 0 !important;
+  }
   .sm\:mtn1 {
     margin-top: calc(var(--su1) * -1) !important;
   }
@@ -18039,6 +18267,9 @@ ol {
   .sm\:mr128 {
     margin-right: var(--su128) !important;
   }
+  .sm\:mr0 {
+    margin-right: 0 !important;
+  }
   .sm\:mrn1 {
     margin-right: calc(var(--su1) * -1) !important;
   }
@@ -18117,6 +18348,9 @@ ol {
   .sm\:mb128 {
     margin-bottom: var(--su128) !important;
   }
+  .sm\:mb0 {
+    margin-bottom: 0 !important;
+  }
   .sm\:mbn1 {
     margin-bottom: calc(var(--su1) * -1) !important;
   }
@@ -18195,6 +18429,9 @@ ol {
   .sm\:ml128 {
     margin-left: var(--su128) !important;
   }
+  .sm\:ml0 {
+    margin-left: 0 !important;
+  }
   .sm\:mln1 {
     margin-left: calc(var(--su1) * -1) !important;
   }
@@ -18273,6 +18510,9 @@ ol {
   .sm\:p128 {
     padding: var(--su128) !important;
   }
+  .sm\:p0 {
+    padding: 0 !important;
+  }
   .sm\:pt1 {
     padding-top: var(--su1) !important;
   }
@@ -18312,6 +18552,9 @@ ol {
   .sm\:pt128 {
     padding-top: var(--su128) !important;
   }
+  .sm\:pt0 {
+    padding-top: 0 !important;
+  }
   .sm\:pr1 {
     padding-right: var(--su1) !important;
   }
@@ -18390,6 +18633,9 @@ ol {
   .sm\:pb128 {
     padding-bottom: var(--su128) !important;
   }
+  .sm\:pr0 {
+    padding-right: 0 !important;
+  }
   .sm\:pl1 {
     padding-left: var(--su1) !important;
   }
@@ -18429,6 +18675,9 @@ ol {
   .sm\:pl128 {
     padding-left: var(--su128) !important;
   }
+  .sm\:pl0 {
+    padding-left: 0 !important;
+  }
   .sm\:t1 {
     top: var(--su1) !important;
   }