chore(build): fix 2.8.5 develop merge conflicts (#1981)

* SPARK-8: Fix Modal Focus Issue when using Keyboard (#1963)

* fix reported focus issue

* Also handle case where modal has no tabbable elements

* fix webpack.config.js for windows

* move if check up

* Create loud-suits-stare.md

* fix whitespace

* revert html changes

* revert harder

* add tests

* lint

* chore(new-release) (#1964)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* [SPARK-6] - update the notice border color for dark mode and high contrast dark mode (#1965)

* Correct readme

* Don't run minicssextractplugin when running locally

* Revert changes

* update border colour for dark mode and high contrast dark mode

* Create tasty-masks-pump.md

* Minor notice border style refactor

* Update visual regression test images

---------

Co-authored-by: Dan Cormier <[email protected]>

* chore(new-release) (#1966)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* build(deps-dev): bump webpack from 5.99.9 to 5.101.2 (#1967)

Bumps [webpack](https://github.com/webpack/webpack) from 5.99.9 to 5.101.2.
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](webpack/webpack@v5.99.9...v5.101.2)

---
updated-dependencies:
- dependency-name: webpack
  dependency-version: 5.101.2
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* SPARK-12: Move to monorepo setup by splitting Stacks Docs and Classic into NPM workspaces (#1969)

* mention why we are doing this as part of project SHINE

* move folders

* update paths

* fix docs site and visual tests script

* fix a11y and unit test scripts and tweak visual regression threshold

* fix workflow tests

* revert ci import paths to fix tests

* try older image

* fix visual ci tests?

* mark stacks-docs not publishable

* adjust adr based on pr feedback

* adjust names

* address PR feedback

* add missing workspace param

* switch back to old script

* fix netlify and a11y

* fix path

* try fix workflows

* fix harder

* PR feedback

* pr feedback round 2

* move some more packages around

* Create eighty-pillows-relate.md

* chore(screenshots): adjust gitignore patterns excluding failed images (#1972)

* chore(monorepo): follow-up tweaks post monorepo changes (#1974)

* chore(git-lfs): ensure visual test baseline images are tracked by git lfs (#1978)

* Fix aria-current attribute placement in sidebar widget navigation examples (#1970)

* chore(new-release) (#1979)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* build(deps-dev): bump vite from 7.1.3 to 7.1.5 (#1980)

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 7.1.3 to 7.1.5.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v7.1.5/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-version: 7.1.5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: svc_tooling <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Tavian Taylor <[email protected]>
Co-authored-by: Dan Cormier <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Giamir Buoncristiani <[email protected]>
Co-authored-by: qheaden-stack <[email protected]>

Author: 8 people

.gitattributes

@@ -1 +1 @@
-screenshots/** filter=lfs diff=lfs merge=lfs -text
+**/screenshots/** filter=lfs diff=lfs merge=lfs -text

.github/workflows/test.yml

@@ -51,4 +51,4 @@ jobs:
         if: ${{ failure() && inputs.command_description == 'Visual Regression Tests' }}
         with:
           name: visual-regression-test-results
-          path: screenshots
+          path: packages/stacks-classic/screenshots

.github/workflows/workflow.yml

@@ -27,19 +27,19 @@ jobs:
           needs_lfs: false
           needs_playwright: false
         - command_description: Less Tests
-          command: npm run test:less
+          command: npm run test:less -w packages/stacks-classic
           needs_lfs: false
           needs_playwright: false
         - command_description: Unit Tests
-          command: npm run test:unit -- --config web-test-runner.config.ci.mjs
+          command: npm run test:unit -w packages/stacks-classic -- --config web-test-runner.config.ci.mjs
           needs_lfs: false
           needs_playwright: true
         - command_description: A11y Tests
-          command: npm run test:a11y -- --config web-test-runner.config.ci.mjs
+          command: npm run test:a11y -w packages/stacks-classic -- --config web-test-runner.config.ci.mjs
           needs_lfs: false
           needs_playwright: true
         - command_description: Visual Regression Tests
-          command: npm run test:visual -- --config web-test-runner.config.ci.mjs
+          command: npm run test:visual:ci -w packages/stacks-classic -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.ci.mjs
           needs_lfs: true
           needs_playwright: false # we are using playwright docker image to run visual tests
     with:

.gitignore

@@ -58,27 +58,27 @@ node_modules
 # Compiled CSS/JS #
 ###############
 dist/
-/docs/assets/css/
-/docs/assets/js/stacks.*
-/docs/assets/js/controllers.js
-/docs/assets/js/controllers.js.map
-/docs/assets/js/library.*
+/packages/stacks-docs/assets/css/
+/packages/stacks-docs/assets/js/stacks.*
+/packages/stacks-docs/assets/js/controllers.js
+/packages/stacks-docs/assets/js/controllers.js.map
+/packages/stacks-docs/assets/js/library.*
 /build/
 .tscache
 
 # legacy compiled files -- these are no longer generated, but may still be lingering around
-/lib/css/*.css
+/packages/stacks-classic/lib/css/*.css
 
 # Environment normalization #
 ###############
-/docs/.bundle
-/docs/vendor/bundle
-/docs/_includes/svg-icons
-/docs/_includes/svg-spots
+/packages/stacks-docs/.bundle
+/packages/stacks-docs/vendor/bundle
+/packages/stacks-docs/_includes/svg-icons
+/packages/stacks-docs/_includes/svg-spots
 
 # Testing Assets #
 ###############
-/screenshots/**/failed/**
+**/screenshots/**/failed/**
 
 # GitHub Actions #
 ###############

CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stackoverflow/stacks
 
+## 2.8.4
+
+### Patch Changes
+
+- [#1965](https://github.com/StackExchange/Stacks/pull/1965) [`236f4a5`](https://github.com/StackExchange/Stacks/commit/236f4a56b9785f6487e58a7647b30dd296ab37b5) Thanks [@ttaylor-stack](https://github.com/ttaylor-stack)! - [SPARK-6] - update the notice border color for dark mode and high contrast dark mode
+
+## 2.8.3
+
+### Patch Changes
+
+- [#1963](https://github.com/StackExchange/Stacks/pull/1963) [`9c08388`](https://github.com/StackExchange/Stacks/commit/9c083886cb57ee343e455f2d36c584aa6f021022) Thanks [@mukunku](https://github.com/mukunku)! - SPARK-8: Fix Modal text selection issue when using keyboard
+
 ## 2.8.2
 
 ### Patch Changes

README.md

@@ -23,9 +23,8 @@ Stacks documentation can be found at https://stackoverflow.design/
 - [Using Stacks](#using-stacks)
 - [Migrating from v1 to v2](#migrating-from-v1-to-v2)
 - [Local Development](#local-development)
-- [Format Stacks](#format-stacks)
-- [Linting Stacks](#linting-stacks)
-- [Testing Stacks](#testing-stacks)
+- [Stacks Docs](#stacks-docs)
+- [Stacks Classic](#stacks-classic)
 - [Releasing Stacks](#releasing-a-new-version-of-stacks)
 - [Bugs and feature requests](#bugs-and-feature-requests)
 - [Contributing](#contributing)
@@ -40,64 +39,76 @@ To migrate from Stacks v1 to v2, see our [migration guide](/MIGRATION_GUIDE.md).
 
 ## Local Development
 
-To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally:
+This repo follows a monolithic structure and contains multiple packages split into [npm workspaces](https://docs.npmjs.com/cli/v9/using-npm/workspaces). These can be found under the [packages/](https://github.com/StackExchange/Stacks/tree/develop/packages) folder.
+
+To get any of these Stacks workspaces working locally start out by installing all required dependencies:
+```sh
+npm i
+```
+
+Below are instructions on how to build and test each individual workspace. If you have trouble getting any of these steps to work, please open [an issue](https://github.com/StackExchange/Stacks/issues/new) with a `setup` label.
+
+## Stacks Docs
+
+This workspace contains the Stacks documentation project that’s hosted on: https://stackoverflow.design/
+
+To contribute to Stacks documentation you can build locally via:
 ```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).
+This command will pull up the local dev server at http://localhost:8080. 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.
+## Stacks Classic
 
-## Format Stacks
+This workspace contains the css and js sources that define and power the Stacks design system.
 
-Format the source code with prettier via running:
+Format the source code with prettier by running:
 ```sh
-npm run format
+npm run format -w packages/stacks-classic
 ```
 
-## Linting Stacks
+### Linting
 
 Run all lint suites by running:
 ```sh
-npm run lint
+npm run lint -w packages/stacks-classic
 ```
-
 Lint the styles (stylelint) by running:
 ```sh
-npm run lint:css
+npm run lint:css -w packages/stacks-classic
 ```
 Lint the typescript source code (eslint) via running:
 ```sh
-npm run lint:ts
+npm run lint:ts -w packages/stacks-classic
 ```
 Lint the source code format (prettier) via running:
 ```sh
-npm run lint:format
+npm run lint:format -w packages/stacks-classic
 ```
 
-## Testing Stacks
+### Testing
 
 Run all test suites by running:
 ```sh
-npm test
+npm run test -w packages/stacks-classic
 ```
-### Unit/Component Tests
+#### 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.
+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
+npm run test:unit -w packages/stacks-classic
 ```
 or if you prefer watch mode run:
 ```sh
-npm run test:unit:watch
+npm run test:unit:watch -w packages/stacks-classic
 ```
 
-### Visual Regression Tests
+#### Visual Regression Tests
 
 **Prerequisites:** 
 - `git lfs` ([installation docs](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage))
@@ -110,34 +121,34 @@ Visual regression tests end with this suffix `*.visual.test.ts`.
 
 Execute the visual regression tests suite by running:
 ```sh
-npm run test:visual
+npm run test:visual -w packages/stacks-classic
 ```
 After the first run, if there are failing snapshots, they end up overriding the baseline ones in the filesystem (e.g. `/screenshots/<browser>/baseline/<name>.png`). 
 We do this for easier comparison of the dif directly in vscode and to make sure only the failing snapshots get regenerated (see [this GH discussion](https://github.com/modernweb-dev/web/discussions/427#discussioncomment-3543771) that inspired the approach).
 
 We also recommend to install [this vscode extension](https://marketplace.visualstudio.com/items?itemName=RayWiis.png-image-diff) for getting better diffs.
 
-### Less Tests
+#### Less Tests
 
 This is an experimental suite to test the generation of CSS from Less files. 
 Less tests end with this suffix `*.less.test.ts`.
 
 Execute the less tests suite by running:
 ```sh
-npm run test:less
+npm run test:less -w packages/stacks-classic
 ```
 
 Update the css snapshots via:
 ```sh
-npm run test:less:update
+npm run test:less:update -w packages/stacks-classic
 ```
 
-## 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). 
+## Releasing a new version of Stacks Docs / Stacks Classic
+This repo uses [Semantic Versioning](https://semver.org/) to distribute Stacks Classic and Stacks Docs via [npm](https://www.npmjs.com/package/@stackoverflow/stacks), and publishes [release notes on Github](https://github.com/StackExchange/Stacks/releases). 
 
 We use [changesets](https://github.com/changesets/changesets) to automatize the steps necessary to publish to NPM, create GH releases and a changelog.
 
-- Every time you do work that requires a new release to be published, [add a changesets entry](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) by running `npx chageset` and follow the instrcutions on screen. (changes that do not require a new release - e.g. changing a test file - don't need a changeset).
+- Every time you do work that requires a new release to be published, [add a changesets entry](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) by running `npx chageset` and follow the instructions on screen. (changes that do not require a new release - e.g. changing a test file - don’t need a changeset).
     - When opening a PR without a corresponding changeset the [changesets-bot](https://github.com/apps/changeset-bot) will remind you to do so. It generally makes sense to have one changeset for PR (if the PR changes do not require a new release to be published the bot message can be safely ignored)
 - The [release github workflow](.github/workflows/release.yml) continuosly check if there are new pending changesets in the main branch, if there are it creates a GH PR (`chore(release)` [see example](https://github.com/StackExchange/apca-check/pull/2)) and continue updating it as more changesets are potentially pushed/merged to the main branch.
 - When we are ready to cut a release we need to simply merge the `chore(release)` PR back to main and the release github workflow will take care of publishing the changes to NPM and create a GH release for us. The `chore(release)` PR also give us an opportunity to adjust the automatically generated changelog when necessary (the entry in the changelog file is also what will end up in the GH release notes).

adrs/0001-pseudo-private-custom-properties.md

@@ -125,7 +125,7 @@ Defining a structure for component styles using pseudo-private custom properties
 Inspiration for this approach initially came from [Lea Verou’s presentation titled “CSS Variable Secrets at CSS Day 2022](https://youtu.be/ZuZizqDF4q8)
 
 ### See also
-[Stacks components _style-template.less](https://github.com/StackExchange/Stacks/blob/develop/lib/css/components/_styles-template.less)
+[Stacks components _style-template.less](https://github.com/StackExchange/Stacks/blob/develop/packages/stacks-classic/lib/css/components/_styles-template.less)
 
 [Stacks discussion on pseudo-private custom properties on GitHub](https://github.com/StackExchange/Stacks/pull/1091#issuecomment-1274947752)
 

adrs/0003-monorepo.md

@@ -2,6 +2,8 @@
 
 **Date:** 2022-11-28
 
+**Updated:** 2025-08-26
+
 **Related PR:** #1191
 
 ## Issue
@@ -29,6 +31,8 @@ We'd also be able to fold the [Stacks-Icons](https://github.com/StackExchange/St
 
 On the technical front, we could manage the monorepo with [npm workspaces](https://docs.npmjs.com/cli/v9/using-npm/workspaces?v=true) or another dedicated tool such as [Rush](https://rushjs.io/pages/intro/welcome/), [Lerna](https://lerna.js.org/) or [Bit](https://bit.dev/).
 
-In regards to changelog / release notes generation, we'd continue using Conventional Commits, but moving to use [release-please](https://github.com/googleapis/release-please) which [does support monorepos](https://github.com/googleapis/release-please/blob/main/docs/manifest-releaser.md).
+In regards to changelog / release notes generation, we'd continue using Conventional Commits, but moving to use [changesets](https://github.com/changesets/changesets) which [does support monorepos](https://github.com/changesets/changesets/blob/main/docs/problems-publishing-in-monorepos.md).
+
+## Timing
 
-For backwards compatibility, we can trivially create a `@stackoverflow/stacks` "meta-package" that simply imports, then re-exports the dependency packages.
+With project SHINE on the horizon, we will be making drastic changes to the Stacks framework to accommodate the new design language we are adopting. So we will take the time as part of project SHINE to start moving Stacks into a monorepo setup for all the reasons outlined above.