@stackoverflow/stacks 1.0.0-beta.0 → 1.1.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);
@@ -11638,6 +11637,9 @@ body {
 .m128 {
   margin: var(--su128) !important;
 }
+.m0 {
+  margin: 0 !important;
+}
 .mn1 {
   margin: calc(var(--su1) * -1) !important;
 }
@@ -11716,6 +11718,9 @@ body {
 .mt128 {
   margin-top: var(--su128) !important;
 }
+.mt0 {
+  margin-top: 0 !important;
+}
 .mtn1 {
   margin-top: calc(var(--su1) * -1) !important;
 }
@@ -11794,6 +11799,9 @@ body {
 .mr128 {
   margin-right: var(--su128) !important;
 }
+.mr0 {
+  margin-right: 0 !important;
+}
 .mrn1 {
   margin-right: calc(var(--su1) * -1) !important;
 }
@@ -11872,6 +11880,9 @@ body {
 .mb128 {
   margin-bottom: var(--su128) !important;
 }
+.mb0 {
+  margin-bottom: 0 !important;
+}
 .mbn1 {
   margin-bottom: calc(var(--su1) * -1) !important;
 }
@@ -11950,6 +11961,9 @@ body {
 .ml128 {
   margin-left: var(--su128) !important;
 }
+.ml0 {
+  margin-left: 0 !important;
+}
 .mln1 {
   margin-left: calc(var(--su1) * -1) !important;
 }
@@ -12041,6 +12055,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 +12159,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 +12273,9 @@ body {
 .p128 {
   padding: var(--su128) !important;
 }
+.p0 {
+  padding: 0 !important;
+}
 .pt1 {
   padding-top: var(--su1) !important;
 }
@@ -12194,6 +12315,9 @@ body {
 .pt128 {
   padding-top: var(--su128) !important;
 }
+.pt0 {
+  padding-top: 0 !important;
+}
 .pr1 {
   padding-right: var(--su1) !important;
 }
@@ -12272,6 +12396,9 @@ body {
 .pb128 {
   padding-bottom: var(--su128) !important;
 }
+.pr0 {
+  padding-right: 0 !important;
+}
 .pl1 {
   padding-left: var(--su1) !important;
 }
@@ -12311,6 +12438,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 +14927,9 @@ ol {
   .lg\:m128 {
     margin: var(--su128) !important;
   }
+  .lg\:m0 {
+    margin: 0 !important;
+  }
   .lg\:mn1 {
     margin: calc(var(--su1) * -1) !important;
   }
@@ -14875,6 +15008,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 +15089,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 +15170,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 +15251,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 +15332,9 @@ ol {
   .lg\:p128 {
     padding: var(--su128) !important;
   }
+  .lg\:p0 {
+    padding: 0 !important;
+  }
   .lg\:pt1 {
     padding-top: var(--su1) !important;
   }
@@ -15226,6 +15374,9 @@ ol {
   .lg\:pt128 {
     padding-top: var(--su128) !important;
   }
+  .lg\:pt0 {
+    padding-top: 0 !important;
+  }
   .lg\:pr1 {
     padding-right: var(--su1) !important;
   }
@@ -15304,6 +15455,9 @@ ol {
   .lg\:pb128 {
     padding-bottom: var(--su128) !important;
   }
+  .lg\:pr0 {
+    padding-right: 0 !important;
+  }
   .lg\:pl1 {
     padding-left: var(--su1) !important;
   }
@@ -15343,6 +15497,9 @@ ol {
   .lg\:pl128 {
     padding-left: var(--su128) !important;
   }
+  .lg\:pl0 {
+    padding-left: 0 !important;
+  }
   .lg\:t1 {
     top: var(--su1) !important;
   }
@@ -16340,6 +16497,9 @@ ol {
   .md\:m128 {
     margin: var(--su128) !important;
   }
+  .md\:m0 {
+    margin: 0 !important;
+  }
   .md\:mn1 {
     margin: calc(var(--su1) * -1) !important;
   }
@@ -16418,6 +16578,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 +16659,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 +16740,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 +16821,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 +16902,9 @@ ol {
   .md\:p128 {
     padding: var(--su128) !important;
   }
+  .md\:p0 {
+    padding: 0 !important;
+  }
   .md\:pt1 {
     padding-top: var(--su1) !important;
   }
@@ -16769,6 +16944,9 @@ ol {
   .md\:pt128 {
     padding-top: var(--su128) !important;
   }
+  .md\:pt0 {
+    padding-top: 0 !important;
+  }
   .md\:pr1 {
     padding-right: var(--su1) !important;
   }
@@ -16847,6 +17025,9 @@ ol {
   .md\:pb128 {
     padding-bottom: var(--su128) !important;
   }
+  .md\:pr0 {
+    padding-right: 0 !important;
+  }
   .md\:pl1 {
     padding-left: var(--su1) !important;
   }
@@ -16886,6 +17067,9 @@ ol {
   .md\:pl128 {
     padding-left: var(--su128) !important;
   }
+  .md\:pl0 {
+    padding-left: 0 !important;
+  }
   .md\:t1 {
     top: var(--su1) !important;
   }
@@ -17883,6 +18067,9 @@ ol {
   .sm\:m128 {
     margin: var(--su128) !important;
   }
+  .sm\:m0 {
+    margin: 0 !important;
+  }
   .sm\:mn1 {
     margin: calc(var(--su1) * -1) !important;
   }
@@ -17961,6 +18148,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 +18229,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 +18310,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 +18391,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 +18472,9 @@ ol {
   .sm\:p128 {
     padding: var(--su128) !important;
   }
+  .sm\:p0 {
+    padding: 0 !important;
+  }
   .sm\:pt1 {
     padding-top: var(--su1) !important;
   }
@@ -18312,6 +18514,9 @@ ol {
   .sm\:pt128 {
     padding-top: var(--su128) !important;
   }
+  .sm\:pt0 {
+    padding-top: 0 !important;
+  }
   .sm\:pr1 {
     padding-right: var(--su1) !important;
   }
@@ -18390,6 +18595,9 @@ ol {
   .sm\:pb128 {
     padding-bottom: var(--su128) !important;
   }
+  .sm\:pr0 {
+    padding-right: 0 !important;
+  }
   .sm\:pl1 {
     padding-left: var(--su1) !important;
   }
@@ -18429,6 +18637,9 @@ ol {
   .sm\:pl128 {
     padding-left: var(--su128) !important;
   }
+  .sm\:pl0 {
+    padding-left: 0 !important;
+  }
   .sm\:t1 {
     top: var(--su1) !important;
   }