From 79175833e8121cef1419b547802721324472965d Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Mon, 5 Feb 2024 12:31:38 -0500
Subject: [PATCH] fix(menu): process ":active" styles

---
 packages/menu/src/spectrum-config.js     |  1 +
 packages/menu/src/spectrum-menu-item.css | 18 +++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/menu/src/spectrum-config.js b/packages/menu/src/spectrum-config.js
index 34b1265f39..b60cc25688 100644
--- a/packages/menu/src/spectrum-config.js
+++ b/packages/menu/src/spectrum-config.js
@@ -76,6 +76,7 @@ const config = {
                 converter.classToHost('spectrum-Menu-item'),
                 converter.classToAttribute('is-disabled', 'disabled'),
                 converter.classToAttribute('is-active', 'active'),
+                converter.pseudoToAttribute('active', 'active'),
                 converter.classToAttribute('is-focused', 'focused'),
                 converter.classToAttribute('is-selected', 'selected'),
                 converter.classToId('spectrum-Menu-itemLabel', 'label'),
diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css
index e6d5970fca..1a6f6f8ea1 100644
--- a/packages/menu/src/spectrum-menu-item.css
+++ b/packages/menu/src/spectrum-menu-item.css
@@ -235,7 +235,7 @@ governing permissions and limitations under the License.
 :host([dir='rtl']) {
     --spectrum-menu-item-focus-indicator-direction-scalar: -1;
 }
-:host:active {
+:host([active]) {
     background-color: var(
         --highcontrast-menu-item-background-color-focus,
         var(
@@ -244,7 +244,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > #label {
+:host([active]) > #label {
     color: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -253,7 +253,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > [name='description']::slotted(*) {
+:host([active]) > [name='description']::slotted(*) {
     color: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -262,7 +262,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > ::slotted([slot='value']) {
+:host([active]) > ::slotted([slot='value']) {
     color: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -271,7 +271,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > .icon:not(.chevron, .checkmark) {
+:host([active]) > .icon:not(.chevron, .checkmark) {
     fill: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -287,7 +287,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > .chevron {
+:host([active]) > .chevron {
     fill: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -303,7 +303,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > .checkmark {
+:host([active]) > .checkmark {
     fill: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -481,8 +481,8 @@ governing permissions and limitations under the License.
 .spectrum-Menu-item--collapsible.is-open .chevron {
     transform: rotate(90deg);
 }
-.spectrum-Menu-item--collapsible.is-open:active,
 .spectrum-Menu-item--collapsible.is-open:focus,
+:host([active]) .spectrum-Menu-item--collapsible.is-open,
 :host([focused]) .spectrum-Menu-item--collapsible.is-open {
     background-color: var(
         --highcontrast-menu-item-background-color-default,
@@ -606,7 +606,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([has-submenu]):active .chevron {
+:host([has-submenu][active]) .chevron {
     fill: var(
         --highcontrast-menu-item-color-focus,
         var(