adobe · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024
Showing 1,006 changed files with 41,971 additions and 28,806 deletions.
diff --git a/.env.example b/.env.example
@@ -3,6 +3,9 @@ CHROMATIC_PROJECT_ID="Project:64762974a45b8bc5ca1705a2"
 # Note: the build script here should be defined in .storybook/package.json
 # this is used by the chromatic storybook addon to build the storybook on the fly
 CHROMATIC_BUILD_SCRIPT_NAME="build"
+CHROMATIC_ONLY_CHANGED=true
+CHROMATIC_STORYBOOK_BASE_DIR=".storybook"
+CHROMATIC_ZIP=true
 
 # NX settings
 NX_PREFER_TS_NODE=true

diff --git a/.github/actions/file-diff/CHANGELOG.md b/.github/actions/file-diff/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.1.0
+
+### Minor Changes
+
+- [#3488](https://github.com/adobe/spectrum-css/pull/3488) [`40c1954`](https://github.com/adobe/spectrum-css/commit/40c1954048f735a07f9edfccf3a568d38164806a) Thanks [@castastrophe](https://github.com/castastrophe)! - Update file table to specify if the file is deleted/moved and indicate the file size has decreased without showing percentages. This update also hardens the way in which the main file is highlighted in the table by checking for exact equals for looking for files "ending with" the file name.
+
 ## 2.0.6
 
 ### Patch Changes

diff --git a/.github/actions/file-diff/index.js b/.github/actions/file-diff/index.js
@@ -175,8 +175,10 @@ async function run() {
 								const removedOnBranch = isRemoved(headByteSize, baseByteSize);
 								// @todo should there be any normalization before comparing the file names?
 								const isMainFile = readableFilename === mainFile;
-								const size = removedOnBranch ? " - " : bytesToSize(headByteSize);
-								const delta = `${printChange(headByteSize, baseByteSize)}${difference(baseByteSize, headByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`;
+								const size = removedOnBranch ? "🚨 deleted/moved" : bytesToSize(headByteSize);
+								const change = !removedOnBranch ? printChange(headByteSize, baseByteSize) : `⬇ ${bytesToSize(baseByteSize)}`;
+								const diff = difference(baseByteSize, headByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : "";
+								const delta = `${change}${removedOnBranch ? "" : diff}`;
 
 								return [
 									...table,
@@ -323,7 +325,13 @@ const makeTable = function (PACKAGES, filePath, path) {
 			if (main) mainFile = main.replace(/^.*\/dist\//, "");
 		}
 
-		const mainFileOnly = [...fileMap.keys()].filter((file) => file.endsWith(mainFile));
+		let mainFileOnly = [...fileMap.keys()].filter((file) => file === mainFile);
+
+		// If no main file is found, look for the first file matching the filename only
+		if (mainFileOnly.length === 0) {
+			mainFileOnly = [...fileMap.keys()].filter((file) => file.endsWith(mainFile));
+		}
+
 		const headMainSize = mainFileOnly.reduce(
 			(acc, filename) => {
 				const { headByteSize = 0 } = fileMap.get(filename);

diff --git a/.github/actions/file-diff/package.json b/.github/actions/file-diff/package.json
@@ -1,18 +1,33 @@
 {
   "private": true,
   "name": "@spectrum-tools/gh-action-file-diff",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "A GitHub Action to compare asset sizes and generate a diff if changes are found.",
   "license": "Apache-2.0",
   "author": "Adobe",
+  "homepage": "https://opensource.adobe.com/spectrum-css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/spectrum-css.git",
+    "directory": ".github/actions/file-diff"
+  },
+  "bugs": {
+    "url": "https://github.com/adobe/spectrum-css/issues"
+  },
   "main": "index.js",
+  "files": [
+    "*.md",
+    "*.js",
+    "*.yml",
+    "package.json"
+  ],
   "dependencies": {
-    "@actions/artifact": "^2.1.11",
+    "@actions/artifact": "^2.2.1",
     "@actions/core": "^1.11.1",
     "@actions/github": "^6.0.0",
     "@actions/glob": "^0.5.0",
     "diff": "^7.0.0",
-    "diff2html": "^3.4.48"
+    "diff2html": "^3.4.51"
   },
   "keywords": [
     "Actions",

diff --git a/.github/actions/file-diff/utilities.js b/.github/actions/file-diff/utilities.js
@@ -165,7 +165,7 @@ exports.fetchFilesAndSizes = async function (rootPath, patterns = [], { core })
         return new Map();
     }
 
-    core.info(`Found ${files.length} files matching the glob pattern ${patterns.join(", ")}.`);
+    core.info(`From ${rootPath}, found ${files.length} files matching the glob pattern ${patterns.join(", ")}.`);
 
     // Fetch the files and their sizes, creates an array of arrays to be used in the table
     return new Map(

diff --git a/.github/workflows/compare-results.yml b/.github/workflows/compare-results.yml
@@ -90,12 +90,14 @@ jobs:
               with:
                   name: ubuntu-latest-node20-compiled-assets-${{ steps.derive-key.outputs.head-path }}
                   path: ${{ github.workspace }}/${{ steps.derive-key.outputs.head-path }}
+                  merge-multiple: true
 
             - name: Download build artifacts for base
               uses: actions/download-artifact@v4
               with:
                   name: ubuntu-latest-node20-compiled-assets-${{ steps.derive-key.outputs.base-path }}
                   path: ${{ github.workspace }}/${{ steps.derive-key.outputs.base-path }}
+                  merge-multiple: true
 
             - name: Compare compiled output file size
               id: compare
@@ -131,7 +133,7 @@ jobs:
                   components/card/dist/index.css
                   components/icon/dist/index.css
                   components/sidenav/dist/index.css
-                  tokens/dist/index.css
+                  tokens/dist/css/index.css
                   node_modules/diff2html/bundles/css/diff2html.min.css
                   node_modules/diff2html/bundles/js/diff2html.min.js
 

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -76,23 +76,29 @@ jobs:
               shell: bash
               run: yarn install --immutable
 
+              # Components must be built before linting so that the custom properties are available
+              # in the dependencies for passthrough and token verification
+            - name: Build components & ui-icons
+              shell: bash
+              run: yarn build
+
             - name: Lint component styles
               if: ${{ inputs.styles_added_files != '' || inputs.styles_modified_files != '' }}
-              uses: reviewdog/action-stylelint@v1.28.0
+              uses: reviewdog/action-stylelint@v1.30.0
               with:
-                  fail_on_error: true
+                  fail_level: error
+                  filter_mode: diff_context
                   level: error
                   reporter: github-pr-review
-                  filter_mode: diff_context
                 #   stylelint_input: "components/*/index.css components/*/themes/*.css"
                   stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
-                  stylelint_config: stylelint.config.js
+                  stylelint_config: "${{ github.workspace }}/stylelint.config.js"
 
             - name: Run eslint on packages and stories
-              uses: reviewdog/action-eslint@v1.31.0
+              uses: reviewdog/action-eslint@v1.33.0
               if: ${{ inputs.eslint_added_files != '' || inputs.eslint_modified_files != '' }}
               with:
-                  fail_on_error: true
+                  fail_level: error
                   level: error
                   reporter: github-pr-review
                   filter_mode: diff_context

diff --git a/.github/workflows/release-snapshot.yml b/.github/workflows/release-snapshot.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: yarn
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -5,7 +5,6 @@ on:
     branches:
       - main
       - spectrum-two
-      - s2-foundations-redux
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -20,9 +19,9 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: yarn
-      
+
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
 

diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml
@@ -62,6 +62,10 @@ jobs:
               shell: bash
               run: yarn install --immutable
 
+            - name: Generate metadata assets
+              shell: bash
+              run: yarn report
+
             - name: Publish to Chromatic
               id: chromatic
               uses: chromaui/action@latest
@@ -73,7 +77,7 @@ jobs:
                   exitOnceUploaded: true
                   onlyChanged: true
                   traceChanged: true
-                  untraced: ".github/actions/*/package.json generator/package.json"
+                  untraced: ".github/* plugins/stylelint-*/* tools/* .changeset/*"
                   diagnostics: true
                   autoAcceptChanges: "main"
                   # Lets VRT pass without running so as not to waste snapshots

diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,6 @@
 dist
-!tokens/dist/index.css
-!tokens/dist/css/*.css
-!tokens/dist/css/express/*.css
-!tokens/dist/css/spectrum/*.css
+!dist/metadata.json
+!tokens/dist/json/*
 
 # Not committing the map assets, these are dev-only
 *.map

diff --git a/.prettierignore b/.prettierignore
@@ -19,3 +19,7 @@ Icon?
 Thumbs.db
 *~
 *.swp
+
+# Test files
+plugins/*/expected/*.css
+plugins/*/fixtures/*.css
diff --git a/.storybook/CHANGELOG.md b/.storybook/CHANGELOG.md
@@ -1,5 +1,92 @@
 # Change Log
 
+## 12.0.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6c19fcf`](https://github.com/adobe/spectrum-css/commit/6c19fcf3f0eda76987f338981ae20f9999febce6) Thanks [@pfulton](https://github.com/pfulton)! - ## Breaking change
+
+  This update removes the previously deprecated component documentation for **cyclebutton**, **quickaction**, **searchwithin**, and **splitbutton**.
+
+  To support the Spectrum 2 (S2) Foundations release, Storybook has been updated to toggle token packages to connect the following labels with their appropriate data sources:
+
+  - **Spectrum 1**: Flagged as the "legacy" context, this version is no longer the default for the component contexts. When selected, Storybook will load the `@spectrum-css/tokens` at release `v14.6.0` and attach the `.spectrum--legacy` class to the container.
+  - **Spectrum 2**: The new default context, this version represents the "S2 Foundations" release which serves as a bridge between S1 and S2. Components in this context are not fully S2 and will not exactly match specifications but they do reflect a significant move toward the S2 designs. For full details, see the token and component-level changelogs.
+  - **Express**: This now deprecated context is still rendered in Storybook by leveraging the `@spectrum-css/tokens` at release `v14.6.0`. Please note that Express and S1 will be removed in the next major release.
+
+  This release also includes:
+
+  - New migration documentation for S1 -> S2 updates
+  - Fix for the duplicate line numbers in the code preview plugin
+  - Updated styles to integrate Spectrum styling into the Storybook UI
+
+### Patch Changes
+
+- Updated dependencies [[`6c19fcf`](https://github.com/adobe/spectrum-css/commit/6c19fcf3f0eda76987f338981ae20f9999febce6), [`3d08cea`](https://github.com/adobe/spectrum-css/commit/3d08cea0f590c8c2de7252677a6b81b8cc206b9a), [`6c19fcf`](https://github.com/adobe/spectrum-css/commit/6c19fcf3f0eda76987f338981ae20f9999febce6)]:
+  - @spectrum-css/tokens@16.0.0
+  - @spectrum-css/table@8.0.0
+
+## 11.0.2
+
+### Patch Changes
+
+- [#3522](https://github.com/adobe/spectrum-css/pull/3522) [`7a47c22`](https://github.com/adobe/spectrum-css/commit/7a47c2266b6d0e8c99061fe85cba8d52684bae39) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor storybook updates and fixes including some whitespace changes.
+
+  A bug was fixed with the HTML code preview that was displaying duplicate line numbers.
+
+  Some key metadata was incorporated into the preview head file for better contextual information when published.
+
+  The remark-gfm dependency was added to support tables in the \*.mdx files for Storybook.
+
+- Updated dependencies [[`7a47c22`](https://github.com/adobe/spectrum-css/commit/7a47c2266b6d0e8c99061fe85cba8d52684bae39), [`7a47c22`](https://github.com/adobe/spectrum-css/commit/7a47c2266b6d0e8c99061fe85cba8d52684bae39)]:
+  - @spectrum-css/tokens@15.2.0
+  - @spectrum-css/table@7.0.1
+
+## 11.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`c8194b0`](https://github.com/adobe/spectrum-css/commit/c8194b0a5b6e115d7db680f287eb8a2a9709906b)]:
+  - @spectrum-css/tokens@15.1.0
+  - @spectrum-css/bundle@1.0.0
+
+## 11.0.0
+
+### Major Changes
+
+- [#3458](https://github.com/adobe/spectrum-css/pull/3458) [`e1b7102`](https://github.com/adobe/spectrum-css/commit/e1b71027f92ce18feb3a63c100d2b4871fc73b9f) Thanks [@castastrophe](https://github.com/castastrophe)! - Update the Chromatic add-on to the currently maintained package:
+
+  - from "@chromaui/addon-visual-tests": "^1.0.0"
+  - to "@chromatic-com/storybook": "^3.2.3"
+
+  This requires an update to the chromatic.config.json settings, removal of the generic argTypesRegex from the preview config, and a stricter import in the doc blocks.
+
+  To support a successful build, our test command must maintain the autodocs and mdx syntax.
+
+## 10.12.1
+
+### Patch Changes
+
+- [#3440](https://github.com/adobe/spectrum-css/pull/3440) [`6808c85`](https://github.com/adobe/spectrum-css/commit/6808c85295d472286c0a52e28d2279b2b5a16f92) Thanks [@castastrophe](https://github.com/castastrophe)! - Fix an issue where "show code" was blocking loading in Storybook docs pages [CSS-1070]
+
+## 10.12.0
+
+### Minor Changes
+
+- [#3477](https://github.com/adobe/spectrum-css/pull/3477) [`d52c701`](https://github.com/adobe/spectrum-css/commit/d52c70196bf2d17433c239313a82f00f75d77e79) Thanks [@castastrophe](https://github.com/castastrophe)! - Update Storybook to leverage the new CSS bundled assets.
+
+### Patch Changes
+
+- Updated dependencies [[`d52c701`](https://github.com/adobe/spectrum-css/commit/d52c70196bf2d17433c239313a82f00f75d77e79)]:
+  - @spectrum-css/bundle@1.0.0
+
+## 10.11.8
+
+### Patch Changes
+
+- Updated dependencies [[`40c1954`](https://github.com/adobe/spectrum-css/commit/40c1954048f735a07f9edfccf3a568d38164806a)]:
+  - @spectrum-css/tokens@15.0.0
+
 ## 10.11.7
 
 ### Patch Changes

diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css
@@ -30,10 +30,15 @@ body {
 
 .spectrum {
 	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-layer-1-color);
+	background-color: var(--spectrum-background-base-color);
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
 }
 
+.spectrum.spectrum--legacy {
+	color: var(--spectrum-neutral-content-color-default);
+	background-color: var(--spectrum-background-layer-1-color);
+}
+
 /* Hide the SVG elements that only include references */
 svg:has(symbol):not(:has(use)) {
 	display: none;

diff --git a/.storybook/assets/favicon.png b/.storybook/assets/favicon.png
diff --git a/.storybook/assets/images/gray_migration-guide.png b/.storybook/assets/images/gray_migration-guide.png
diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css
@@ -26,9 +26,6 @@ body {
 	font-family: var(--spectrum-font-family);
 	font-size: var(--spectrum-font-size);
 	font-style: var(--spectrum-font-style);
-
-	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-layer-2-color);
 }
 
 body:lang(ar) {
@@ -72,15 +69,9 @@ div.sb-bar > div > div > span:first-child {
 	display: none;
 }
 
-div.sb-bar > div > div > div > button {
-	background-color: white !important;
-}
-
 .docblock-argstable-body tr td {
 	letter-spacing: unset;
 	font-size: 11px;
-	color: rgb(34, 34, 34);
-	background-color: rgb(255, 255, 255);
 }
 
 .docblock-argstable-body td > span:has(select),
@@ -128,5 +119,4 @@ select:focus,
 	border-color: rgb(2, 101, 220) !important;
 	box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
 }
-
 /* stylelint-enable selector-class-pattern */