diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
index 3893c6c94ee..7909fcba661 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -19,7 +19,7 @@ import {
 } from "../../utils/conditionalSlot";
 import { getSlotted, slotChangeGetAssignedElements } from "../../utils/dom";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -243,7 +243,7 @@ export class ActionBar
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.el?.focus();
   }
diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
index 69f2582ad58..bb505369d7b 100755
--- a/packages/calcite-components/src/components/action-group/action-group.tsx
+++ b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -7,7 +7,7 @@ import {
 } from "../../utils/conditionalSlot";
 import { getSlotted } from "../../utils/dom";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -123,7 +123,7 @@ export class ActionGroup
   /** Sets focus on the component's first focusable element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   // --------------------------------------------------------------------------
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
index 9dddf0e4c92..7bda6f24ec7 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
+++ b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
@@ -300,9 +300,9 @@ describe("calcite-action-menu", () => {
       expect(await actionMenu.getProperty("open")).toBe(false);
 
       await actionMenu.callMethod("setFocus");
+      await page.waitForChanges();
 
       await page.keyboard.press("Enter");
-
       await page.waitForChanges();
 
       expect(await actionMenu.getProperty("open")).toBe(true);
@@ -358,9 +358,9 @@ describe("calcite-action-menu", () => {
       expect(await actionMenu.getProperty("open")).toBe(false);
 
       await actionMenu.callMethod("setFocus");
+      await page.waitForChanges();
 
       await page.keyboard.press("ArrowDown");
-
       await page.waitForChanges();
 
       expect(await actionMenu.getProperty("open")).toBe(true);
@@ -392,9 +392,9 @@ describe("calcite-action-menu", () => {
       expect(await actionMenu.getProperty("open")).toBe(false);
 
       await actionMenu.callMethod("setFocus");
+      await page.waitForChanges();
 
       await page.keyboard.press("ArrowDown");
-
       await page.waitForChanges();
 
       const clickSpy = await actions[0].spyOnEvent("click");
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
index b59cedff439..9715daa79d0 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -17,7 +17,7 @@ import { EffectivePlacement, LogicalPlacement, OverlayPositioning } from "../../
 import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -185,7 +185,7 @@ export class ActionMenu implements LoadableComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     focusElement(this.menuButtonEl);
   }
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
index f0e4ae7085b..1fdebd40733 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.tsx
+++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -18,7 +18,7 @@ import {
 } from "../../utils/conditionalSlot";
 import { getSlotted, slotChangeGetAssignedElements } from "../../utils/dom";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -186,7 +186,7 @@ export class ActionPad
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.el?.focus();
   }
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
index c4f3acec46c..a59e3bc473f 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -20,7 +20,7 @@ import {
 } from "../../utils/dom";
 import { MenuPlacement } from "../../utils/floating-ui";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -380,7 +380,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   /** Sets focus on the component's "close" button (the first focusable item). */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     const alertLinkEl: HTMLCalciteLinkElement = getSlotted(this.el, { selector: "calcite-link" });
 
diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx
index a7da5984fc1..1786b2ff0d7 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -28,7 +28,7 @@ import { BlockSectionMessages } from "./assets/block-section/t9n";
 import { BlockSectionToggleDisplay } from "./interfaces";
 import { CSS, ICONS } from "./resources";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -105,7 +105,7 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     focusFirstTabbable(this.el);
   }
 
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index afa6d0d986d..bc1f5e359e2 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -37,7 +37,7 @@ import { Status } from "../interfaces";
 import { BlockMessages } from "./assets/block/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -145,7 +145,7 @@ export class Block
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     focusFirstTabbable(this.el);
   }
 
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
index 15f2121e849..ccb54a1e9f8 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -8,7 +8,7 @@ import {
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -293,7 +293,7 @@ export class Button
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.childEl?.focus();
   }
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx
index 363b4588cda..cbd75c5ac15 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.tsx
+++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx
@@ -26,7 +26,7 @@ import {
 import { isActivationKey } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -140,7 +140,7 @@ export class Checkbox
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.toggleEl?.focus();
   }
diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx
index 1b3f8d3ed84..39ca1fc0f33 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.tsx
+++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx
@@ -19,7 +19,11 @@ import {
 } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
 import { Scale, SelectionMode } from "../interfaces";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import {
+  componentFocusable,
+  setComponentLoaded,
+  setUpLoadableComponent
+} from "../../utils/loadable";
 /**
  * @slot - A slot for adding one or more `calcite-chip`s.
  */
@@ -178,7 +182,7 @@ export class ChipGroup implements InteractiveComponent {
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     if (!this.disabled) {
       (this.selectedItems[0] || this.items[0])?.setFocus();
     }
diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
index 86345fb2c31..ef2fbfd5afb 100644
--- a/packages/calcite-components/src/components/chip/chip.tsx
+++ b/packages/calcite-components/src/components/chip/chip.tsx
@@ -22,7 +22,7 @@ import {
   disconnectConditionalSlotComponent
 } from "../../utils/conditionalSlot";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -271,7 +271,7 @@ export class Chip
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     if (!this.disabled && this.interactive) {
       this.containerEl?.focus();
     } else if (!this.disabled && this.closable) {
diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
index dfba75f326c..53975af63d7 100644
--- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
+++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
@@ -26,7 +26,7 @@ import { Channels, RGB } from "../color-picker/interfaces";
 import Color from "color";
 import { focusElement } from "../../utils/dom";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -365,7 +365,7 @@ export class ColorPickerHexInput implements LoadableComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     focusElement(this.hexInputNode);
   }
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
index 59989e90de3..0c0078d2d6f 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -51,7 +51,7 @@ import {
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -652,7 +652,7 @@ export class ColorPicker
   /** Sets focus on the component's first focusable element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
 
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 827a8bb3074..afb189ad982 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -45,7 +45,7 @@ import {
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -347,7 +347,7 @@ export class Combobox
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.textInput?.focus();
     this.activeChipIndex = -1;
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx
index e9c5fa310e4..f7d3d3fa6a1 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -21,7 +21,7 @@ import {
   setEndOfDay
 } from "../../utils/date";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -193,7 +193,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
   /** Sets focus on the component's first focusable element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
 
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
index ddbe2a6d155..bbe9ca200d7 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -16,7 +16,7 @@ import { RequestedItem } from "../dropdown-group/interfaces";
 import { FlipContext, Scale, SelectionMode } from "../interfaces";
 import { CSS } from "./resources";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -102,7 +102,7 @@ export class DropdownItem implements LoadableComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.el?.focus();
   }
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index d4d14e23184..4c53fc0202f 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -40,7 +40,7 @@ import {
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -200,7 +200,7 @@ export class Dropdown
   /** Sets focus on the component's first focusable element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
 
diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx
index 586992f81dd..c7fd410c805 100755
--- a/packages/calcite-components/src/components/fab/fab.tsx
+++ b/packages/calcite-components/src/components/fab/fab.tsx
@@ -7,7 +7,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -123,7 +123,7 @@ export class Fab implements InteractiveComponent, LoadableComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     focusElement(this.buttonEl);
   }
diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx
index 9fd2054b4ae..1c3065d0fa6 100644
--- a/packages/calcite-components/src/components/filter/filter.tsx
+++ b/packages/calcite-components/src/components/filter/filter.tsx
@@ -20,7 +20,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -208,7 +208,7 @@ export class Filter
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.el?.focus();
   }
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index 5c65edc23f4..5fc4745c3b7 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -19,7 +19,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -213,7 +213,7 @@ export class FlowItem
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     const { backButtonEl, containerEl } = this;
 
diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx
index 3cc31b988f0..e5fd8b7fcb7 100644
--- a/packages/calcite-components/src/components/handle/handle.tsx
+++ b/packages/calcite-components/src/components/handle/handle.tsx
@@ -12,7 +12,7 @@ import {
 } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -133,7 +133,7 @@ export class Handle implements LoadableComponent, T9nComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.handleButton?.focus();
   }
diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
index ffb84e5e12e..6de1ab29b9c 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
@@ -20,7 +20,7 @@ import {
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -304,7 +304,7 @@ export class InlineEditable
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.el?.focus();
   }
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 7604d85408c..042ad226303 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -50,7 +50,7 @@ import {
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -404,7 +404,7 @@ export class InputDatePicker
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
 
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index 356b325c3c4..4ea0a4b69f0 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -35,7 +35,7 @@ import {
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -503,7 +503,7 @@ export class InputNumber
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.childNumberEl?.focus();
   }
diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index fb87486e378..ec4ca2a195a 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -27,7 +27,7 @@ import {
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -398,7 +398,7 @@ export class InputText
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.childEl?.focus();
   }
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
index 1f4e8565ae3..c58965ac4bb 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -29,7 +29,7 @@ import {
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -458,7 +458,7 @@ export class InputTimePicker
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
 
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index 16ec9935a0c..bddcc6db4f6 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -35,7 +35,7 @@ import {
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -573,7 +573,7 @@ export class Input
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     if (this.type === "number") {
       this.childNumberEl?.focus();
diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx
index 2d1201e8f93..4b9b8a814b8 100644
--- a/packages/calcite-components/src/components/link/link.tsx
+++ b/packages/calcite-components/src/components/link/link.tsx
@@ -7,7 +7,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -173,7 +173,7 @@ export class Link implements InteractiveComponent, LoadableComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     focusElement(this.childEl);
   }
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index aba22ad1ddd..37bdcfc8a10 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -37,7 +37,7 @@ const focusMap = new Map<HTMLCalciteListElement, number>();
 const listSelector = "calcite-list";
 
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -308,7 +308,7 @@ export class ListItem
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     const { containerEl, contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
     const focusIndex = focusMap.get(parentListEl);
 
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index 3f8d8cebda3..f092264758f 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -31,7 +31,7 @@ const listItemSelector = "calcite-list-item";
 const parentSelector = "calcite-list-item-group, calcite-list-item";
 
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -268,7 +268,7 @@ export class List implements InteractiveComponent, LoadableComponent {
   /** Sets focus on the component's first focusable element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
   }
 
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx
index 4715b4b7aca..4dc5ba10c2a 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -16,7 +16,7 @@ import {
 import { FlipContext } from "../interfaces";
 import { Direction, getElementDir, slotChangeGetAssignedElements } from "../../utils/dom";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -169,7 +169,7 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.anchorEl.focus();
   }
 
diff --git a/packages/calcite-components/src/components/menu/menu.tsx b/packages/calcite-components/src/components/menu/menu.tsx
index b3eb2c91631..cfc96df1143 100644
--- a/packages/calcite-components/src/components/menu/menu.tsx
+++ b/packages/calcite-components/src/components/menu/menu.tsx
@@ -12,7 +12,7 @@ import {
 } from "@stencil/core";
 import { focusElement, focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -150,7 +150,7 @@ export class CalciteMenu
   /** Sets focus on the component's first focusable element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   //--------------------------------------------------------------------------
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index b1b3de7f96b..fbfc2cff5b6 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -32,7 +32,7 @@ import {
   updateFocusTrapElements
 } from "../../utils/focusTrapComponent";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -441,7 +441,7 @@ export class Modal
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     focusFirstTabbable(this.el);
   }
 
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
index d62ab1569ba..addf16d8acd 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
@@ -2,7 +2,7 @@ import { Component, Element, h, Host, Prop, VNode, Method } from "@stencil/core"
 import { CSS } from "./resources";
 import {
   LoadableComponent,
-  componentLoaded,
+  componentFocusable,
   setComponentLoaded,
   setUpLoadableComponent
 } from "../../utils/loadable";
@@ -69,7 +69,7 @@ export class CalciteNavigationLogo implements LoadableComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     if (this.href) {
       this.el.focus();
     }
diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx
index 5fb93bccb8c..ae91c2e2a8f 100644
--- a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx
+++ b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx
@@ -2,7 +2,7 @@ import { Component, Element, h, Host, Prop, VNode, Method } from "@stencil/core"
 import { CSS } from "./resources";
 import {
   LoadableComponent,
-  componentLoaded,
+  componentFocusable,
   setComponentLoaded,
   setUpLoadableComponent
 } from "../../utils/loadable";
@@ -59,7 +59,7 @@ export class CalciteNavigationUser implements LoadableComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
 
diff --git a/packages/calcite-components/src/components/navigation/navigation.tsx b/packages/calcite-components/src/components/navigation/navigation.tsx
index 2cfe30dd0a2..f15cb670847 100644
--- a/packages/calcite-components/src/components/navigation/navigation.tsx
+++ b/packages/calcite-components/src/components/navigation/navigation.tsx
@@ -15,7 +15,7 @@ import { slotChangeHasAssignedElement } from "../../utils/dom";
 import { CSS, ICONS, SLOTS } from "./resources";
 import {
   LoadableComponent,
-  componentLoaded,
+  componentFocusable,
   setComponentLoaded,
   setUpLoadableComponent
 } from "../../utils/loadable";
@@ -104,7 +104,7 @@ export class CalciteNavigation implements LoadableComponent {
   /** When `navigation-action` is `true`, sets focus on the component's action element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     await this.navigationActionEl?.setFocus();
   }
 
diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx
index 07a500c809d..c6646de863a 100644
--- a/packages/calcite-components/src/components/notice/notice.tsx
+++ b/packages/calcite-components/src/components/notice/notice.tsx
@@ -17,7 +17,7 @@ import {
 } from "../../utils/conditionalSlot";
 import { getSlotted, setRequestedIcon } from "../../utils/dom";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -214,7 +214,7 @@ export class Notice
   /** Sets focus on the component's first focusable element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     const noticeLinkEl = this.el.querySelector("calcite-link");
 
diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx
index e9844da6ff3..ede8a71fc5f 100644
--- a/packages/calcite-components/src/components/pagination/pagination.tsx
+++ b/packages/calcite-components/src/components/pagination/pagination.tsx
@@ -12,7 +12,7 @@ import {
   Watch
 } from "@stencil/core";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -176,7 +176,7 @@ export class Pagination
   /** Sets focus on the component's first focusable element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
 
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index cbc61fcfe9c..2d471934e54 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -19,7 +19,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -334,7 +334,7 @@ export class Panel
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     focusFirstTabbable(this.containerEl);
   }
 
diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx
index 1a674880c8b..78753b4935f 100644
--- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx
+++ b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx
@@ -24,7 +24,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -280,7 +280,7 @@ export class PickListItem
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.focusEl?.focus();
   }
diff --git a/packages/calcite-components/src/components/pick-list/pick-list.tsx b/packages/calcite-components/src/components/pick-list/pick-list.tsx
index 3d54fc60a99..73131f49b6b 100644
--- a/packages/calcite-components/src/components/pick-list/pick-list.tsx
+++ b/packages/calcite-components/src/components/pick-list/pick-list.tsx
@@ -17,7 +17,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -284,7 +284,7 @@ export class PickList<
    */
   @Method()
   async setFocus(focusId?: ListFocusId): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     return setFocus.call(this, focusId);
   }
diff --git a/packages/calcite-components/src/components/pick-list/shared-list-tests.ts b/packages/calcite-components/src/components/pick-list/shared-list-tests.ts
index 015a76bdf73..e9edf42bfcd 100644
--- a/packages/calcite-components/src/components/pick-list/shared-list-tests.ts
+++ b/packages/calcite-components/src/components/pick-list/shared-list-tests.ts
@@ -33,37 +33,46 @@ export function keyboardNavigation(listType: ListType): void {
       });
       const list = await page.find(`calcite-${listType}-list`);
       await list.callMethod("setFocus");
+      await page.waitForChanges();
 
       expect(await getFocusedItemValue(page)).toEqual("one");
       expect(await getSelectedItemValues(list, listType)).toEqual([]);
 
       await list.press("ArrowDown");
+      await page.waitForChanges();
 
       expect(await getFocusedItemValue(page)).toEqual("two");
 
       await list.press(" ");
+      await page.waitForChanges();
 
       expect(await getSelectedItemValues(list, listType)).toEqual(["two"]);
 
       await list.press("ArrowDown");
+      await page.waitForChanges();
 
       expect(await getFocusedItemValue(page)).toEqual("one");
 
       await list.press(" ");
+      await page.waitForChanges();
       expect(await getSelectedItemValues(list, listType)).toEqual(["one", "two"]);
 
       await list.press("ArrowUp");
+      await page.waitForChanges();
 
       expect(await getFocusedItemValue(page)).toEqual("two");
 
       await list.press(" ");
+      await page.waitForChanges();
       expect(await getSelectedItemValues(list, listType)).toEqual(["one"]);
 
       await list.press("ArrowUp");
+      await page.waitForChanges();
 
       expect(await getFocusedItemValue(page)).toEqual("one");
 
       await list.press(" ");
+      await page.waitForChanges();
       expect(await getSelectedItemValues(list, listType)).toEqual([]);
     });
   });
@@ -83,6 +92,7 @@ export function keyboardNavigation(listType: ListType): void {
         const firstItem = await page.find("#one");
         const secondItem = await page.find("#two");
         await list.callMethod("setFocus");
+        await page.waitForChanges();
 
         expect(await getSelectedItemValues(list, listType)).toEqual([]);
 
@@ -198,6 +208,7 @@ export function keyboardNavigation(listType: ListType): void {
       expect(await list.getProperty("filterText")).toBe(undefined);
       const filter = await page.find(`calcite-${listType}-list >>> calcite-filter`);
       await filter.callMethod("setFocus");
+      await page.waitForChanges();
 
       const calciteFilterChangeEvent = filter.waitForEvent("calciteFilterChange");
       const calciteListFilterEvent = page.waitForEvent("calciteListFilter");
diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index 4092929ca83..9541197ca98 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -58,7 +58,7 @@ import { PopoverMessages } from "./assets/popover/t9n";
 import PopoverManager from "./PopoverManager";
 
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -393,7 +393,7 @@ export class Popover
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     forceUpdate(this.el);
     focusFirstTabbable(this.el);
   }
diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
index 9c5b6bc6f35..4b301ff37ae 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
@@ -15,7 +15,7 @@ import {
 import { createObserver } from "../../utils/observers";
 import { Layout, Scale } from "../interfaces";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -167,7 +167,7 @@ export class RadioButtonGroup implements LoadableComponent {
   /** Sets focus on the fist focusable `calcite-radio-button` element in the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     if (this.selectedItem && !this.selectedItem.disabled) {
       this.selectedItem.setFocus();
       return;
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx
index 0bd2b514338..f330770f4b2 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.tsx
+++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx
@@ -29,7 +29,7 @@ import {
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -168,7 +168,7 @@ export class RadioButton
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     if (!this.disabled) {
       focusElement(this.containerEl);
diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx
index 5510f9f2bc1..3a14b557f1d 100644
--- a/packages/calcite-components/src/components/rating/rating.tsx
+++ b/packages/calcite-components/src/components/rating/rating.tsx
@@ -20,7 +20,7 @@ import {
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -445,7 +445,7 @@ export class Rating
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.inputFocusRef?.focus();
   }
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
index 0c287517db0..2711e1d976e 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -29,7 +29,7 @@ import {
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -276,7 +276,7 @@ export class SegmentedControl
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     (this.selectedItem || this.getItems()[0])?.focus();
   }
diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
index f9df6bfebef..bfb8d5cf5fc 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -27,7 +27,7 @@ import {
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -198,7 +198,7 @@ export class Select
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     focusElement(this.selectEl);
   }
diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
index d8bb276919e..7d53874d6c9 100644
--- a/packages/calcite-components/src/components/slider/slider.tsx
+++ b/packages/calcite-components/src/components/slider/slider.tsx
@@ -31,7 +31,7 @@ import {
 import { isActivationKey } from "../../utils/key";
 import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -947,7 +947,7 @@ export class Slider
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     const handle = this.minHandle ? this.minHandle : this.maxHandle;
     handle?.focus();
diff --git a/packages/calcite-components/src/components/split-button/split-button.e2e.ts b/packages/calcite-components/src/components/split-button/split-button.e2e.ts
index c0d04674a86..2874e726fe9 100644
--- a/packages/calcite-components/src/components/split-button/split-button.e2e.ts
+++ b/packages/calcite-components/src/components/split-button/split-button.e2e.ts
@@ -247,8 +247,10 @@ describe("calcite-split-button", () => {
     expect(await group.isVisible()).toBe(true);
     expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-1");
     await page.keyboard.press("ArrowDown");
+    await page.waitForChanges();
     expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-2");
     await page.keyboard.press("ArrowDown");
+    await page.waitForChanges();
     expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-3");
     const dropdownCloseEvent = page.waitForEvent("calciteDropdownClose");
     await page.keyboard.press("Enter");
diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
index 7f45aee0183..2d3626a808f 100644
--- a/packages/calcite-components/src/components/split-button/split-button.tsx
+++ b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -17,7 +17,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -136,7 +136,7 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
   /** Sets focus on the component's first focusable element. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
 
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 52fa081b89c..b758c9d240b 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -36,7 +36,7 @@ import {
   setUpLoadableComponent,
   setComponentLoaded,
   LoadableComponent,
-  componentLoaded
+  componentFocusable
 } from "../../utils/loadable";
 
 /**
@@ -267,7 +267,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     (this.layout === "vertical" ? this.el : this.headerEl)?.focus();
   }
diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx
index 44e934037dd..c1a19df5011 100644
--- a/packages/calcite-components/src/components/switch/switch.tsx
+++ b/packages/calcite-components/src/components/switch/switch.tsx
@@ -25,7 +25,7 @@ import {
 import { isActivationKey } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -109,7 +109,7 @@ export class Switch
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     focusElement(this.switchEl);
   }
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index aaabaa04026..59059753603 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -24,6 +24,7 @@ import {
 } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
 import {
+  componentFocusable,
   componentLoaded,
   LoadableComponent,
   setComponentLoaded,
@@ -328,7 +329,7 @@ export class TextArea
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.textAreaEl.focus();
   }
 
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx
index 98336c56b59..5674296d6f7 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.tsx
+++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx
@@ -19,7 +19,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -147,7 +147,7 @@ export class TileSelect implements InteractiveComponent, LoadableComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.input?.setFocus();
   }
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.tsx b/packages/calcite-components/src/components/time-picker/time-picker.tsx
index b398e09de21..aefb884907b 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.tsx
+++ b/packages/calcite-components/src/components/time-picker/time-picker.tsx
@@ -47,7 +47,7 @@ import { TimePickerMessages } from "./assets/time-picker/t9n";
 import { CSS } from "./resources";
 
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -295,7 +295,7 @@ export class TimePicker
    */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.el?.focus();
   }
@@ -311,7 +311,7 @@ export class TimePicker
   }
 
   private async focusPart(target: TimePart): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this[`${target || "hour"}El`]?.focus();
   }
diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx
index 22aca2d9677..95b30cc1d46 100644
--- a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx
+++ b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx
@@ -24,7 +24,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -175,7 +175,7 @@ export class ValueListItem
   /** Set focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     this.pickListItem?.setFocus();
   }
diff --git a/packages/calcite-components/src/components/value-list/value-list.tsx b/packages/calcite-components/src/components/value-list/value-list.tsx
index 19f4cbdbd06..65467a8b272 100644
--- a/packages/calcite-components/src/components/value-list/value-list.tsx
+++ b/packages/calcite-components/src/components/value-list/value-list.tsx
@@ -19,7 +19,7 @@ import {
   updateHostInteraction
 } from "../../utils/interactive";
 import {
-  componentLoaded,
+  componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent
@@ -448,7 +448,7 @@ export class ValueList<
    */
   @Method()
   async setFocus(focusId?: ListFocusId): Promise<void> {
-    await componentLoaded(this);
+    await componentFocusable(this);
 
     return setFocus.call(this, focusId);
   }
diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts
index a5c53ae6de7..c08e9afe039 100644
--- a/packages/calcite-components/src/tests/commonTests.ts
+++ b/packages/calcite-components/src/tests/commonTests.ts
@@ -293,7 +293,7 @@ export function focusable(componentTagOrHTML: TagOrHTML, options?: FocusableOpti
     }
 
     // wait for next frame before checking focus
-    await page.waitForTimeout(0);
+    await page.waitForChanges();
 
     expect(await page.evaluate((selector) => document.activeElement?.matches(selector), focusTargetSelector)).toBe(
       true