chore(s2): grabbing new changes

Author: aramos-adobe

.changeset/clever-otters-mix.md

@@ -0,0 +1,25 @@
+---
+"@spectrum-css/infieldbutton": minor
+"@spectrum-css/logicbutton": minor
+"@spectrum-css/progressbar": minor
+"@spectrum-css/colorwheel": minor
+"@spectrum-css/assetcard": minor
+"@spectrum-css/colorarea": minor
+"@spectrum-css/calendar": minor
+"@spectrum-css/checkbox": minor
+"@spectrum-css/underlay": minor
+"@spectrum-css/stepper": minor
+"@spectrum-css/button": minor
+"@spectrum-css/modal": minor
+"@spectrum-css/radio": minor
+"@spectrum-css/table": minor
+"@spectrum-css/card": minor
+"@spectrum-css/site": minor
+"@spectrum-css/tokens": minor
+---
+
+This resolves our remaining stylelint issues around undefined tokens, rule order, unused values and color syntax.
+
+- Updates invalid color syntax from `rgba(N, N, N, N)` to `rgba(N N N / N)`.
+- In cases of duplicate properties, preserves the property that would be applied given current code structure.
+- Updates misnamed tokens to use valid tokens (`table/index.css`).

.changeset/itchy-kids-travel.md

@@ -0,0 +1,24 @@
+---
+"@spectrum-css/progresscircle": major
+---
+
+## Progress circle S2 migration
+
+This is the S2 migration of the progress circle. The original markup has changed to an svg and circle element to allow CSS styles such as `stroke-linecap`. This was necessary to match the design. The `--small/--medium/--large` sizing classes have been deprecated in favor of t-shirt classes `--sizeS/--sizeM/--sizeL`
+
+### Animation
+
+`@keyframes spectrum-dashoffset-animation`:
+This animation was created by React Spectrum and used to keep the same speed and bezier curve.
+
+### Added tokens
+
+### Removed styles & mods
+
+`--spectrum-progress-circle-track-border-color-over-background`
+`--spectrum-progress-circle-fill-border-color-over-background`
+`--spectrum-progress-circle-track-border-style`
+`--spectrum-progress-circle-track-border-style`
+`--highcontrast-progress-circle-track-border-style`
+`--mod-progress-circle-track-border-style`
+`--spectrum-progress-circle-track-border-style`

.changeset/strong-actors-warn.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/textfield": patch
+---
+
+Updated the textfield border radius and background-color and added the respective `--mod` property.

.github/workflows/lint.yml

@@ -92,7 +92,8 @@ jobs:
                   reporter: github-pr-review
                 #   stylelint_input: "components/*/index.css"
                   stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
-                  stylelint_config: stylelint.config.js
+                  stylelint_config: "${{ github.workspace }}/stylelint.config.js"
+                  packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical'
 
             - name: Run eslint on packages and stories
               uses: reviewdog/action-eslint@v1.33.0

.github/workflows/vrt.yml

@@ -73,7 +73,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

components/button/CHANGELOG.md

@@ -82,7 +82,47 @@ The following `--mod` custom properties have been renamed:
 - `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`
 - `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`
 
-## 14.0.0-next.5
+## 13.1.3
+
+### Patch Changes
+
+- [#3107](https://github.com/adobe/spectrum-css/pull/3107) [`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2) Thanks [@castastrophe](https://github.com/castastrophe)! - Incorporate glob export for the dist directory in all component packages as well as glob markdown exports (to include both CHANGELOG and READMEs).
+
+  Sort keys in the package.json assets.
+
+- Updated dependencies [[`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2)]:
+  - @spectrum-css/progresscircle@3.1.4
+  - @spectrum-css/icon@7.1.4
+
+## 13.1.2
+
+### Patch Changes
+
+- [#3045](https://github.com/adobe/spectrum-css/pull/3045) [`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277) Thanks [@castastrophe](https://github.com/castastrophe)! - Improve changeset suggestions by using exports instead of files in component packages
+
+- Updated dependencies [[`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277)]:
+  - @spectrum-css/progresscircle@3.1.3
+  - @spectrum-css/icon@7.1.3
+
+## 13.1.1
+
+### Patch Changes
+
+- [#2677](https://github.com/adobe/spectrum-css/pull/2677) [`d83200c`](https://github.com/adobe/spectrum-css/commit/d83200ca70a959aa70329e71de0c4383de157855) Thanks [@castastrophe](https://github.com/castastrophe)! - Leveral local workspace versioning to prevent misalignment
+
+- Updated dependencies [[`d83200c`](https://github.com/adobe/spectrum-css/commit/d83200ca70a959aa70329e71de0c4383de157855)]:
+  - @spectrum-css/progresscircle@3.1.1
+  - @spectrum-css/icon@7.1.1
+
+## 13.1.0
+
+### Minor Changes
+
+- [#2616](https://github.com/adobe/spectrum-css/pull/2616) [`7f45ea9`](https://github.com/adobe/spectrum-css/commit/7f45ea95d3d31addf29b0720de8623b0f3f0431d) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+#### Build optmizations to support minification
+
+Output for all component CSS files is now being run through a lightweight optimizer (cssnano) which significantly reduces unnecessary whitespace. These changes reduce file size but should not have any impact on the rendering of the component. By removing unnecessary whitespace from var functions, we are making it easier to effectively minify our provided CSS assets.
 
 <a name="13.0.0"></a>
 

components/checkbox/index.css

@@ -448,8 +448,8 @@
 }
 
 .spectrum-Checkbox-box {
-	/* Fix vertical alignment when not wrapping since we're flex-start */
 	--spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
+
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -458,6 +458,8 @@
 	box-sizing: border-box;
 	inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
 	block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
+
+	/* Fix vertical alignment when not wrapping since we're flex-start */
 	margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0;
 
 	flex-grow: 0;

components/picker/stories/template.js

@@ -64,8 +64,7 @@ export const Picker = ({
 			id=${id}
 			style=${styleMap(customStyles)}
 			type="button"
-			@click=${() => {
-				if (window.isChromatic()) return;
+			@click=${function() {
 				updateArgs({ isOpen: !isOpen });
 			}}
 			aria-labelledby=${ifDefined(ariaLabeledBy)}
@@ -109,6 +108,7 @@ export const Template = ({
 	size = "m",
 	label,
 	labelPosition = "top",
+	placeholder,
 	helpText,
 	isQuiet = false,
 	isOpen = false,
@@ -125,7 +125,7 @@ export const Template = ({
 		// Helps ensure that Popover appears below the Picker, with side labels layout.
 		display: "block",
 	},
-	content = [],
+	popoverContent = [],
 } = {}, context = {}) => {
 	const pickerMarkup = Picker({
 		size,
@@ -134,17 +134,18 @@ export const Template = ({
 		isInvalid,
 		isDisabled,
 		isLoading,
-		content,
+		placeholder,
+		popoverContent,
 		labelPosition,
 		ariaLabeledBy: fieldLabelId,
 	}, context);
 
-	const popoverMarkup = content.length !== 0 ? Popover({
+	const popoverMarkup = popoverContent.length !== 0 ? Popover({
 		isOpen: isOpen && !isDisabled && !isLoading,
 		withTip: false,
 		position: "bottom",
 		isQuiet,
-		content,
+		content: popoverContent,
 		size,
 		customStyles: customPopoverStyles,
 	}, context) : "";
@@ -193,12 +194,6 @@ export const Template = ({
 				}, context)
 			)}
 		</div>`;
-
-	// Make sure there is a wrapper around sibling components when using the Chromatic
-	// template, so their layout is not affected by the flex and grid layouts used.
-	if (window.isChromatic()) {
-		return html`<div style="position: relative;">${markup}</div>`;
-	}
 	return markup;
 };