@stackoverflow/stacks 1.9.0 → 1.9.2

package/README.md

@@ -1,153 +1,161 @@
-# Stacks
-
-[![ci status][gh-action-badge]][gh-action-url] [![npm version][npm-badge]][npm-url]
-
-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)
-- [Linting Stacks](#linting-stacks)
-- [Testing Stacks](#testing-stacks)
-- [Releasing Stacks](#releasing-a-new-version-of-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.
-
-## Linting Stacks
-
-Run all lint suites by running:
-```sh
-npm run lint
-```
-
-Lint the styles (stylelint) by running:
-```sh
-npm run lint:css
-```
-Lint the typescript source code (eslint) via running:
-```sh
-npm run lint:ts
-```
-Lint the source code format (prettier) via running:
-```sh
-npm run lint:format
-```
-
-## Testing Stacks
-
-Run all test suites by running:
-```sh
-npm test
-```
-### Unit/Component Tests
-
-Unit/Component tests are written with [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
-Please follow the library's principles and documentation to write tests.
-
-Stacks uses [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and [Playwright](https://modern-web.dev/docs/test-runner/browser-launchers/playwright/) to run tests in a real browser context.
-
-Execute the unit/component tests suite by running:
-```sh
-npm run test:unit
-```
-or if you prefer watch mode run:
-```sh
-npm run test:unit:watch
-```
-
-### Visual Regression Tests
-
-**Prerequisite:** 
-In order to pull and upload baseline images you need to have `git lfs` installed in your local machine. Please follow [this guide](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage) to install that.
-
-
-This [Web Test Runner plugin](https://www.npmjs.com/package/@web/test-runner-visual-regression) is used to run visual regression tests. [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
-Visual regression tests end with this suffix `*.visual.test.ts`.
-
-Execute the visual regression tests suite by running:
-```sh
-npm run test:visual
-```
-
-Update the visual baseline via:
-```sh
-npm run test:visual:update
-```
-
-Failing tests (including diffs) can be found under `screenshots/[browser]/failed/` folders.
-
-## Releasing a new version of Stacks
-Stacks uses [Semantic Versioning](https://semver.org/), is distributed via [npm](https://www.npmjs.com/package/@stackoverflow/stacks), and publishes [release notes on Github](https://github.com/StackExchange/Stacks/releases). Follow the steps below to release a new version of Stacks.
-
-### Bump the version number
-```sh
-npm version [major | minor | patch]
-```
-
-### Push the new tag
-```sh
-git push && git push --tags
-```
-
-### Create release notes [on Github](https://github.com/StackExchange/Stacks/releases/new)
-
-1. Visit https://github.com/StackExchange/Stacks/releases/new
-1. Choose your new version from the "Choose a tag" dropdown
-1. Click "Generate release notes"
-1. Cleanup and complete the release notes
-    - Prominently mention any breaking changes, if applicable
-    - Include a "What's Changed" section in the release notes
-    - Mention significant bug fixes
-    - Mention new features
-    - Mention significant under-the-hood changes that could impact consumers
-
-### Ship your newly created version to [npm](https://www.npmjs.com/package/@stackoverflow/stacks)
-```sh
-npm publish
-```
-
-### Merge `develop` into `production` and push
-```sh
-git checkout production && git merge develop && git push
-```
-
-### Push the updated docs site
-Head to [Netlify](https://app.netlify.com), navigate to the Stacks overview, click on "Production deploys", and select "Deploy site" from the "Trigger deploy" dropdown.
-
-## 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).
-
-[gh-action-url]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml
-[gh-action-badge]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml/badge.svg?branch=develop
-[npm-url]: https://npmjs.org/package/@stackoverflow/stacks
-[npm-badge]: https://img.shields.io/npm/v/@stackoverflow/stacks.svg
+# Stacks
+
+[![ci status][gh-action-badge]][gh-action-url] [![npm version][npm-badge]][npm-url]
+
+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)
+- [Format Stacks](#format-stacks)
+- [Linting Stacks](#linting-stacks)
+- [Testing Stacks](#testing-stacks)
+- [Releasing Stacks](#releasing-a-new-version-of-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.
+
+## Format Stacks
+
+Format the source code with prettier via running:
+```sh
+npm run format
+```
+
+## Linting Stacks
+
+Run all lint suites by running:
+```sh
+npm run lint
+```
+
+Lint the styles (stylelint) by running:
+```sh
+npm run lint:css
+```
+Lint the typescript source code (eslint) via running:
+```sh
+npm run lint:ts
+```
+Lint the source code format (prettier) via running:
+```sh
+npm run lint:format
+```
+
+## Testing Stacks
+
+Run all test suites by running:
+```sh
+npm test
+```
+### Unit/Component Tests
+
+Unit/Component tests are written with [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
+Please follow the library's principles and documentation to write tests.
+
+Stacks uses [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and [Playwright](https://modern-web.dev/docs/test-runner/browser-launchers/playwright/) to run tests in a real browser context.
+
+Execute the unit/component tests suite by running:
+```sh
+npm run test:unit
+```
+or if you prefer watch mode run:
+```sh
+npm run test:unit:watch
+```
+
+### Visual Regression Tests
+
+**Prerequisite:** 
+In order to pull and upload baseline images you need to have `git lfs` installed in your local machine. Please follow [this guide](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage) to install that.
+
+
+This [Web Test Runner plugin](https://www.npmjs.com/package/@web/test-runner-visual-regression) is used to run visual regression tests. [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
+Visual regression tests end with this suffix `*.visual.test.ts`.
+
+Execute the visual regression tests suite by running:
+```sh
+npm run test:visual
+```
+
+Update the visual baseline via:
+```sh
+npm run test:visual:update
+```
+
+Failing tests (including diffs) can be found under `screenshots/[browser]/failed/` folders.
+
+## Releasing a new version of Stacks
+Stacks uses [Semantic Versioning](https://semver.org/), is distributed via [npm](https://www.npmjs.com/package/@stackoverflow/stacks), and publishes [release notes on Github](https://github.com/StackExchange/Stacks/releases). Follow the steps below to release a new version of Stacks.
+
+### Bump the version number
+```sh
+npm version [major | minor | patch]
+```
+
+### Push the new tag
+```sh
+git push && git push --tags
+```
+
+### Create release notes [on Github](https://github.com/StackExchange/Stacks/releases/new)
+
+1. Visit https://github.com/StackExchange/Stacks/releases/new
+1. Choose your new version from the "Choose a tag" dropdown
+1. Click "Generate release notes"
+1. Cleanup and complete the release notes
+    - Prominently mention any breaking changes, if applicable
+    - Include a "What's Changed" section in the release notes
+    - Mention significant bug fixes
+    - Mention new features
+    - Mention significant under-the-hood changes that could impact consumers
+
+### Ship your newly created version to [npm](https://www.npmjs.com/package/@stackoverflow/stacks)
+```sh
+npm publish
+```
+
+### Merge `develop` into `production` and push
+```sh
+git checkout production && git merge develop && git push
+```
+
+### Push the updated docs site
+Head to [Netlify](https://app.netlify.com), navigate to the Stacks overview, click on "Production deploys", and select "Deploy site" from the "Trigger deploy" dropdown.
+
+## 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).
+
+[gh-action-url]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml
+[gh-action-badge]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml/badge.svg?branch=develop
+[npm-url]: https://npmjs.org/package/@stackoverflow/stacks
+[npm-badge]: https://img.shields.io/npm/v/@stackoverflow/stacks.svg

package/dist/components/table/table.d.ts

@@ -1,8 +1,30 @@
 import * as Stacks from "../../stacks";
+/**
+ * The string values of these enumerations should correspond with `aria-sort` valid values.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort#values
+ */
+export declare enum SortOrder {
+    Ascending = "ascending",
+    Descending = "descending",
+    None = "none"
+}
 export declare class TableController extends Stacks.StacksController {
+    columnTarget: HTMLTableCellElement;
+    columnTargets: HTMLTableCellElement[];
     static targets: string[];
-    readonly columnTarget: Element;
-    readonly columnTargets: Element[];
-    setCurrentSort(headElem: Element, direction: "asc" | "desc" | "none"): void;
-    sort(evt: Event): void;
+    sort(evt: PointerEvent): void;
+    private updateSortedColumnStyles;
 }
+/**
+ * @internal This function is exported for testing purposes but is not a part of our public API
+ *
+ * @param section
+ */
+export declare function buildIndex(section: HTMLTableSectionElement): HTMLTableCellElement[][];
+/**
+ * @internal This function is exported for testing purposes but is not a part of our public API
+ *
+ * @param cell
+ */
+export declare function getCellSlot(cell: HTMLTableCellElement): number;

package/dist/css/stacks.css

@@ -4998,7 +4998,6 @@ body.theme-highcontrast .s-select > select:focus {
   background-color: var(--white);
   border: var(--su-static1) solid var(--_sw-bc);
   border-radius: var(--br-sm);
-  box-shadow: var(--bs-sm);
   font-size: var(--fs-body1);
   position: relative;
 }
@@ -5397,9 +5396,23 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
   color: var(--fc-light);
   cursor: pointer;
 }
-.s-table.s-table__sortable thead th a {
+.s-table.s-table__sortable thead th a,
+.s-table.s-table__sortable thead th button {
   color: inherit;
 }
+.s-table.s-table__sortable thead th button {
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--su-static4);
+  font-weight: inherit;
+  margin: calc(var(--_ta-th-p) * -1);
+  padding: var(--_ta-th-p);
+  text-align: left;
+  width: calc(100% + calc(var(--_ta-th-p) * 2));
+}
 .s-table.s-table__sortable thead th.is-sorted {
   color: var(--black-900);
 }
@@ -5893,13 +5906,13 @@ input[type="checkbox"].s-toggle-switch[disabled] {
 }
 .s-topbar {
   min-width: auto;
-  box-shadow: var(--bs-sm);
   width: 100%;
   z-index: var(--zi-navigation-fixed);
   background-color: var(--theme-topbar-background-color);
   height: var(--theme-topbar-height);
   display: flex;
   border-top: var(--theme-topbar-accent-border);
+  border-bottom: var(--theme-topbar-bottom-border);
   position: relative;
   align-items: center;
 }
@@ -5999,7 +6012,8 @@ body.theme-highcontrast .s-topbar {
   background-color: var(--theme-topbar-item-background-hover);
 }
 .s-topbar__light {
-  --theme-topbar-background-color: hsl(210, 8%, 97.5%);
+  --theme-topbar-background-color: hsl(0, 0%, 100%);
+  --theme-topbar-bottom-border: 1px solid hsl(210, 8%, 85%);
   --theme-topbar-search-color: hsl(210, 8%, 25%);
   --theme-topbar-search-background: hsl(0, 0%, 100%);
   --theme-topbar-search-placeholder: hsl(210, 8%, 55%);
@@ -6684,8 +6698,8 @@ body:not(.theme-dark) .theme-dark__forced .themed {
   --theme-tag-hover-color: var(--theme-secondary-900);
   --theme-tag-hover-background-color: var(--theme-secondary-100);
   --theme-tag-hover-border-color: transparent;
-  --theme-topbar-height: var(--su-static48);
-  --theme-topbar-background-color: var(--black-025);
+  --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
+  --theme-topbar-background-color: var(--white);
   --theme-topbar-search-color: var(--black-700);
   --theme-topbar-search-background: var(--white);
   --theme-topbar-search-placeholder: var(--black-400);
@@ -6700,6 +6714,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
   --theme-topbar-item-color-current: var(--black);
   --theme-topbar-item-border-current: var(--theme-primary-color);
   --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
+  --theme-topbar-bottom-border: none;
   --theme-post-title-color: var(--theme-link-color);
   --theme-post-title-color-hover: var(--theme-link-color-hover);
   --theme-post-title-color-visited: var(--theme-link-color-visited);