feat(menu): s2 migration

.changeset/eight-spiders-help.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/calendar": patch
+"@spectrum-css/combobox": patch
+"@spectrum-css/datepicker": patch
+"@spectrum-css/menu": patch
+"@spectrum-css/picker": patch
+"@spectrum-css/slider": patch
+"@spectrum-css/stepper": patch
+---
+
+Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions.

.changeset/eleven-cooks-destroy.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/tokens": patch
+---
+
+Uses the latest release from Spectrum Tokens (13.0.0-beta.35)

.changeset/fresh-seahorses-join.md

@@ -0,0 +1,8 @@
+---
+"@spectrum-css/button": patch
+---
+
+#### refactor: remove spectrum-ButtonWithFocusRing placeholder class extend
+
+Removes the need for the extend from this placeholder class, as the styles it provides have diverged slightly from what is in button and it was causing some unnecessary CSS to override.
+This should not result in any changed visuals or behavior, as the same CSS has been integrated.

.changeset/friendly-brooms-itch.md

@@ -0,0 +1,44 @@
+---
+"@spectrum-css/menu": major
+"@spectrum-css/popover": minor
+"@spectrum-css/tray": minor
+"@spectrum-css/tokens": patch
+---
+
+Removes custom menu item background color tokens: Since `@adobe/spectrum-tokens` has been updated to include many tokens relating to the menu component, including some that replace custom tokens that had previously been added. As such, these custom menu item color tokens that are now available from `@adobe/spectrum-tokens` have been removed.
+
+Spectrum 2 Menu migration:
+
+In addition to small token and minor style changes, there were several new features that were added to this version of menu, including:
+
+- A thumbnail can now be added to the menu item label
+- A section description can now be added below the menu section heading
+- The actions area previously held value text, action switches for multi-select, and the drill-in for a submenu--in this version, an external link action can now be added
+- Menu items now receive corner rounding, which is visible on hover/focus/active states
+- The focus indicator has been updated--instead of a blue line on the left (start side) of the menu item, the whole element now receives an outline
+- Menu items now have the S2 down state transform
+
+In order to accommodate menu item focus outlines, horizontal padding has been added to popover and tray.
+
+The following mods have been added:
+
+- `--mod-menu-item-corner-rounding`
+- `--mod-menu-item-description-font-weight`
+- `--mod-menu-item-label-font-weight`
+- `--mod-menu-item-thumbnail-height`
+- `--mod-menu-item-thumbnail-opacity-disabled`
+- `--mod-menu-item-thumbnail-to-label`
+- `--mod-menu-item-thumbnail-width`
+- `--mod-menu-item-top-to-drillin`
+- `--mod-menu-item-top-to-icon`
+- `--mod-menu-item-top-to-thumbnail`
+- `--mod-menu-linkout-icon-height`
+- `--mod-menu-linkout-icon-width`
+- `--mod-menu-section-description-color`
+- `--mod-menu-section-description-font-size`
+- `--mod-menu-section-description-font-weight`
+- `--mod-menu-section-description-line-height`
+- `--mod-menu-section-description-line-height-cjk`
+- `--mod-menu-section-header-to-description`
+- `--mod-popover-content-area-spacing-horizontal`
+- `--mod-tray-edge-to-content-area`

.changeset/nine-kings-repair.md

@@ -0,0 +1,15 @@
+---
+"@spectrum-css/button": major
+---
+
+#### Spectrum 2 migration
+Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes:
+- Outline buttons are no longer available in accent and negative options — use the filled variant instead.
+- Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed.
+- The `.spectrum-Button--fill` class is no longer needed and has been removed.
+
+The following `--mod` custom properties have been renamed:
+- `--mod-line-height-100` has been renamed to `--mod-button-line-height`
+- `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`
+- `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`
+- `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`

.changeset/perfect-dogs-smash.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/button": patch
+---
+
+chore: run branch through formatter

.changeset/pre.json

@@ -0,0 +1,110 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@spectrum-tools/gh-action-file-diff": "2.0.5",
+    "@spectrum-css/preview": "8.1.0-next.1",
+    "@spectrum-css/accordion": "4.2.7-next.2",
+    "@spectrum-css/actionbar": "7.2.5-next.2",
+    "@spectrum-css/actionbutton": "5.2.7-next.2",
+    "@spectrum-css/actiongroup": "5.0.0-next.3",
+    "@spectrum-css/actionmenu": "5.1.4-next.2",
+    "@spectrum-css/alertbanner": "1.1.42-next.2",
+    "@spectrum-css/alertdialog": "1.2.5-next.2",
+    "@spectrum-css/asset": "4.0.1-next.2",
+    "@spectrum-css/assetcard": "3.1.5-next.2",
+    "@spectrum-css/assetlist": "5.2.5-next.2",
+    "@spectrum-css/avatar": "6.1.6-next.2",
+    "@spectrum-css/badge": "3.2.6-next.2",
+    "@spectrum-css/breadcrumb": "8.2.6-next.2",
+    "@spectrum-css/button": "14.0.0-next.4",
+    "@spectrum-css/buttongroup": "7.0.0-next.3",
+    "@spectrum-css/calendar": "4.2.6-next.2",
+    "@spectrum-css/card": "7.0.3-next.2",
+    "@spectrum-css/checkbox": "14.0.0-next.4",
+    "@spectrum-css/clearbutton": "5.1.5-next.2",
+    "@spectrum-css/closebutton": "5.0.0-next.2",
+    "@spectrum-css/coachindicator": "1.1.6-next.2",
+    "@spectrum-css/coachmark": "6.1.6-next.2",
+    "@spectrum-css/colorarea": "4.1.6-next.2",
+    "@spectrum-css/colorhandle": "7.1.5-next.2",
+    "@spectrum-css/colorloupe": "4.2.5-next.2",
+    "@spectrum-css/colorslider": "5.1.6-next.2",
+    "@spectrum-css/colorwheel": "3.1.6-next.2",
+    "@spectrum-css/combobox": "2.1.7-next.2",
+    "@spectrum-css/commons": "9.1.4-next.1",
+    "@spectrum-css/contextualhelp": "2.1.6-next.2",
+    "@spectrum-css/datepicker": "2.1.5-next.2",
+    "@spectrum-css/dial": "2.2.5-next.2",
+    "@spectrum-css/dialog": "9.2.5-next.2",
+    "@spectrum-css/divider": "2.2.6-next.2",
+    "@spectrum-css/dropindicator": "4.1.5-next.2",
+    "@spectrum-css/dropzone": "5.2.6-next.2",
+    "@spectrum-css/fieldgroup": "4.2.5-next.2",
+    "@spectrum-css/fieldlabel": "8.0.0-next.2",
+    "@spectrum-css/floatingactionbutton": "1.2.6-next.2",
+    "@spectrum-css/helptext": "4.1.6-next.2",
+    "@spectrum-css/icon": "6.0.6-next.2",
+    "@spectrum-css/illustratedmessage": "6.1.6-next.2",
+    "@spectrum-css/infieldbutton": "4.2.5-next.2",
+    "@spectrum-css/inlinealert": "7.1.7-next.2",
+    "@spectrum-css/link": "4.2.6-next.2",
+    "@spectrum-css/logicbutton": "3.3.5-next.2",
+    "@spectrum-css/menu": "6.1.6-next.2",
+    "@spectrum-css/miller": "5.1.5-next.2",
+    "@spectrum-css/modal": "4.2.7-next.2",
+    "@spectrum-css/opacitycheckerboard": "1.1.6-next.2",
+    "@spectrum-css/page": "7.1.5-next.2",
+    "@spectrum-css/pagination": "7.1.7-next.2",
+    "@spectrum-css/picker": "7.2.8-next.2",
+    "@spectrum-css/pickerbutton": "4.1.6-next.2",
+    "@spectrum-css/popover": "6.2.6-next.2",
+    "@spectrum-css/progressbar": "3.1.6-next.2",
+    "@spectrum-css/progresscircle": "2.2.4-next.2",
+    "@spectrum-css/radio": "8.1.6-next.2",
+    "@spectrum-css/rating": "4.2.5-next.2",
+    "@spectrum-css/search": "6.2.5-next.2",
+    "@spectrum-css/sidenav": "4.2.5-next.2",
+    "@spectrum-css/site": "4.2.5-next.2",
+    "@spectrum-css/slider": "4.3.6-next.2",
+    "@spectrum-css/splitview": "4.2.5-next.2",
+    "@spectrum-css/statuslight": "6.1.7-next.2",
+    "@spectrum-css/steplist": "4.1.5-next.2",
+    "@spectrum-css/stepper": "5.1.6-next.2",
+    "@spectrum-css/swatch": "5.1.6-next.2",
+    "@spectrum-css/swatchgroup": "2.1.6-next.2",
+    "@spectrum-css/switch": "4.2.6-next.2",
+    "@spectrum-css/table": "5.2.6-next.2",
+    "@spectrum-css/tabs": "4.1.5-next.2",
+    "@spectrum-css/tag": "8.1.6-next.2",
+    "@spectrum-css/taggroup": "4.1.6-next.2",
+    "@spectrum-css/textfield": "6.1.7-next.2",
+    "@spectrum-css/thumbnail": "5.2.5-next.2",
+    "@spectrum-css/toast": "9.1.26-next.2",
+    "@spectrum-css/tooltip": "5.3.6-next.2",
+    "@spectrum-css/tray": "2.2.8-next.2",
+    "@spectrum-css/treeview": "9.2.7-next.2",
+    "@spectrum-css/typography": "5.1.6-next.2",
+    "@spectrum-css/underlay": "3.2.5-next.2",
+    "@spectrum-css/well": "4.1.5-next.2",
+    "@spectrum-css/generator": "3.0.0",
+    "conventional-changelog-spectrum": "1.0.2",
+    "postcss-combininator": "2.0.0",
+    "postcss-custom-properties-mapping": "2.0.0",
+    "postcss-splitinator": "2.0.0",
+    "@spectrum-tools/stylelint-no-missing-var": "1.3.1",
+    "@spectrum-tools/stylelint-no-unknown-custom-properties": "1.3.2",
+    "@spectrum-tools/stylelint-no-unused-custom-properties": "1.3.1",
+    "@spectrum-tools/documentation": "1.0.0",
+    "@spectrum-css/tokens": "14.0.0-next.6",
+    "@spectrum-css/ui-icons": "1.1.2"
+  },
+  "changesets": [
+    "eleven-cooks-destroy",
+    "fresh-seahorses-join",
+    "nine-kings-repair",
+    "perfect-dogs-smash",
+    "pretty-parents-drum",
+    "proud-jokes-rule"
+  ]
+}

.changeset/pretty-parents-drum.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/tokens": patch
+---
+
+use [email protected]

.changeset/proud-jokes-rule.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/progressbar": major
+---
+
+feat(progressbar): S2 migration
+
+Progress bar now uses Spectrum 2 tokens and specifications. This migration includes updated colors, font sizes, and spacing. No mods were harmed in the migration of this component (all `--mod` properties remain the same).

.changeset/silly-ties-attend.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/menu": patch
+---
+
+Prevents overlap of checkbox and icon if both are used in a menu item.
+
+Also reduces a significant number of variants by consolidating menus, includes a refactor to enhance menu item understanding, and expands Chromatic testing coverage.

.storybook/CHANGELOG.md

@@ -86,7 +86,12 @@ This component has been deprecated. Use an action bar to allow users to perform
 ##7.4.2
 🗓
 2024-02-06
+<a name="7.4.2-next.0"></a>
+##7.4.2-next.0
+🗓
+2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
 
+**Note:** Spectrum 2 next version
 **Note:** Version bump only for package @spectrum-css/preview
 
 <a name="7.4.1"></a>

.storybook/assets/base.css

@@ -22,13 +22,28 @@ body {
 }
 
 .spectrum {
+	/* ---- Storybook only custom properties ---- */
+	/* Gradient that changes with the color theme. */
+	--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
+	/* Gradients that do not change with the color theme, for use in static color backgrounds. */
+	--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255));
+	--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67));
+
 	background-color: var(--spectrum-background-layer-1-color);
 
 	/* @todo: add back the text color and update VRTs */
 	/* color: var(--spectrum-neutral-content-color-default); */
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
 }
 
+.spectrum .spectrum-examples-static-black {
+	background: var(--spectrum-examples-gradient-static-black);
+}
+
+.spectrum .spectrum-examples-static-white {
+	background: var(--spectrum-examples-gradient-static-white)
+}
+
 /* Hide the SVG elements that only include references */
 svg:has(symbol):not(:has(use)) {
 	display: none;

.storybook/decorators/contextsWrapper.js

@@ -27,7 +27,7 @@ export const withContextWrapper = makeDecorator({
 		/** @type string */
 		const scale = args.scale ? args.scale : getDefaultValue(argTypes.scale) ?? "medium";
 
-		const colors = ["light", "dark", "darkest"];
+		const colors = ["light", "dark"];
 		const scales = ["medium", "large"];
 
 		useEffect(() => {
@@ -54,18 +54,18 @@ export const withContextWrapper = makeDecorator({
 					container.classList.toggle(`spectrum--${s}`, s === scale);
 				}
 
-
-				container.style.removeProperty("background");
-				const hasStaticElement = container.querySelector(`.${args.rootClass}--staticWhite, .${args.rootClass}--staticBlack, .${args.rootClass}--overBackground`);
-				if (hasStaticElement) {
-					if (container.querySelector(`.${args.rootClass}--staticBlack`)) {
-						container.style.background = "rgb(181, 209, 211)";
-					} else if (container.querySelector(`.${args.rootClass}--staticWhite, .${args.rootClass}--overBackground`)) {
-						container.style.background = "rgb(15, 121, 125)";
-					}
+				// Change background color when demonstrating static color options.
+				if (args.staticColor === "black") {
+					container.style.background = "var(--spectrum-examples-gradient-static-black)";
+				}
+				else if (args.staticColor === "white" || args.isStaticWhite === true) {
+					container.style.background = "var(--spectrum-examples-gradient-static-white)";
+				}
+				else {
+					container.style.removeProperty("background");
 				}
 			}
-		}, [color, scale, isExpress, args.staticColor]);
+		}, [color, scale, isExpress, args.staticColor, args.isStaticWhite]);
 
 		return StoryFn(context);
 	},

.storybook/decorators/index.js

@@ -2,6 +2,7 @@ import { makeDecorator, useEffect } from "@storybook/preview-api";
 import { html } from "lit";
 
 export { withContextWrapper } from "./contextsWrapper.js";
+export { withDownStateDimensionCapture } from "./withDownStateDimensionCapture.js";
 export { withTestingPreviewWrapper } from "./withTestingPreviewWrapper.js";
 
 /**

.storybook/decorators/withDownStateDimensionCapture.js

@@ -0,0 +1,19 @@
+export const withDownStateDimensionCapture = (selector) => (Story, context) => {
+  const captureDownStateDimensions = () => {
+    const components = document.querySelectorAll(selector);
+    components.forEach((component) => {
+      const { width, height } = component.getBoundingClientRect();
+      component.style.setProperty('--spectrum-downstate-width', `${width}px`);
+      component.style.setProperty('--spectrum-downstate-height', `${height}px`);
+    });
+  };
+
+  document.addEventListener("DOMContentLoaded", () => {
+    // Wait to make sure the story is fully rendered (otherwise width/height can be wrong)
+    setTimeout(() => {
+        captureDownStateDimensions();
+    }, 100);
+  });
+
+  return Story(context);
+};