fix(panel): fix --calcite-panel-header-action-text-color-press (#12110)

Author: jcfranco

packages/calcite-components/src/components/panel/panel.e2e.ts

@@ -735,6 +735,29 @@ describe("calcite-panel", () => {
           shadowSelector: `.${CSS.contentWrapper}`,
           targetProp: "backgroundColor",
         },
+        "--calcite-panel-header-action-background-color": {
+          shadowSelector: `.${CSS.menuAction}`,
+          targetProp: "--calcite-action-background-color",
+        },
+        "--calcite-panel-header-action-background-color-hover": {
+          shadowSelector: `.${CSS.menuAction}`,
+          targetProp: "--calcite-action-background-color-hover",
+          state: "hover",
+        },
+        "--calcite-panel-header-action-background-color-press": {
+          shadowSelector: `.${CSS.menuAction}`,
+          targetProp: "--calcite-action-background-color-press",
+          state: { press: `calcite-panel >>> .${CSS.menuAction}` },
+        },
+        "--calcite-panel-header-action-text-color": {
+          shadowSelector: `.${CSS.menuAction}`,
+          targetProp: "--calcite-action-text-color",
+        },
+        "--calcite-panel-header-action-text-color-press": {
+          shadowSelector: `.${CSS.menuAction}`,
+          targetProp: "--calcite-action-text-color-press",
+          state: { press: `calcite-panel >>> .${CSS.menuAction}` },
+        },
         "--calcite-panel-header-background-color": {
           shadowSelector: `.${CSS.header}`,
           targetProp: "backgroundColor",

packages/calcite-components/src/components/panel/panel.scss

@@ -173,7 +173,7 @@ calcite-action-menu {
   --calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);
   --calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);
   --calcite-action-text-color: var(--calcite-panel-header-action-text-color);
-  --calcite-action-text-color-pressed: var(--calcite-panel-header-action-text-color-pressed);
+  --calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press);
 }
 
 .back-button {

packages/calcite-components/src/components/panel/panel.tsx

@@ -524,6 +524,7 @@ export class Panel extends LitElement implements InteractiveComponent {
         placement={menuPlacement}
       >
         <calcite-action
+          class={CSS.menuAction}
           icon={ICONS.menu}
           scale={this.scale}
           slot={ACTION_MENU_SLOTS.trigger}

packages/calcite-components/src/components/panel/resources.ts

@@ -22,6 +22,7 @@ export const CSS = {
   footerStart: "footer-start",
   footerEnd: "footer-end",
   headerSlottedContent: "header-slotted-content",
+  menuAction: "menu-action",
 };
 
 export const IDS = {