From 6433d6fc31248f1a57a46cf62bc1f89c77966f45 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 4 Aug 2025 11:14:07 -0500
Subject: [PATCH 01/14] docs(infieldbutton): remove unused invalid state from
 template

---
 components/infieldbutton/stories/template.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js
index 02185b17d4e..06eca6f321f 100644
--- a/components/infieldbutton/stories/template.js
+++ b/components/infieldbutton/stories/template.js
@@ -15,7 +15,6 @@ export const Template = (
 		iconName = "ChevronDown",
 		iconSet = "ui",
 		isDisabled,
-		isInvalid,
 		isHovered,
 		isActive,
 		isInline,
@@ -38,7 +37,6 @@ export const Template = (
 					[`${rootClass}--size${size?.toUpperCase()}`]:
 						typeof size !== "undefined",
 					[`${rootClass}--quiet`]: isQuiet,
-					"is-invalid": isInvalid,
 					"is-hover": isHovered,
 					"is-active": isActive,
 					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -68,7 +66,6 @@ export const Template = (
 						[`${rootClass}--size${size?.toUpperCase()}`]:
 							typeof size !== "undefined",
 						[`${rootClass}--quiet`]: isQuiet,
-						"is-invalid": isInvalid,
 						"is-hover": isHovered,
 						"is-active": isActive,
 						...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -101,7 +98,6 @@ export const Template = (
 						[`${rootClass}--size${size?.toUpperCase()}`]:
 							typeof size !== "undefined",
 						[`${rootClass}--quiet`]: isQuiet,
-						"is-invalid": isInvalid,
 						"is-hover": isHovered,
 						"is-active": isActive,
 						...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),

From 34fe8b021487b0fdd9a9ab3f59f4cb1174d9a875 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 4 Aug 2025 15:59:05 -0500
Subject: [PATCH 02/14] fix(infieldbutton): remove unused keyfocus and border
 mods

---
 .changeset/green-falcons-rush.md            | 5 +++++
 components/infieldbutton/dist/metadata.json | 7 -------
 components/infieldbutton/index.css          | 7 +------
 3 files changed, 6 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/green-falcons-rush.md

diff --git a/.changeset/green-falcons-rush.md b/.changeset/green-falcons-rush.md
new file mode 100644
index 00000000000..a454b4f41aa
--- /dev/null
+++ b/.changeset/green-falcons-rush.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/infieldbutton": patch
+---
+
+Remove unused key-focus and border mods. Also updates transition to use `background-color` instead of `border-color`.
diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json
index cf5dfa5f4cc..98a823a73c7 100644
--- a/components/infieldbutton/dist/metadata.json
+++ b/components/infieldbutton/dist/metadata.json
@@ -34,13 +34,8 @@
     "--mod-infield-button-background-color-hover",
     "--mod-infield-button-background-color-hover-disabled",
     "--mod-infield-button-background-color-hover-quiet",
-    "--mod-infield-button-background-color-key-focus",
-    "--mod-infield-button-background-color-key-focus-quiet",
     "--mod-infield-button-background-color-quiet",
     "--mod-infield-button-background-color-quiet-disabled",
-    "--mod-infield-button-border-color",
-    "--mod-infield-button-border-color-disabled",
-    "--mod-infield-button-border-color-quiet-disabled",
     "--mod-infield-button-border-radius",
     "--mod-infield-button-edge-to-fill",
     "--mod-infield-button-field-edge-to-icon",
@@ -53,8 +48,6 @@
     "--mod-infield-button-icon-color-down-disabled",
     "--mod-infield-button-icon-color-hover",
     "--mod-infield-button-icon-color-hover-disabled",
-    "--mod-infield-button-icon-color-key-focus",
-    "--mod-infield-button-icon-color-key-focus-disabled",
     "--mod-infield-button-side-edge-to-fill",
     "--mod-infield-button-width"
   ],
diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css
index a237fc6c698..0ef636058d8 100644
--- a/components/infieldbutton/index.css
+++ b/components/infieldbutton/index.css
@@ -44,12 +44,9 @@
 		--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
 		--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
 
-		--mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color));
-
 		--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
 		--mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
 		--mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
-		--mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color));
 	}
 
 	&.spectrum-InfieldButton--sizeS {
@@ -87,11 +84,9 @@
 		--mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent);
 		--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent);
 		--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent);
-		--mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent);
 
 		&:disabled {
 			--mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent);
-			--mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent);
 		}
 	}
 
@@ -161,7 +156,7 @@
 	align-items: center;
 	justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));
 
-	transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
+	transition: background-color var(--spectrum-animation-duration-100) ease-in-out;
 }
 
 .spectrum-InfieldButton-icon {

From 12cf7d8a0e83ac2bd386f7bdbeb910d3951bef07 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 4 Aug 2025 06:59:45 -0500
Subject: [PATCH 03/14] feat(pickerbutton): add hover/active states to tests
 and controls

---
 .../pickerbutton/stories/pickerbutton.stories.js     |  6 +++++-
 components/pickerbutton/stories/pickerbutton.test.js | 12 ++++++++++--
 components/pickerbutton/stories/template.js          |  4 ++++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index c01a0f00eec..b058740e7ed 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -1,7 +1,7 @@
 import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js";
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isDisabled, isFocused, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
+import { isActive, isDisabled, isFocused, isHovered, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { PickerGroup } from "./pickerbutton.test.js";
@@ -52,6 +52,8 @@ export default {
 			},
 			control: "boolean",
 		},
+		isActive,
+		isHovered,
 		isQuiet,
 		isDisabled,
 		isFocused: {
@@ -75,6 +77,8 @@ export default {
 		rootClass: "spectrum-PickerButton",
 		label: undefined,
 		size: "m",
+		isActive: false,
+		isHovered: false,
 		isOpen: false,
 		isRounded: false,
 		isQuiet: false,
diff --git a/components/pickerbutton/stories/pickerbutton.test.js b/components/pickerbutton/stories/pickerbutton.test.js
index 2e436ac7df0..f64469c850d 100644
--- a/components/pickerbutton/stories/pickerbutton.test.js
+++ b/components/pickerbutton/stories/pickerbutton.test.js
@@ -26,12 +26,20 @@ export const PickerGroup = Variants({
 	],
 	stateData: [
 		{
-			testHeading: "Disabled",
-			isDisabled: true,
+			testHeading: "Hovered",
+			isHovered: true,
 		},
 		{
 			testHeading: "Focused",
 			isFocused: true,
 		},
+		{
+			testHeading: "Active",
+			isActive: true,
+		},
+		{
+			testHeading: "Disabled",
+			isDisabled: true,
+		},
 	]
 });
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 6adcb7398fd..6637521bf39 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -17,6 +17,8 @@ export const Template = ({
 	position,
 	iconSet = "ui",
 	iconName = "ChevronDown",
+	isActive = false,
+	isHovered = false,
 	isDisabled = false,
 	isFocused = false,
 	isOpen = false,
@@ -40,6 +42,8 @@ export const Template = ({
 				[`${rootClass}--rounded`]: isRounded,
 				[`${rootClass}--size${size?.toUpperCase()}`]:
 					typeof size !== "undefined",
+				"is-active": isActive,
+				"is-hover": isHovered,
 				"is-disabled": isDisabled,
 				"is-focused": isFocused,
 				"is-open": isOpen && !isDisabled,

From 04e71abce7a26e4acbe26380e29d0e4712515b92 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 4 Aug 2025 07:56:43 -0500
Subject: [PATCH 04/14] docs(pickerbutton): update params

---
 .../stories/pickerbutton.stories.js           | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index b058740e7ed..754227e4acc 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -1,5 +1,5 @@
 import { default as Icon } 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, isFocused, isHovered, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
@@ -91,7 +91,24 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		actions: {
+			handles: ["click .spectrum-PickerButton"],
+		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2---Desktop?node-id=126176-34080&m=dev"
+		},
+		downState: {
+			selectors: [".spectrum-PickerButton:not(:disabled)"],
+		},
+	},
+	status: {
+		type: "migrated",
 	},
+	decorators: [
+		withDownStateDimensionCapture,
+	],
+	tags: ["migrated"],
 };
 
 export const Default = PickerGroup.bind({});

From 04a16b403931f5a58fb2ebe605b4f3677e5eda89 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 4 Aug 2025 10:30:58 -0500
Subject: [PATCH 05/14] refactor(pickerbutton): pull out rounded and position
 variants

---
 components/pickerbutton/dist/metadata.json    | 12 -------
 components/pickerbutton/index.css             | 30 ----------------
 .../stories/pickerbutton.stories.js           | 36 -------------------
 .../pickerbutton/stories/pickerbutton.test.js |  8 -----
 components/pickerbutton/stories/template.js   |  4 ---
 5 files changed, 90 deletions(-)

diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index c6186980d83..1f4ea55ef5a 100644
--- a/components/pickerbutton/dist/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -2,11 +2,6 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-PickerButton",
-    ".spectrum-PickerButton--left .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton--right .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
     ".spectrum-PickerButton--textuiicon .spectrum-PickerButton-fill",
     ".spectrum-PickerButton--uiicononly .spectrum-PickerButton-fill",
     ".spectrum-PickerButton--uiicononly .spectrum-PickerButton-label",
@@ -44,9 +39,6 @@
     "--mod-picker-button-border-color-disabled",
     "--mod-picker-button-border-color-quiet",
     "--mod-picker-button-border-radius",
-    "--mod-picker-button-border-radius-rounded",
-    "--mod-picker-button-border-radius-rounded-sided",
-    "--mod-picker-button-border-radius-sided",
     "--mod-picker-button-border-width",
     "--mod-picker-button-fill-padding",
     "--mod-picker-button-font-color",
@@ -81,9 +73,6 @@
     "--spectrum-picker-button-background-color-key-focus",
     "--spectrum-picker-button-border-color",
     "--spectrum-picker-button-border-radius",
-    "--spectrum-picker-button-border-radius-rounded",
-    "--spectrum-picker-button-border-radius-rounded-sided",
-    "--spectrum-picker-button-border-radius-sided",
     "--spectrum-picker-button-border-width",
     "--spectrum-picker-button-fill-padding",
     "--spectrum-picker-button-font-color",
@@ -113,7 +102,6 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-corner-radius-100",
-    "--spectrum-corner-radius-200",
     "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index 65e1f840c19..40919b688ec 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -39,10 +39,7 @@
 
 	--spectrum-picker-button-border-color: inherit;
 	--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
-	--spectrum-picker-button-border-radius-rounded-sided: 0;
-	--spectrum-picker-button-border-radius-sided: 0;
 	--spectrum-picker-button-border-width: var(--spectrum-border-width-100);
-	--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
 
 	--spectrum-picker-button-background-color: var(--spectrum-gray-50);
 	--spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
@@ -178,33 +175,6 @@
 
 	transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
 
-	.spectrum-PickerButton--right & {
-		border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-		border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-	}
-
-	.spectrum-PickerButton--right.spectrum-PickerButton--rounded & {
-		border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-		border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-	}
-
-	.spectrum-PickerButton--left & {
-		border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-		border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
-	}
-
-	.spectrum-PickerButton--left.spectrum-PickerButton--rounded & {
-		border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-		border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
-	}
-
-	.spectrum-PickerButton--rounded & {
-		border-end-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
-		border-end-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
-		border-start-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
-		border-start-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
-	}
-
 	.spectrum-PickerButton--uiicononly & {
 		padding: 0;
 	}
diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index 754227e4acc..fe965f76af8 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -42,16 +42,6 @@ export default {
 			...isOpen,
 			if: { arg: "isDisabled", truthy: false }
 		},
-		isRounded: {
-			name: "Rounded",
-			description: "Increases the amount of rounding on the rounded corners.",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "Component",
-			},
-			control: "boolean",
-		},
 		isActive,
 		isHovered,
 		isQuiet,
@@ -60,18 +50,6 @@ export default {
 			...isFocused,
 			if: { arg: "isDisabled", truthy: false }
 		},
-		position: {
-			name: "Position",
-			description:
-				"Denotes which side of a form field the button is displayed; this influences which corners are rounded.",
-			type: { name: "string", required: true },
-			table: {
-				type: { summary: "string" },
-				category: "Component",
-			},
-			options: ["right", "left"],
-			control: "inline-radio",
-		},
 	},
 	args: {
 		rootClass: "spectrum-PickerButton",
@@ -80,13 +58,11 @@ export default {
 		isActive: false,
 		isHovered: false,
 		isOpen: false,
-		isRounded: false,
 		isQuiet: false,
 		isDisabled: false,
 		isFocused: false,
 		iconSet: "ui",
 		iconName: "ChevronDown",
-		position: "right",
 	},
 	parameters: {
 		packageJson,
@@ -173,18 +149,6 @@ CustomIcon.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
-/**
- * The `spectrum-PickerButton--rounded` class increases the amount of rounding on the rounded corners.
- */
-export const Rounded = Template.bind({});
-Rounded.tags = ["!dev"];
-Rounded.args = {
-	isRounded: true,
-};
-Rounded.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
 export const Quiet = Template.bind({});
 Quiet.tags = ["!dev"];
 Quiet.args = {
diff --git a/components/pickerbutton/stories/pickerbutton.test.js b/components/pickerbutton/stories/pickerbutton.test.js
index f64469c850d..faa2e357e17 100644
--- a/components/pickerbutton/stories/pickerbutton.test.js
+++ b/components/pickerbutton/stories/pickerbutton.test.js
@@ -15,14 +15,6 @@ export const PickerGroup = Variants({
 			testHeading: "Quiet",
 			isQuiet: true,
 		},
-		{
-			testHeading: "Rounded",
-			isRounded: true,
-		},
-		{
-			testHeading: "Position: left",
-			position: "left",
-		}
 	],
 	stateData: [
 		{
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 6637521bf39..a4387341701 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -14,7 +14,6 @@ export const Template = ({
 	id = getRandomId("pickerbutton"),
 	size = "m",
 	label,
-	position,
 	iconSet = "ui",
 	iconName = "ChevronDown",
 	isActive = false,
@@ -24,7 +23,6 @@ export const Template = ({
 	isOpen = false,
 	isQuiet = false,
 	customClasses = [],
-	isRounded = false,
 	customStyles = {},
 	onclick,
 	tabindex,
@@ -38,8 +36,6 @@ export const Template = ({
 				[`${rootClass}--textuiicon`]: label && iconSet === "ui",
 				[`${rootClass}--uiicononly`]: !label && iconSet === "ui",
 				[`${rootClass}--icononly`]: !label && iconSet !== "ui",
-				[`${rootClass}--${position}`]: typeof position !== "undefined",
-				[`${rootClass}--rounded`]: isRounded,
 				[`${rootClass}--size${size?.toUpperCase()}`]:
 					typeof size !== "undefined",
 				"is-active": isActive,

From 8642064e26e5fb48868c59c0133e2c89212f9008 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 5 Aug 2025 08:54:24 -0500
Subject: [PATCH 06/14] docs(pickerbutton): remove focus state from template

---
 components/pickerbutton/stories/pickerbutton.stories.js | 7 +------
 components/pickerbutton/stories/pickerbutton.test.js    | 4 ----
 components/pickerbutton/stories/template.js             | 2 --
 3 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index fe965f76af8..e0c6ba68c8f 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -1,7 +1,7 @@
 import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js";
 import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isActive, isDisabled, isFocused, isHovered, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
+import { isActive, isDisabled, isHovered, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { PickerGroup } from "./pickerbutton.test.js";
@@ -46,10 +46,6 @@ export default {
 		isHovered,
 		isQuiet,
 		isDisabled,
-		isFocused: {
-			...isFocused,
-			if: { arg: "isDisabled", truthy: false }
-		},
 	},
 	args: {
 		rootClass: "spectrum-PickerButton",
@@ -60,7 +56,6 @@ export default {
 		isOpen: false,
 		isQuiet: false,
 		isDisabled: false,
-		isFocused: false,
 		iconSet: "ui",
 		iconName: "ChevronDown",
 	},
diff --git a/components/pickerbutton/stories/pickerbutton.test.js b/components/pickerbutton/stories/pickerbutton.test.js
index faa2e357e17..5840663a49e 100644
--- a/components/pickerbutton/stories/pickerbutton.test.js
+++ b/components/pickerbutton/stories/pickerbutton.test.js
@@ -21,10 +21,6 @@ export const PickerGroup = Variants({
 			testHeading: "Hovered",
 			isHovered: true,
 		},
-		{
-			testHeading: "Focused",
-			isFocused: true,
-		},
 		{
 			testHeading: "Active",
 			isActive: true,
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index a4387341701..16595b95602 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -19,7 +19,6 @@ export const Template = ({
 	isActive = false,
 	isHovered = false,
 	isDisabled = false,
-	isFocused = false,
 	isOpen = false,
 	isQuiet = false,
 	customClasses = [],
@@ -41,7 +40,6 @@ export const Template = ({
 				"is-active": isActive,
 				"is-hover": isHovered,
 				"is-disabled": isDisabled,
-				"is-focused": isFocused,
 				"is-open": isOpen && !isDisabled,
 				[`${rootClass}--quiet`]: isQuiet,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),

From a9dc9bea79693a85322855954107c7219d90ed82 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 4 Aug 2025 16:00:24 -0500
Subject: [PATCH 07/14] feat(pickerbutton): migrate CSS to S2

---
 components/pickerbutton/dist/metadata.json  |  51 ++++---
 components/pickerbutton/index.css           | 156 ++++++++++----------
 components/pickerbutton/stories/template.js |   4 +-
 3 files changed, 107 insertions(+), 104 deletions(-)

diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index 1f4ea55ef5a..abf12b1e7e0 100644
--- a/components/pickerbutton/dist/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -3,22 +3,18 @@
   "selectors": [
     ".spectrum-PickerButton",
     ".spectrum-PickerButton--textuiicon .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton--uiicononly .spectrum-PickerButton-fill",
-    ".spectrum-PickerButton--uiicononly .spectrum-PickerButton-label",
+    ".spectrum-PickerButton--workflowicon .spectrum-PickerButton-fill",
     ".spectrum-PickerButton-fill",
     ".spectrum-PickerButton-icon",
     ".spectrum-PickerButton-label",
-    ".spectrum-PickerButton.is-focused",
-    ".spectrum-PickerButton.is-keyboardFocused",
     ".spectrum-PickerButton.is-open",
     ".spectrum-PickerButton.spectrum-PickerButton--quiet",
+    ".spectrum-PickerButton.spectrum-PickerButton--quiet:disabled",
     ".spectrum-PickerButton.spectrum-PickerButton--sizeL",
     ".spectrum-PickerButton.spectrum-PickerButton--sizeS",
     ".spectrum-PickerButton.spectrum-PickerButton--sizeXL",
-    ".spectrum-PickerButton.spectrum-PickerButton--uiicononly",
     ".spectrum-PickerButton:active",
     ".spectrum-PickerButton:disabled",
-    ".spectrum-PickerButton:focus",
     ".spectrum-PickerButton:focus-visible",
     ".spectrum-PickerButton:hover"
   ],
@@ -32,14 +28,9 @@
     "--mod-picker-button-background-color-hover",
     "--mod-picker-button-background-color-hover-disabled",
     "--mod-picker-button-background-color-hover-quiet",
-    "--mod-picker-button-background-color-key-focus",
-    "--mod-picker-button-background-color-key-focus-quiet",
     "--mod-picker-button-background-color-quiet",
-    "--mod-picker-button-border-color",
-    "--mod-picker-button-border-color-disabled",
-    "--mod-picker-button-border-color-quiet",
+    "--mod-picker-button-background-color-quiet-disabled",
     "--mod-picker-button-border-radius",
-    "--mod-picker-button-border-width",
     "--mod-picker-button-fill-padding",
     "--mod-picker-button-font-color",
     "--mod-picker-button-font-color-disabled",
@@ -47,7 +38,6 @@
     "--mod-picker-button-font-color-down-disabled",
     "--mod-picker-button-font-color-hover",
     "--mod-picker-button-font-color-hover-disabled",
-    "--mod-picker-button-font-color-key-focus",
     "--mod-picker-button-font-family",
     "--mod-picker-button-font-size",
     "--mod-picker-button-font-style",
@@ -60,25 +50,22 @@
     "--mod-picker-button-icon-color-down-disabled",
     "--mod-picker-button-icon-color-hover",
     "--mod-picker-button-icon-color-hover-disabled",
-    "--mod-picker-button-icon-color-key-focus",
     "--mod-picker-button-label-padding",
     "--mod-picker-button-padding",
-    "--mod-picker-button-width"
+    "--mod-picker-button-width",
+    "--mod-picker-button-workflow-icon-size"
   ],
   "component": [
     "--spectrum-picker-button-background-animation-duration",
     "--spectrum-picker-button-background-color",
     "--spectrum-picker-button-background-color-down",
     "--spectrum-picker-button-background-color-hover",
-    "--spectrum-picker-button-background-color-key-focus",
-    "--spectrum-picker-button-border-color",
     "--spectrum-picker-button-border-radius",
-    "--spectrum-picker-button-border-width",
+    "--spectrum-picker-button-downstate-perspective",
     "--spectrum-picker-button-fill-padding",
     "--spectrum-picker-button-font-color",
     "--spectrum-picker-button-font-color-down",
     "--spectrum-picker-button-font-color-hover",
-    "--spectrum-picker-button-font-color-key-focus",
     "--spectrum-picker-button-font-family",
     "--spectrum-picker-button-font-size",
     "--spectrum-picker-button-font-style",
@@ -88,23 +75,29 @@
     "--spectrum-picker-button-icon-color",
     "--spectrum-picker-button-icon-color-down",
     "--spectrum-picker-button-icon-color-hover",
-    "--spectrum-picker-button-icon-color-key-focus",
     "--spectrum-picker-button-label-padding",
     "--spectrum-picker-button-padding",
-    "--spectrum-picker-button-width"
+    "--spectrum-picker-button-width",
+    "--spectrum-picker-button-workflow-icon-size"
   ],
   "global": [
     "--spectrum-animation-duration-100",
     "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-border-width-100",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-component-size-difference-down",
+    "--spectrum-component-size-width-ratio-down",
+    "--spectrum-corner-radius-small-size-extra-large",
+    "--spectrum-corner-radius-small-size-large",
+    "--spectrum-corner-radius-small-size-medium",
+    "--spectrum-corner-radius-small-size-small",
     "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-downstate-height",
+    "--spectrum-downstate-width",
     "--spectrum-field-edge-to-disclosure-icon-100",
     "--spectrum-field-edge-to-disclosure-icon-200",
     "--spectrum-field-edge-to-disclosure-icon-300",
@@ -115,16 +108,22 @@
     "--spectrum-font-size-75",
     "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-50",
+    "--spectrum-in-field-button-edge-to-fill-extra-large",
+    "--spectrum-in-field-button-edge-to-fill-large",
+    "--spectrum-in-field-button-edge-to-fill-medium",
+    "--spectrum-in-field-button-edge-to-fill-small",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
     "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-75",
     "--spectrum-text-to-visual-200",
     "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-50"
+    "--spectrum-text-to-visual-50",
+    "--spectrum-workflow-icon-size-100",
+    "--spectrum-workflow-icon-size-200",
+    "--spectrum-workflow-icon-size-300",
+    "--spectrum-workflow-icon-size-75"
   ],
   "passthroughs": [],
   "high-contrast": []
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index 40919b688ec..96543ae62ec 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -12,127 +12,139 @@
  */
 
 .spectrum-PickerButton {
-	/* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */
-	--spectrum-picker-button-padding: 4px;
+	--spectrum-picker-button-background-color: var(--spectrum-gray-100);
+	--spectrum-picker-button-background-color-hover: var(--spectrum-gray-200);
+	--spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
+
+	--spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default);
+	--spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down);
 
 	--spectrum-picker-button-height: var(--spectrum-component-height-100);
 	--spectrum-picker-button-width: var(--spectrum-component-height-100);
-	--spectrum-picker-button-gap: var(--spectrum-text-to-visual-50);
+	--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-medium);
+
+	--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-medium); /* equivalent to --spectrum-infield-button-edge-to-fill */
+
+	--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
 
 	--spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50);
-	--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100);
+	--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); /* equivalent to --spectrum-infield-button-inline-edge-to-disclosure-icon */
 
-	--spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default);
-	--spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
-	--spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down);
-	--spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+	--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
+
+	/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */
+	--spectrum-picker-button-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down));
 
+	/* label */
 	--spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default);
 	--spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover);
 	--spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down);
-	--spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
 	--spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-picker-button-font-style: var(--spectrum-default-font-style);
 	--spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
 	--spectrum-picker-button-font-size: var(--spectrum-font-size-100);
+	--spectrum-picker-button-gap: var(--spectrum-text-to-visual-50);
+
+	&:disabled {
+		--mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color));
+		--mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
+		--mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
 
-	--spectrum-picker-button-border-color: inherit;
-	--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
-	--spectrum-picker-button-border-width: var(--spectrum-border-width-100);
+		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color));
+		--mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
+		--mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
 
-	--spectrum-picker-button-background-color: var(--spectrum-gray-50);
-	--spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
-	--spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
-	--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100);
-	--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
+		--mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color));
+		--mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color));
+		--mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color));
+	}
 
 	&:hover {
 		--mod-picker-button-background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover));
-		--mod-picker-button-font-color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover));
 		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover));
+		--mod-picker-button-font-color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover));
 	}
 
 	&:active,
 	&.is-open {
 		--mod-picker-button-background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down));
-		--mod-picker-button-font-color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down));
 		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down));
-	}
-
-	&:focus,
-	&.is-focused,
-	&:focus-visible,
-	&.is-keyboardFocused {
-		--mod-picker-button-background-color: var(--mod-picker-button-background-color-key-focus, var(--spectrum-picker-button-background-color-key-focus));
-		--mod-picker-button-font-color: var(--mod-picker-button-font-color-key-focus, var(--spectrum-picker-button-font-color-key-focus));
-		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus));
-	}
-
-	&:disabled {
-		--mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color));
-		--mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
-		--mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
-		--mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color));
-
-		--mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color));
-		--mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color));
-		--mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color));
-
-		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color));
-		--mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
-		--mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
+		--mod-picker-button-font-color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down));
 	}
 
 	&.spectrum-PickerButton--quiet {
 		--mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent);
 		--mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent);
 		--mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent);
-		--mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent);
 
-		--mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent);
+		&:disabled {
+			--mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet-disabled, transparent);
+		}
 	}
 
 	&.spectrum-PickerButton--sizeS {
 		--spectrum-picker-button-height: var(--spectrum-component-height-75);
 		--spectrum-picker-button-width: var(--spectrum-component-height-75);
+		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-small);
+		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-small);
+		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
 		--spectrum-picker-button-label-padding: var(--spectrum-spacing-75);
+		--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
 		--spectrum-picker-button-font-size: var(--spectrum-font-size-75);
-		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
 	}
 
 	&.spectrum-PickerButton--sizeL {
 		--spectrum-picker-button-height: var(--spectrum-component-height-200);
 		--spectrum-picker-button-width: var(--spectrum-component-height-200);
+		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-large);
+		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-large);
+		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
 		--spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200);
+		--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
 		--spectrum-picker-button-font-size: var(--spectrum-font-size-200);
-		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
 	}
 
 	&.spectrum-PickerButton--sizeXL {
 		--spectrum-picker-button-height: var(--spectrum-component-height-300);
 		--spectrum-picker-button-width: var(--spectrum-component-height-300);
+		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-extra-large);
+		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-extra-large);
+		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
 		--spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300);
+		--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
 		--spectrum-picker-button-font-size: var(--spectrum-font-size-300);
-		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
 	}
 }
 
 .spectrum-PickerButton {
 	border-style: none;
 	background-color: transparent;
-	block-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width));
+	cursor: pointer;
+
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	box-sizing: border-box;
+
+	block-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height));
+	inline-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width));
+
 	padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding));
 
-	&.spectrum-PickerButton--uiicononly {
-		inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height));
+	&:disabled {
+		cursor: auto;
+	}
+
+	&:active {
+		transform: perspective(var(--spectrum-picker-button-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
+	}
+
+	&:focus-visible {
+		outline: none;
 	}
 }
 
+/* not existing in infield button */
 .spectrum-PickerButton-label {
 	/* Be the biggest, but also shrink! */
 	flex: 1 1 auto;
@@ -140,47 +152,39 @@
 
 	white-space: nowrap;
 	overflow: hidden;
-	padding-block-end: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
-	padding-block-start: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
+	padding-block: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
 
 	font-family: var(--mod-picker-button-font-family, var(--spectrum-picker-button-font-family));
 	font-style: var(--mod-picker-button-font-style, var(--spectrum-picker-button-font-style));
 	font-weight: var(--mod-picker-button-font-weight, var(--spectrum-picker-button-font-weight));
 	font-size: var(--mod-picker-button-font-size, var(--spectrum-picker-button-font-size));
-
-	.spectrum-PickerButton--uiicononly & {
-		display: none;
-	}
 }
 
 .spectrum-PickerButton-fill {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-sizing: border-box;
 	block-size: 100%;
 	inline-size: 100%;
-	gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap));
 
 	background-color: var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color));
-	border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color));
-	border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width));
-	border-style: solid;
-	padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)));
+	border-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
 
-	border-end-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
-	border-end-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
-	border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
-	border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
+	padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)));
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	box-sizing: border-box;
+	gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); /* only if label and icon are present */
 
-	transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
+	transition: background-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
 
-	.spectrum-PickerButton--uiicononly & {
-		padding: 0;
+	.spectrum-PickerButton--workflowicon & {
+		/* half of component height minus icon size because there are no edge-to-disclosure-icon tokens for workflow icons, then subtract picker button padding */
+		padding: calc((var(--mod-picker-button-height, var(--spectrum-picker-button-height)) - var(--mod-picker-button-workflow-icon-size, var(--spectrum-picker-button-workflow-icon-size))) / 2 - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)));
 	}
 
 	.spectrum-PickerButton--textuiicon & {
-		inline-size: auto;
+		inline-size: auto; /* only if label is present */
 	}
 }
 
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 16595b95602..ee0fdbcaa2c 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -33,8 +33,7 @@ export const Template = ({
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--textuiicon`]: label && iconSet === "ui",
-				[`${rootClass}--uiicononly`]: !label && iconSet === "ui",
-				[`${rootClass}--icononly`]: !label && iconSet !== "ui",
+				[`${rootClass}--workflowicon`]: !label && iconSet !== "ui",
 				[`${rootClass}--size${size?.toUpperCase()}`]:
 					typeof size !== "undefined",
 				"is-active": isActive,
@@ -54,6 +53,7 @@ export const Template = ({
 				updateArgs({ isOpen: !isOpen });
 			}}
 			tabindex=${ifDefined(tabindex)}
+			type="button"
 		>
 			<div class="${rootClass}-fill">
 				${when(label, () => html`

From d48a7afefff9f6cd16c7ba9421ca7a96d272e6d3 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 5 Aug 2025 12:35:16 -0500
Subject: [PATCH 08/14] feat(pickerbutton): remove label variant

---
 components/pickerbutton/dist/metadata.json    | 34 --------------
 components/pickerbutton/index.css             | 44 -------------------
 .../stories/pickerbutton.stories.js           | 19 --------
 .../pickerbutton/stories/pickerbutton.test.js |  4 --
 components/pickerbutton/stories/template.js   | 10 +----
 5 files changed, 1 insertion(+), 110 deletions(-)

diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index abf12b1e7e0..896fbadbe9d 100644
--- a/components/pickerbutton/dist/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -2,11 +2,9 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-PickerButton",
-    ".spectrum-PickerButton--textuiicon .spectrum-PickerButton-fill",
     ".spectrum-PickerButton--workflowicon .spectrum-PickerButton-fill",
     ".spectrum-PickerButton-fill",
     ".spectrum-PickerButton-icon",
-    ".spectrum-PickerButton-label",
     ".spectrum-PickerButton.is-open",
     ".spectrum-PickerButton.spectrum-PickerButton--quiet",
     ".spectrum-PickerButton.spectrum-PickerButton--quiet:disabled",
@@ -32,17 +30,6 @@
     "--mod-picker-button-background-color-quiet-disabled",
     "--mod-picker-button-border-radius",
     "--mod-picker-button-fill-padding",
-    "--mod-picker-button-font-color",
-    "--mod-picker-button-font-color-disabled",
-    "--mod-picker-button-font-color-down",
-    "--mod-picker-button-font-color-down-disabled",
-    "--mod-picker-button-font-color-hover",
-    "--mod-picker-button-font-color-hover-disabled",
-    "--mod-picker-button-font-family",
-    "--mod-picker-button-font-size",
-    "--mod-picker-button-font-style",
-    "--mod-picker-button-font-weight",
-    "--mod-picker-button-gap",
     "--mod-picker-button-height",
     "--mod-picker-button-icon-color",
     "--mod-picker-button-icon-color-disabled",
@@ -50,7 +37,6 @@
     "--mod-picker-button-icon-color-down-disabled",
     "--mod-picker-button-icon-color-hover",
     "--mod-picker-button-icon-color-hover-disabled",
-    "--mod-picker-button-label-padding",
     "--mod-picker-button-padding",
     "--mod-picker-button-width",
     "--mod-picker-button-workflow-icon-size"
@@ -63,26 +49,16 @@
     "--spectrum-picker-button-border-radius",
     "--spectrum-picker-button-downstate-perspective",
     "--spectrum-picker-button-fill-padding",
-    "--spectrum-picker-button-font-color",
-    "--spectrum-picker-button-font-color-down",
-    "--spectrum-picker-button-font-color-hover",
-    "--spectrum-picker-button-font-family",
-    "--spectrum-picker-button-font-size",
-    "--spectrum-picker-button-font-style",
-    "--spectrum-picker-button-font-weight",
-    "--spectrum-picker-button-gap",
     "--spectrum-picker-button-height",
     "--spectrum-picker-button-icon-color",
     "--spectrum-picker-button-icon-color-down",
     "--spectrum-picker-button-icon-color-hover",
-    "--spectrum-picker-button-label-padding",
     "--spectrum-picker-button-padding",
     "--spectrum-picker-button-width",
     "--spectrum-picker-button-workflow-icon-size"
   ],
   "global": [
     "--spectrum-animation-duration-100",
-    "--spectrum-body-sans-serif-font-weight",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
@@ -93,7 +69,6 @@
     "--spectrum-corner-radius-small-size-large",
     "--spectrum-corner-radius-small-size-medium",
     "--spectrum-corner-radius-small-size-small",
-    "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
     "--spectrum-downstate-height",
@@ -102,10 +77,6 @@
     "--spectrum-field-edge-to-disclosure-icon-200",
     "--spectrum-field-edge-to-disclosure-icon-300",
     "--spectrum-field-edge-to-disclosure-icon-75",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
     "--spectrum-gray-100",
     "--spectrum-gray-200",
     "--spectrum-in-field-button-edge-to-fill-extra-large",
@@ -115,11 +86,6 @@
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-75",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-50",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index 96543ae62ec..168ebd7a96f 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -28,7 +28,6 @@
 
 	--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
 
-	--spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50);
 	--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); /* equivalent to --spectrum-infield-button-inline-edge-to-disclosure-icon */
 
 	--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
@@ -36,16 +35,6 @@
 	/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */
 	--spectrum-picker-button-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down));
 
-	/* label */
-	--spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default);
-	--spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover);
-	--spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down);
-	--spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-picker-button-font-style: var(--spectrum-default-font-style);
-	--spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
-	--spectrum-picker-button-font-size: var(--spectrum-font-size-100);
-	--spectrum-picker-button-gap: var(--spectrum-text-to-visual-50);
-
 	&:disabled {
 		--mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color));
 		--mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
@@ -54,23 +43,17 @@
 		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color));
 		--mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
 		--mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
-
-		--mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color));
-		--mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color));
-		--mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color));
 	}
 
 	&:hover {
 		--mod-picker-button-background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover));
 		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover));
-		--mod-picker-button-font-color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover));
 	}
 
 	&:active,
 	&.is-open {
 		--mod-picker-button-background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down));
 		--mod-picker-button-icon-color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down));
-		--mod-picker-button-font-color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down));
 	}
 
 	&.spectrum-PickerButton--quiet {
@@ -89,9 +72,7 @@
 		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-small);
 		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-small);
 		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
-		--spectrum-picker-button-label-padding: var(--spectrum-spacing-75);
 		--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
-		--spectrum-picker-button-font-size: var(--spectrum-font-size-75);
 	}
 
 	&.spectrum-PickerButton--sizeL {
@@ -100,9 +81,7 @@
 		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-large);
 		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-large);
 		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
-		--spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200);
 		--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
-		--spectrum-picker-button-font-size: var(--spectrum-font-size-200);
 	}
 
 	&.spectrum-PickerButton--sizeXL {
@@ -111,9 +90,7 @@
 		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-extra-large);
 		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-extra-large);
 		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
-		--spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300);
 		--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
-		--spectrum-picker-button-font-size: var(--spectrum-font-size-300);
 	}
 }
 
@@ -144,22 +121,6 @@
 	}
 }
 
-/* not existing in infield button */
-.spectrum-PickerButton-label {
-	/* Be the biggest, but also shrink! */
-	flex: 1 1 auto;
-	color: var(--mod-picker-button-font-color, var(--spectrum-picker-button-font-color));
-
-	white-space: nowrap;
-	overflow: hidden;
-	padding-block: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
-
-	font-family: var(--mod-picker-button-font-family, var(--spectrum-picker-button-font-family));
-	font-style: var(--mod-picker-button-font-style, var(--spectrum-picker-button-font-style));
-	font-weight: var(--mod-picker-button-font-weight, var(--spectrum-picker-button-font-weight));
-	font-size: var(--mod-picker-button-font-size, var(--spectrum-picker-button-font-size));
-}
-
 .spectrum-PickerButton-fill {
 	block-size: 100%;
 	inline-size: 100%;
@@ -174,7 +135,6 @@
 	justify-content: center;
 
 	box-sizing: border-box;
-	gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); /* only if label and icon are present */
 
 	transition: background-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
 
@@ -182,10 +142,6 @@
 		/* half of component height minus icon size because there are no edge-to-disclosure-icon tokens for workflow icons, then subtract picker button padding */
 		padding: calc((var(--mod-picker-button-height, var(--spectrum-picker-button-height)) - var(--mod-picker-button-workflow-icon-size, var(--spectrum-picker-button-workflow-icon-size))) / 2 - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)));
 	}
-
-	.spectrum-PickerButton--textuiicon & {
-		inline-size: auto; /* only if label is present */
-	}
 }
 
 .spectrum-PickerButton-icon {
diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index e0c6ba68c8f..310a92baf63 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -29,15 +29,6 @@ export default {
 			...Icon.argTypes.iconName,
 			if: { arg: "iconSet", eq: "workflow" },
 		},
-		label: {
-			name: "Label",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string" },
-				category: "Content",
-			},
-			control: { type: "text" },
-		},
 		isOpen: {
 			...isOpen,
 			if: { arg: "isDisabled", truthy: false }
@@ -49,7 +40,6 @@ export default {
 	},
 	args: {
 		rootClass: "spectrum-PickerButton",
-		label: undefined,
 		size: "m",
 		isActive: false,
 		isHovered: false,
@@ -96,15 +86,6 @@ WithForcedColors.parameters = {
 };
 
 // ********* DOCS ONLY ********* //
-export const WithLabel = Template.bind({});
-WithLabel.tags = ["!dev"];
-WithLabel.args = {
-	label: "Select",
-};
-WithLabel.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
 export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];
 Disabled.args = {
diff --git a/components/pickerbutton/stories/pickerbutton.test.js b/components/pickerbutton/stories/pickerbutton.test.js
index 5840663a49e..0b1de1363cf 100644
--- a/components/pickerbutton/stories/pickerbutton.test.js
+++ b/components/pickerbutton/stories/pickerbutton.test.js
@@ -7,10 +7,6 @@ export const PickerGroup = Variants({
 		{
 			testHeading: "Default",
 		},
-		{
-			testHeading: "With label",
-			label: "Select",
-		},
 		{
 			testHeading: "Quiet",
 			isQuiet: true,
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index ee0fdbcaa2c..427b10dd504 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -5,7 +5,6 @@ import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
 
 import "../index.css";
 
@@ -13,7 +12,6 @@ export const Template = ({
 	rootClass = "spectrum-PickerButton",
 	id = getRandomId("pickerbutton"),
 	size = "m",
-	label,
 	iconSet = "ui",
 	iconName = "ChevronDown",
 	isActive = false,
@@ -32,8 +30,7 @@ export const Template = ({
 		<button
 			class=${classMap({
 				[rootClass]: true,
-				[`${rootClass}--textuiicon`]: label && iconSet === "ui",
-				[`${rootClass}--workflowicon`]: !label && iconSet !== "ui",
+				[`${rootClass}--workflowicon`]: iconSet !== "ui",
 				[`${rootClass}--size${size?.toUpperCase()}`]:
 					typeof size !== "undefined",
 				"is-active": isActive,
@@ -56,11 +53,6 @@ export const Template = ({
 			type="button"
 		>
 			<div class="${rootClass}-fill">
-				${when(label, () => html`
-					<span class="${rootClass}-label is-placeholder">
-						${label}
-					</span>
-				`)}
 				${Icon({
 					iconName: iconName ?? "ChevronDown",
 					setName: iconSet,

From f3a1f1dc8674b331deaa08326db3d21b5401bfc3 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 5 Aug 2025 15:10:56 -0500
Subject: [PATCH 09/14] feat(pickerbutton): support custom sized workflow icons

---
 components/pickerbutton/dist/metadata.json    |  2 +-
 components/pickerbutton/index.css             |  3 +++
 .../pickerbutton/stories/pickerbutton.test.js | 11 +++++++++-
 components/pickerbutton/stories/template.js   | 20 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index 896fbadbe9d..4c58f14a473 100644
--- a/components/pickerbutton/dist/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -91,6 +91,6 @@
     "--spectrum-workflow-icon-size-300",
     "--spectrum-workflow-icon-size-75"
   ],
-  "passthroughs": [],
+  "passthroughs": ["--mod-icon-size"],
   "high-contrast": []
 }
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index 168ebd7a96f..dbccf337899 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -145,6 +145,9 @@
 }
 
 .spectrum-PickerButton-icon {
+	/* @passthrough -- icon-size */
+	--mod-icon-size: var(--mod-picker-button-workflow-icon-size);
+
 	/* don't be small, ever */
 	flex-shrink: 0;
 	color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
diff --git a/components/pickerbutton/stories/pickerbutton.test.js b/components/pickerbutton/stories/pickerbutton.test.js
index 0b1de1363cf..466c30c2df6 100644
--- a/components/pickerbutton/stories/pickerbutton.test.js
+++ b/components/pickerbutton/stories/pickerbutton.test.js
@@ -1,8 +1,9 @@
 import { Variants } from "@spectrum-css/preview/decorators";
-import { Template } from "./template.js";
+import { PickerIconOptions, Template } from "./template.js";
 
 export const PickerGroup = Variants({
 	Template,
+	SizeTemplate: PickerIconOptions,
 	testData: [
 		{
 			testHeading: "Default",
@@ -11,6 +12,14 @@ export const PickerGroup = Variants({
 			testHeading: "Quiet",
 			isQuiet: true,
 		},
+		{
+			testHeading: "Custom sized workflow icon",
+			iconName: "Calendar",
+			iconSet: "workflow",
+			customStyles: {
+				"--mod-picker-button-workflow-icon-size": "var(--spectrum-workflow-icon-size-50)",
+			},
+		}
 	],
 	stateData: [
 		{
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 427b10dd504..d18dbbda36a 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -1,5 +1,5 @@
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
@@ -126,3 +126,21 @@ export const CustomIconTemplate = (args) => html`
 		</div>
 	</div>
 `;
+
+export const PickerIconOptions = ({
+	...args
+}, context ) => Container({
+	withBorder: false,
+	direction: "row",
+	wrapperStyles: {
+		columnGap: "12px",
+	},
+	content: html`
+		${Template(args, context)}
+		${Template({
+			...args,
+			iconSet: "workflow",
+			iconName: "Calendar",
+		}, context)}
+	`,
+});

From ac55669d5d7fd95a4af4b261b70a569bbd82c208 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 5 Aug 2025 15:53:25 -0500
Subject: [PATCH 10/14] docs(pickerbutton): docs updates

- separate ui and workflow icon args in order to allow storybook controls for each
- remove the old custom icon story
- still TODO: fighting with the mod icon size
---
 .../stories/pickerbutton.stories.js           | 21 +++--
 components/pickerbutton/stories/template.js   | 79 +++----------------
 2 files changed, 27 insertions(+), 73 deletions(-)

diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index 310a92baf63..043b2ec158e 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -5,7 +5,7 @@ import { isActive, isDisabled, isHovered, isOpen, isQuiet, size } from "@spectru
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { PickerGroup } from "./pickerbutton.test.js";
-import { CustomIconTemplate, Template } from "./template.js";
+import { PickerIconOptions, Template } from "./template.js";
 
 /**
  * The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs).
@@ -25,9 +25,15 @@ export default {
 			options: ["ui", "workflow"],
 			control: "inline-radio",
 		},
-		iconName: {
+		uiIconName: {
+			...Icon.argTypes.uiIconName,
+			if: { arg: "iconSet", eq: "ui" },
+			category: "Content",
+		},
+		workflowIconName: {
 			...Icon.argTypes.iconName,
 			if: { arg: "iconSet", eq: "workflow" },
+			category: "Content",
 		},
 		isOpen: {
 			...isOpen,
@@ -47,7 +53,8 @@ export default {
 		isQuiet: false,
 		isDisabled: false,
 		iconSet: "ui",
-		iconName: "ChevronDown",
+		workflowIconName: "Calendar",
+		uiIconName: "ChevronDown",
 	},
 	parameters: {
 		packageJson,
@@ -116,9 +123,13 @@ Open.parameters = {
 };
 
 /**
- * This example uses a custom icon instead of the chevron UI icon.
+ * These examples use custom icons. The icon on the left is a custom UI icon, and the icon on the right is a custom workflow icon. The size of the icon can also be modified by using the `--mod-icon-size` custom property.
  */
-export const CustomIcon = CustomIconTemplate.bind({});
+export const CustomIcon = PickerIconOptions.bind({});
+CustomIcon.args = {
+	uiIconName: "ArrowDown100",
+	workflowIconName: "Calendar",
+};
 CustomIcon.storyName = "With custom icon";
 CustomIcon.tags = ["!dev"];
 CustomIcon.parameters = {
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index d18dbbda36a..520492668da 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -1,6 +1,5 @@
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Container, getRandomId } from "@spectrum-css/preview/decorators";
-import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -13,7 +12,8 @@ export const Template = ({
 	id = getRandomId("pickerbutton"),
 	size = "m",
 	iconSet = "ui",
-	iconName = "ChevronDown",
+	workflowIconName = "Calendar",
+	uiIconName = "ChevronDown",
 	isActive = false,
 	isHovered = false,
 	isDisabled = false,
@@ -54,7 +54,7 @@ export const Template = ({
 		>
 			<div class="${rootClass}-fill">
 				${Icon({
-					iconName: iconName ?? "ChevronDown",
+					iconName: iconSet === "ui" ? (uiIconName ?? "ChevronDown") : iconSet === "workflow" ? (workflowIconName ?? "ChevronDown") : "ChevronDown",
 					setName: iconSet,
 					size,
 					customClasses: [`${rootClass}-icon`],
@@ -64,70 +64,9 @@ export const Template = ({
 	`;
 };
 
-/**
- * Displays the component with a custom icon (instead of the chevron UI icon).
- * Two examples are shown; with a custom UI icon and a custom Workflow icon.
- */
-export const CustomIconTemplate = (args) => html`
-	<div
-		style=${styleMap({
-			display: "flex",
-			gap: "24px",
-			flexWrap: "wrap",
-		})}
-	>
-		<div
-			style=${styleMap({
-				display: "flex",
-				gap: "16px",
-				flexDirection: "column",
-				alignItems: "center",
-				flexBasis: "80px",
-			})}
-		>
-			${Typography({
-				semantics: "detail",
-				size: "s",
-				content: ["UI icon"],
-				customStyles: {
-					"white-space": "nowrap",
-					"--mod-detail-font-color": "var(--spectrum-seafoam-900)",
-				},
-			})}
-			${Template({
-				...args,
-				iconName: "ArrowDown100",
-				iconSet: "ui",
-			})}
-		</div>
-		<div
-			style=${styleMap({
-				display: "flex",
-				gap: "16px",
-				flexDirection: "column",
-				alignItems: "center",
-				flexBasis: "80px",
-			})}
-		>
-			${Typography({
-				semantics: "detail",
-				size: "s",
-				content: ["Workflow icon"],
-				customStyles: {
-					"white-space": "nowrap",
-					"--mod-detail-font-color": "var(--spectrum-seafoam-900)",
-				},
-			})}
-			${Template({
-				...args,
-				iconName: "Add",
-				iconSet: "workflow",
-			})}
-		</div>
-	</div>
-`;
-
 export const PickerIconOptions = ({
+	uiIconName,
+	workflowIconName,
 	...args
 }, context ) => Container({
 	withBorder: false,
@@ -136,11 +75,15 @@ export const PickerIconOptions = ({
 		columnGap: "12px",
 	},
 	content: html`
-		${Template(args, context)}
+		${Template({
+			...args,
+			iconSet: "ui",
+			uiIconName: uiIconName ?? "ChevronDown",
+		}, context)}
 		${Template({
 			...args,
 			iconSet: "workflow",
-			iconName: "Calendar",
+			workflowIconName: workflowIconName ?? "Calendar",
 		}, context)}
 	`,
 });

From 5eb85c409c3fd3738c64a118a4b5b42b6304d750 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Wed, 6 Aug 2025 12:42:55 -0500
Subject: [PATCH 11/14] feat(pickerbutton): adjust the way custom icon size
 works

- use --mod-icon-size for both ui and workflow icons instead
- remove padding calculation for workflow icons; if a workflow icon is
used, there is no padding but flexbox will center the icon instead
- add some custom styles for picker button in datepicker template... do
we like the way that works?
- use custom sized icons in the custom icon story, to show they work for
workflow and ui icons
- update the metadata
---
 components/datepicker/stories/template.js          |  4 ++--
 components/pickerbutton/dist/metadata.json         | 14 ++++----------
 components/pickerbutton/index.css                  | 11 ++---------
 .../pickerbutton/stories/pickerbutton.stories.js   |  7 ++++++-
 .../pickerbutton/stories/pickerbutton.test.js      |  2 +-
 5 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js
index eebb928df80..9f653cb8c92 100644
--- a/components/datepicker/stories/template.js
+++ b/components/datepicker/stories/template.js
@@ -85,12 +85,12 @@ export const DatePicker = ({
 				},
 			}, context))}
 			${PickerButton({
-				customClasses: [`${rootClass}-button`],
+				customClasses: [`${rootClass}-button`, "spectrum-PickerButton--workflowicon"],
 				size: "m",
 				iconName: "Calendar",
 				iconSet: "workflow",
 				isQuiet,
-				customStyles: isReadOnly ? { "display": "none" } : undefined,
+				customStyles: isReadOnly ? { "display": "none" } : { "--mod-icon-size": "var(--spectrum-workflow-icon-size-50)" },
 				// @todo this is not added to the button on the website; need to make sure it's not a bug
 				// isOpen,
 				isInvalid,
diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index 4c58f14a473..6acfc936489 100644
--- a/components/pickerbutton/dist/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -38,8 +38,7 @@
     "--mod-picker-button-icon-color-hover",
     "--mod-picker-button-icon-color-hover-disabled",
     "--mod-picker-button-padding",
-    "--mod-picker-button-width",
-    "--mod-picker-button-workflow-icon-size"
+    "--mod-picker-button-width"
   ],
   "component": [
     "--spectrum-picker-button-background-animation-duration",
@@ -54,8 +53,7 @@
     "--spectrum-picker-button-icon-color-down",
     "--spectrum-picker-button-icon-color-hover",
     "--spectrum-picker-button-padding",
-    "--spectrum-picker-button-width",
-    "--spectrum-picker-button-workflow-icon-size"
+    "--spectrum-picker-button-width"
   ],
   "global": [
     "--spectrum-animation-duration-100",
@@ -85,12 +83,8 @@
     "--spectrum-in-field-button-edge-to-fill-small",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-75"
+    "--spectrum-neutral-content-color-hover"
   ],
-  "passthroughs": ["--mod-icon-size"],
+  "passthroughs": [],
   "high-contrast": []
 }
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index dbccf337899..702e5e2003c 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -30,7 +30,6 @@
 
 	--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); /* equivalent to --spectrum-infield-button-inline-edge-to-disclosure-icon */
 
-	--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
 
 	/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */
 	--spectrum-picker-button-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down));
@@ -72,7 +71,6 @@
 		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-small);
 		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-small);
 		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
-		--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
 	}
 
 	&.spectrum-PickerButton--sizeL {
@@ -81,7 +79,6 @@
 		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-large);
 		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-large);
 		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
-		--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
 	}
 
 	&.spectrum-PickerButton--sizeXL {
@@ -90,7 +87,6 @@
 		--spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-extra-large);
 		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-extra-large);
 		--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
-		--spectrum-picker-button-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
 	}
 }
 
@@ -139,15 +135,12 @@
 	transition: background-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
 
 	.spectrum-PickerButton--workflowicon & {
-		/* half of component height minus icon size because there are no edge-to-disclosure-icon tokens for workflow icons, then subtract picker button padding */
-		padding: calc((var(--mod-picker-button-height, var(--spectrum-picker-button-height)) - var(--mod-picker-button-workflow-icon-size, var(--spectrum-picker-button-workflow-icon-size))) / 2 - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)));
+		/* don't use padding tokens, rely on flexbox to center icons */
+		padding: 0;
 	}
 }
 
 .spectrum-PickerButton-icon {
-	/* @passthrough -- icon-size */
-	--mod-icon-size: var(--mod-picker-button-workflow-icon-size);
-
 	/* don't be small, ever */
 	flex-shrink: 0;
 	color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index 043b2ec158e..3ecbed73195 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -123,12 +123,17 @@ Open.parameters = {
 };
 
 /**
- * These examples use custom icons. The icon on the left is a custom UI icon, and the icon on the right is a custom workflow icon. The size of the icon can also be modified by using the `--mod-icon-size` custom property.
+ * These examples use custom icons. The icon on the left is a custom UI icon, and the icon on the right is a custom workflow icon. The size of the icon can also be modified by using the `--mod-icon-size` custom property. Here, `--mod-icon-size` is set to `14px`.
+ *
+ * By default, the picker button supports a UI icon. If using a workflow icon, please apply the `.spectrum-PickerButton--workflowicon` class to the picker button to best support the use of a workflow icon.
  */
 export const CustomIcon = PickerIconOptions.bind({});
 CustomIcon.args = {
 	uiIconName: "ArrowDown100",
 	workflowIconName: "Calendar",
+	customStyles: {
+		"--mod-icon-size": "14px",
+	}
 };
 CustomIcon.storyName = "With custom icon";
 CustomIcon.tags = ["!dev"];
diff --git a/components/pickerbutton/stories/pickerbutton.test.js b/components/pickerbutton/stories/pickerbutton.test.js
index 466c30c2df6..cec58a01e37 100644
--- a/components/pickerbutton/stories/pickerbutton.test.js
+++ b/components/pickerbutton/stories/pickerbutton.test.js
@@ -17,7 +17,7 @@ export const PickerGroup = Variants({
 			iconName: "Calendar",
 			iconSet: "workflow",
 			customStyles: {
-				"--mod-picker-button-workflow-icon-size": "var(--spectrum-workflow-icon-size-50)",
+				"--mod-icon-size": "var(--spectrum-workflow-icon-size-50)",
 			},
 		}
 	],

From ce13a9152c7038d8d5cbf71f6b18cef115517e5c Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Wed, 6 Aug 2025 19:53:47 -0500
Subject: [PATCH 12/14] chore(pickerbutton): changeset

---
 .changeset/few-candles-sniff.md | 46 +++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 .changeset/few-candles-sniff.md

diff --git a/.changeset/few-candles-sniff.md b/.changeset/few-candles-sniff.md
new file mode 100644
index 00000000000..22a56fb01b5
--- /dev/null
+++ b/.changeset/few-candles-sniff.md
@@ -0,0 +1,46 @@
+---
+"@spectrum-css/pickerbutton": major
+---
+
+The picker button component has been migrated to Spectrum 2. The picker button uses the same design spec as infield button and in some cases may be able to be used interchangeably with it. Its updated features include:
+
+- Corner rounding updates - corner rounding differs by the component's t-shirt size, but otherwise is a standard size. This means that the rounded variant of picker button with increased corner rounding and the position variants of picker button that helped the picker button fit snugly within either side of an input have been removed.
+- Color and spacing updates to match S2 spec
+- Updated S2 down state
+- Removed focus styles: there are no spec'd focus styles in S2, therefore these styles have been removed.
+- The label variant of picker button has been removed.
+- Removal of `.spectrum-PickerButton--uiicononly`, `.spectrum-PickerButton--icononly`, and `.spectrum-PickerButton--textuiicon` classes:
+  - The picker button featuring a UI icon is the default variant, so no additional `.spectrum-PickerButton--uiicononly` class needs to be applied.
+  - The `.spectrum-PickerButton--icononly` class has been renamed to `.spectrum-PickerButton--workflowicon` to clarify when it should be used. Applying `.spectrum-PickerButton--workflowicon` when using a workflow icon instead is recommended, but probably not required.
+  - Because the picker button no longer supports a label, there is no need for a `--textuiicon` variant which is why that class has been removed.
+- The `.is-open` state can continue to be used as before.
+
+Added mod custom properties:
+
+- `"--mod-picker-button-background-color-quiet-disabled"`
+
+Removed mod custom properties:
+
+- `"--mod-picker-button-background-color-key-focus"`
+- `"--mod-picker-button-background-color-key-focus-quiet"`
+- `"--mod-picker-button-border-color"`
+- `"--mod-picker-button-border-color-disabled"`
+- `"--mod-picker-button-border-color-quiet"`
+- `"--mod-picker-button-border-radius-rounded"`
+- `"--mod-picker-button-border-radius-rounded-sided"`
+- `"--mod-picker-button-border-radius-sided"`
+- `"--mod-picker-button-border-width"`
+- `"--mod-picker-button-font-color"`
+- `"--mod-picker-button-font-color-disabled"`
+- `"--mod-picker-button-font-color-down"`
+- `"--mod-picker-button-font-color-down-disabled"`
+- `"--mod-picker-button-font-color-hover"`
+- `"--mod-picker-button-font-color-hover-disabled"`
+- `"--mod-picker-button-font-color-key-focus"`
+- `"--mod-picker-button-font-family"`
+- `"--mod-picker-button-font-size"`
+- `"--mod-picker-button-font-style"`
+- `"--mod-picker-button-font-weight"`
+- `"--mod-picker-button-gap"`
+- `"--mod-picker-button-icon-color-key-focus"`
+- `"--mod-picker-button-label-padding"`

From 2a6acc8395f010236d2468c9722a9e2fa03a3a8c Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Wed, 6 Aug 2025 20:16:50 -0500
Subject: [PATCH 13/14] feat(pickerbutton,infieldbutton): WHCM support

---
 .changeset/few-candles-sniff.md            |  1 +
 .changeset/green-falcons-rush.md           |  2 ++
 components/infieldbutton/index.css         |  1 +
 components/pickerbutton/dist/metadata.json | 15 +++++++--
 components/pickerbutton/index.css          | 39 ++++++++++++++++++++--
 5 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/.changeset/few-candles-sniff.md b/.changeset/few-candles-sniff.md
index 22a56fb01b5..a24ccc69211 100644
--- a/.changeset/few-candles-sniff.md
+++ b/.changeset/few-candles-sniff.md
@@ -6,6 +6,7 @@ The picker button component has been migrated to Spectrum 2. The picker button u
 
 - Corner rounding updates - corner rounding differs by the component's t-shirt size, but otherwise is a standard size. This means that the rounded variant of picker button with increased corner rounding and the position variants of picker button that helped the picker button fit snugly within either side of an input have been removed.
 - Color and spacing updates to match S2 spec
+- Added WHCM support
 - Updated S2 down state
 - Removed focus styles: there are no spec'd focus styles in S2, therefore these styles have been removed.
 - The label variant of picker button has been removed.
diff --git a/.changeset/green-falcons-rush.md b/.changeset/green-falcons-rush.md
index a454b4f41aa..b0ee341b776 100644
--- a/.changeset/green-falcons-rush.md
+++ b/.changeset/green-falcons-rush.md
@@ -3,3 +3,5 @@
 ---
 
 Remove unused key-focus and border mods. Also updates transition to use `background-color` instead of `border-color`.
+
+Also fixes a flash bug in WHCM: when hovered, the infield button was flashing/blinking before changing to the appropriate hover color.
diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css
index 0ef636058d8..fc5aad69ca5 100644
--- a/components/infieldbutton/index.css
+++ b/components/infieldbutton/index.css
@@ -176,6 +176,7 @@
 	.spectrum-InfieldButton {
 		--highcontrast-infield-button-background-color: ButtonText;
 		--highcontrast-infield-button-icon-color: ButtonFace;
+		forced-color-adjust: none; /* keeps button from flashing when hovered */
 
 		&:disabled {
 			--highcontrast-infield-button-background-color: GrayText;
diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index 6acfc936489..4b3d33be65e 100644
--- a/components/pickerbutton/dist/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -2,6 +2,11 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-PickerButton",
+    ".spectrum-PickerButton--quiet",
+    ".spectrum-PickerButton--quiet:disabled",
+    ".spectrum-PickerButton--quiet:not(:disabled):active",
+    ".spectrum-PickerButton--quiet:not(:disabled):focus-visible",
+    ".spectrum-PickerButton--quiet:not(:disabled):hover",
     ".spectrum-PickerButton--workflowicon .spectrum-PickerButton-fill",
     ".spectrum-PickerButton-fill",
     ".spectrum-PickerButton-icon",
@@ -14,7 +19,10 @@
     ".spectrum-PickerButton:active",
     ".spectrum-PickerButton:disabled",
     ".spectrum-PickerButton:focus-visible",
-    ".spectrum-PickerButton:hover"
+    ".spectrum-PickerButton:hover",
+    ".spectrum-PickerButton:not(:disabled):active",
+    ".spectrum-PickerButton:not(:disabled):focus-visible",
+    ".spectrum-PickerButton:not(:disabled):hover"
   ],
   "modifiers": [
     "--mod-picker-button-background-animation-duration",
@@ -86,5 +94,8 @@
     "--spectrum-neutral-content-color-hover"
   ],
   "passthroughs": [],
-  "high-contrast": []
+  "high-contrast": [
+    "--highcontrast-picker-button-background-color",
+    "--highcontrast-picker-button-icon-color"
+  ]
 }
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index 702e5e2003c..6babce103a4 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -121,7 +121,7 @@
 	block-size: 100%;
 	inline-size: 100%;
 
-	background-color: var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color));
+	background-color: var(--highcontrast-picker-button-background-color, var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color)));
 	border-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
 
 	padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)));
@@ -143,5 +143,40 @@
 .spectrum-PickerButton-icon {
 	/* don't be small, ever */
 	flex-shrink: 0;
-	color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
+	color: var(--highcontrast-picker-button-icon-color, var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color)));
+}
+
+@media (forced-colors: active) {
+	.spectrum-PickerButton {
+		--highcontrast-picker-button-background-color: ButtonText;
+		--highcontrast-picker-button-icon-color: ButtonFace;
+		forced-color-adjust: none; /* keeps button from flashing when hovered */
+
+		&:disabled {
+			--highcontrast-picker-button-background-color: GrayText;
+		}
+
+		&:not(:disabled):hover,
+		&:not(:disabled):active,
+		&:not(:disabled):focus-visible {
+			--highcontrast-picker-button-background-color: Highlight;
+		}
+	}
+
+	.spectrum-PickerButton--quiet {
+		--highcontrast-picker-button-background-color: Canvas;
+		--highcontrast-picker-button-icon-color: ButtonText;
+
+		&:disabled {
+			--highcontrast-picker-button-background-color: Canvas;
+			--highcontrast-picker-button-icon-color: GrayText;
+		}
+
+		&:not(:disabled):hover,
+		&:not(:disabled):active,
+		&:not(:disabled):focus-visible {
+			--highcontrast-picker-button-background-color: Canvas;
+			--highcontrast-picker-button-icon-color: Highlight;
+		}
+	}
 }

From 13238b62d52e21160ff94773c564d1f70c887f93 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 11 Aug 2025 13:55:57 -0500
Subject: [PATCH 14/14] docs(pickerbutton): a few PR updates

- Remove quotes from update mods list in changeset
- Update infield button changeset to clarify that no styles were harmed
here :)
- Update docs page to include a mention of date picker and a table for
guidance on which size UI icon to use.
---
 .changeset/few-candles-sniff.md               | 48 +++++++++----------
 .changeset/green-falcons-rush.md              |  4 +-
 .../stories/pickerbutton.stories.js           | 32 ++++++++++++-
 3 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/.changeset/few-candles-sniff.md b/.changeset/few-candles-sniff.md
index a24ccc69211..dade1443715 100644
--- a/.changeset/few-candles-sniff.md
+++ b/.changeset/few-candles-sniff.md
@@ -18,30 +18,30 @@ The picker button component has been migrated to Spectrum 2. The picker button u
 
 Added mod custom properties:
 
-- `"--mod-picker-button-background-color-quiet-disabled"`
+- `--mod-picker-button-background-color-quiet-disabled`
 
 Removed mod custom properties:
 
-- `"--mod-picker-button-background-color-key-focus"`
-- `"--mod-picker-button-background-color-key-focus-quiet"`
-- `"--mod-picker-button-border-color"`
-- `"--mod-picker-button-border-color-disabled"`
-- `"--mod-picker-button-border-color-quiet"`
-- `"--mod-picker-button-border-radius-rounded"`
-- `"--mod-picker-button-border-radius-rounded-sided"`
-- `"--mod-picker-button-border-radius-sided"`
-- `"--mod-picker-button-border-width"`
-- `"--mod-picker-button-font-color"`
-- `"--mod-picker-button-font-color-disabled"`
-- `"--mod-picker-button-font-color-down"`
-- `"--mod-picker-button-font-color-down-disabled"`
-- `"--mod-picker-button-font-color-hover"`
-- `"--mod-picker-button-font-color-hover-disabled"`
-- `"--mod-picker-button-font-color-key-focus"`
-- `"--mod-picker-button-font-family"`
-- `"--mod-picker-button-font-size"`
-- `"--mod-picker-button-font-style"`
-- `"--mod-picker-button-font-weight"`
-- `"--mod-picker-button-gap"`
-- `"--mod-picker-button-icon-color-key-focus"`
-- `"--mod-picker-button-label-padding"`
+- `--mod-picker-button-background-color-key-focus`
+- `--mod-picker-button-background-color-key-focus-quiet`
+- `--mod-picker-button-border-color`
+- `--mod-picker-button-border-color-disabled`
+- `--mod-picker-button-border-color-quiet`
+- `--mod-picker-button-border-radius-rounded`
+- `--mod-picker-button-border-radius-rounded-sided`
+- `--mod-picker-button-border-radius-sided`
+- `--mod-picker-button-border-width`
+- `--mod-picker-button-font-color`
+- `--mod-picker-button-font-color-disabled`
+- `--mod-picker-button-font-color-down`
+- `--mod-picker-button-font-color-down-disabled`
+- `--mod-picker-button-font-color-hover`
+- `--mod-picker-button-font-color-hover-disabled`
+- `--mod-picker-button-font-color-key-focus`
+- `--mod-picker-button-font-family`
+- `--mod-picker-button-font-size`
+- `--mod-picker-button-font-style`
+- `--mod-picker-button-font-weight`
+- `--mod-picker-button-gap`
+- `--mod-picker-button-icon-color-key-focus`
+- `--mod-picker-button-label-padding`
diff --git a/.changeset/green-falcons-rush.md b/.changeset/green-falcons-rush.md
index b0ee341b776..760f1391e29 100644
--- a/.changeset/green-falcons-rush.md
+++ b/.changeset/green-falcons-rush.md
@@ -2,6 +2,8 @@
 "@spectrum-css/infieldbutton": patch
 ---
 
-Remove unused key-focus and border mods. Also updates transition to use `background-color` instead of `border-color`.
+Remove unused key-focus and border mods. Note that border and key focus styles were previously removed in the migration to Spectrum 2, and the mod removals here do not have any visual impact to the infield button.
+
+Also updates transition to use `background-color` instead of `border-color`.
 
 Also fixes a flash bug in WHCM: when hovered, the infield button was flashing/blinking before changing to the appropriate hover color.
diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index 3ecbed73195..05ffae7ba37 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -8,7 +8,7 @@ import { PickerGroup } from "./pickerbutton.test.js";
 import { PickerIconOptions, Template } from "./template.js";
 
 /**
- * The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs).
+ * The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs) and [date picker](?path=/docs/components-date-picker--docs).
  */
 export default {
 	title: "Picker button",
@@ -102,6 +102,36 @@ Disabled.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * Use the correct UI icon size that corresponds to the t-shirt size you require. For instance, if using the chevron icon seen below:
+ *
+	<table>
+		<thead>
+			<tr>
+				<th>**T-Shirt Size**</th>
+				<th>**Icon Size**</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>spectrum-PickerButton--sizeS</td>
+				<td>spectrum-css-icon-Chevron75</td>
+			</tr>
+			<tr>
+				<td>spectrum-PickerButton--sizeM</td>
+				<td>spectrum-css-icon-Chevron100</td>
+			</tr>
+			<tr>
+				<td>spectrum-PickerButton--sizeL</td>
+				<td>spectrum-css-icon-Chevron200</td>
+			</tr>
+			<tr>
+				<td>spectrum-PickerButton--sizeXL</td>
+				<td>spectrum-css-icon-Chevron300</td>
+			</tr>
+		</tbody>
+	</table>
+ */
 export const Sizing = (args, context) => Sizes({
 	Template,
 	withHeading: false,