diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
index 23c1d9bdc02..cdffb5480f4 100755
--- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts
+++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -1,6 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests";
 import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
 const actionGroupHTML = `<calcite-action-group scale="l">
@@ -102,90 +103,95 @@ describe("calcite-action-group", () => {
         targetProp: "--calcite-action-menu-popover-shadow",
       },
       "--calcite-action-group-trigger-background-color-active": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-background-color",
         state: { press: { attribute: "class", value: CSS.expandToggle } },
       },
       "--calcite-action-group-trigger-background-color-focus": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-background-color",
         state: "focus",
       },
       "--calcite-action-group-trigger-background-color-hover": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-background-color",
         state: "hover",
       },
       "--calcite-action-group-trigger-background-color": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-background-color",
       },
       "--calcite-action-group-trigger-icon-color-active": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-icon-color",
         state: { press: { attribute: "class", value: CSS.expandToggle } },
       },
       "--calcite-action-group-trigger-icon-color-focus": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-icon-color",
         state: "focus",
       },
       "--calcite-action-group-trigger-icon-color-hover": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-icon-color",
         state: "hover",
       },
       "--calcite-action-group-trigger-icon-color": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-icon-color",
       },
       "--calcite-action-group-trigger-indicator-color": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-indicator-color",
       },
       "--calcite-action-group-trigger-loader-color": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-loader-color",
       },
       "--calcite-action-group-trigger-shadow-active": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-shadow",
         state: { press: { attribute: "class", value: CSS.expandToggle } },
       },
       "--calcite-action-group-trigger-shadow-hover": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-shadow",
         state: "hover",
       },
       "--calcite-action-group-trigger-shadow-focus": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-shadow",
         state: "focus",
       },
       "--calcite-action-group-trigger-shadow": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-shadow",
       },
       "--calcite-action-group-trigger-text-color-active": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-text-color",
         state: { press: { attribute: "class", value: CSS.expandToggle } },
       },
       "--calcite-action-group-trigger-text-color-hover": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-text-color",
         state: "hover",
       },
       "--calcite-action-group-trigger-text-color-focus": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-text-color",
         state: "focus",
       },
       "--calcite-action-group-trigger-text-color": {
-        shadowSelector: "calcite-action",
+        shadowSelector: `.${CSS.expandToggle}`,
         targetProp: "--calcite-action-text-color",
       },
     };
-    themed(`calcite-action-group`, tokens);
+    themed(
+      html`<calcite-action-group
+        ><calcite-action slot="menu-actions" text="banana" icon="banana"></calcite-action
+      ></calcite-action-group>`,
+      tokens,
+    );
   });
 });
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts b/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
index e69efb20295..fb2f6c2553c 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
@@ -1,6 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { focusable, renders, hidden, disabled } from "../../tests/commonTests";
-import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
 
 describe("calcite-dropdown-item", () => {
   describe("renders", () => {
@@ -52,27 +54,50 @@ describe("calcite-dropdown-item", () => {
   });
 
   describe("theme", () => {
-    const tokens: ComponentTestTokens = {
-      "--calcite-dropdown-item-background-color": [
-        {
-          shadowSelector: ".container",
+    describe("default", () => {
+      themed("calcite-dropdown-item", {
+        "--calcite-dropdown-item-background-color": {
+          shadowSelector: `.${CSS.container}`,
           targetProp: "backgroundColor",
         },
-        {
-          shadowSelector: ".container a",
+        "--calcite-dropdown-item-text-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("selected", () => {
+      themed(html`<calcite-dropdown-item selected></calcite-dropdown-item>`, {
+        "--calcite-dropdown-item-indicator-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "--calcite-icon-color",
+        },
+      });
+    });
+
+    describe("with link", () => {
+      themed(html`<calcite-dropdown-item href="http://example.com"></calcite-dropdown-item>`, {
+        "--calcite-dropdown-item-background-color": {
+          shadowSelector: `.${CSS.link}`,
           targetProp: "backgroundColor",
         },
-      ],
-      "--calcite-dropdown-item-icon-color": {
-        targetProp: "--calcite-icon-color",
-      },
-      "--calcite-dropdown-item-indicator-color": {
-        targetProp: "--calcite-icon-color",
-      },
-      "--calcite-dropdown-item-text-color": {
-        targetProp: "color",
-      },
-    };
-    themed(`calcite-action-bar`, tokens);
+      });
+    });
+
+    describe("with start/end icon", () => {
+      themed(html`<calcite-dropdown-item icon-start="banana" icon-end="banana"></calcite-dropdown-item>`, {
+        "--calcite-dropdown-item-icon-color": [
+          {
+            shadowSelector: `.${CSS.iconStart}`,
+            targetProp: "--calcite-icon-color",
+          },
+          {
+            shadowSelector: `.${CSS.iconEnd}`,
+            targetProp: "--calcite-icon-color",
+          },
+        ],
+      });
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
index a1030b818a7..ebf28ae90ff 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
@@ -20,7 +20,7 @@
     duration-150
     ease-in-out;
   color: var(--calcite-dropdown-item-text-color, (--calcite-color-text-3));
-  background-color: var(--calcite-dropdown-item-background-color, none);
+  background-color: var(--calcite-dropdown-item-background-color, transparent);
 }
 
 :host {
@@ -130,18 +130,20 @@
 :host([selected]) .dropdown-link {
   @apply font-medium;
   color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
-  & calcite-icon {
-    --calcite-icon-color: var(--calcite-dropdown-item-icon-color, theme("backgroundColor.brand"));
-  }
+}
+
+.dropdown-item-icon--start,
+.dropdown-item-icon--end {
+  --calcite-icon-color: var(--calcite-dropdown-item-icon-color, theme("backgroundColor.brand"));
 }
 
 :host(:hover:not([disabled])) .dropdown-item-icon {
-  color: var(--calcite-dropdown-item-indicator-color, theme("borderColor.color.1"));
+  --calcite-icon-color: var(--calcite-dropdown-item-indicator-color, theme("borderColor.color.1"));
   @apply opacity-100;
 }
 
 :host([selected]) .dropdown-item-icon {
-  color: var(--calcite-dropdown-item-indicator-color, theme("backgroundColor.brand"));
+  --calcite-icon-color: var(--calcite-dropdown-item-indicator-color, theme("backgroundColor.brand"));
   @apply opacity-100;
 }
 
diff --git a/packages/calcite-components/src/components/handle/handle.e2e.ts b/packages/calcite-components/src/components/handle/handle.e2e.ts
index 686e90fcaa4..35ebc2445a0 100644
--- a/packages/calcite-components/src/components/handle/handle.e2e.ts
+++ b/packages/calcite-components/src/components/handle/handle.e2e.ts
@@ -2,6 +2,7 @@ import { newE2EPage } from "@stencil/core/testing";
 import { accessible, disabled, hidden, renders, t9n, themed } from "../../tests/commonTests";
 import { HandleMessages } from "../../components";
 import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { html } from "../../../support/formatting";
 import { CSS, SUBSTITUTIONS } from "./resources";
 
 describe("calcite-handle", () => {
@@ -184,15 +185,15 @@ describe("calcite-handle", () => {
       };
       themed(`calcite-handle`, tokens);
     });
+
     describe("selected", () => {
       const tokens: ComponentTestTokens = {
         "--calcite-handle-background-color-selected": {
           targetProp: "backgroundColor",
           shadowSelector: `.${CSS.handle}`,
-          state: { press: { attribute: "class", value: CSS.handle } },
         },
       };
-      themed(`calcite-handle`, tokens);
+      themed(html`<calcite-handle selected></calcite-handle>`, tokens);
     });
   });
 });
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
index bfe10f3a72a..adb7a68e9e5 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
@@ -17,6 +17,7 @@ import { getFocusedElementProp, skipAnimations, waitForAnimationFrame } from "..
 import { html } from "../../../support/formatting";
 import { openClose } from "../../tests/commonTests";
 import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 async function getInputValue(page: E2EPage): Promise<string> {
   return page.evaluate(
@@ -1054,7 +1055,7 @@ describe("calcite-input-time-picker", () => {
           targetProp: "--calcite-time-picker-text-color",
         },
         "--calcite-input-time-picker-toggle-icon-color-hover": {
-          shadowSelector: "calcite-icon",
+          shadowSelector: `.${CSS.toggleIcon} calcite-icon`,
           targetProp: "--calcite-icon-color",
           state: "hover",
         },
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
index 0e593806213..6d82165da31 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
@@ -71,19 +71,12 @@
   }
 
   calcite-icon {
-    --calcite-icon-color: var(--calcite-input-icon-color);
-
-    &:hover {
-      --calcite-icon-color: var(--calcite-input-icon-color-hover);
-    }
-    &:active {
-      --calcite-icon-color: var(--calcite-input-icon-color-active);
-    }
+    --calcite-icon-color: var(--calcite-input-time-picker-toggle-icon-color);
   }
 }
 
 .input-wrapper:hover .toggle-icon,
-calcite-input-text:focus + .toggle-icon {
+:is(calcite-input-text:active, calcite-input-text:hover, calcite-input-text:focus) + .toggle-icon {
   calcite-icon {
     --calcite-icon-color: var(--calcite-input-time-picker-toggle-icon-color-hover, var(--calcite-color-text-1));
   }