chore: merge remote-tracking branch 'origin/spectrum-two' into background-layers-class-based-approach

Author: castastrophe

.changeset/big-glasses-check.md

@@ -0,0 +1,13 @@
+---
+"@spectrum-css/accordion": major
+"@spectrum-css/actionbar": major
+"@spectrum-css/actiongroup": major
+---
+
+This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.
+
+- Remove all `--mod-*` custom property hooks.
+- Keep existing class selectors and variants unchanged.
+- Update stories to reflect the removal of the `--mod-*` override layer.
+
+Breaking change: the `--mod-*` override layer is removed. Consumers should set `--spectrum-*` variables directly where customization is needed.

.changeset/brave-bikes-teach.md

@@ -0,0 +1,61 @@
+---
+"@spectrum-css/actionmenu": major
+"@spectrum-css/actionbutton": minor
+"@spectrum-css/menu": patch
+"@spectrum-css/actiongroup": patch
+---
+
+### Action menu component (now with custom styles!)
+
+Introduces `@spectrum-css/actionmenu`, a composition of `ActionButton`, `Popover`, and `Menu` to present action lists from a trigger. Now with custom styles!
+
+- Adds wrapper classes: `spectrum-ActionMenu`, `spectrum-ActionMenu-trigger`, `spectrum-ActionMenu-popover`, and `spectrum-ActionMenu-menu`.
+- Supports long press triggers and four placements (start/end, top/bottom) via the underlying popover API.
+- Design reference: [Figma S2 token specs](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=20959-21513&node-type=frame&t=jbePQKK1yLdrHG2M-11).
+
+#### Migration notes
+
+- If you previously composed an action menu manually (action button + popover + menu), you can adopt the new wrapper classes without changing the underlying markup semantics. Ensure the trigger has `aria-haspopup="menu"` and manages `aria-expanded` according to your application logic.
+- For spacing customizations previously done with ad‑hoc margins, switch to the new `--spectrum-actionmenu-button-to-menu-gap` custom property.
+
+Example markup:
+
+```html
+<div class="spectrum-ActionMenu">
+	<button
+		class="spectrum-ActionMenu-trigger spectrum-ActionButton"
+		aria-haspopup="menu"
+		aria-expanded="false"
+	>
+		<!-- icon/label -->
+	</button>
+	<div class="spectrum-ActionMenu-popover spectrum-Popover">
+		<ul class="spectrum-ActionMenu-menu spectrum-Menu">
+			<!-- menu items -->
+		</ul>
+	</div>
+	<!-- popover positioning/visibility is owned by your implementation -->
+	<!-- use long-press behavior when appropriate to your UX -->
+	<!-- use Popover placement options: bottom-start, bottom-end, start-top, end-top -->
+</div>
+```
+
+### Menu refinements
+
+Updates `@spectrum-css/menu` styles to align with latest Spectrum 2 design specifications and improve accessibility.
+
+- Updated `.is-selectableMultiple .spectrum-Menu-itemCheckbox` to `.is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox` to prevent clash with the `.is-selectable` placement.
+- Non-breaking; no class or DOM changes required.
+
+### Action button refinements
+
+- Selection styling now applies when components use ARIA pressed/expanded semantics, not just `.is-selected`.
+- Implemented with `:where()` to keep selector specificity low and prevent downstream specificity battles.
+- Non-breaking; no class changes required.
+
+### Action group refinements
+
+Aligns selection behavior of grouped items with action button updates.
+
+- Adds `:where([aria-pressed="true"], [aria-expanded="true"])` alongside `.is-selected` on items to cover more accessibility use-cases while keeping specificity low.
+- Non-breaking; no class changes required.

.changeset/good-times-dress.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/tokens": patch
+---
+
+Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) [13.15.0](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.15.0) -> [13.15.1](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.15.1).
+
+### Updated
+
+- `--spectrum-standard-panel-gripper-color`: Updated from `var(--spectrum-gray-200)` to `var(--spectrum-gray-500)`.
+
+- [#593](https://github.com/adobe/spectrum-tokens/pull/593) [`1e860c4`](https://github.com/adobe/spectrum-tokens/commit/1e860c4436c58ceca6f4500ea7e24d6d8cdd20c8) Thanks [@mrcjhicks](https://github.com/mrcjhicks)!

.changeset/kind-cycles-check.md

@@ -0,0 +1,6 @@
+---
+"@spectrum-css/preview": minor
+---
+
+- _feature_: Add the `resetArgs` function to the argEvents decorator
+- _fix_: Resolve minor lint warnings in the Storybook CSS assets

.changeset/modern-times-happen.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/popover": patch
+---
+
+Popover positioning "top-left" and "top-right" were using inline properties which caused the spacings to swap in RTL mode. This was unintended as the "right" and "left" naming conventions are meant to retain their location in LTR or RTL mode.

.changeset/pre.json

@@ -32,7 +32,6 @@
     "@spectrum-css/colorslider": "8.0.1",
     "@spectrum-css/colorwheel": "6.0.1",
     "@spectrum-css/combobox": "4.0.1",
-    "@spectrum-css/commons": "11.0.0",
     "@spectrum-css/contextualhelp": "5.0.1",
     "@spectrum-css/datepicker": "4.0.1",
     "@spectrum-css/dial": "5.0.1",
@@ -103,7 +102,9 @@
     "angry-needles-behave",
     "beige-dragons-tickle",
     "big-beds-care",
+    "big-glasses-check",
     "big-jars-pump",
+    "brave-bikes-teach",
     "breezy-impalas-push",
     "calm-hats-sleep",
     "chatty-lands-attack",
@@ -132,6 +133,7 @@
     "friendly-dolls-raise",
     "giant-windows-smoke",
     "gold-cats-hide",
+    "good-times-dress",
     "green-falcons-rush",
     "grumpy-ghosts-serve",
     "healthy-chicken-clap",
@@ -142,6 +144,7 @@
     "itchy-shrimps-help",
     "itchy-waves-work",
     "khaki-icons-hammer",
+    "kind-cycles-check",
     "late-worms-reply",
     "legal-lands-warn",
     "lemon-flowers-poke",
@@ -153,6 +156,7 @@
     "metal-fireants-switch",
     "mighty-pigs-accept",
     "modern-chairs-sit",
+    "modern-times-happen",
     "nasty-rats-rhyme",
     "neat-schools-take",
     "nice-cows-shout",
@@ -191,10 +195,12 @@
     "strange-glasses-allow",
     "strong-pianos-work",
     "stupid-lemons-battle",
+    "sweet-badgers-melt",
     "sweet-brooms-fetch",
     "tame-bobcats-beam",
     "tame-knives-train",
     "tasty-eagles-draw",
+    "tasty-planes-design",
     "thick-ears-win",
     "tiny-candles-win",
     "tiny-taxis-show",

.changeset/sweet-badgers-melt.md

@@ -0,0 +1,14 @@
+---
+"@spectrum-css/accordion": minor
+---
+
+Changes values of `--spectrum-accordion-item-minimum-height` to align more closely with design spec, this affects the minimum height of accordion items for some combinations of size/density by giving them more space.
+
+New accordion minimum heights will use the heights/tokens:
+
+| Size | Compact                     | Regular                     | Spacious                    |
+| ---- | --------------------------- | --------------------------- | --------------------------- |
+| S    | 24px/`component-height-75`  | 32px/`component-height-100` | 40px/`component-height-200` |
+| M    | 32px/`component-height-100` | 40px/`component-height-200` | 48px/`component-height-300` |
+| L    | 40px/`component-height-200` | 48px/`component-height-300` | 56px/`component-height-400` |
+| XL   | 48px/`component-height-300` | 56px/`component-height-400` | 64px/`component-height-500` |

.changeset/tasty-planes-design.md

@@ -0,0 +1,49 @@
+---
+"@spectrum-css/tokens": minor
+---
+
+Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) [13.14.0](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.14.0) -> [13.15.0](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.15.0).
+
+### Newly added
+
+| Token name                                          | Token value                                                     |
+| --------------------------------------------------- | --------------------------------------------------------------- |
+| `--spectrum-static-fuchsia-400`                     | `rgb(247, 181, 255)`                                            |
+| `--spectrum-static-fuchsia-600`                     | `rgb(236, 105, 255)`                                            |
+| `--spectrum-static-fuchsia-800`                     | `rgb(200, 68, 220)`                                             |
+| `--spectrum-static-indigo-400`                      | `rgb(192, 201, 255)`                                            |
+| `--spectrum-static-indigo-600`                      | `rgb(145, 151, 254)`                                            |
+| `--spectrum-static-indigo-800`                      | `rgb(122, 106, 253)`                                            |
+| `--spectrum-static-magenta-400`                     | `rgb(255, 185, 208)`                                            |
+| `--spectrum-static-magenta-600`                     | `rgb(255, 112, 159)`                                            |
+| `--spectrum-static-magenta-800`                     | `rgb(240, 45, 110)`                                             |
+| `--spectrum-static-red-400`                         | `rgb(255, 188, 180)`                                            |
+| `--spectrum-static-red-600`                         | `rgb(255, 118, 101)`                                            |
+| `--spectrum-static-red-800`                         | `rgb(240, 56, 35)`                                              |
+| `--spectrum-static-cyan-400`                        | `rgb(138, 213, 255)`                                            |
+| `--spectrum-static-cyan-600`                        | `rgb(48, 167, 254)`                                             |
+| `--spectrum-static-cyan-800`                        | `rgb(18, 134, 205)`                                             |
+| `--spectrum-static-chartreuse-400`                  | `rgb(182, 219, 0)`                                              |
+| `--spectrum-static-chartreuse-600`                  | `rgb(143, 172, 0)`                                              |
+| `--spectrum-static-chartreuse-800`                  | `rgb(114, 137, 0)`                                              |
+| `--spectrum-static-green-400`                       | `rgb(107, 227, 162)`                                            |
+| `--spectrum-static-green-600`                       | `rgb(107, 227, 162)`                                            |
+| `--spectrum-static-green-800`                       | `rgb(7, 147, 85)`                                               |
+| `--spectrum-static-orange-400`                      | `rgb(255, 193, 94)`                                             |
+| `--spectrum-static-orange-600`                      | `rgb(252, 125, 0)`                                              |
+| `--spectrum-static-orange-800`                      | `rgb(212, 91, 0)`                                               |
+| `--spectrum-static-purple-400`                      | `rgb(221, 193, 246)`                                            |
+| `--spectrum-static-purple-600`                      | `rgb(191, 138, 238)`                                            |
+| `--spectrum-static-purple-800`                      | `rgb(166, 92, 231)`                                             |
+| `--spectrum-static-turquoise-400`                   | `rgb(111, 221, 228)`                                            |
+| `--spectrum-static-turquoise-600`                   | `rgb(15, 177, 192)`                                             |
+| `--spectrum-static-turquoise-800`                   | `rgb(10, 141, 153)`                                             |
+| `--spectrum-gradient-stop-1-avatar`                 | `0`                                                             |
+| `--spectrum-gradient-stop-2-avatar`                 | `0.6666`                                                        |
+| `--spectrum-gradient-stop-3-avatar`                 | `1`                                                             |
+| `--spectrum-drop-shadow-ambient-color`              | `rgba(0, 0, 0, 0.08)` (light)<br/>`rgba(0, 0, 0, 0.24)` (dark)  |
+| `--spectrum-drop-shadow-transition-color`           | `rgba(0, 0, 0, 0.04)` (light)<br/>`rgba(0, 0, 0, 0.12)` (dark)  |
+| `--spectrum-drop-shadow-emphasized-key-color`       | `rgba(0, 0, 0, 0.08)` (light)</br/>`rgba(0, 0, 0, 0.24)` (dark) |
+| `--spectrum-drop-shadow-emphasized-hover-key-color` | `rgba(0, 0, 0, 0.12)` (light)</br/>`rgba(0, 0, 0, 0.36)` (dark) |
+| `--spectrum-drop-shadow-elevated-key-color`         | `rgba(0, 0, 0, 0.12)` (light)</br/>`rgba(0, 0, 0, 0.36)` (dark) |
+| `--spectrum-drop-shadow-dragged-key-color`          | `rgba(0, 0, 0, 0.16)` (light)</br/>`rgba(0, 0, 0, 0.48)` (dark) |

.changeset/weak-colts-divide.md

@@ -0,0 +1,13 @@
+---
+"@spectrum-css/alertdialog": major
+"@spectrum-css/asset": major
+"@spectrum-css/well": major
+---
+
+This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.
+
+- Remove all `--mod-*` custom property hooks.
+- Keep existing class selectors and variants unchanged.
+- Update stories to reflect the removal of the `--mod-*` override layer.
+
+Breaking change: the `--mod-*` override layer is removed. Consumers should set `--spectrum-*` variables directly where customization is needed.