From 661e69c11ff4c92debee3e3dcd4db5d84942de8a Mon Sep 17 00:00:00 2001
From: Melissa Thompson <mthompson@heysparkbox.com>
Date: Mon, 15 Apr 2024 17:47:58 -0400
Subject: [PATCH 01/27] feat(actionbutton): s2 migration

Migrates the action button component to spectrum 2, using updated and
new design token specs. Includes down state transform, removal of
medium class, changes to mod custom properties, and storybook updates.
---
 .changeset/chilled-peaches-enjoy.md           |  27 +
 components/actionbutton/dist/metadata.json    |  94 ++--
 components/actionbutton/index.css             | 506 ++++++++----------
 .../stories/actionbutton.stories.js           |  13 +-
 components/actionbutton/stories/template.js   |  25 +-
 5 files changed, 317 insertions(+), 348 deletions(-)
 create mode 100644 .changeset/chilled-peaches-enjoy.md

diff --git a/.changeset/chilled-peaches-enjoy.md b/.changeset/chilled-peaches-enjoy.md
new file mode 100644
index 00000000000..59416b1cfb7
--- /dev/null
+++ b/.changeset/chilled-peaches-enjoy.md
@@ -0,0 +1,27 @@
+---
+"@spectrum-css/actionbutton": major
+---
+
+feat(actionbutton): S2 migration
+
+Action button now uses Spectrum 2 tokens and design specifications. A few notable changes:
+
+- Medium is now the default size and `.spectrum-Switch--sizeM` has been removed.
+- Includes the Spectrum 2 down state transform.
+- The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border. The mod custom properties for border were removed to avoid interference with Windows High Contrast / forced colors accessibility.
+- Background and content colors were updated.
+- Mod custom properties have been adjusted:
+  - Renamed:
+    - `--mod-line-height-100` renamed to `--mod-button-line-height`.
+    - `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`.
+    - `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`.
+  - Removed:
+    - `--mod-actionbutton-border-color-default`
+    - `--mod-actionbutton-border-color-disabled`
+    - `--mod-actionbutton-border-color-down`
+    - `--mod-actionbutton-border-color-focus`
+    - `--mod-actionbutton-border-color-hover`
+    - `--mod-actionbutton-border-width`
+    - `--mod-actionbutton-static-content-color`
+  - New:
+    - `--mod-actionbutton-font-weight`
diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index 06487511be1..e2156b2e252 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -14,25 +14,17 @@
     ".spectrum-ActionButton-label:empty",
     ".spectrum-ActionButton.is-disabled",
     ".spectrum-ActionButton.is-selected",
-    ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
     ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
     ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite .is-disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled",
     ".spectrum-ActionButton::-moz-focus-inner",
     ".spectrum-ActionButton:active",
     ".spectrum-ActionButton:after",
@@ -48,22 +40,32 @@
   "modifiers": [
     "--mod-actionbutton-animation-duration",
     "--mod-actionbutton-background-color-default",
+    "--mod-actionbutton-background-color-default-selected",
+    "--mod-actionbutton-background-color-default-selected-emphasized",
     "--mod-actionbutton-background-color-disabled",
     "--mod-actionbutton-background-color-down",
+    "--mod-actionbutton-background-color-down-selected",
+    "--mod-actionbutton-background-color-down-selected-emphasized",
     "--mod-actionbutton-background-color-focus",
+    "--mod-actionbutton-background-color-focus-selected",
+    "--mod-actionbutton-background-color-focus-selected-emphasized",
     "--mod-actionbutton-background-color-hover",
-    "--mod-actionbutton-border-color-default",
-    "--mod-actionbutton-border-color-disabled",
-    "--mod-actionbutton-border-color-down",
-    "--mod-actionbutton-border-color-focus",
-    "--mod-actionbutton-border-color-hover",
+    "--mod-actionbutton-background-color-hover-selected",
+    "--mod-actionbutton-background-color-hover-selected-emphasized",
     "--mod-actionbutton-border-radius",
-    "--mod-actionbutton-border-width",
     "--mod-actionbutton-content-color-default",
+    "--mod-actionbutton-content-color-default-selected",
+    "--mod-actionbutton-content-color-default-selected-emphasized",
     "--mod-actionbutton-content-color-disabled",
     "--mod-actionbutton-content-color-down",
+    "--mod-actionbutton-content-color-down-selected",
+    "--mod-actionbutton-content-color-down-selected-emphasized",
     "--mod-actionbutton-content-color-focus",
+    "--mod-actionbutton-content-color-focus-selected",
+    "--mod-actionbutton-content-color-focus-selected-emphasized",
     "--mod-actionbutton-content-color-hover",
+    "--mod-actionbutton-content-color-hover-selected",
+    "--mod-actionbutton-content-color-hover-selected-emphasized",
     "--mod-actionbutton-edge-to-hold-icon",
     "--mod-actionbutton-edge-to-text",
     "--mod-actionbutton-edge-to-visual",
@@ -71,13 +73,14 @@
     "--mod-actionbutton-focus-indicator-border-radius",
     "--mod-actionbutton-focus-indicator-color",
     "--mod-actionbutton-focus-indicator-gap",
+    "--mod-actionbutton-focus-indicator-thickness",
+    "--mod-actionbutton-font-size",
+    "--mod-actionbutton-font-weight",
     "--mod-actionbutton-height",
     "--mod-actionbutton-icon-size",
     "--mod-actionbutton-label-color",
     "--mod-actionbutton-min-width",
-    "--mod-actionbutton-text-to-visual",
-    "--mod-disabled-background-color",
-    "--mod-disabled-content-color"
+    "--mod-actionbutton-text-to-visual"
   ],
   "component": [
     "--spectrum-action-button-edge-to-hold-icon-extra-large",
@@ -91,16 +94,7 @@
     "--spectrum-actionbutton-background-color-down",
     "--spectrum-actionbutton-background-color-focus",
     "--spectrum-actionbutton-background-color-hover",
-    "--spectrum-actionbutton-background-color-selected",
-    "--spectrum-actionbutton-background-color-selected-disabled",
-    "--spectrum-actionbutton-background-color-selected-down",
-    "--spectrum-actionbutton-background-color-selected-focus",
-    "--spectrum-actionbutton-background-color-selected-hover",
-    "--spectrum-actionbutton-border-color-default",
-    "--spectrum-actionbutton-border-color-disabled",
-    "--spectrum-actionbutton-border-color-down",
-    "--spectrum-actionbutton-border-color-focus",
-    "--spectrum-actionbutton-border-color-hover",
+    "--spectrum-actionbutton-border-color",
     "--spectrum-actionbutton-border-radius",
     "--spectrum-actionbutton-border-width",
     "--spectrum-actionbutton-content-color-default",
@@ -108,7 +102,7 @@
     "--spectrum-actionbutton-content-color-down",
     "--spectrum-actionbutton-content-color-focus",
     "--spectrum-actionbutton-content-color-hover",
-    "--spectrum-actionbutton-content-color-selected",
+    "--spectrum-actionbutton-downstate-perspective",
     "--spectrum-actionbutton-edge-to-hold-icon",
     "--spectrum-actionbutton-edge-to-text",
     "--spectrum-actionbutton-edge-to-visual",
@@ -118,6 +112,7 @@
     "--spectrum-actionbutton-focus-indicator-gap",
     "--spectrum-actionbutton-focus-indicator-thickness",
     "--spectrum-actionbutton-font-size",
+    "--spectrum-actionbutton-font-weight",
     "--spectrum-actionbutton-height",
     "--spectrum-actionbutton-icon-size",
     "--spectrum-actionbutton-min-width",
@@ -129,6 +124,7 @@
     "--spectrum-accent-background-color-hover",
     "--spectrum-accent-background-color-key-focus",
     "--spectrum-animation-duration-100",
+    "--spectrum-black",
     "--spectrum-border-width-100",
     "--spectrum-component-edge-to-text-100",
     "--spectrum-component-edge-to-text-200",
@@ -150,14 +146,22 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-50",
     "--spectrum-component-height-75",
+    "--spectrum-component-size-difference-down",
+    "--spectrum-component-size-minimum-perspective-down",
+    "--spectrum-component-size-width-ratio-down",
     "--spectrum-corner-radius-medium-size-extra-large",
     "--spectrum-corner-radius-medium-size-extra-small",
     "--spectrum-corner-radius-medium-size-large",
     "--spectrum-corner-radius-medium-size-medium",
     "--spectrum-corner-radius-medium-size-small",
     "--spectrum-disabled-background-color",
-    "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-disabled-static-black-background-color",
+    "--spectrum-disabled-static-black-content-color",
+    "--spectrum-disabled-static-white-background-color",
+    "--spectrum-disabled-static-white-content-color",
+    "--spectrum-downstate-height",
+    "--spectrum-downstate-width",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
@@ -169,12 +173,9 @@
     "--spectrum-gray-100",
     "--spectrum-gray-200",
     "--spectrum-gray-25",
-    "--spectrum-gray-400",
-    "--spectrum-gray-50",
-    "--spectrum-gray-500",
-    "--spectrum-gray-600",
     "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
+    "--spectrum-medium-font-weight",
     "--spectrum-neutral-background-color-selected-default",
     "--spectrum-neutral-background-color-selected-down",
     "--spectrum-neutral-background-color-selected-hover",
@@ -193,14 +194,14 @@
     "--spectrum-text-to-visual-75",
     "--spectrum-transparent-black-100",
     "--spectrum-transparent-black-200",
-    "--spectrum-transparent-black-500",
-    "--spectrum-transparent-black-600",
-    "--spectrum-transparent-black-700",
+    "--spectrum-transparent-black-25",
+    "--spectrum-transparent-black-800",
+    "--spectrum-transparent-black-900",
     "--spectrum-transparent-white-100",
     "--spectrum-transparent-white-200",
-    "--spectrum-transparent-white-500",
-    "--spectrum-transparent-white-600",
-    "--spectrum-transparent-white-700",
+    "--spectrum-transparent-white-25",
+    "--spectrum-transparent-white-800",
+    "--spectrum-transparent-white-900",
     "--spectrum-white",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
@@ -219,15 +220,12 @@
     "--highcontrast-actionbutton-background-color-down",
     "--highcontrast-actionbutton-background-color-focus",
     "--highcontrast-actionbutton-background-color-hover",
-    "--highcontrast-actionbutton-border-color-default",
-    "--highcontrast-actionbutton-border-color-disabled",
-    "--highcontrast-actionbutton-border-color-down",
-    "--highcontrast-actionbutton-border-color-focus",
-    "--highcontrast-actionbutton-border-color-hover",
+    "--highcontrast-actionbutton-border-color",
     "--highcontrast-actionbutton-content-color-default",
     "--highcontrast-actionbutton-content-color-disabled",
     "--highcontrast-actionbutton-content-color-down",
     "--highcontrast-actionbutton-content-color-focus",
-    "--highcontrast-actionbutton-content-color-hover"
+    "--highcontrast-actionbutton-content-color-hover",
+    "--highcontrast-actionbutton-focus-indicator-color"
   ]
 }
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index bcf9af21804..0ac5f2cd041 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -1,426 +1,340 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import "@spectrum-css/commons/basebutton.css";
 
 .spectrum-ActionButton {
-	--spectrum-actionbutton-background-color-default: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-gray-50)));
-	--spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100)));
-	--spectrum-actionbutton-background-color-down: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-gray-200)));
-	--spectrum-actionbutton-background-color-focus: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-gray-100)));
-	--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
-
-	--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
-	--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
-	--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
-	--spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-
-	--spectrum-actionbutton-border-color-default: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-gray-400)));
-	--spectrum-actionbutton-border-color-hover: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-gray-500)));
-	--spectrum-actionbutton-border-color-down: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-gray-600)));
-	--spectrum-actionbutton-border-color-focus: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-gray-500)));
-	--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
-
-	--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-25);
-	--spectrum-actionbutton-content-color-disabled: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
-	--spectrum-actionbutton-background-color-disabled: var(--mod-disabled-background-color, var(--spectrum-disabled-background-color));
-
-	--spectrum-actionbutton-animation-duration: var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100));
-	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-medium));
-	--spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
-
-	--spectrum-actionbutton-content-color-default: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default)));
-	--spectrum-actionbutton-content-color-hover: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover)));
-	--spectrum-actionbutton-content-color-down: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down)));
-	--spectrum-actionbutton-content-color-focus: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus)));
-
-	--spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
+	--spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
+	--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium);
+	--spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
+	--spectrum-actionbutton-border-color: transparent;
+
+	--spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default);
+	--spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
+	--spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+	--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
+
+	--spectrum-actionbutton-background-color-default: var(--spectrum-gray-100);
+	--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
+	--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+	--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
+	--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+
+	--spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
 	--spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
+	--spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
 
-	--spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)));
+	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100));
 	--spectrum-actionbutton-height: var(--spectrum-component-height-100);
 
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
+	--spectrum-actionbutton-font-weight: var(--spectrum-medium-font-weight);
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-medium));
+	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
+	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
+	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100);
+	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
 
-	--spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width)));
+	--spectrum-actionbutton-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down));
 
 	&:dir(rtl) {
 		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 	}
 
 	&.spectrum-ActionButton--quiet {
-		--mod-actionbutton-border-color-default: transparent;
-
-		--mod-actionbutton-background-color-default: transparent;
-		--mod-actionbutton-background-color-hover: var(--spectrum-gray-100);
-		--mod-actionbutton-background-color-down: var(--spectrum-gray-200);
-		--mod-actionbutton-background-color-focus: var(--spectrum-gray-100);
-
-		&:disabled:not(.is-selected),
-		&.is-disabled:not(.is-selected) {
-			--mod-actionbutton-border-color-disabled: transparent;
-			--mod-actionbutton-background-color-disabled: transparent;
-		}
+		--spectrum-actionbutton-background-color-default: transparent;
+		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
+		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
+		--spectrum-actionbutton-background-color-disabled: transparent;
 	}
 
 	&.spectrum-ActionButton--staticBlack {
-		--mod-actionbutton-background-color-default: transparent;
+		--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100);
+		--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200);
+		--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200);
+		--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200);
+		--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
 
-		--mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
-		--mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
-		--mod-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
-		--mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
+		--spectrum-actionbutton-content-color-default: var(--spectrum-transparent-black-800);
+		--spectrum-actionbutton-content-color-hover: var(--spectrum-transparent-black-900);
+		--spectrum-actionbutton-content-color-down: var(--spectrum-transparent-black-900);
+		--spectrum-actionbutton-content-color-focus: var(--spectrum-transparent-black-900);
+		--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
 
-		--mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
-		--spectrum-actionbutton-background-color-disabled: transparent;
-		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
-
-		&:disabled,
-		.is-disabled {
-			--mod-disabled-content-color: var(--spectrum-transparent-black-500);
-			--mod-actionbutton-border-color-disabled: var(--spectrum-transparent-black-500);
-		}
+		--spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
 
 		&.spectrum-ActionButton--quiet {
-			--mod-actionbutton-border-color-default: transparent;
+			--spectrum-actionbutton-background-color-default: transparent;
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200);
+			--spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-black-25);
 		}
 	}
 
 	&.spectrum-ActionButton--staticWhite {
-		--mod-actionbutton-background-color-default: transparent;
+		--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100);
+		--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200);
+		--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200);
+		--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200);
+		--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
 
-		--mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
-		--mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
-		--mod-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
-		--mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
+		--spectrum-actionbutton-content-color-default: var(--spectrum-transparent-white-800);
+		--spectrum-actionbutton-content-color-hover: var(--spectrum-transparent-white-900);
+		--spectrum-actionbutton-content-color-down: var(--spectrum-transparent-white-900);
+		--spectrum-actionbutton-content-color-focus: var(--spectrum-transparent-white-900);
+		--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
 
-		--mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
-		--spectrum-actionbutton-background-color-disabled: transparent;
-		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200);
-
-		&:disabled,
-		.is-disabled {
-			--mod-disabled-content-color: var(--spectrum-transparent-white-500);
-			--mod-actionbutton-border-color-disabled: var(--spectrum-transparent-white-500);
-		}
+		--spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
 
 		&.spectrum-ActionButton--quiet {
-			--mod-actionbutton-border-color-default: transparent;
+			--spectrum-actionbutton-background-color-default: transparent;
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200);
+			--spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-white-25);
 		}
 	}
 
 	&.is-selected {
-		--mod-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-selected);
-		--mod-actionbutton-background-color-hover: var(--spectrum-actionbutton-background-color-selected-hover);
-		--mod-actionbutton-background-color-down: var(--spectrum-actionbutton-background-color-selected-down);
-		--mod-actionbutton-background-color-focus: var(--spectrum-actionbutton-background-color-selected-focus);
-		--mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled);
-
-		--mod-actionbutton-border-color-default: transparent;
-		--mod-actionbutton-border-color-hover: transparent;
-		--mod-actionbutton-border-color-down: transparent;
-		--mod-actionbutton-border-color-focus: transparent;
-		--mod-actionbutton-border-color-disabled: transparent;
-
-		--mod-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-selected);
-		--mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-content-color-selected);
-		--mod-actionbutton-content-color-down: var(--spectrum-actionbutton-content-color-selected);
-		--mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-content-color-selected);
-
-		&.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) {
-			--mod-actionbutton-background-color-default: var(--spectrum-accent-background-color-default);
-			--mod-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover);
-			--mod-actionbutton-background-color-down: var(--spectrum-accent-background-color-down);
-			--mod-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus);
-
-			--mod-actionbutton-content-color-default: var(--spectrum-white);
-			--mod-actionbutton-content-color-hover: var(--spectrum-white);
-			--mod-actionbutton-content-color-down: var(--spectrum-white);
-			--mod-actionbutton-content-color-focus: var(--spectrum-white);
+		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
+		--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
+		--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
+		--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
+
+		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25));
+		--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25));
+		--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25));
+		--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25));
+
+		&.spectrum-ActionButton--emphasized {
+			--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));
+			--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
+			--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
+			--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus));
+
+			--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white));
+			--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white));
+			--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white));
+			--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white));
 		}
 
-		&:disabled,
-		.is-disabled {
-			&.spectrum-ActionButton--staticBlack {
-				--mod-disabled-content-color: var(--spectrum-transparent-black-500);
-				--mod-disabled-background-color: var(--spectrum-transparent-black-100);
-			}
+		&.spectrum-ActionButton--staticWhite {
+			--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800);
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
 
-			&.spectrum-ActionButton--staticWhite {
-				--mod-disabled-content-color: var(--spectrum-transparent-white-500);
-				--mod-disabled-background-color: var(--spectrum-transparent-white-100);
-			}
+			--spectrum-actionbutton-content-color-default: var(--spectrum-black);
+			--spectrum-actionbutton-content-color-hover: var(--spectrum-black);
+			--spectrum-actionbutton-content-color-down: var(--spectrum-black);
+			--spectrum-actionbutton-content-color-focus: var(--spectrum-black);
+		}
+
+		&.spectrum-ActionButton--staticBlack {
+			--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-800);
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
+
+			--spectrum-actionbutton-content-color-default: var(--spectrum-white);
+			--spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+			--spectrum-actionbutton-content-color-down: var(--spectrum-white);
+			--spectrum-actionbutton-content-color-focus: var(--spectrum-white);
 		}
 	}
 }
 
 .spectrum-ActionButton--sizeXS {
-	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-small));
+	--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-small);
 
-	--spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50)));
+	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50));
 	--spectrum-actionbutton-height: var(--spectrum-component-height-50);
 
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-50);
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-small));
-	--spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width)));
+	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small);
+	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-50);
+	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-50);
+	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50);
+
+	--spectrum-actionbutton-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down);
 }
 
 .spectrum-ActionButton--sizeS {
-	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-small));
+	--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-small);
 
-	--spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75)));
+	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75));
 	--spectrum-actionbutton-height: var(--spectrum-component-height-75);
 
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-small));
-	--spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width)));
+	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
+	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
+	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-75);
+	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75);
+
+	--spectrum-actionbutton-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down);
 }
 
 .spectrum-ActionButton--sizeL {
-	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-large));
+	--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-large);
 
-	--spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200)));
+	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200));
 	--spectrum-actionbutton-height: var(--spectrum-component-height-200);
 
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-large));
-	--spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width)));
+	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
+	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
+	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-200);
+	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200);
 }
 
 .spectrum-ActionButton--sizeXL {
-	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-large));
+	--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-large);
 
-	--spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300)));
+	--spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300));
 	--spectrum-actionbutton-height: var(--spectrum-component-height-300);
 
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-large));
-	--spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)));
+	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
+	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
+	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-300);
+	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300);
 }
 
 .spectrum-ActionButton {
-	--spectrum-actionbutton-focus-indicator-border-radius: var(--mod-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)));
-
-	cursor: pointer;
-	user-select: none;
-
-	/* Contain halo */
+	@extend %spectrum-BaseButton;
 	position: relative;
 
-	/* Show the button overflow in Edge. */
-	overflow: visible;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	box-sizing: border-box;
-
-	/* Remove button the margin in Firefox and Safari. */
-	margin: 0;
-
-	font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack));
-
-	/* Adjacent buttons should be aligned correctly */
-	vertical-align: top;
-
-	-webkit-font-smoothing: antialiased;
-
-	/* Font smoothing for Firefox */
-	-moz-osx-font-smoothing: grayscale;
-
-	line-height: var(--mod-button-line-height, var(--spectrum-line-height-100));
-	text-decoration: none;
-
-	/* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
-	text-transform: none;
-
-	/* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
-	-webkit-appearance: button;
-
-	border-style: solid;
-
-	transition:
-		background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
-		border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out,
-		color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
-		box-shadow var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out;
-
-	min-inline-size: var(--spectrum-actionbutton-min-width);
+	min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
 	block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height));
 
-	border-radius: var(--spectrum-actionbutton-border-radius);
+	border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
 	border-width: var(--spectrum-actionbutton-border-width);
+	border-color: var(--highcontrast-actionbutton-border-color, var(--spectrum-actionbutton-border-color));
 
-	gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + (var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only)));
-
-	/* Start with text-only padding */
-	padding-inline: var(--spectrum-actionbutton-edge-to-text);
-
-	background: var(--spectrum-actionbutton-background-color-default);
-	border-color: var(--spectrum-actionbutton-border-color-default);
-	color: var(--spectrum-actionbutton-content-color-default);
+	gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + (var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))));
 
-	&::after {
-		position: absolute;
-		inset: 0;
-
-		margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1);
-
-		border-radius: var(--spectrum-actionbutton-focus-indicator-border-radius);
-
-		transition: box-shadow var(--spectrum-actionbutton-animation-duration) ease-in-out;
+	padding-inline: calc(var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--spectrum-actionbutton-border-width));
 
-		pointer-events: none;
-		content: "";
-	}
+	background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
+	color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
 
 	&:hover {
-		background: var(--spectrum-actionbutton-background-color-hover);
-		border-color: var(--spectrum-actionbutton-border-color-hover);
-		color: var(--spectrum-actionbutton-content-color-hover);
-	}
-
-	/* Fix Firefox */
-	&::-moz-focus-inner {
-		margin-block-start: -2px;
-		margin-block-end: -2px;
-		padding: 0;
-		border: 0;
-
-		/* Remove the inner border and padding for button in Firefox. */
-		border-style: none;
+		background-color: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
+		color: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
 	}
 
-	&:focus,
 	&:focus-visible {
-		/* kill the default ring */
-		box-shadow: none;
-		outline: none;
-	}
-
-	&:focus-visible {
-		background: var(--spectrum-actionbutton-background-color-focus);
-		border-color: var(--spectrum-actionbutton-border-color-focus);
-		color: var(--spectrum-actionbutton-content-color-focus);
-
-		&::after {
-			box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--spectrum-actionbutton-focus-indicator-color);
-		}
+		background-color: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)));
+		color: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus)));
 	}
 
 	&:active {
-		background: var(--spectrum-actionbutton-background-color-down);
-		border-color: var(--spectrum-actionbutton-border-color-down);
-		color: var(--spectrum-actionbutton-content-color-down);
+		background-color: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)));
+		color: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down)));
+		transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
 	}
 
 	&:disabled,
 	&.is-disabled {
-		cursor: default;
-
-		background: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)));
-		border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled)));
+		background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)));
 		color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled)));
 	}
 }
 
 a.spectrum-ActionButton {
-	/* Make link text not selectable  */
-	user-select: none;
-
-	/* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
-	-webkit-appearance: none;
+	@extend %spectrum-AnchorButton;
 }
 
-/* Nested sub-component: Icon */
 .spectrum-ActionButton-icon {
-	flex-shrink: 0;
+	@extend %spectrum-ButtonIcon;
 
 	inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
 	block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
-	max-block-size: 100%;
 
 	/* adjust icon positioning to match UI kit */
-	margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual) - var(--spectrum-actionbutton-edge-to-text));
-	margin-inline-end: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
+	margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
+	margin-inline-end: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
 
 	color: inherit;
+}
 
+.spectrum-ActionButton-hold + .spectrum-ActionButton-icon,
+.spectrum-ActionButton-icon:only-child {
 	/* Augment the margin correction for the icon only scenario */
-	.spectrum-ActionButton-hold + &,
-	&:only-child {
-		margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
-	}
+	margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
 }
 
 .spectrum-ActionButton-label {
-	align-self: center;
-	justify-self: center;
-
-	/* Fixes horizontal alignment of text in anchor buttons */
-	text-align: center;
-
+	@extend %spectrum-ButtonLabel;
 	pointer-events: none;
-	line-height: var(--spectrum-actionbutton-height);
 
-	font-size: var(--spectrum-actionbutton-font-size);
+	font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size));
+	font-weight: var(--mod-actionbutton-font-weight, var(--spectrum-actionbutton-font-weight));
 	white-space: nowrap;
 	color: var(--mod-actionbutton-label-color, inherit);
 
 	text-overflow: ellipsis;
 	overflow: hidden;
-
-	&:empty {
-		display: none;
-	}
 }
 
 .spectrum-ActionButton-hold {
 	position: absolute;
-	inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
-	inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
+	inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
+	inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
 
 	color: inherit;
 
-	transform: var(--spectrum-logical-rotation,);
+	transform: var(--spectrum-logical-rotation);
 }
 
-.spectrum-ActionButton-hold + .spectrum-ActionButton-icon,
-.spectrum-ActionButton-icon:only-child {
-	/* Augment the margin correction for the icon only scenario */
-	margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
+/* special cases for focus-ring */
+.spectrum-ActionButton {
+	transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+
+	&::after {
+		position: absolute;
+		inset: 0;
+
+		margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
+
+		border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
+
+		transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+
+		pointer-events: none;
+		content: "";
+	}
+
+	&:focus-visible {
+		box-shadow: none;
+		outline: none;
+
+		&::after {
+			box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)));
+		}
+	}
 }
 
 @media (forced-colors: active) {
@@ -430,6 +344,14 @@ a.spectrum-ActionButton {
 			forced-color-adjust: none;
 		}
 
+		--highcontrast-actionbutton-focus-indicator-color: ButtonText;
+
+		&:hover,
+		&:active,
+		&:focus-visible {
+			--highcontrast-actionbutton-border-color: Highlight;
+		}
+
 		&.is-selected {
 			--highcontrast-actionbutton-background-color-default: Highlight;
 			--highcontrast-actionbutton-background-color-hover: Highlight;
@@ -437,18 +359,14 @@ a.spectrum-ActionButton {
 			--highcontrast-actionbutton-background-color-down: Highlight;
 			--highcontrast-actionbutton-background-color-disabled: ButtonFace;
 
-			--highcontrast-actionbutton-border-color-default: HighlightText;
-			--highcontrast-actionbutton-border-color-hover: HighlightText;
-			--highcontrast-actionbutton-border-color-focus: HighlightText;
-			--highcontrast-actionbutton-border-color-down: HighlightText;
-			--highcontrast-actionbutton-border-color-disabled: GrayText;
-
 			--highcontrast-actionbutton-content-color-default: HighlightText;
 			--highcontrast-actionbutton-content-color-hover: HighlightText;
 			--highcontrast-actionbutton-content-color-focus: HighlightText;
 			--highcontrast-actionbutton-content-color-down: HighlightText;
 			--highcontrast-actionbutton-content-color-disabled: GrayText;
 
+			--highcontrast-actionbutton-border-color: Highlight;
+
 			.spectrum-ActionButton-icon,
 			.spectrum-ActionButton-hold,
 			.spectrum-ActionButton-label {
@@ -457,5 +375,9 @@ a.spectrum-ActionButton {
 				forced-color-adjust: none;
 			}
 		}
+
+		&:disabled {
+			--highcontrast-actionbutton-border-color: GrayText;
+		}
 	}
 }
diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index a08f0f7bbfc..64001b1f040 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -1,5 +1,5 @@
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
-import { Sizes } from "@spectrum-css/preview/decorators";
+import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
@@ -37,7 +37,10 @@ export default {
 			control: { type: "text" },
 		},
 		isQuiet,
-		isEmphasized,
+		isEmphasized: {
+			...isEmphasized,
+			if: { arg: "staticColor", truthy: false},
+		},
 		isDisabled,
 		isSelected,
 		isHovered,
@@ -88,6 +91,9 @@ export default {
 			type: "figma",
 			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=702-2877",
 		},
+		downState: {
+			selectors: [".spectrum-ActionButton:not(:disabled)"],
+		},
 		packageJson,
 		metadata,
 		docs: {
@@ -96,6 +102,9 @@ export default {
 			},
 		}
 	},
+	decorators: [
+		withDownStateDimensionCapture,
+	],
 };
 
 export const Default = ActionButtonGroup.bind({});
diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
index 3b3cb8930c2..2d2feaf3a47 100644
--- a/components/actionbutton/stories/template.js
+++ b/components/actionbutton/stories/template.js
@@ -95,15 +95,15 @@ export const Template = ({
 			style=${styleMap(customStyles)}
 			?disabled=${isDisabled}
 			@click=${onclick ?? function() {
-				updateArgs({
+				updateArgs?.({
 					isSelected: !isSelected
 				});
 			}}
 			@focusin=${function() {
-				updateArgs({ isFocused: true });
+				updateArgs?.({ isFocused: true });
 			}}
 			@focusout=${function() {
-				updateArgs({ isFocused: false });
+				updateArgs?.({ isFocused: false });
 			}}
 		>
 			${when(hasPopup && hasPopup !== "false", () =>
@@ -137,6 +137,10 @@ export const Template = ({
 	`;
 };
 
+/**
+ * Displays multiple action buttons in a row, with different combinations of
+ * label, icon, and hold button (has popup).
+ */
 export const ActionButtonsWithIconOptions = (args, context) => Container({
 	withBorder: false,
 	direction: "row",
@@ -168,6 +172,11 @@ export const ActionButtonsWithIconOptions = (args, context) => Container({
 	`
 }, context);
 
+/**
+ * Displays two action buttons in a row:
+ * - icon only action button
+ * - icon only action button with hold button (has popup)
+ */
 export const IconOnlyOption = (args, context) => Container({
 	withBorder: false,
 	direction: "row",
@@ -189,12 +198,13 @@ export const IconOnlyOption = (args, context) => Container({
 	`
 }, context);
 
+/**
+ * Displays multiple groups of action buttons for:
+ * default, selected, disabled, and selected + disabled
+ */
 export const TreatmentTemplate = (args, context) => Container({
 	withBorder: false,
 	direction: "row",
-	wrapperStyles: {
-		rowGap: "12px",
-	},
 	content: html`${[
 		{ isSelected: false, isDisabled: false, heading: "Default" },
 		{ isSelected: true, isDisabled: false, heading: "Selected" },
@@ -203,6 +213,9 @@ export const TreatmentTemplate = (args, context) => Container({
 	].map(({ isSelected, isDisabled, heading }) => Container({
 		withBorder: false,
 		heading: heading,
+		containerStyles: {
+			rowGap: "8px",
+		},
 		content: ActionButtonsWithIconOptions({
 			...args,
 			isSelected,

From cbf1fee8f210163bcb5c0a6e917b4b1972371d73 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Wed, 19 Feb 2025 11:33:06 -0500
Subject: [PATCH 02/27] docs(actionbutton): remove problematic click and focus
 events

- The click event was treating all action buttons as toggles, not
  allowing testing of the active/down state on click on the default
  button. It also does not work well when multiple buttons are present.

- The focus events were inaccurately showing the focus indicator on
  click; the styles for this work differently because they are for
  focus-visible. The focused control/arg is for the storybook only class
  used for testing, which applies in a different manner.
---
 components/actionbutton/stories/template.js | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
index 2d2feaf3a47..ef5d1ef8f49 100644
--- a/components/actionbutton/stories/template.js
+++ b/components/actionbutton/stories/template.js
@@ -66,8 +66,6 @@ export const Template = ({
 	testId,
 	role = "button",
 } = {}, context = {}) => {
-	const { updateArgs } = context;
-
 	return html`
 		<button
 			aria-label=${ifDefined(hideLabel ? label : undefined)}
@@ -94,17 +92,7 @@ export const Template = ({
 			role=${ifDefined(role)}
 			style=${styleMap(customStyles)}
 			?disabled=${isDisabled}
-			@click=${onclick ?? function() {
-				updateArgs?.({
-					isSelected: !isSelected
-				});
-			}}
-			@focusin=${function() {
-				updateArgs?.({ isFocused: true });
-			}}
-			@focusout=${function() {
-				updateArgs?.({ isFocused: false });
-			}}
+			@click=${ifDefined(onclick)}
 		>
 			${when(hasPopup && hasPopup !== "false", () =>
 				Icon({
@@ -220,6 +208,6 @@ export const TreatmentTemplate = (args, context) => Container({
 			...args,
 			isSelected,
 			isDisabled,
-		})
+		}, context)
 	}, context))}`,
 }, context);

From d41dc4aa7cd2152342f7641f77e5618e2d3c3863 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Wed, 19 Feb 2025 11:40:48 -0500
Subject: [PATCH 03/27] docs(actionbutton): update docs, selected state toggle

Some small documentation improvements, especially around the selected
state. Adds additional notes about the selected state being optional
and for toggles (per SWC docs and guidelines).
---
 .../actionbutton/stories/actionbutton.stories.js    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index 64001b1f040..ef256d11252 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -25,6 +25,7 @@ export default {
 		size: size(["xs", "s", "m", "l", "xl"]),
 		iconName: {
 			...(IconStories?.argTypes?.iconName ?? {}),
+			name: "Workflow icon",
 			if: false,
 		},
 		label: {
@@ -42,7 +43,10 @@ export default {
 			if: { arg: "staticColor", truthy: false},
 		},
 		isDisabled,
-		isSelected,
+		isSelected: {
+			...isSelected,
+			description: "An optional state used when treating the action button as a toggle.",
+		},
 		isHovered,
 		isFocused,
 		isActive,
@@ -115,7 +119,9 @@ Default.tags = ["!autodocs"];
 /**
  * Action buttons should always have a label, unless they are only using an icon that is universally understood and accessible. They can have an optional icon, but it should not be used for decoration. Use an icon only when necessary and when it has a strong association with the label text.
  *
- * The label can be hidden to create an icon-only action button. If the label is hidden, an icon is required, and the label will appear in a tooltip on hover.
+ * The label can be hidden to create an icon-only action button. If the label is hidden, an icon is required, and the implementation should show the label with a tooltip on hover.
+ *
+ * Action buttons can be used as toggles instead of for taking direct action. The optional "selected" state displayed below is used for when the action button is toggleable.
  */
 export const Standard = TreatmentTemplate.bind({});
 Standard.args = Default.args;
@@ -170,7 +176,8 @@ Quiet.parameters = {
 };
 
 /**
- * An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a short amount of time can reveal a popover menu, which can be used, for example, to switch between related actions. Because of the way padding is calculated, the hold icon must be placed before the workflow icon in the markup.
+ * An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a short amount of time can reveal a popover menu, which can be used, for example, to switch between related actions. Note that this
+ * popover menu is not demonstrated here—this would be handled by the implementation. Because of the way padding is calculated, the hold icon must be placed before the workflow icon in the markup.
  */
 export const HoldIcon = IconOnlyOption.bind({});
 HoldIcon.tags = ["!dev"];

From b821d571ee4bdba2645b0186b92a16a3228f7975 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Wed, 19 Feb 2025 13:43:46 -0500
Subject: [PATCH 04/27] fix(actionbutton): selected + disabled + quiet
 background color

This combination of states should continue to have the background color
rather than the quiet transparent background. Per design feedback, the
quiet + disabled + selected should display the same as the default
disabled + selected.
---
 components/actionbutton/index.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 0ac5f2cd041..9f2df136273 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -59,6 +59,10 @@ governing permissions and limitations under the License.
 		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-disabled: transparent;
+
+		&.is-selected {
+			--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+		}
 	}
 
 	&.spectrum-ActionButton--staticBlack {

From 701deec258da7bcadf017c288bbd2512b9628f83 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Wed, 19 Feb 2025 15:45:48 -0500
Subject: [PATCH 05/27] chore(actionbutton): generate new metadata

---
 components/actionbutton/dist/metadata.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index e2156b2e252..cd9787950b8 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -21,6 +21,7 @@
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",

From c4fcb7b64b25d9a4c18da792b65a6a6e32baea85 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Wed, 19 Feb 2025 16:48:48 -0500
Subject: [PATCH 06/27] chore(actionbutton): add stylelint exception for
 downstate variables

---
 components/actionbutton/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 9f2df136273..a072be86322 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -47,6 +47,7 @@ governing permissions and limitations under the License.
 	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100);
 	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
 
+	/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */
 	--spectrum-actionbutton-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down));
 
 	&:dir(rtl) {

From 4991030f730adcb25b75c7161064618bb8269f01 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Fri, 14 Mar 2025 14:53:38 -0400
Subject: [PATCH 07/27] feat(actionbutton): add font-style property and token

---
 components/actionbutton/dist/metadata.json | 3 +++
 components/actionbutton/index.css          | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index cd9787950b8..8624526656a 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -76,6 +76,7 @@
     "--mod-actionbutton-focus-indicator-gap",
     "--mod-actionbutton-focus-indicator-thickness",
     "--mod-actionbutton-font-size",
+    "--mod-actionbutton-font-style",
     "--mod-actionbutton-font-weight",
     "--mod-actionbutton-height",
     "--mod-actionbutton-icon-size",
@@ -113,6 +114,7 @@
     "--spectrum-actionbutton-focus-indicator-gap",
     "--spectrum-actionbutton-focus-indicator-thickness",
     "--spectrum-actionbutton-font-size",
+    "--spectrum-actionbutton-font-style",
     "--spectrum-actionbutton-font-weight",
     "--spectrum-actionbutton-height",
     "--spectrum-actionbutton-icon-size",
@@ -155,6 +157,7 @@
     "--spectrum-corner-radius-medium-size-large",
     "--spectrum-corner-radius-medium-size-medium",
     "--spectrum-corner-radius-medium-size-small",
+    "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
     "--spectrum-disabled-static-black-background-color",
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index a072be86322..b5d9239ff8e 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -41,6 +41,8 @@ governing permissions and limitations under the License.
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
 	--spectrum-actionbutton-font-weight: var(--spectrum-medium-font-weight);
+	--spectrum-actionbutton-font-style: var(--spectrum-default-font-style);
+
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
 	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
 	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
@@ -297,6 +299,7 @@ a.spectrum-ActionButton {
 
 	font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size));
 	font-weight: var(--mod-actionbutton-font-weight, var(--spectrum-actionbutton-font-weight));
+	font-style: var(--mod-actionbutton-font-style, var(--spectrum-actionbutton-font-style));
 	white-space: nowrap;
 	color: var(--mod-actionbutton-label-color, inherit);
 

From 3f6fddc45b3051ca9e2d358c5251658b3d979a29 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Fri, 14 Mar 2025 16:59:42 -0400
Subject: [PATCH 08/27] fix(actionbutton): static variants do not support
 emphasized

Update tests to remove static black + emphasized and static white +
emphasized, as these are not on the design spec and not supported.
Updates some Docs page descriptions to make this clear.
---
 .../actionbutton/stories/actionbutton.stories.js     | 12 +++++++-----
 components/actionbutton/stories/actionbutton.test.js | 10 ----------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index ef256d11252..c587cf92b04 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -132,7 +132,9 @@ Standard.parameters = {
 Standard.storyName = "Default";
 
 /**
- * The emphasized action button has a blue background for its selected state in order to provide a visual prominence. This is optimal for when the selection should call attention, such as within a tool bar.
+ * The emphasized action button has a blue background for its selected state in order to provide a visual prominence.
+ * This is optimal for when the selection should call attention, such as within a tool bar.
+ * For this variant, the `.spectrum-ActionButton--emphasized` class is applied to `.spectrum-ActionButton`.
  */
 export const Emphasized = TreatmentTemplate.bind({});
 Emphasized.tags = ["!dev"];
@@ -145,9 +147,6 @@ Emphasized.parameters = {
 	},
 };
 
-/**
- * Adding the `.spectrum-ActionButton--emphasized` class to a quiet action button can be effective in calling attention.
- */
 export const EmphasizedQuiet = TreatmentTemplate.bind({});
 EmphasizedQuiet.tags = ["!dev"];
 EmphasizedQuiet.args = {
@@ -159,7 +158,7 @@ EmphasizedQuiet.parameters = {
 		disableSnapshot: true,
 	},
 };
-EmphasizedQuiet.storyName = "Emphasized (quiet)";
+EmphasizedQuiet.storyName = "Quiet, emphasized";
 
 /**
  * Quiet action buttons have no visible background until they’re interacted with. This style works best when a clear layout (vertical stack, table, grid) makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read.
@@ -206,6 +205,9 @@ StaticWhiteQuiet.parameters = {
 	chromatic: { disableSnapshot: true }
 };
 
+/**
+ * Emphasized is not supported for the static black and static white variants.
+ */
 export const StaticBlackDocs = TreatmentTemplate.bind({});
 StaticBlackDocs.tags = ["!dev"];
 StaticBlackDocs.args = {
diff --git a/components/actionbutton/stories/actionbutton.test.js b/components/actionbutton/stories/actionbutton.test.js
index fb37fdc910f..4a26724f80b 100644
--- a/components/actionbutton/stories/actionbutton.test.js
+++ b/components/actionbutton/stories/actionbutton.test.js
@@ -62,11 +62,6 @@ export const ActionButtonGroup = Variants({
 			testHeading: "Static black",
 			staticColor: "black",
 		},
-		{
-			testHeading: "Static black - emphasized",
-			staticColor: "black",
-			isEmphasized: true,
-		},
 		{
 			testHeading: "Static black - quiet",
 			staticColor: "black",
@@ -76,11 +71,6 @@ export const ActionButtonGroup = Variants({
 			testHeading: "Static white",
 			staticColor: "white",
 		},
-		{
-			testHeading: "Static white - emphasized",
-			staticColor: "white",
-			isEmphasized: true,
-		},
 		{
 			testHeading: "Static white - quiet",
 			staticColor: "white",

From 581571b800eb56c58573659e9a82b2b2acbc3801 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Fri, 14 Mar 2025 17:13:28 -0400
Subject: [PATCH 09/27] feat(actionbutton): add cjk line-height support

Use design spec defined CJK line-height in action button. Replaces
line-height declaration coming from the extended BaseButton, along with
a mod name appropriate for the component.
---
 .changeset/chilled-peaches-enjoy.md        | 3 ++-
 components/actionbutton/dist/metadata.json | 6 ++++++
 components/actionbutton/index.css          | 8 ++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/.changeset/chilled-peaches-enjoy.md b/.changeset/chilled-peaches-enjoy.md
index 59416b1cfb7..940f39d493c 100644
--- a/.changeset/chilled-peaches-enjoy.md
+++ b/.changeset/chilled-peaches-enjoy.md
@@ -12,7 +12,7 @@ Action button now uses Spectrum 2 tokens and design specifications. A few notabl
 - Background and content colors were updated.
 - Mod custom properties have been adjusted:
   - Renamed:
-    - `--mod-line-height-100` renamed to `--mod-button-line-height`.
+    - `--mod-line-height-100` renamed to `--mod-actionbutton-line-height`.
     - `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`.
     - `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`.
   - Removed:
@@ -25,3 +25,4 @@ Action button now uses Spectrum 2 tokens and design specifications. A few notabl
     - `--mod-actionbutton-static-content-color`
   - New:
     - `--mod-actionbutton-font-weight`
+    - `--mod-actionbutton-font-style`
diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index 8624526656a..7885f3bc7cc 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -35,6 +35,9 @@
     ".spectrum-ActionButton:focus-visible",
     ".spectrum-ActionButton:focus-visible:after",
     ".spectrum-ActionButton:hover",
+    ".spectrum-ActionButton:lang(ja)",
+    ".spectrum-ActionButton:lang(ko)",
+    ".spectrum-ActionButton:lang(zh)",
     "[dir=\"rtl\"] .spectrum-ActionButton",
     "a.spectrum-ActionButton"
   ],
@@ -81,6 +84,7 @@
     "--mod-actionbutton-height",
     "--mod-actionbutton-icon-size",
     "--mod-actionbutton-label-color",
+    "--mod-actionbutton-line-height",
     "--mod-actionbutton-min-width",
     "--mod-actionbutton-text-to-visual"
   ],
@@ -118,6 +122,7 @@
     "--spectrum-actionbutton-font-weight",
     "--spectrum-actionbutton-height",
     "--spectrum-actionbutton-icon-size",
+    "--spectrum-actionbutton-line-height",
     "--spectrum-actionbutton-min-width",
     "--spectrum-actionbutton-text-to-visual"
   ],
@@ -129,6 +134,7 @@
     "--spectrum-animation-duration-100",
     "--spectrum-black",
     "--spectrum-border-width-100",
+    "--spectrum-cjk-line-height-100",
     "--spectrum-component-edge-to-text-100",
     "--spectrum-component-edge-to-text-200",
     "--spectrum-component-edge-to-text-300",
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index b5d9239ff8e..c5c464b6c27 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -42,6 +42,7 @@ governing permissions and limitations under the License.
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
 	--spectrum-actionbutton-font-weight: var(--spectrum-medium-font-weight);
 	--spectrum-actionbutton-font-style: var(--spectrum-default-font-style);
+	--spectrum-actionbutton-line-height: var(--spectrum-line-height-100);
 
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
 	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
@@ -56,6 +57,12 @@ governing permissions and limitations under the License.
 		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 	}
 
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-actionbutton-line-height: var(--spectrum-cjk-line-height-100);
+	}
+
 	&.spectrum-ActionButton--quiet {
 		--spectrum-actionbutton-background-color-default: transparent;
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
@@ -235,6 +242,7 @@ governing permissions and limitations under the License.
 
 	min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
 	block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height));
+	line-height: var(--mod-actionbutton-line-height, var(--spectrum-actionbutton-line-height));
 
 	border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
 	border-width: var(--spectrum-actionbutton-border-width);

From dd38e19ae179b36f9147ce847f2db40f75bf335f Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:34:53 -0400
Subject: [PATCH 10/27] fix(actionbutton): high contrast adjustments

- Fix for high contrast border styles not being solid.
- Quiet variants no longer show a border and blend into background with
  Canvas and CanvasText color pair.
- Focus indicator color changed from ButtonText to CanvasText,
  because this indicator appears outside of the element (it does not
  appear on top of a ButtonFace background).
---
 components/actionbutton/index.css | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index c5c464b6c27..e2c0f12ff9c 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -247,6 +247,7 @@ governing permissions and limitations under the License.
 	border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
 	border-width: var(--spectrum-actionbutton-border-width);
 	border-color: var(--highcontrast-actionbutton-border-color, var(--spectrum-actionbutton-border-color));
+	border-style: solid;
 
 	gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + (var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))));
 
@@ -356,11 +357,31 @@ a.spectrum-ActionButton {
 @media (forced-colors: active) {
 	.spectrum-ActionButton {
 		&::after {
-			/* make sure focus indicator renders */
+			/* make sure the box-shadow for the focus indicator renders */
 			forced-color-adjust: none;
 		}
 
-		--highcontrast-actionbutton-focus-indicator-color: ButtonText;
+		--highcontrast-actionbutton-focus-indicator-color: CanvasText;
+		--highcontrast-actionbutton-background-color-disabled: ButtonFace;
+		--highcontrast-actionbutton-content-color-disabled: GrayText;
+
+		&.spectrum-ActionButton--quiet {
+			--highcontrast-actionbutton-border-color: Canvas;
+			--highcontrast-actionbutton-background-color-default: Canvas;
+			--highcontrast-actionbutton-background-color-hover: Canvas;
+			--highcontrast-actionbutton-background-color-focus: Canvas;
+			--highcontrast-actionbutton-background-color-down: Canvas;
+			--highcontrast-actionbutton-background-color-disabled: Canvas;
+
+			--highcontrast-actionbutton-content-color-default: CanvasText;
+			--highcontrast-actionbutton-content-color-hover: CanvasText;
+			--highcontrast-actionbutton-content-color-focus: CanvasText;
+			--highcontrast-actionbutton-content-color-down: CanvasText;
+
+			&:disabled {
+				--highcontrast-actionbutton-border-color: Canvas;
+			}
+		}
 
 		&:hover,
 		&:active,
@@ -373,21 +394,18 @@ a.spectrum-ActionButton {
 			--highcontrast-actionbutton-background-color-hover: Highlight;
 			--highcontrast-actionbutton-background-color-focus: Highlight;
 			--highcontrast-actionbutton-background-color-down: Highlight;
-			--highcontrast-actionbutton-background-color-disabled: ButtonFace;
 
 			--highcontrast-actionbutton-content-color-default: HighlightText;
 			--highcontrast-actionbutton-content-color-hover: HighlightText;
 			--highcontrast-actionbutton-content-color-focus: HighlightText;
 			--highcontrast-actionbutton-content-color-down: HighlightText;
-			--highcontrast-actionbutton-content-color-disabled: GrayText;
 
 			--highcontrast-actionbutton-border-color: Highlight;
 
 			.spectrum-ActionButton-icon,
 			.spectrum-ActionButton-hold,
 			.spectrum-ActionButton-label {
-				/* ensure custom text colors from above get applied */
-				/* it seems like this shouldn't have to be done, but colors are wrong without it */
+				/* Fix for unwanted additional background color ("readability backplate"). */
 				forced-color-adjust: none;
 			}
 		}

From 9797e6ad564745480cd1904f6baf8b2d0a15fa49 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:47:35 -0400
Subject: [PATCH 11/27] docs(actionbutton): disable static color control if
 emphasized

---
 components/actionbutton/stories/actionbutton.stories.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index c587cf92b04..99cf3ab349c 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -40,7 +40,7 @@ export default {
 		isQuiet,
 		isEmphasized: {
 			...isEmphasized,
-			if: { arg: "staticColor", truthy: false},
+			if: { arg: "staticColor", truthy: false },
 		},
 		isDisabled,
 		isSelected: {
@@ -70,7 +70,10 @@ export default {
 			control: "select",
 			options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
 		},
-		staticColor,
+		staticColor: {
+			...staticColor,
+			if: { arg: "isEmphasized", truthy: false },
+		},
 	},
 	args: {
 		rootClass: "spectrum-ActionButton",

From 1ad69fa28a0e6600870e8666eb565e0575bbb6c0 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:56:55 -0400
Subject: [PATCH 12/27] docs(actionbutton): add docs link to popover

---
 components/actionbutton/stories/actionbutton.stories.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index 99cf3ab349c..ba16a4a9493 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -178,8 +178,10 @@ Quiet.parameters = {
 };
 
 /**
- * An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a short amount of time can reveal a popover menu, which can be used, for example, to switch between related actions. Note that this
- * popover menu is not demonstrated here—this would be handled by the implementation. Because of the way padding is calculated, the hold icon must be placed before the workflow icon in the markup.
+ * An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a
+ * short amount of time can reveal a [popover](/docs/components-popover--docs) menu, which can be used, for example, to switch
+ * between related actions. Note that this popover menu is not demonstrated here—this would be handled by the implementation.
+ * Because of the way padding is calculated, the hold icon must be placed before the workflow icon in the markup.
  */
 export const HoldIcon = IconOnlyOption.bind({});
 HoldIcon.tags = ["!dev"];

From 30fff3fdb2c6f443aa42dea5dbc62915c046b500 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Mon, 17 Mar 2025 16:14:25 -0400
Subject: [PATCH 13/27] fix(actionbutton): static + quiet + disabled + selected
 background

Fixes the issue where the static black and white, quiet, selected, and
disabled state in the testing grid was showing the static quiet
background color instead of the static disabled background color.
---
 components/actionbutton/dist/metadata.json |  1 +
 components/actionbutton/index.css          | 10 ++++------
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index 7885f3bc7cc..3d27815ab6c 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -22,6 +22,7 @@
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index e2c0f12ff9c..917a9d1dbef 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -151,6 +151,7 @@ governing permissions and limitations under the License.
 			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900);
 			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
 			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
+			--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
 
 			--spectrum-actionbutton-content-color-default: var(--spectrum-black);
 			--spectrum-actionbutton-content-color-hover: var(--spectrum-black);
@@ -163,6 +164,7 @@ governing permissions and limitations under the License.
 			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900);
 			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
 			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
+			--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
 
 			--spectrum-actionbutton-content-color-default: var(--spectrum-white);
 			--spectrum-actionbutton-content-color-hover: var(--spectrum-white);
@@ -326,20 +328,16 @@ a.spectrum-ActionButton {
 	transform: var(--spectrum-logical-rotation);
 }
 
-/* special cases for focus-ring */
+/* Focus indicator */
 .spectrum-ActionButton {
 	transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
 
 	&::after {
 		position: absolute;
 		inset: 0;
-
 		margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
-
 		border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
-
 		transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
-
 		pointer-events: none;
 		content: "";
 	}
@@ -378,7 +376,7 @@ a.spectrum-ActionButton {
 			--highcontrast-actionbutton-content-color-focus: CanvasText;
 			--highcontrast-actionbutton-content-color-down: CanvasText;
 
-			&:disabled {
+			&:disabled:not(.is-selected) {
 				--highcontrast-actionbutton-border-color: Canvas;
 			}
 		}

From e32f871b680e9c5ff8c120ea7fb44cb8538d14f6 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Mon, 17 Mar 2025 17:03:51 -0400
Subject: [PATCH 14/27] fix(actionbutton): set default system colors for high
 contrast

The noted readability backplate issue was present on more than just
the selected state; it was just difficult to see without contrasting
colors. So this has been moved to the default, along with setting
default system color values.
---
 components/actionbutton/index.css | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 917a9d1dbef..1a313abadbd 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -359,12 +359,31 @@ a.spectrum-ActionButton {
 			forced-color-adjust: none;
 		}
 
+		.spectrum-ActionButton-icon,
+		.spectrum-ActionButton-hold,
+		.spectrum-ActionButton-label {
+			/* Fix for extra unwanted background color on label ("readability backplate"). */
+			forced-color-adjust: none;
+		}
+
 		--highcontrast-actionbutton-focus-indicator-color: CanvasText;
+		--highcontrast-actionbutton-border-color: ButtonBorder;
+
+		--highcontrast-actionbutton-background-color-default: ButtonFace;
+		--highcontrast-actionbutton-background-color-hover: ButtonFace;
+		--highcontrast-actionbutton-background-color-focus: ButtonFace;
+		--highcontrast-actionbutton-background-color-down: ButtonFace;
 		--highcontrast-actionbutton-background-color-disabled: ButtonFace;
+
+		--highcontrast-actionbutton-content-color-default: ButtonText;
+		--highcontrast-actionbutton-content-color-hover: ButtonText;
+		--highcontrast-actionbutton-content-color-focus: ButtonText;
+		--highcontrast-actionbutton-content-color-down: ButtonText;
 		--highcontrast-actionbutton-content-color-disabled: GrayText;
 
 		&.spectrum-ActionButton--quiet {
 			--highcontrast-actionbutton-border-color: Canvas;
+
 			--highcontrast-actionbutton-background-color-default: Canvas;
 			--highcontrast-actionbutton-background-color-hover: Canvas;
 			--highcontrast-actionbutton-background-color-focus: Canvas;
@@ -388,6 +407,8 @@ a.spectrum-ActionButton {
 		}
 
 		&.is-selected {
+			--highcontrast-actionbutton-border-color: Highlight;
+
 			--highcontrast-actionbutton-background-color-default: Highlight;
 			--highcontrast-actionbutton-background-color-hover: Highlight;
 			--highcontrast-actionbutton-background-color-focus: Highlight;
@@ -397,15 +418,6 @@ a.spectrum-ActionButton {
 			--highcontrast-actionbutton-content-color-hover: HighlightText;
 			--highcontrast-actionbutton-content-color-focus: HighlightText;
 			--highcontrast-actionbutton-content-color-down: HighlightText;
-
-			--highcontrast-actionbutton-border-color: Highlight;
-
-			.spectrum-ActionButton-icon,
-			.spectrum-ActionButton-hold,
-			.spectrum-ActionButton-label {
-				/* Fix for unwanted additional background color ("readability backplate"). */
-				forced-color-adjust: none;
-			}
 		}
 
 		&:disabled {

From aa5dc202d1eb9114477cfbf463f30e629d4ce129 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Tue, 18 Mar 2025 10:38:16 -0400
Subject: [PATCH 15/27] refactor(actionbutton): simplify high contrast styles

Refactors high contrast styles and custom properties to remove
unnecessary variables, and adds some documentation.
---
 components/actionbutton/index.css | 59 +++++++++++++------------------
 1 file changed, 25 insertions(+), 34 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 1a313abadbd..f28b44db2b2 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -259,18 +259,18 @@ governing permissions and limitations under the License.
 	color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
 
 	&:hover {
-		background-color: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
-		color: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
+		background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
+		color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
 	}
 
 	&:focus-visible {
-		background-color: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)));
-		color: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus)));
+		background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)));
+		color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus)));
 	}
 
 	&:active {
-		background-color: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)));
-		color: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down)));
+		background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)));
+		color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down)));
 		transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
 	}
 
@@ -355,71 +355,62 @@ a.spectrum-ActionButton {
 @media (forced-colors: active) {
 	.spectrum-ActionButton {
 		&::after {
-			/* make sure the box-shadow for the focus indicator renders */
+			/* Make sure the box-shadow for the focus indicator renders. */
 			forced-color-adjust: none;
 		}
 
 		.spectrum-ActionButton-icon,
 		.spectrum-ActionButton-hold,
 		.spectrum-ActionButton-label {
-			/* Fix for extra unwanted background color on label ("readability backplate"). */
+			/* Removes the extra unwanted background on label ("readability backplate") that can cause text to be unreadable. */
 			forced-color-adjust: none;
 		}
 
-		--highcontrast-actionbutton-focus-indicator-color: CanvasText;
+		/**
+		 * Default
+		 * - Uses "Button*" system color pairings.
+		 * - Focus indicator is outside the element and should contrast with its background (default of Canvas).
+		 */
 		--highcontrast-actionbutton-border-color: ButtonBorder;
-
 		--highcontrast-actionbutton-background-color-default: ButtonFace;
-		--highcontrast-actionbutton-background-color-hover: ButtonFace;
-		--highcontrast-actionbutton-background-color-focus: ButtonFace;
-		--highcontrast-actionbutton-background-color-down: ButtonFace;
-		--highcontrast-actionbutton-background-color-disabled: ButtonFace;
-
 		--highcontrast-actionbutton-content-color-default: ButtonText;
-		--highcontrast-actionbutton-content-color-hover: ButtonText;
-		--highcontrast-actionbutton-content-color-focus: ButtonText;
-		--highcontrast-actionbutton-content-color-down: ButtonText;
+
+		--highcontrast-actionbutton-background-color-disabled: ButtonFace;
 		--highcontrast-actionbutton-content-color-disabled: GrayText;
 
+		--highcontrast-actionbutton-focus-indicator-color: CanvasText;
+
+		/**
+		 * Quiet
+		 * - Default blends in with background and has no border.
+		 * - Quiet + disabled does not show border unless selected.
+		 */
 		&.spectrum-ActionButton--quiet {
 			--highcontrast-actionbutton-border-color: Canvas;
-
 			--highcontrast-actionbutton-background-color-default: Canvas;
-			--highcontrast-actionbutton-background-color-hover: Canvas;
-			--highcontrast-actionbutton-background-color-focus: Canvas;
-			--highcontrast-actionbutton-background-color-down: Canvas;
 			--highcontrast-actionbutton-background-color-disabled: Canvas;
-
 			--highcontrast-actionbutton-content-color-default: CanvasText;
-			--highcontrast-actionbutton-content-color-hover: CanvasText;
-			--highcontrast-actionbutton-content-color-focus: CanvasText;
-			--highcontrast-actionbutton-content-color-down: CanvasText;
 
 			&:disabled:not(.is-selected) {
 				--highcontrast-actionbutton-border-color: Canvas;
 			}
 		}
 
+		/* Interaction shows a change in border color. */
 		&:hover,
 		&:active,
 		&:focus-visible {
 			--highcontrast-actionbutton-border-color: Highlight;
 		}
 
+		/* Selected always shows as a solid highlighted color. */
 		&.is-selected {
 			--highcontrast-actionbutton-border-color: Highlight;
-
 			--highcontrast-actionbutton-background-color-default: Highlight;
-			--highcontrast-actionbutton-background-color-hover: Highlight;
-			--highcontrast-actionbutton-background-color-focus: Highlight;
-			--highcontrast-actionbutton-background-color-down: Highlight;
-
 			--highcontrast-actionbutton-content-color-default: HighlightText;
-			--highcontrast-actionbutton-content-color-hover: HighlightText;
-			--highcontrast-actionbutton-content-color-focus: HighlightText;
-			--highcontrast-actionbutton-content-color-down: HighlightText;
 		}
 
+		/* Disabled has a GrayText border and content color. */
 		&:disabled {
 			--highcontrast-actionbutton-border-color: GrayText;
 		}

From 7d2fab0cf442b9b70e30ac7088569eac63ba78b2 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:05:32 -0400
Subject: [PATCH 16/27] fix(actionbutton): use full line-height to prevent cut
 off diacritics

Keep the previous S1 behavior of setting the line-height to the full
component height. This prevents Thai diacritics from being cut off (see
existing Storybook test). Note: this line-height is taller than both
line-height-100 and cjk-line-height-100 listed on the design spec. Using
those had resulted in the diacritics cutting off again.
---
 components/actionbutton/index.css | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index f28b44db2b2..f8318dfb115 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -42,7 +42,9 @@ governing permissions and limitations under the License.
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
 	--spectrum-actionbutton-font-weight: var(--spectrum-medium-font-weight);
 	--spectrum-actionbutton-font-style: var(--spectrum-default-font-style);
-	--spectrum-actionbutton-line-height: var(--spectrum-line-height-100);
+
+	/* Take up full component height for line-height, in order to help prevent characters from being cut off in some languages (e.g. Thai). */
+	--spectrum-actionbutton-line-height: var(--spectrum-actionbutton-height);
 
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
 	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
@@ -57,12 +59,6 @@ governing permissions and limitations under the License.
 		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 	}
 
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-actionbutton-line-height: var(--spectrum-cjk-line-height-100);
-	}
-
 	&.spectrum-ActionButton--quiet {
 		--spectrum-actionbutton-background-color-default: transparent;
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);

From 4eb1989c3822b43dc6f4d0fbe7ad3a6c67bb030a Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:28:47 -0400
Subject: [PATCH 17/27] chore(actionbutton): update changeset description and
 rebuild metadata

---
 .changeset/chilled-peaches-enjoy.md        |  2 +-
 components/actionbutton/dist/metadata.json | 16 +++-------------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/.changeset/chilled-peaches-enjoy.md b/.changeset/chilled-peaches-enjoy.md
index 940f39d493c..fa6b35b4761 100644
--- a/.changeset/chilled-peaches-enjoy.md
+++ b/.changeset/chilled-peaches-enjoy.md
@@ -6,7 +6,7 @@ feat(actionbutton): S2 migration
 
 Action button now uses Spectrum 2 tokens and design specifications. A few notable changes:
 
-- Medium is now the default size and `.spectrum-Switch--sizeM` has been removed.
+- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed.
 - Includes the Spectrum 2 down state transform.
 - The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border. The mod custom properties for border were removed to avoid interference with Windows High Contrast / forced colors accessibility.
 - Background and content colors were updated.
diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index 3d27815ab6c..50795c93643 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -2,6 +2,9 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ActionButton",
+    ".spectrum-ActionButton .spectrum-ActionButton-hold",
+    ".spectrum-ActionButton .spectrum-ActionButton-icon",
+    ".spectrum-ActionButton .spectrum-ActionButton-label",
     ".spectrum-ActionButton--sizeL",
     ".spectrum-ActionButton--sizeS",
     ".spectrum-ActionButton--sizeXL",
@@ -14,9 +17,6 @@
     ".spectrum-ActionButton-label:empty",
     ".spectrum-ActionButton.is-disabled",
     ".spectrum-ActionButton.is-selected",
-    ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
-    ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
-    ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
@@ -36,9 +36,6 @@
     ".spectrum-ActionButton:focus-visible",
     ".spectrum-ActionButton:focus-visible:after",
     ".spectrum-ActionButton:hover",
-    ".spectrum-ActionButton:lang(ja)",
-    ".spectrum-ActionButton:lang(ko)",
-    ".spectrum-ActionButton:lang(zh)",
     "[dir=\"rtl\"] .spectrum-ActionButton",
     "a.spectrum-ActionButton"
   ],
@@ -135,7 +132,6 @@
     "--spectrum-animation-duration-100",
     "--spectrum-black",
     "--spectrum-border-width-100",
-    "--spectrum-cjk-line-height-100",
     "--spectrum-component-edge-to-text-100",
     "--spectrum-component-edge-to-text-200",
     "--spectrum-component-edge-to-text-300",
@@ -228,15 +224,9 @@
   "high-contrast": [
     "--highcontrast-actionbutton-background-color-default",
     "--highcontrast-actionbutton-background-color-disabled",
-    "--highcontrast-actionbutton-background-color-down",
-    "--highcontrast-actionbutton-background-color-focus",
-    "--highcontrast-actionbutton-background-color-hover",
     "--highcontrast-actionbutton-border-color",
     "--highcontrast-actionbutton-content-color-default",
     "--highcontrast-actionbutton-content-color-disabled",
-    "--highcontrast-actionbutton-content-color-down",
-    "--highcontrast-actionbutton-content-color-focus",
-    "--highcontrast-actionbutton-content-color-hover",
     "--highcontrast-actionbutton-focus-indicator-color"
   ]
 }

From 5f0faa9304aa3304176f9f04c9a0510b62ceed82 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Wed, 19 Mar 2025 10:47:22 -0400
Subject: [PATCH 18/27] feat(actionbutton): refactor using "has" to reduce
 complexity

Adjust some selectors to use :has in order to remove some overly complex
calc functions, and to use the inline spacing tokens more like they are
defined on the token specs. Now that :has is supported and used in our
library, this simplifies this usage and removes some requirements for
the source order of action button's child elements.
---
 .changeset/chilled-peaches-enjoy.md           |  1 +
 components/actionbutton/dist/metadata.json    |  4 ++--
 components/actionbutton/index.css             | 22 ++++++++-----------
 .../stories/actionbutton.stories.js           |  4 +---
 4 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/.changeset/chilled-peaches-enjoy.md b/.changeset/chilled-peaches-enjoy.md
index fa6b35b4761..7fe8d351b3f 100644
--- a/.changeset/chilled-peaches-enjoy.md
+++ b/.changeset/chilled-peaches-enjoy.md
@@ -9,6 +9,7 @@ Action button now uses Spectrum 2 tokens and design specifications. A few notabl
 - Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed.
 - Includes the Spectrum 2 down state transform.
 - The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border. The mod custom properties for border were removed to avoid interference with Windows High Contrast / forced colors accessibility.
+- Some selectors to target the icon + text button and the icon-only button have been simplified using `:has`. This removes some overly complex `calc()` functions used for inline spacing, uses the design tokens more directly, and removes the previously documented need for the component's child elements to use a specific source order.
 - Background and content colors were updated.
 - Mod custom properties have been adjusted:
   - Renamed:
diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index 50795c93643..6b2a2faccf1 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -10,9 +10,7 @@
     ".spectrum-ActionButton--sizeXL",
     ".spectrum-ActionButton--sizeXS",
     ".spectrum-ActionButton-hold",
-    ".spectrum-ActionButton-hold + .spectrum-ActionButton-icon",
     ".spectrum-ActionButton-icon",
-    ".spectrum-ActionButton-icon:only-child",
     ".spectrum-ActionButton-label",
     ".spectrum-ActionButton-label:empty",
     ".spectrum-ActionButton.is-disabled",
@@ -35,7 +33,9 @@
     ".spectrum-ActionButton:focus",
     ".spectrum-ActionButton:focus-visible",
     ".spectrum-ActionButton:focus-visible:after",
+    ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
     ".spectrum-ActionButton:hover",
+    ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
     "[dir=\"rtl\"] .spectrum-ActionButton",
     "a.spectrum-ActionButton"
   ],
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index f8318dfb115..816d59f6ac5 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -247,8 +247,7 @@ governing permissions and limitations under the License.
 	border-color: var(--highcontrast-actionbutton-border-color, var(--spectrum-actionbutton-border-color));
 	border-style: solid;
 
-	gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + (var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))));
-
+	gap: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual));
 	padding-inline: calc(var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--spectrum-actionbutton-border-width));
 
 	background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
@@ -286,18 +285,17 @@ a.spectrum-ActionButton {
 
 	inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
 	block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
-
-	/* adjust icon positioning to match UI kit */
-	margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
-	margin-inline-end: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
-
 	color: inherit;
 }
 
-.spectrum-ActionButton-hold + .spectrum-ActionButton-icon,
-.spectrum-ActionButton-icon:only-child {
-	/* Augment the margin correction for the icon only scenario */
-	margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)));
+/* Icon and label text */
+.spectrum-ActionButton:has(.spectrum-ActionButton-icon) {
+	padding-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--spectrum-actionbutton-border-width));
+}
+
+/* Icon only */
+.spectrum-ActionButton:not(:has(.spectrum-ActionButton-label)) {
+	padding-inline: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--spectrum-actionbutton-border-width));
 }
 
 .spectrum-ActionButton-label {
@@ -318,9 +316,7 @@ a.spectrum-ActionButton {
 	position: absolute;
 	inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
 	inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
-
 	color: inherit;
-
 	transform: var(--spectrum-logical-rotation);
 }
 
diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index ba16a4a9493..7148edd32ba 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -12,9 +12,7 @@ import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from
  *
  * ## Usage notes
  *
- * For action buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup. If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element.
- *
- * If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element.
+ * For action buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup.
  *
  * When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticBlack`, use the `--mod-actionbutton-content-color-default` custom property to set the text color when selected.
  */

From 924f064fbf81a5a4687b65a99cfc57744f262213 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Wed, 19 Mar 2025 12:06:40 -0400
Subject: [PATCH 19/27] docs(actionbutton): remove outdated docs and add static
 docs

Usage notes about using a mod for static colors no longer applies;
the --mod-actionbutton-content-color-default-selected mod and similar
selected state mods work correctly to change the content color for
static.

Adds some basic intro docs for static colors, pulled from the
guidelines.
---
 components/actionbutton/stories/actionbutton.stories.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index 7148edd32ba..1f47abb5704 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -13,8 +13,6 @@ import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from
  * ## Usage notes
  *
  * For action buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup.
- *
- * When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticBlack`, use the `--mod-actionbutton-content-color-default` custom property to set the text color when selected.
  */
 export default {
 	title: "Action button",
@@ -209,6 +207,11 @@ StaticWhiteQuiet.parameters = {
 };
 
 /**
+ * When an action button needs to be placed on top of a color background or a visual, use the static color
+ * option. Use static black on light color or image backgrounds, and static white on dark color or image
+ * backgrounds, regardless of the color theme. For more info, see the
+ * [design guidelines](https://spectrum.adobe.com/page/action-button/#Static-color).
+ *
  * Emphasized is not supported for the static black and static white variants.
  */
 export const StaticBlackDocs = TreatmentTemplate.bind({});

From 43f384d0091cef9a9bf9e9fcd25a57c6bbf50c45 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Wed, 19 Mar 2025 13:46:32 -0400
Subject: [PATCH 20/27] docs(actionbutton): add docs story for text overflow
 behavior

---
 .../stories/actionbutton.stories.js           | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index 1f47abb5704..9271b64e983 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -5,7 +5,7 @@ import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSe
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { ActionButtonGroup } from "./actionbutton.test.js";
-import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from "./template.js";
+import { ActionButtonsWithIconOptions, IconOnlyOption, Template, TreatmentTemplate } from "./template.js";
 
 /**
  * The action button component represents an action a user can take.
@@ -250,6 +250,26 @@ Sizing.parameters = {
 	chromatic: { disableSnapshot:  true },
 };
 
+/**
+ * When the action button text is too long for the available horizontal space, it truncates at the end.
+ * Implementations should reveal the full text on hover, per this component's
+ * [design guidelines on text overflow](https://spectrum.adobe.com/page/action-button/#Text-overflow).
+ * To demonstrate this behavior, this example sets a maximum width on the button.
+ */
+export const TextOverflowBehavior = Template.bind({});
+TextOverflowBehavior.tags = ["!dev"];
+TextOverflowBehavior.args = {
+	label: "This is extra long text that will cause text truncation",
+	customStyles: {
+		"max-inline-size": "120px",
+	},
+};
+TextOverflowBehavior.parameters = {
+	chromatic: {
+		disableSnapshot: true,
+	},
+};
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ActionButtonGroup.bind({});
 WithForcedColors.args = Default.args;

From 81451a57a8e72536199fef6854203d212cd105fc Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Thu, 20 Mar 2025 11:25:06 -0400
Subject: [PATCH 21/27] docs(actionbutton): clarify text overflow docs
 description

---
 components/actionbutton/stories/actionbutton.stories.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index 9271b64e983..e1bd38463d7 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -252,9 +252,11 @@ Sizing.parameters = {
 
 /**
  * When the action button text is too long for the available horizontal space, it truncates at the end.
- * Implementations should reveal the full text on hover, per this component's
+ * To demonstrate what this looks like, this example sets a maximum width on the button.
+ *
+ * Implementations should also reveal the full text on hover, per this component's
  * [design guidelines on text overflow](https://spectrum.adobe.com/page/action-button/#Text-overflow).
- * To demonstrate this behavior, this example sets a maximum width on the button.
+ * This is not demonstrated here.
  */
 export const TextOverflowBehavior = Template.bind({});
 TextOverflowBehavior.tags = ["!dev"];

From 48fefe90f410711d1b156d392547b757e2b32713 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Thu, 20 Mar 2025 11:26:58 -0400
Subject: [PATCH 22/27] docs(actionbutton): remove size medium class from
 appearing in markup

The .spectrum-ActionButton--sizeM class is no longer used but was still
appearing in the examples markup.
---
 components/actionbutton/stories/template.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
index ef5d1ef8f49..5e916a3e776 100644
--- a/components/actionbutton/stories/template.js
+++ b/components/actionbutton/stories/template.js
@@ -75,7 +75,7 @@ export const Template = ({
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof size !== "undefined",
+					typeof size !== "undefined" && size !== "m",
 				[`${rootClass}--quiet`]: isQuiet,
 				[`${rootClass}--emphasized`]: isEmphasized,
 				[`${rootClass}--static${capitalize(staticColor)}`]:

From bcd021c34ee7ad70ae356ea36563c7187419c50e Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Thu, 20 Mar 2025 11:33:12 -0400
Subject: [PATCH 23/27] chore(actionbutton): update copyright year

---
 components/actionbutton/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 816d59f6ac5..1b42bee6458 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -1,5 +1,5 @@
 /*!
-Copyright 2024 Adobe. All rights reserved.
+Copyright 2025 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0

From 8442bcb8923969397482a4a01a5abfd71b73a07b Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Thu, 20 Mar 2025 12:00:38 -0400
Subject: [PATCH 24/27] fix(actionbutton): disable css transitions in high
 contrast

In Windows High Contrast, the border color briefly was flashing orange
(ButtonBorder) after hover, before it switched back to the correct color
as defined by the styles. This fixes that issue.

This removes CSS transitions in high contrast to avoid some of these
rendering issues and previously noticed sluggishness in the system color
transitions.
---
 components/actionbutton/index.css | 34 ++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 1b42bee6458..e08737894eb 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -322,14 +322,14 @@ a.spectrum-ActionButton {
 
 /* Focus indicator */
 .spectrum-ActionButton {
-	transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+	transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
 
 	&::after {
 		position: absolute;
 		inset: 0;
 		margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
 		border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
-		transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+		transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
 		pointer-events: none;
 		content: "";
 	}
@@ -346,18 +346,6 @@ a.spectrum-ActionButton {
 
 @media (forced-colors: active) {
 	.spectrum-ActionButton {
-		&::after {
-			/* Make sure the box-shadow for the focus indicator renders. */
-			forced-color-adjust: none;
-		}
-
-		.spectrum-ActionButton-icon,
-		.spectrum-ActionButton-hold,
-		.spectrum-ActionButton-label {
-			/* Removes the extra unwanted background on label ("readability backplate") that can cause text to be unreadable. */
-			forced-color-adjust: none;
-		}
-
 		/**
 		 * Default
 		 * - Uses "Button*" system color pairings.
@@ -372,6 +360,24 @@ a.spectrum-ActionButton {
 
 		--highcontrast-actionbutton-focus-indicator-color: CanvasText;
 
+		/**
+		 * Avoid performance and rendering issues with transitions between system colors.
+		 * Fixes bug in Windows High Contrast where border flashes the wrong color after hover (quiet).
+		 */
+		--highcontrast-actionbutton-animation-duration: 0;
+
+		&::after {
+			/* Make sure the box-shadow for the focus indicator renders. */
+			forced-color-adjust: none;
+		}
+
+		.spectrum-ActionButton-icon,
+		.spectrum-ActionButton-hold,
+		.spectrum-ActionButton-label {
+			/* Removes the extra unwanted background on label ("readability backplate") that can cause text to be unreadable. */
+			forced-color-adjust: none;
+		}
+
 		/**
 		 * Quiet
 		 * - Default blends in with background and has no border.

From 398aa2287f3219580e80213ecfb775856ce98c72 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Thu, 20 Mar 2025 12:19:38 -0400
Subject: [PATCH 25/27] chore(actionbutton): rebuild metadata

---
 components/actionbutton/dist/metadata.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index 6b2a2faccf1..655e8bdff1f 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -222,6 +222,7 @@
     "--mod-button-line-height"
   ],
   "high-contrast": [
+    "--highcontrast-actionbutton-animation-duration",
     "--highcontrast-actionbutton-background-color-default",
     "--highcontrast-actionbutton-background-color-disabled",
     "--highcontrast-actionbutton-border-color",

From 62837647faace05ce829d70979641035cf521330 Mon Sep 17 00:00:00 2001
From: "[ Cassondra ]" <castastrophe@users.noreply.github.com>
Date: Fri, 21 Mar 2025 10:06:40 -0400
Subject: [PATCH 26/27] chore: update changeset

---
 .changeset/chilled-peaches-enjoy.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.changeset/chilled-peaches-enjoy.md b/.changeset/chilled-peaches-enjoy.md
index 7fe8d351b3f..f7a8def296a 100644
--- a/.changeset/chilled-peaches-enjoy.md
+++ b/.changeset/chilled-peaches-enjoy.md
@@ -2,8 +2,6 @@
 "@spectrum-css/actionbutton": major
 ---
 
-feat(actionbutton): S2 migration
-
 Action button now uses Spectrum 2 tokens and design specifications. A few notable changes:
 
 - Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed.

From 0254045716f9aac40880b86bd2b1e55847595541 Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Fri, 21 Mar 2025 10:11:50 -0400
Subject: [PATCH 27/27] chore(actionbutton): storybook template update

---
 components/actionbutton/stories/template.js | 51 +++++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
index 5e916a3e776..942c3bccefa 100644
--- a/components/actionbutton/stories/template.js
+++ b/components/actionbutton/stories/template.js
@@ -66,6 +66,7 @@ export const Template = ({
 	testId,
 	role = "button",
 } = {}, context = {}) => {
+	const { updateArgs } = context;
 	return html`
 		<button
 			aria-label=${ifDefined(hideLabel ? label : undefined)}
@@ -75,7 +76,7 @@ export const Template = ({
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof size !== "undefined" && size !== "m",
+					typeof size !== "undefined",
 				[`${rootClass}--quiet`]: isQuiet,
 				[`${rootClass}--emphasized`]: isEmphasized,
 				[`${rootClass}--static${capitalize(staticColor)}`]:
@@ -92,7 +93,17 @@ export const Template = ({
 			role=${ifDefined(role)}
 			style=${styleMap(customStyles)}
 			?disabled=${isDisabled}
-			@click=${ifDefined(onclick)}
+			@click=${onclick ?? function() {
+				updateArgs({
+					isSelected: !isSelected
+				});
+			}}
+			@focusin=${function() {
+				updateArgs({ isFocused: true });
+			}}
+			@focusout=${function() {
+				updateArgs({ isFocused: false });
+			}}
 		>
 			${when(hasPopup && hasPopup !== "false", () =>
 				Icon({
@@ -135,29 +146,29 @@ export const ActionButtonsWithIconOptions = (args, context) => Container({
 	wrapperStyles: {
 		columnGap: "12px",
 	},
-	content: html`
-		${Template({
+	content: [
+		Template({
 			...args,
 			iconName: undefined,
-		}, context)}
-		${Template({
+		}, context),
+		Template({
 			...args,
-		}, context)}
-		${Template({
+		}, context),
+		Template({
 			...args,
 			hideLabel: true,
-		}, context)}
-		${Template({
+		}, context),
+		Template({
 			...args,
 			hideLabel: true,
 			hasPopup: "true",
-		}, context)}
-		${Template({
+		}, context),
+		Template({
 			...args,
 			iconName: undefined,
 			hasPopup: "true",
-		}, context)}
-	`
+		}, context)
+	],
 }, context);
 
 /**
@@ -171,19 +182,19 @@ export const IconOnlyOption = (args, context) => Container({
 	wrapperStyles: {
 		columnGap: "12px",
 	},
-	content: html`
-		${Template({
+	content: [
+		Template({
 			...args,
 			hideLabel: true,
 			hasPopup: "true",
-		}, context)}
-		${Template({
+		}, context),
+		Template({
 			...args,
 			hideLabel: true,
 			isQuiet: true,
 			hasPopup: "true",
-		}, context)}
-	`
+		}, context),
+	],
 }, context);
 
 /**