chore: s2 foundations intro release (#3526)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
adobe · Jan 31, 2025 · 4d0b427 · 4d0b427
1 parent d6e4d41
commit 4d0b427
Show file tree

Hide file tree

Showing 179 changed files with 5,932 additions and 3,120 deletions.
diff --git a/.changeset/dull-ears-change.md b/.changeset/dull-ears-change.md
diff --git a/.changeset/funny-pants-perform.md b/.changeset/funny-pants-perform.md
diff --git a/.changeset/mean-adults-scream.md b/.changeset/mean-adults-scream.md
diff --git a/.changeset/metal-walls-scream.md b/.changeset/metal-walls-scream.md
diff --git a/.changeset/wise-otters-burn.md b/.changeset/wise-otters-burn.md
diff --git a/.storybook/CHANGELOG.md b/.storybook/CHANGELOG.md
@@ -1,5 +1,31 @@
 # 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

diff --git a/.storybook/package.json b/.storybook/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@spectrum-css/preview",
-	"version": "11.0.2",
+	"version": "12.0.0",
 	"description": "A Spectrum CSS preview",
 	"license": "Apache-2.0",
 	"author": "Adobe",

diff --git a/components/accordion/CHANGELOG.md b/components/accordion/CHANGELOG.md
@@ -1,5 +1,39 @@
 # Change Log
 
+## 7.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 major update creates a bridge between the Spectrum 1 (S1) and Spectrum 2 (S2) designs, dubbed "Spectrum 2 Foundations". These do _NOT_ reflect a fully migrated S2 component. This approach allows consumers to swap the appearance of their components between S1, Express, and S2 by leveraging a "system" layer that remaps the necessary component-level tokens to the appropriate token dataset.
+
+  For these components to appear S2, you must load the assets with the `@spectrum-css/tokens` at `v16` or higher.
+
+  For S1 or Express, load assets with the `@spectrum-css/tokens` at `v14.x` or `v15.x`.
+
+  If you are looking to implement a fully S2 design, please explore the `next` tag releases instead of using this foundations release. **This release is used in Spectrum Web Components 1.x**.
+
+  ### Deprecations
+
+  The `metadata` folder containing the `mods.md` and `metadata.json` assets has been removed from source. To find information about the components including what selectors, modifiers, and passthroughs are used, please see the `dist/metadata.json` asset shipped with every component containing CSS.
+
+  The `index-vars.css` asset has been removed in this release as it was previously deprecated and is no longer maintained. Please use the `index.css` or `index-base.css`
+
+  ### File usage
+
+  If you are rendering components and need **only** the S2 Foundations styles, you can make use of the `index.css` asset which contains all the base styles plus the system mappings for S2 Foundations.
+
+  If you are using this version to publish **only** an S1 or Express component, you can use the `index-base.css` plus the desired `themes/(spectrum|express).css` file.
+
+  To render a component that can be easily swapped between the S2 Foundations, S1, or Express contexts, load `index-base.css` with the `index-theme.css` file and leverage the appropriate context classes (`.spectrum--legacy` for S1 and `.spectrum--express` for Express).
+
+### 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/icon@9.0.0
+
 ## 6.0.1
 
 ### Patch Changes

diff --git a/components/accordion/package.json b/components/accordion/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@spectrum-css/accordion",
-	"version": "6.0.1",
+	"version": "7.0.0",
 	"description": "The Spectrum CSS accordion component",
 	"license": "Apache-2.0",
 	"author": "Adobe",
@@ -29,8 +29,8 @@
 		"@spectrum-css/tokens": ">=14 || >=15"
 	},
 	"devDependencies": {
-		"@spectrum-css/icon": "8.0.1",
-		"@spectrum-css/tokens": "15.2.0",
+		"@spectrum-css/icon": "9.0.0",
+		"@spectrum-css/tokens": "16.0.0",
 		"eslint": "^8.57.0",
 		"npm-run-all2": "^7.0.2",
 		"prettier": "^3.4.2",

diff --git a/components/actionbar/CHANGELOG.md b/components/actionbar/CHANGELOG.md
@@ -1,5 +1,42 @@
 # Change Log
 
+## 10.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 major update creates a bridge between the Spectrum 1 (S1) and Spectrum 2 (S2) designs, dubbed "Spectrum 2 Foundations". These do _NOT_ reflect a fully migrated S2 component. This approach allows consumers to swap the appearance of their components between S1, Express, and S2 by leveraging a "system" layer that remaps the necessary component-level tokens to the appropriate token dataset.
+
+  For these components to appear S2, you must load the assets with the `@spectrum-css/tokens` at `v16` or higher.
+
+  For S1 or Express, load assets with the `@spectrum-css/tokens` at `v14.x` or `v15.x`.
+
+  If you are looking to implement a fully S2 design, please explore the `next` tag releases instead of using this foundations release. **This release is used in Spectrum Web Components 1.x**.
+
+  ### Deprecations
+
+  The `metadata` folder containing the `mods.md` and `metadata.json` assets has been removed from source. To find information about the components including what selectors, modifiers, and passthroughs are used, please see the `dist/metadata.json` asset shipped with every component containing CSS.
+
+  The `index-vars.css` asset has been removed in this release as it was previously deprecated and is no longer maintained. Please use the `index.css` or `index-base.css`
+
+  ### File usage
+
+  If you are rendering components and need **only** the S2 Foundations styles, you can make use of the `index.css` asset which contains all the base styles plus the system mappings for S2 Foundations.
+
+  If you are using this version to publish **only** an S1 or Express component, you can use the `index-base.css` plus the desired `themes/(spectrum|express).css` file.
+
+  To render a component that can be easily swapped between the S2 Foundations, S1, or Express contexts, load `index-base.css` with the `index-theme.css` file and leverage the appropriate context classes (`.spectrum--legacy` for S1 and `.spectrum--express` for Express).
+
+### 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/actiongroup@6.0.0
+  - @spectrum-css/closebutton@6.0.0
+  - @spectrum-css/fieldlabel@10.0.0
+  - @spectrum-css/popover@8.0.0
+
 ## 9.0.1
 
 ### Patch Changes

diff --git a/components/actionbar/package.json b/components/actionbar/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@spectrum-css/actionbar",
-	"version": "9.0.1",
+	"version": "10.0.0",
 	"description": "The Spectrum CSS actionbar component",
 	"license": "Apache-2.0",
 	"author": "Adobe",
@@ -32,11 +32,11 @@
 		"@spectrum-css/tokens": ">=14 || >=15"
 	},
 	"devDependencies": {
-		"@spectrum-css/actiongroup": "5.3.1",
-		"@spectrum-css/closebutton": "5.4.1",
-		"@spectrum-css/fieldlabel": "9.0.1",
-		"@spectrum-css/popover": "7.3.1",
-		"@spectrum-css/tokens": "15.2.0",
+		"@spectrum-css/actiongroup": "6.0.0",
+		"@spectrum-css/closebutton": "6.0.0",
+		"@spectrum-css/fieldlabel": "10.0.0",
+		"@spectrum-css/popover": "8.0.0",
+		"@spectrum-css/tokens": "16.0.0",
 		"eslint": "^8.57.0",
 		"npm-run-all2": "^7.0.2",
 		"prettier": "^3.4.2",

diff --git a/components/actionbutton/CHANGELOG.md b/components/actionbutton/CHANGELOG.md
@@ -1,5 +1,39 @@
 # Change Log
 
+## 7.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 major update creates a bridge between the Spectrum 1 (S1) and Spectrum 2 (S2) designs, dubbed "Spectrum 2 Foundations". These do _NOT_ reflect a fully migrated S2 component. This approach allows consumers to swap the appearance of their components between S1, Express, and S2 by leveraging a "system" layer that remaps the necessary component-level tokens to the appropriate token dataset.
+
+  For these components to appear S2, you must load the assets with the `@spectrum-css/tokens` at `v16` or higher.
+
+  For S1 or Express, load assets with the `@spectrum-css/tokens` at `v14.x` or `v15.x`.
+
+  If you are looking to implement a fully S2 design, please explore the `next` tag releases instead of using this foundations release. **This release is used in Spectrum Web Components 1.x**.
+
+  ### Deprecations
+
+  The `metadata` folder containing the `mods.md` and `metadata.json` assets has been removed from source. To find information about the components including what selectors, modifiers, and passthroughs are used, please see the `dist/metadata.json` asset shipped with every component containing CSS.
+
+  The `index-vars.css` asset has been removed in this release as it was previously deprecated and is no longer maintained. Please use the `index.css` or `index-base.css`
+
+  ### File usage
+
+  If you are rendering components and need **only** the S2 Foundations styles, you can make use of the `index.css` asset which contains all the base styles plus the system mappings for S2 Foundations.
+
+  If you are using this version to publish **only** an S1 or Express component, you can use the `index-base.css` plus the desired `themes/(spectrum|express).css` file.
+
+  To render a component that can be easily swapped between the S2 Foundations, S1, or Express contexts, load `index-base.css` with the `index-theme.css` file and leverage the appropriate context classes (`.spectrum--legacy` for S1 and `.spectrum--express` for Express).
+
+### 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/icon@9.0.0
+
 ## 6.3.1
 
 ### Patch Changes

diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@spectrum-css/actionbutton",
-	"version": "6.3.1",
+	"version": "7.0.0",
 	"description": "The Spectrum CSS action button component",
 	"license": "Apache-2.0",
 	"author": "Adobe",
@@ -35,8 +35,8 @@
 	},
 	"devDependencies": {
 		"@spectrum-css/commons": "workspace:^",
-		"@spectrum-css/icon": "8.0.1",
-		"@spectrum-css/tokens": "15.2.0",
+		"@spectrum-css/icon": "9.0.0",
+		"@spectrum-css/tokens": "16.0.0",
 		"eslint": "^8.57.0",
 		"npm-run-all2": "^7.0.2",
 		"prettier": "^3.4.2",