From e5191713338f55e952b7da0e2aca0f004bc4ca60 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Mon, 19 May 2025 18:18:57 -0400
Subject: [PATCH 01/10] feat(picker-markup): add shirt size within template

---
 components/dropzone/index.css         |  4 ++--
 components/picker/dist/metadata.json  | 13 ++++---------
 components/picker/index.css           | 21 +++------------------
 components/picker/stories/template.js | 11 ++++++++++-
 4 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/components/dropzone/index.css b/components/dropzone/index.css
index c5824560074..b495fc596e1 100644
--- a/components/dropzone/index.css
+++ b/components/dropzone/index.css
@@ -68,7 +68,7 @@
 
 	&.is-dragged {
 		--mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid);
-		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color)));
+		--mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color)));
 		--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
 
 		/* Updated values for a nested illustrated message when state changes */
@@ -83,7 +83,7 @@
 
 	&.is-filled {
 		/* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */
-		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
+		--mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
 
 		/* Updated values for a nested illustrated message when state changes */
 		--mod-illustrated-message-display: none;
diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index 9133755e956..b430d560652 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -2,7 +2,6 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Picker",
-    ".spectrum-Picker + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker .spectrum-Picker-icon",
     ".spectrum-Picker .spectrum-Picker-label",
     ".spectrum-Picker .spectrum-ProgressCircle",
@@ -13,17 +12,15 @@
     ".spectrum-Picker--quiet:focus-visible:after",
     ".spectrum-Picker--sideLabel",
     ".spectrum-Picker--sizeL",
-    ".spectrum-Picker--sizeL + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker--sizeS",
-    ".spectrum-Picker--sizeS + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker--sizeXL",
-    ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker-label",
     ".spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker-label.is-placeholder:active",
     ".spectrum-Picker-label.is-placeholder:hover",
     ".spectrum-Picker-menuIcon",
     ".spectrum-Picker-menuIcon:active",
+    ".spectrum-Picker-popover",
     ".spectrum-Picker-validationIcon",
     ".spectrum-Picker.is-disabled",
     ".spectrum-Picker.is-disabled .spectrum-Picker-icon",
@@ -123,6 +120,7 @@
     "--mod-picker-min-inline-size-quiet",
     "--mod-picker-placeholder-font-style",
     "--mod-picker-placeholder-font-weight",
+    "--mod-picker-popover-animation-distance",
     "--mod-picker-spacing-bottom-to-text",
     "--mod-picker-spacing-edge-to-disclosure-icon",
     "--mod-picker-spacing-edge-to-disclosure-icon-quiet",
@@ -131,7 +129,6 @@
     "--mod-picker-spacing-icon-to-disclosure-icon",
     "--mod-picker-spacing-label-to-picker",
     "--mod-picker-spacing-label-to-picker-quiet",
-    "--mod-picker-spacing-picker-to-popover",
     "--mod-picker-spacing-starting-icon-to-text",
     "--mod-picker-spacing-text-to-icon-inline-end",
     "--mod-picker-spacing-top-to-alert-icon",
@@ -196,7 +193,6 @@
     "--spectrum-picker-spacing-icon-to-disclosure-icon",
     "--spectrum-picker-spacing-label-to-picker",
     "--spectrum-picker-spacing-label-to-picker-quiet",
-    "--spectrum-picker-spacing-picker-to-popover",
     "--spectrum-picker-spacing-starting-icon-to-text",
     "--spectrum-picker-spacing-text-to-icon-inline-end",
     "--spectrum-picker-spacing-top-to-alert-icon",
@@ -227,9 +223,7 @@
     "--spectrum-component-size-difference-down",
     "--spectrum-component-size-width-ratio-down",
     "--spectrum-component-to-menu-extra-large",
-    "--spectrum-component-to-menu-large",
     "--spectrum-component-to-menu-medium",
-    "--spectrum-component-to-menu-small",
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
@@ -302,7 +296,8 @@
   "passthroughs": [
     "--mod-button-animation-duration",
     "--mod-button-font-family",
-    "--mod-button-line-height"
+    "--mod-button-line-height",
+    "--mod-popover-animation-distance"
   ],
   "high-contrast": [
     "--highcontrast-picker-background-color",
diff --git a/components/picker/index.css b/components/picker/index.css
index 924bef384d1..eae8b811c15 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -102,10 +102,6 @@
 	--spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
 	--spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
-	& + .spectrum-Popover--bottom-start.is-open {
-		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
-	}
 }
 
 .spectrum-Picker--sizeS {
@@ -124,10 +120,6 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
-
-	& + .spectrum-Popover--bottom-start.is-open {
-		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small);
-	}
 }
 
 .spectrum-Picker--sizeL {
@@ -146,10 +138,6 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
-
-	& + .spectrum-Popover--bottom-start.is-open {
-		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large);
-	}
 }
 
 .spectrum-Picker--sizeXL {
@@ -168,10 +156,7 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
-
-	& + .spectrum-Popover--bottom-start.is-open {
-		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large);
-	}
+	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
 }
 
 .spectrum-Picker--quiet {
@@ -410,8 +395,8 @@
 	margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
 }
 
-.spectrum-Picker + .spectrum-Popover--bottom-start.is-open {
-	transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover)));
+.spectrum-Picker-popover {
+	--mod-popover-animation-distance: var(--mod-picker-popover-animation-distance, var(--spectrum-component-to-menu-medium));
 }
 
 .spectrum-Picker--quiet {
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index d2713463154..89cf29893a5 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -176,6 +176,7 @@ export const Template = ({
 		content: popoverContent,
 		size,
 		customStyles: customPopoverStyles,
+		customClasses: [`${rootClass}-popover`],
 		popoverWrapperStyles: {
 			"display": "block",
 		},
@@ -189,6 +190,13 @@ export const Template = ({
 		isDisabled,
 	}, context) : "";
 
+	const sizeMap = {
+		s: "small",
+		m: "medium",
+		l: "large",
+		xl: "extra-large",
+	};
+
 	const markup = html`
 		<div
 			style=${styleMap({
@@ -197,7 +205,8 @@ export const Template = ({
 				...(labelPosition == "side") && {
 					display: "flex",
 					flexWrap: "nowrap",
-				}
+				},
+				"--mod-picker-popover-animation-distance": `var(--spectrum-component-to-menu-${sizeMap[size] || "medium" })`,
 			})}
 		>
 			${when(label, () =>

From e5eaac5882d95dd37dea19a6733e91d43b584ba4 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Tue, 20 May 2025 15:56:59 -0400
Subject: [PATCH 02/10] feat(picker-markup): adjusting picker markup to higher
 level of template

---
 .changeset/open-squids-refuse.md      | 16 +++++++
 components/picker/dist/metadata.json  | 60 +++++++++++++++------------
 components/picker/index.css           | 16 +++++--
 components/picker/stories/template.js | 24 ++++-------
 4 files changed, 72 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/open-squids-refuse.md

diff --git a/.changeset/open-squids-refuse.md b/.changeset/open-squids-refuse.md
new file mode 100644
index 00000000000..40cb6f3dbc5
--- /dev/null
+++ b/.changeset/open-squids-refuse.md
@@ -0,0 +1,16 @@
+---
+"@spectrum-css/picker": major
+---
+
+### S2 Picker Component Refactor
+
+- Refactors Picker component to use proper custom property naming conventions
+- Adds size-specific animation distances for Popover component
+- Improves component structure with proper class by renaming `spectrum-Picker` to `spectrum-Picker-button`
+- `spectrum-Picker` now encapsulates help text, label, and popover components
+- Adds `flex-shrink` to progress circle for better layout control when truncation and loading is visible
+- Updates Popover animation distance to use `spectrum-Picker` custom properties
+
+#### New mods
+
+`--spectrum-picker-popover-animation-distance`
diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index b430d560652..3f3b9e474d2 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -14,6 +14,37 @@
     ".spectrum-Picker--sizeL",
     ".spectrum-Picker--sizeS",
     ".spectrum-Picker--sizeXL",
+    ".spectrum-Picker-button",
+    ".spectrum-Picker-button.is-disabled",
+    ".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
+    ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)",
+    ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover",
+    ".spectrum-Picker-button.is-keyboardFocused",
+    ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button.is-keyboardFocused:after",
+    ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)",
+    ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover",
+    ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button::-moz-focus-inner",
+    ".spectrum-Picker-button:active",
+    ".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button:active:after",
+    ".spectrum-Picker-button:after",
+    ".spectrum-Picker-button:disabled",
+    ".spectrum-Picker-button:focus",
+    ".spectrum-Picker-button:focus-visible",
+    ".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button:focus-visible:after",
+    ".spectrum-Picker-button:hover",
+    ".spectrum-Picker-button:hover .spectrum-Picker-menuIcon",
     ".spectrum-Picker-label",
     ".spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker-label.is-placeholder:active",
@@ -28,28 +59,9 @@
     ".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon",
     ".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon",
     ".spectrum-Picker.is-disabled:not(.spectrum-Picker--quiet)",
-    ".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
-    ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)",
-    ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled)",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover",
     ".spectrum-Picker.is-keyboardFocused",
-    ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon",
-    ".spectrum-Picker.is-keyboardFocused:after",
     ".spectrum-Picker.is-loading",
     ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon",
-    ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)",
-    ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon",
-    ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover",
-    ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon",
-    ".spectrum-Picker::-moz-focus-inner",
-    ".spectrum-Picker:active",
-    ".spectrum-Picker:active .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker:active:after",
     ".spectrum-Picker:after",
     ".spectrum-Picker:disabled",
     ".spectrum-Picker:disabled .spectrum-Picker-icon",
@@ -57,13 +69,7 @@
     ".spectrum-Picker:disabled .spectrum-Picker-menuIcon",
     ".spectrum-Picker:disabled .spectrum-Picker-validationIcon",
     ".spectrum-Picker:disabled:not(.spectrum-Picker--quiet)",
-    ".spectrum-Picker:focus",
     ".spectrum-Picker:focus-visible",
-    ".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon",
-    ".spectrum-Picker:focus-visible:after",
-    ".spectrum-Picker:hover",
-    ".spectrum-Picker:hover .spectrum-Picker-menuIcon",
     ".spectrum-Picker:lang(ja) .spectrum-Picker-label",
     ".spectrum-Picker:lang(ko) .spectrum-Picker-label",
     ".spectrum-Picker:lang(zh) .spectrum-Picker-label"
@@ -120,7 +126,6 @@
     "--mod-picker-min-inline-size-quiet",
     "--mod-picker-placeholder-font-style",
     "--mod-picker-placeholder-font-weight",
-    "--mod-picker-popover-animation-distance",
     "--mod-picker-spacing-bottom-to-text",
     "--mod-picker-spacing-edge-to-disclosure-icon",
     "--mod-picker-spacing-edge-to-disclosure-icon-quiet",
@@ -187,6 +192,7 @@
     "--spectrum-picker-min-inline-size",
     "--spectrum-picker-minimum-width-multiplier",
     "--spectrum-picker-placeholder-font-style",
+    "--spectrum-picker-popover-animation-distance",
     "--spectrum-picker-spacing-bottom-to-text",
     "--spectrum-picker-spacing-edge-to-disclosure-icon",
     "--spectrum-picker-spacing-edge-to-text",
@@ -223,7 +229,9 @@
     "--spectrum-component-size-difference-down",
     "--spectrum-component-size-width-ratio-down",
     "--spectrum-component-to-menu-extra-large",
+    "--spectrum-component-to-menu-large",
     "--spectrum-component-to-menu-medium",
+    "--spectrum-component-to-menu-small",
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
diff --git a/components/picker/index.css b/components/picker/index.css
index eae8b811c15..6912dd3995f 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -102,6 +102,9 @@
 	--spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
 	--spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in the popover */
+	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium);
 }
 
 .spectrum-Picker--sizeS {
@@ -120,6 +123,9 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
+
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in the popover */
+	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-small);
 }
 
 .spectrum-Picker--sizeL {
@@ -138,6 +144,9 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
+
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in the popover */
+	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-large);
 }
 
 .spectrum-Picker--sizeXL {
@@ -156,7 +165,7 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
-	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
+	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
 }
 
 .spectrum-Picker--quiet {
@@ -175,7 +184,7 @@
 	--spectrum-picker-spacing-label-to-picker: var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet));
 }
 
-.spectrum-Picker {
+.spectrum-Picker-button {
 	@extend %spectrum-BaseButton;
 
 	display: flex;
@@ -393,10 +402,11 @@
 	margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
 	margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
 	margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
+	flex-shrink: 0;
 }
 
 .spectrum-Picker-popover {
-	--mod-popover-animation-distance: var(--mod-picker-popover-animation-distance, var(--spectrum-component-to-menu-medium));
+	--mod-popover-animation-distance: var(--spectrum-picker-popover-animation-distance, var(--spectrum-component-to-menu-medium));
 }
 
 .spectrum-Picker--quiet {
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 89cf29893a5..7dd482c990e 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -18,13 +18,11 @@ import "../index.css";
  */
 export const Picker = ({
 	rootClass = "spectrum-Picker",
-	id = getRandomId("picker"),
+	id = getRandomId("picker-button"),
 	size = "m",
-	labelPosition = "top",
 	placeholder,
 	currentValue,
 	contentIconName,
-	isQuiet = false,
 	isKeyboardFocused = false,
 	showWorkflowIcon = false,
 	isOpen = false,
@@ -42,11 +40,7 @@ export const Picker = ({
 	return html`
 		<button
 			class=${classMap({
-				[rootClass]: true,
-				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof size !== "undefined",
-				[`${rootClass}--quiet`]: isQuiet,
-				[`${rootClass}--sideLabel`]: labelPosition == "side",
+				[`${rootClass}-button`]: true,
 				["is-invalid"]: isInvalid,
 				["is-open"]: isOpen,
 				["is-loading"]: isLoading,
@@ -190,15 +184,16 @@ export const Template = ({
 		isDisabled,
 	}, context) : "";
 
-	const sizeMap = {
-		s: "small",
-		m: "medium",
-		l: "large",
-		xl: "extra-large",
-	};
 
 	const markup = html`
 		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--size${size?.toUpperCase()}`]:
+					typeof size !== "undefined",
+				[`${rootClass}--quiet`]: isQuiet,
+				[`${rootClass}--sideLabel`]: labelPosition == "side",
+			})}
 			style=${styleMap({
 				position: "relative",
 				display: "inline-block",
@@ -206,7 +201,6 @@ export const Template = ({
 					display: "flex",
 					flexWrap: "nowrap",
 				},
-				"--mod-picker-popover-animation-distance": `var(--spectrum-component-to-menu-${sizeMap[size] || "medium" })`,
 			})}
 		>
 			${when(label, () =>

From e98b3f6cc224cbeca8f057c846346437e9a2a381 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Tue, 20 May 2025 15:58:17 -0400
Subject: [PATCH 03/10] chore(picker-markup): restore dropzone css file

---
 components/dropzone/index.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dropzone/index.css b/components/dropzone/index.css
index b495fc596e1..c5824560074 100644
--- a/components/dropzone/index.css
+++ b/components/dropzone/index.css
@@ -68,7 +68,7 @@
 
 	&.is-dragged {
 		--mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid);
-		--mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color)));
+		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color)));
 		--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
 
 		/* Updated values for a nested illustrated message when state changes */
@@ -83,7 +83,7 @@
 
 	&.is-filled {
 		/* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */
-		--mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
+		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
 
 		/* Updated values for a nested illustrated message when state changes */
 		--mod-illustrated-message-display: none;

From 868bd3543350a0d97d5d5dea6b2db2fc33707556 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Tue, 20 May 2025 18:08:05 -0400
Subject: [PATCH 04/10] chore(picker-markup): adding lint line

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

diff --git a/components/picker/index.css b/components/picker/index.css
index 6912dd3995f..f8f9bcc4d68 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -165,6 +165,7 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in the popover */
 	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
 }
 

From 4bd5de33175a384cfe5cb286fb0feb9051b22a9f Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Thu, 22 May 2025 18:29:27 -0400
Subject: [PATCH 05/10] feat(picker-markup): remove duplicate icon template

---
 .changeset/open-squids-refuse.md            |  2 +-
 components/picker/dist/metadata.json        |  2 +-
 components/picker/index.css                 | 16 +++++-----------
 components/picker/stories/picker.stories.js |  3 ++-
 components/picker/stories/template.js       | 11 +++--------
 5 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/.changeset/open-squids-refuse.md b/.changeset/open-squids-refuse.md
index 40cb6f3dbc5..cc89d14a4b4 100644
--- a/.changeset/open-squids-refuse.md
+++ b/.changeset/open-squids-refuse.md
@@ -13,4 +13,4 @@
 
 #### New mods
 
-`--spectrum-picker-popover-animation-distance`
+`--mod-picker-popover-animation-distance`
diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index 3f3b9e474d2..bd7afa29251 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -126,6 +126,7 @@
     "--mod-picker-min-inline-size-quiet",
     "--mod-picker-placeholder-font-style",
     "--mod-picker-placeholder-font-weight",
+    "--mod-picker-popover-animation-distance",
     "--mod-picker-spacing-bottom-to-text",
     "--mod-picker-spacing-edge-to-disclosure-icon",
     "--mod-picker-spacing-edge-to-disclosure-icon-quiet",
@@ -192,7 +193,6 @@
     "--spectrum-picker-min-inline-size",
     "--spectrum-picker-minimum-width-multiplier",
     "--spectrum-picker-placeholder-font-style",
-    "--spectrum-picker-popover-animation-distance",
     "--spectrum-picker-spacing-bottom-to-text",
     "--spectrum-picker-spacing-edge-to-disclosure-icon",
     "--spectrum-picker-spacing-edge-to-text",
diff --git a/components/picker/index.css b/components/picker/index.css
index f8f9bcc4d68..21918123ef0 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -103,8 +103,7 @@
 	--spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
 
-	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in the popover */
-	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium);
+	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium);
 }
 
 .spectrum-Picker--sizeS {
@@ -123,9 +122,7 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
-
-	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in the popover */
-	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-small);
+	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-small);
 }
 
 .spectrum-Picker--sizeL {
@@ -144,9 +141,7 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
-
-	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in the popover */
-	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-large);
+	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-large);
 }
 
 .spectrum-Picker--sizeXL {
@@ -165,8 +160,7 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
-	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in the popover */
-	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
+	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
 }
 
 .spectrum-Picker--quiet {
@@ -407,7 +401,7 @@
 }
 
 .spectrum-Picker-popover {
-	--mod-popover-animation-distance: var(--spectrum-picker-popover-animation-distance, var(--spectrum-component-to-menu-medium));
+	--mod-popover-animation-distance: var(--mod-picker-popover-animation-distance, var(--spectrum-component-to-menu-medium));
 }
 
 .spectrum-Picker--quiet {
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index c6224c7c3dd..fce78f33b96 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -76,7 +76,7 @@ export default {
 			...(IconStories?.argTypes?.iconName ?? {}),
 			name: "Icon",
 			description: "Optional workflow icon that appears before the value/placeholder text within the picker.",
-			if: false,
+			if: { arg: "showWorkflowIcon", eq: true },
 		},
 		isQuiet: {
 			...isQuiet,
@@ -117,6 +117,7 @@ export default {
 		placeholder: "Select a country",
 		helpText: "",
 		currentValue: "",
+		contentIconName: "Image",
 		showWorkflowIcon: false,
 		isQuiet: false,
 		isKeyboardFocused: false,
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 7dd482c990e..67fd6c9b255 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -59,18 +59,11 @@ export const Picker = ({
 			}}
 			aria-labelledby=${ifDefined(ariaLabeledBy)}
 		>
-			${when(contentIconName, () =>
-				Icon({
-					iconName: contentIconName,
-					size,
-					customClasses: ["spectrum-Picker-icon"],
-				}, context))
-			}
 			${when(showWorkflowIcon, () =>
 				Icon({
 					size,
 					setName: "workflow",
-					iconName: "Image",
+					iconName: contentIconName,
 					customClasses: [`${rootClass}-icon`],
 				}, context)
 			)}
@@ -127,6 +120,7 @@ export const Template = ({
 	isInvalid = false,
 	isDisabled = false,
 	showWorkflowIcon = false,
+	contentIconName,
 	isHovered = false,
 	isActive = false,
 	isKeyboardFocused = false,
@@ -149,6 +143,7 @@ export const Template = ({
 		isQuiet,
 		currentValue,
 		showWorkflowIcon,
+		contentIconName,
 		isOpen,
 		isInvalid,
 		isDisabled,

From 74f6939352dc2bad501252fb9e517ec44fc02df1 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Tue, 27 May 2025 08:51:01 -0400
Subject: [PATCH 06/10] feat(picker-markup): fixing is quiet layout bugs

---
 components/picker/dist/metadata.json     | 36 +++++++++-----------
 components/picker/index.css              | 43 ++++++++++++------------
 components/picker/stories/picker.test.js |  6 ++++
 components/picker/stories/template.js    |  2 +-
 4 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index bd7afa29251..215b5f60a20 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -6,16 +6,23 @@
     ".spectrum-Picker .spectrum-Picker-label",
     ".spectrum-Picker .spectrum-ProgressCircle",
     ".spectrum-Picker--quiet",
-    ".spectrum-Picker--quiet.is-keyboardFocused:after",
+    ".spectrum-Picker--quiet .spectrum-Picker-button",
+    ".spectrum-Picker--quiet .spectrum-Picker-button.is-invalid",
+    ".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after",
+    ".spectrum-Picker--quiet .spectrum-Picker-button:after",
+    ".spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after",
     ".spectrum-Picker--quiet.spectrum-Picker--sideLabel",
-    ".spectrum-Picker--quiet:after",
-    ".spectrum-Picker--quiet:focus-visible:after",
     ".spectrum-Picker--sideLabel",
     ".spectrum-Picker--sizeL",
     ".spectrum-Picker--sizeS",
     ".spectrum-Picker--sizeXL",
     ".spectrum-Picker-button",
     ".spectrum-Picker-button.is-disabled",
+    ".spectrum-Picker-button.is-disabled .spectrum-Picker-icon",
+    ".spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon",
+    ".spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet)",
     ".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
     ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)",
     ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover",
@@ -38,6 +45,11 @@
     ".spectrum-Picker-button:active:after",
     ".spectrum-Picker-button:after",
     ".spectrum-Picker-button:disabled",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-icon",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-validationIcon",
+    ".spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)",
     ".spectrum-Picker-button:focus",
     ".spectrum-Picker-button:focus-visible",
     ".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder",
@@ -53,22 +65,10 @@
     ".spectrum-Picker-menuIcon:active",
     ".spectrum-Picker-popover",
     ".spectrum-Picker-validationIcon",
-    ".spectrum-Picker.is-disabled",
-    ".spectrum-Picker.is-disabled .spectrum-Picker-icon",
-    ".spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon",
-    ".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon",
-    ".spectrum-Picker.is-disabled:not(.spectrum-Picker--quiet)",
     ".spectrum-Picker.is-keyboardFocused",
     ".spectrum-Picker.is-loading",
     ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon",
     ".spectrum-Picker:after",
-    ".spectrum-Picker:disabled",
-    ".spectrum-Picker:disabled .spectrum-Picker-icon",
-    ".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker:disabled .spectrum-Picker-menuIcon",
-    ".spectrum-Picker:disabled .spectrum-Picker-validationIcon",
-    ".spectrum-Picker:disabled:not(.spectrum-Picker--quiet)",
     ".spectrum-Picker:focus-visible",
     ".spectrum-Picker:lang(ja) .spectrum-Picker-label",
     ".spectrum-Picker:lang(ko) .spectrum-Picker-label",
@@ -134,7 +134,6 @@
     "--mod-picker-spacing-edge-to-text-quiet",
     "--mod-picker-spacing-icon-to-disclosure-icon",
     "--mod-picker-spacing-label-to-picker",
-    "--mod-picker-spacing-label-to-picker-quiet",
     "--mod-picker-spacing-starting-icon-to-text",
     "--mod-picker-spacing-text-to-icon-inline-end",
     "--mod-picker-spacing-top-to-alert-icon",
@@ -198,7 +197,6 @@
     "--spectrum-picker-spacing-edge-to-text",
     "--spectrum-picker-spacing-icon-to-disclosure-icon",
     "--spectrum-picker-spacing-label-to-picker",
-    "--spectrum-picker-spacing-label-to-picker-quiet",
     "--spectrum-picker-spacing-starting-icon-to-text",
     "--spectrum-picker-spacing-text-to-icon-inline-end",
     "--spectrum-picker-spacing-top-to-alert-icon",
@@ -259,10 +257,6 @@
     "--spectrum-field-end-edge-to-disclosure-icon-300",
     "--spectrum-field-end-edge-to-disclosure-icon-75",
     "--spectrum-field-label-to-component",
-    "--spectrum-field-label-to-component-quiet-extra-large",
-    "--spectrum-field-label-to-component-quiet-large",
-    "--spectrum-field-label-to-component-quiet-medium",
-    "--spectrum-field-label-to-component-quiet-small",
     "--spectrum-field-top-to-disclosure-icon-100",
     "--spectrum-field-top-to-disclosure-icon-200",
     "--spectrum-field-top-to-disclosure-icon-300",
diff --git a/components/picker/index.css b/components/picker/index.css
index 21918123ef0..f07480fed45 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -52,7 +52,6 @@
 
 	/* Space from label component to Picker component. */
 	--spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
-	--spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
 
 	/* Space from optional starting icon to the text. */
 	--spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-100);
@@ -117,7 +116,6 @@
 	--spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-75);
 	--spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-75);
 	--spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small);
-	--spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small);
 	--spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-75);
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
@@ -136,7 +134,6 @@
 	--spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-200);
 	--spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-200);
 	--spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large);
-	--spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large);
 	--spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-200);
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
@@ -155,7 +152,6 @@
 	--spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-300);
 	--spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-300);
 	--spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large);
-	--spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
 	--spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-300);
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
@@ -176,7 +172,6 @@
 	--spectrum-picker-inline-size: var(--mod-picker-inline-size-quiet, auto);
 	--spectrum-picker-spacing-edge-to-text: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet));
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet));
-	--spectrum-picker-spacing-label-to-picker: var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet));
 }
 
 .spectrum-Picker-button {
@@ -405,28 +400,34 @@
 }
 
 .spectrum-Picker--quiet {
-	border: none;
-	border-radius: 0;
-	color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
-
 	&.spectrum-Picker--sideLabel {
 		margin-block-start: 0;
 	}
 
-	&::after {
+	.spectrum-Picker-button {
 		border: none;
-		block-size: auto;
-		inline-size: auto;
-	}
+		border-radius: 0;
+		color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
 
-	&:focus-visible,
-	&.is-keyboardFocused {
-		/* Focus indicator changes from a ring to a line underneath. */
 		&::after {
 			border: none;
-			border-radius: 0;
-			box-shadow: 0 var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
-			margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0;
+			block-size: auto;
+			inline-size: auto;
+		}
+
+		&:focus-visible,
+		&.is-keyboardFocused {
+			/* Focus indicator changes from a ring to a line underneath. */
+			&::after {
+				border: none;
+				border-radius: 0;
+				border-block-end: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) solid var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
+				margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0;
+			}
+		}
+
+		&.is-invalid {
+			border: none;
 		}
 	}
 }
@@ -439,8 +440,8 @@
 /* Disabled and loading states:
 	 Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves
 	 all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */
-.spectrum-Picker:disabled,
-.spectrum-Picker.is-disabled {
+.spectrum-Picker-button:disabled,
+.spectrum-Picker-button.is-disabled {
 	cursor: default;
 	transform: none;
 	border-color: var(--highcontrast-picker-border-color-disabled, transparent);
diff --git a/components/picker/stories/picker.test.js b/components/picker/stories/picker.test.js
index 82f7e060075..46c8e389348 100644
--- a/components/picker/stories/picker.test.js
+++ b/components/picker/stories/picker.test.js
@@ -24,6 +24,11 @@ export const PickerGroup = Variants({
 			testHeading: "Side label",
 			labelPosition: "side",
 		},
+		{
+			testHeading: "Side label, quiet",
+			labelPosition: "side",
+			isQuiet: true,
+		},
 		{
 			testHeading: "Side label, alignment with switch",
 			labelPosition: "side",
@@ -32,6 +37,7 @@ export const PickerGroup = Variants({
 		{
 			testHeading: "With thumbnail icon",
 			showWorkflowIcon: true,
+			contentIconName: "Image",
 		},
 	],
 	stateData: [
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 67fd6c9b255..dd6485c7670 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -81,7 +81,7 @@ export const Picker = ({
 					isIndeterminate: true,
 				}, context)
 			)}
-			${when(isInvalid && !isLoading, () =>
+			${when(isInvalid && !isLoading && !isDisabled, () =>
 				Icon({
 					size,
 					iconName: "AlertTriangle",

From 3ef143d1080019f1da471f885cfc0b7bd22612dc Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Thu, 29 May 2025 11:45:52 -0400
Subject: [PATCH 07/10] fix(picker-markup): remove duplicate border on WHCM

---
 components/picker/dist/metadata.json | 10 ++++-
 components/picker/index.css          | 60 ++++++++++++++++------------
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index 215b5f60a20..8a0b5a08592 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -4,6 +4,7 @@
     ".spectrum-Picker",
     ".spectrum-Picker .spectrum-Picker-icon",
     ".spectrum-Picker .spectrum-Picker-label",
+    ".spectrum-Picker .spectrum-Picker-popover",
     ".spectrum-Picker .spectrum-ProgressCircle",
     ".spectrum-Picker--quiet",
     ".spectrum-Picker--quiet .spectrum-Picker-button",
@@ -12,6 +13,7 @@
     ".spectrum-Picker--quiet .spectrum-Picker-button:after",
     ".spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after",
     ".spectrum-Picker--quiet.spectrum-Picker--sideLabel",
+    ".spectrum-Picker--quiet.spectrum-Picker--sideLabel .spectrum-Picker-button",
     ".spectrum-Picker--sideLabel",
     ".spectrum-Picker--sizeL",
     ".spectrum-Picker--sizeS",
@@ -43,7 +45,6 @@
     ".spectrum-Picker-button:active",
     ".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker-button:active:after",
-    ".spectrum-Picker-button:after",
     ".spectrum-Picker-button:disabled",
     ".spectrum-Picker-button:disabled .spectrum-Picker-icon",
     ".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder",
@@ -63,7 +64,6 @@
     ".spectrum-Picker-label.is-placeholder:hover",
     ".spectrum-Picker-menuIcon",
     ".spectrum-Picker-menuIcon:active",
-    ".spectrum-Picker-popover",
     ".spectrum-Picker-validationIcon",
     ".spectrum-Picker.is-keyboardFocused",
     ".spectrum-Picker.is-loading",
@@ -134,6 +134,7 @@
     "--mod-picker-spacing-edge-to-text-quiet",
     "--mod-picker-spacing-icon-to-disclosure-icon",
     "--mod-picker-spacing-label-to-picker",
+    "--mod-picker-spacing-label-to-picker-quiet",
     "--mod-picker-spacing-starting-icon-to-text",
     "--mod-picker-spacing-text-to-icon-inline-end",
     "--mod-picker-spacing-top-to-alert-icon",
@@ -197,6 +198,7 @@
     "--spectrum-picker-spacing-edge-to-text",
     "--spectrum-picker-spacing-icon-to-disclosure-icon",
     "--spectrum-picker-spacing-label-to-picker",
+    "--spectrum-picker-spacing-label-to-picker-quiet",
     "--spectrum-picker-spacing-starting-icon-to-text",
     "--spectrum-picker-spacing-text-to-icon-inline-end",
     "--spectrum-picker-spacing-top-to-alert-icon",
@@ -257,6 +259,10 @@
     "--spectrum-field-end-edge-to-disclosure-icon-300",
     "--spectrum-field-end-edge-to-disclosure-icon-75",
     "--spectrum-field-label-to-component",
+    "--spectrum-field-label-to-component-quiet-extra-large",
+    "--spectrum-field-label-to-component-quiet-large",
+    "--spectrum-field-label-to-component-quiet-medium",
+    "--spectrum-field-label-to-component-quiet-small",
     "--spectrum-field-top-to-disclosure-icon-100",
     "--spectrum-field-top-to-disclosure-icon-200",
     "--spectrum-field-top-to-disclosure-icon-300",
diff --git a/components/picker/index.css b/components/picker/index.css
index f07480fed45..952c3fff8d7 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -52,6 +52,7 @@
 
 	/* Space from label component to Picker component. */
 	--spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
+	--spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
 
 	/* Space from optional starting icon to the text. */
 	--spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-100);
@@ -103,6 +104,10 @@
 	--spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
 
 	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium);
+
+	.spectrum-Picker-popover {
+		--mod-popover-animation-distance: var(--mod-picker-popover-animation-distance, var(--spectrum-component-to-menu-medium));
+	}
 }
 
 .spectrum-Picker--sizeS {
@@ -115,6 +120,7 @@
 	--spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75);
 	--spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-75);
 	--spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-75);
+	--spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small);
 	--spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small);
 	--spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-75);
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
@@ -128,6 +134,7 @@
 	--spectrum-picker-inline-size: var(--spectrum-field-default-width-large);
 	--spectrum-picker-block-size: var(--spectrum-component-height-200);
 	--spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-large);
+	--spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large);
 	--spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
 	--spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
 	--spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200);
@@ -146,6 +153,7 @@
 	--spectrum-picker-inline-size: var(--spectrum-field-default-width-extra-large);
 	--spectrum-picker-block-size: var(--spectrum-component-height-300);
 	--spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+	--spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
 	--spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
 	--spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
 	--spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300);
@@ -172,8 +180,14 @@
 	--spectrum-picker-inline-size: var(--mod-picker-inline-size-quiet, auto);
 	--spectrum-picker-spacing-edge-to-text: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet));
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet));
+	--spectrum-picker-spacing-label-to-picker: var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet));
+
+	&.spectrum-Picker--sideLabel .spectrum-Picker-button {
+		margin-block-start: 0;
+	}
 }
 
+/* Note: .spectrum-Picker has been renamed to .spectrum-Picker-button. This selector now triggers the Popover component. */
 .spectrum-Picker-button {
 	@extend %spectrum-BaseButton;
 
@@ -203,27 +217,6 @@
 	background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default)));
 	border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default)));
 
-	/* Focus indicator */
-	&::after {
-		pointer-events: none;
-		content: "";
-		position: absolute;
-		block-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2));
-
-		inline-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2));
-
-		margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1);
-
-		margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1);
-
-		inset-inline: 0;
-		inset-block: 0;
-		border-style: solid;
-		border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness));
-		border-color: transparent;
-		border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
-	}
-
 	&:hover {
 		color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover)));
 		background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover)));
@@ -261,6 +254,27 @@
 			border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
 		}
 
+		/* Focus indicator */
+		&::after {
+			pointer-events: none;
+			content: "";
+			position: absolute;
+			block-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2));
+
+			inline-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2));
+
+			margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1);
+
+			margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1);
+
+			inset-inline: 0;
+			inset-block: 0;
+			border-style: solid;
+			border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness));
+			border-color: transparent;
+			border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
+		}
+
 		.spectrum-Picker-label.is-placeholder {
 			color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus)));
 		}
@@ -395,10 +409,6 @@
 	flex-shrink: 0;
 }
 
-.spectrum-Picker-popover {
-	--mod-popover-animation-distance: var(--mod-picker-popover-animation-distance, var(--spectrum-component-to-menu-medium));
-}
-
 .spectrum-Picker--quiet {
 	&.spectrum-Picker--sideLabel {
 		margin-block-start: 0;

From fe9373b52f35de71ee4a34dc4e094322e9794343 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Thu, 29 May 2025 14:22:42 -0400
Subject: [PATCH 08/10] feat(picker-markup): readjusting picker popover mod
 passthroughs

---
 components/picker/dist/metadata.json |  2 +-
 components/picker/index.css          | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index 8a0b5a08592..e954b4862c8 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -126,7 +126,6 @@
     "--mod-picker-min-inline-size-quiet",
     "--mod-picker-placeholder-font-style",
     "--mod-picker-placeholder-font-weight",
-    "--mod-picker-popover-animation-distance",
     "--mod-picker-spacing-bottom-to-text",
     "--mod-picker-spacing-edge-to-disclosure-icon",
     "--mod-picker-spacing-edge-to-disclosure-icon-quiet",
@@ -193,6 +192,7 @@
     "--spectrum-picker-min-inline-size",
     "--spectrum-picker-minimum-width-multiplier",
     "--spectrum-picker-placeholder-font-style",
+    "--spectrum-picker-popover-animation-distance",
     "--spectrum-picker-spacing-bottom-to-text",
     "--spectrum-picker-spacing-edge-to-disclosure-icon",
     "--spectrum-picker-spacing-edge-to-text",
diff --git a/components/picker/index.css b/components/picker/index.css
index 952c3fff8d7..b4d90ca8569 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -103,10 +103,11 @@
 	--spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
 
-	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium);
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */
+	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium);
 
 	.spectrum-Picker-popover {
-		--mod-popover-animation-distance: var(--mod-picker-popover-animation-distance, var(--spectrum-component-to-menu-medium));
+		--mod-popover-animation-distance: var(--spectrum-picker-popover-animation-distance);
 	}
 }
 
@@ -126,7 +127,8 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
-	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-small);
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */
+	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-small);
 }
 
 .spectrum-Picker--sizeL {
@@ -145,7 +147,8 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
-	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-large);
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */
+	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-large);
 }
 
 .spectrum-Picker--sizeXL {
@@ -164,7 +167,8 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
-	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
+	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */
+	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
 }
 
 .spectrum-Picker--quiet {

From 106501594a639272a6e456ab3ffe989bda005a41 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Fri, 30 May 2025 12:07:37 -0400
Subject: [PATCH 09/10] feat(picker): updating changeset, story, css

---
 .changeset/open-squids-refuse.md            | 8 ++++++--
 components/picker/dist/metadata.json        | 1 -
 components/picker/index.css                 | 4 ----
 components/picker/stories/picker.stories.js | 4 ++++
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/.changeset/open-squids-refuse.md b/.changeset/open-squids-refuse.md
index cc89d14a4b4..a710387ce17 100644
--- a/.changeset/open-squids-refuse.md
+++ b/.changeset/open-squids-refuse.md
@@ -11,6 +11,10 @@
 - Adds `flex-shrink` to progress circle for better layout control when truncation and loading is visible
 - Updates Popover animation distance to use `spectrum-Picker` custom properties
 
-#### New mods
+#### New token
 
-`--mod-picker-popover-animation-distance`
+`--spectrum-picker-popover-animation-distance`
+
+#### Renamed tokens
+
+`spectrum-picker-spacing-picker-to-popover` --> `--spectrum-picker-popover-animation-distance`
diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index e954b4862c8..77a0e2840e1 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -8,7 +8,6 @@
     ".spectrum-Picker .spectrum-ProgressCircle",
     ".spectrum-Picker--quiet",
     ".spectrum-Picker--quiet .spectrum-Picker-button",
-    ".spectrum-Picker--quiet .spectrum-Picker-button.is-invalid",
     ".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after",
     ".spectrum-Picker--quiet .spectrum-Picker-button:after",
     ".spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after",
diff --git a/components/picker/index.css b/components/picker/index.css
index b4d90ca8569..0dd52592fcb 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -439,10 +439,6 @@
 				margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0;
 			}
 		}
-
-		&.is-invalid {
-			border: none;
-		}
 	}
 }
 
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index fce78f33b96..306a1490bdf 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -77,6 +77,10 @@ export default {
 			name: "Icon",
 			description: "Optional workflow icon that appears before the value/placeholder text within the picker.",
 			if: { arg: "showWorkflowIcon", eq: true },
+			table: {
+				type: { summary: "boolean" },
+				category: "Advanced",
+			},
 		},
 		isQuiet: {
 			...isQuiet,

From d6b8ee4ee961457bd791ed68e423ac4bd76e8c89 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <abdulr@adobe.com>
Date: Mon, 2 Jun 2025 15:40:35 -0400
Subject: [PATCH 10/10] feat(picker): update template and changeset

---
 .changeset/open-squids-refuse.md      | 2 +-
 components/picker/dist/metadata.json  | 1 -
 components/picker/index.css           | 4 +---
 components/picker/stories/template.js | 4 ++--
 4 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/.changeset/open-squids-refuse.md b/.changeset/open-squids-refuse.md
index a710387ce17..e63c2bfcf56 100644
--- a/.changeset/open-squids-refuse.md
+++ b/.changeset/open-squids-refuse.md
@@ -2,7 +2,7 @@
 "@spectrum-css/picker": major
 ---
 
-### S2 Picker Component Refactor
+### S2 Picker component refactor
 
 - Refactors Picker component to use proper custom property naming conventions
 - Adds size-specific animation distances for Popover component
diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index 77a0e2840e1..bde45fd599a 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -4,7 +4,6 @@
     ".spectrum-Picker",
     ".spectrum-Picker .spectrum-Picker-icon",
     ".spectrum-Picker .spectrum-Picker-label",
-    ".spectrum-Picker .spectrum-Picker-popover",
     ".spectrum-Picker .spectrum-ProgressCircle",
     ".spectrum-Picker--quiet",
     ".spectrum-Picker--quiet .spectrum-Picker-button",
diff --git a/components/picker/index.css b/components/picker/index.css
index 0dd52592fcb..ea2015af243 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -106,9 +106,7 @@
 	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */
 	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium);
 
-	.spectrum-Picker-popover {
-		--mod-popover-animation-distance: var(--spectrum-picker-popover-animation-distance);
-	}
+	--mod-popover-animation-distance: var(--spectrum-picker-popover-animation-distance);
 }
 
 .spectrum-Picker--sizeS {
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index dd6485c7670..12947c0b76f 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -18,7 +18,6 @@ import "../index.css";
  */
 export const Picker = ({
 	rootClass = "spectrum-Picker",
-	id = getRandomId("picker-button"),
 	size = "m",
 	placeholder,
 	currentValue,
@@ -51,7 +50,6 @@ export const Picker = ({
 			})}
 			?disabled=${isDisabled}
 			aria-haspopup="listbox"
-			id=${id}
 			style=${styleMap(customStyles)}
 			type="button"
 			@click=${function() {
@@ -115,6 +113,7 @@ export const Template = ({
 	placeholder,
 	currentValue,
 	helpText,
+	id = getRandomId("picker"),
 	isQuiet = false,
 	isOpen = false,
 	isInvalid = false,
@@ -182,6 +181,7 @@ export const Template = ({
 
 	const markup = html`
 		<div
+		id=${id}
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--size${size?.toUpperCase()}`]: