.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

.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

.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);

.github/actions/file-diff/package.json

@@ -1,13 +1,13 @@
 {
   "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",
   "main": "index.js",
   "dependencies": {
-    "@actions/artifact": "^2.2.0",
+    "@actions/artifact": "^2.2.1",
     "@actions/core": "^1.11.1",
     "@actions/github": "^6.0.0",
     "@actions/glob": "^0.5.0",

.github/workflows/lint.yml

@@ -86,7 +86,7 @@ jobs:
                   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

.storybook/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Change Log
 
+## 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

.storybook/blocks/ColorPalette.jsx

@@ -1,83 +1,18 @@
 import { ResetWrapper } from "@storybook/components";
-import { styled } from "@storybook/theming";
 import { capitalize } from "lodash-es";
 import React from "react";
-import { ThemeContainer } from "./ThemeContainer";
-import { Body, Heading } from "./Typography";
+import { List } from "./Layouts.jsx";
+import {
+	Swatch,
+	SwatchColors,
+	SwatchGroup,
+	SwatchGroupLabel,
+	SwatchSet,
+} from "./Swatches.jsx";
+import { ThemeContainer } from "./ThemeContainer.jsx";
+import { Body, Heading } from "./Typography.jsx";
 import { fetchToken } from "./utilities.js";
 
-export const SwatchGroupLabel = styled.div`
-	display: flex;
-	flex-direction: column;
-	margin-top: 16px;
-	align-self: flex-start;
-	justify-content: center;
-	text-wrap: nowrap;
-	inline-size: max-content;
-	block-size: ${props => props.size ?? 32}px;
-	color: ${props => `var(--spectrum-neutral-subdued-content-color-default, ${props.theme.defaultText})`};
-`;
-
-export const SwatchSet = styled.div`
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 2px;
-	color: ${props => `var(--spectrum-neutral-subdued-content-color-default, ${props.theme.defaultText})`};
-`;
-
-export const Swatch = styled.div`
-	position: relative;
-	inline-size: var(--swatch-size, ${props => props.size ?? 32}px);
-	block-size: var(--swatch-size, ${props => props.size ?? 32}px);
-	outline: none;
-	user-select: none;
-
-	&::before {
-		position: absolute;
-		inset: 0;
-		inline-size: 100%;
-		block-size: 100%;
-		content: "";
-		opacity: 1;
-
-		border: 1px solid rgba(0, 0, 0, 51%);
-
-		border-radius: ${props => `${props.theme.appBorderRadius}px` ?? `var(--spectrum-corner-radius-100, 4px)`};
-		${props => props.background && `background: ${props.background};`}
-	}
-
-	.spectrum--dark &::before,
-	.spectrum--darkest &::before {
-		border-color: rgba(255, 255, 255, 51%);
-	}
-`;
-
-export const SwatchColors = styled.div`
-	display: inline-flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: ${props => props.size > 0 ? (props.size * 0.2) : 8}px;
-	align-items: flex-start;
-	justify-content: flex-start;
-`;
-
-export const SwatchGroup = styled.div`
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-`;
-
-const List = styled.div`
-	display: grid;
-	gap: 24px;
-	grid-template-columns: 1fr auto;
-	grid-template-rows: auto;
-	align-items: center;
-	justify-content: center;
-`;
-
 /**
  * A single color row your styleguide showing title, subtitle and one or more colors, used
  * as a child of `ColorPalette`.

.storybook/blocks/ComponentDetails.jsx

@@ -2,82 +2,15 @@ import { useOf } from '@storybook/blocks';
 import { ResetWrapper } from "@storybook/components";
 import { styled } from "@storybook/theming";
 import React, { useEffect, useState } from "react";
+
+import { Body, Code, Heading } from "./Typography.jsx";
+import { DDefinition, DList, DTerm } from "./Layouts.jsx";
+import { fetchToken } from "./utilities.js";
+
 import AdobeSVG from "../assets/images/adobe_logo.svg?raw";
 import GitHubSVG from "../assets/images/github_logo.svg?raw";
 import NpmSVG from "../assets/images/npm_logo.svg?raw";
 import WCSVG from "../assets/images/wc_logo.svg?raw";
-import { Body, Code, Heading } from "./Typography.jsx";
-import { fetchToken } from "./utilities.js";
-
-export const DList = styled.dl`
-	display: grid;
-	grid-template-columns: max-content 1fr;
-	column-gap: 20px;
-	row-gap: 14px;
-	padding-block: 0.75rem;
-	margin-block: 0.5rem 2.5rem;
-	border-block: ${props => !props.skipBorder ? "1px solid hsla(203deg, 50%, 30%, 15%)" : "0"};
-
-	& & {
-		border-block: 0px;
-		margin-block: 0;
-		padding-inline-start: 0.75rem;
-		padding-block-start: 0.25rem;
-	}
-
-	details > & {
-		margin-inline-start: 12px;
-	}
-`;
-
-export const DTerm = styled.dt`
-	font-weight: ${props => props.theme.typography.weight.bold ?? "bold"};
-	padding: 0;
-	margin: 0;
-	font-size: ${props => props.theme.typography.size.s};
-`;
-
-export const Details = styled.details`
-	cursor: pointer;
-	grid-column: 1 / 3;
-	padding: 0;
-
-	&[open] > summary::before {
-		transform: rotate(90deg);
-	}
-`;
-
-export const Summary = styled.summary`
-	display: inline-flex;
-	align-items: center;
-	font-weight: ${props => props.theme.typography.weight.bold ?? "bold"};
-	padding: 0;
-	padding-block-end: 0.75rem;
-	margin: 0;
-	font-size: ${props => props.theme.typography.size.s};
-	list-style: none;
-
-	&::-webkit-details-marker {
-		display: none;
-	}
-
-	&::before {
-		content: '';
-		width: 10px;
-		height: 10px;
-		background-image: url('data:image/svg+xml,<svg focusable="false" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3 9.95a.875.875 0 0 1-.615-1.498L5.88 5 2.385 1.547A.875.875 0 0 1 3.615.302L7.74 4.377a.876.876 0 0 1 0 1.246L3.615 9.698A.87.87 0 0 1 3 9.95"></path></svg>');
-		background-size: cover;
-		margin-inline-end: .75em;
-		transition: 0.2s;
-	}
-`;
-
-export const DDefinition = styled.dd`
-	font-style: normal;
-	padding: 0;
-	margin: 0;
-	font-size: ${props => props.theme.typography.size.s};
-`;
 
 export const DSet = ({ term, children }) => {
 	return (