diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
index 9f5940d1e99..29c7c28975f 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
@@ -8,12 +8,7 @@ import {
 import { CSS_UTILITY } from "../../utils/resources";
 import { getIconScale } from "../../utils/component";
 import { FlipContext, Position, Scale, SelectionMode, IconType } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { IconNameOrString } from "../icon/interfaces";
 import type { Accordion } from "../accordion/accordion";
 import { SLOTS, CSS, IDS } from "./resources";
@@ -31,7 +26,7 @@ declare global {
  * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.
  */
-export class AccordionItem extends LitElement implements LoadableComponent {
+export class AccordionItem extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -140,14 +135,6 @@ export class AccordionItem extends LitElement implements LoadableComponent {
     );
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
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 ce5d2837f8b..3478337d247 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -16,12 +16,7 @@ import {
   slotChangeGetAssignedElements,
   slotChangeHasAssignedElement,
 } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
 import { Layout, Position, Scale } from "../interfaces";
@@ -47,7 +42,7 @@ declare global {
  * @slot actions-end - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
  * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
  */
-export class ActionBar extends LitElement implements LoadableComponent {
+export class ActionBar extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -212,10 +207,6 @@ export class ActionBar extends LitElement implements LoadableComponent {
     this.overflowActionsDisabledHandler(this.overflowActionsDisabled);
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -242,7 +233,6 @@ export class ActionBar extends LitElement implements LoadableComponent {
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.overflowActions();
   }
 
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 ccda4fed036..bd51cbf563d 100755
--- a/packages/calcite-components/src/components/action-group/action-group.tsx
+++ b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -1,12 +1,7 @@
 // @ts-strict-ignore
 import { PropertyValues } from "lit";
 import { LitElement, property, h, method, state, JsxNode, ToEvents } from "@arcgis/lumina";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Layout, Scale } from "../interfaces";
 import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
@@ -29,7 +24,7 @@ declare global {
  * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.
  */
-export class ActionGroup extends LitElement implements LoadableComponent {
+export class ActionGroup extends LitElement {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -108,10 +103,6 @@ export class ActionGroup extends LitElement implements LoadableComponent {
 
   // #region Lifecycle
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -121,11 +112,6 @@ export class ActionGroup extends LitElement implements LoadableComponent {
       this.menuOpen = false;
     }
   }
-
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
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 adcb994c52e..7e233f592be 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -15,12 +15,7 @@ import { focusElement, toAriaBoolean } from "../../utils/dom";
 import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Appearance, Scale } from "../interfaces";
 import type { Action } from "../action/action";
 import type { Tooltip } from "../tooltip/tooltip";
@@ -41,7 +36,7 @@ const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
  * @slot trigger - A slot for adding a `calcite-action` to trigger opening the menu.
  * @slot tooltip - A slot for adding an tooltip for the menu.
  */
-export class ActionMenu extends LitElement implements LoadableComponent {
+export class ActionMenu extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -208,10 +203,6 @@ export class ActionMenu extends LitElement implements LoadableComponent {
     this.connectMenuButtonEl();
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -229,10 +220,6 @@ export class ActionMenu extends LitElement implements LoadableComponent {
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.disconnectMenuButtonEl();
   }
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 9e552bbfae7..32f44ef1ab5 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.tsx
+++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -2,12 +2,7 @@
 import { PropertyValues } from "lit";
 import { LitElement, property, createEvent, h, method, state, JsxNode } from "@arcgis/lumina";
 import { focusFirstTabbable, slotChangeGetAssignedElements } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
 import { Layout, Position, Scale } from "../interfaces";
 import { createObserver } from "../../utils/observers";
@@ -29,7 +24,7 @@ declare global {
  * @slot - A slot for adding `calcite-action`s to the component.
  * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
  */
-export class ActionPad extends LitElement implements LoadableComponent {
+export class ActionPad extends LitElement {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -128,10 +123,6 @@ export class ActionPad extends LitElement implements LoadableComponent {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -146,10 +137,6 @@ export class ActionPad extends LitElement implements LoadableComponent {
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
   }
diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx
index 05f0bece9ec..dc0288545e2 100644
--- a/packages/calcite-components/src/components/action/action.tsx
+++ b/packages/calcite-components/src/components/action/action.tsx
@@ -7,12 +7,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { getIconScale } from "../../utils/component";
 import { Alignment, Appearance, Scale } from "../interfaces";
@@ -33,7 +28,7 @@ declare global {
  * @slot - A slot for adding a `calcite-icon`.
  * @slot tooltip - [Deprecated] Use the `calcite-tooltip` component instead.
  */
-export class Action extends LitElement implements InteractiveComponent, LoadableComponent {
+export class Action extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -139,18 +134,10 @@ export class Action extends LitElement implements InteractiveComponent, Loadable
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
   }
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
index dba0cda8d95..63cb3b84cdb 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -17,12 +17,7 @@ import {
 } from "../../utils/dom";
 import { MenuPlacement } from "../../utils/floating-ui";
 import { getIconScale } from "../../utils/component";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { NumberingSystem, NumberStringFormat } from "../../utils/locale";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Kind, Scale } from "../interfaces";
@@ -52,7 +47,7 @@ const manager = new AlertManager();
  * @slot link - A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc.
  * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.
  */
-export class Alert extends LitElement implements OpenCloseComponent, LoadableComponent {
+export class Alert extends LitElement implements OpenCloseComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -217,10 +212,6 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
     };
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -254,10 +245,6 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     manager.unregisterElement(this.el);
     this.clearAutoCloseTimeout();
diff --git a/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx b/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx
index 88db4a74e60..ee865f73242 100644
--- a/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx
+++ b/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx
@@ -1,11 +1,6 @@
 // @ts-strict-ignore
 import { LitElement, property, createEvent, h, JsxNode } from "@arcgis/lumina";
 import { FlipContext, Scale } from "../interfaces";
-import {
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
 import { getIconScale } from "../../utils/component";
 import {
   InteractiveComponent,
@@ -28,10 +23,7 @@ declare global {
  * @slot content-end - A slot for adding non-actionable elements after content of the component.
  * @slot content-start - A slot for adding non-actionable elements before content of the component.
  */
-export class AutocompleteItem
-  extends LitElement
-  implements InteractiveComponent, LoadableComponent
-{
+export class AutocompleteItem extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -111,18 +103,10 @@ export class AutocompleteItem
 
   // #region Lifecycle
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
index 8fe32cff1ce..47754d87d9d 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
@@ -30,11 +30,6 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Alignment, Scale, Status } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
@@ -83,7 +78,6 @@ export class Autocomplete
     FormComponent,
     InteractiveComponent,
     LabelableComponent,
-    LoadableComponent,
     OpenCloseComponent,
     TextualInputComponent
 {
@@ -431,7 +425,6 @@ export class Autocomplete
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.getAllItemsDebounced();
   }
 
@@ -491,7 +484,6 @@ export class Autocomplete
   loaded(): void {
     afterConnectDefaultValueSet(this, this.value || "");
     this.defaultInputValue = this.inputValue || "";
-    setComponentLoaded(this);
     connectFloatingUI(this);
   }
 
diff --git a/packages/calcite-components/src/components/block-group/block-group.tsx b/packages/calcite-components/src/components/block-group/block-group.tsx
index af7a698d126..2b6c47bc6d2 100755
--- a/packages/calcite-components/src/components/block-group/block-group.tsx
+++ b/packages/calcite-components/src/components/block-group/block-group.tsx
@@ -14,7 +14,7 @@ import {
   disconnectSortableComponent,
   SortableComponent,
 } from "../../utils/sortableComponent";
-import { componentFocusable } from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { MoveEventDetail, MoveTo, ReorderEventDetail } from "../sort-handle/interfaces";
 import { DEBOUNCE } from "../../utils/resources";
 import { Block } from "../block/block";
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 1f888275e5a..bbf0e737629 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -3,12 +3,7 @@ import { LitElement, property, createEvent, Fragment, h, method, JsxNode } from
 import { focusFirstTabbable } from "../../utils/dom";
 import { isActivationKey } from "../../utils/key";
 import { FlipContext, Status } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { IconNameOrString } from "../icon/interfaces";
 import { useT9n } from "../../controllers/useT9n";
 import T9nStrings from "./assets/t9n/messages.en.json";
@@ -23,7 +18,7 @@ declare global {
 }
 
 /** @slot - A slot for adding custom content. */
-export class BlockSection extends LitElement implements LoadableComponent {
+export class BlockSection extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -93,18 +88,6 @@ export class BlockSection extends LitElement implements LoadableComponent {
 
   // #endregion
 
-  // #region Lifecycle
-
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
-  // #endregion
-
   // #region Private Methods
 
   private handleHeaderKeyDown(event: KeyboardEvent): void {
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index 42daa86252d..fab4db72f72 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -9,12 +9,7 @@ import {
 } from "../../utils/interactive";
 import { Heading, HeadingLevel } from "../functional/Heading";
 import { FlipContext, Position, Status } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import {
   defaultEndMenuPlacement,
@@ -45,10 +40,7 @@ declare global {
  * @slot control - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.
  * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.
  */
-export class Block
-  extends LitElement
-  implements InteractiveComponent, LoadableComponent, OpenCloseComponent
-{
+export class Block extends LitElement implements InteractiveComponent, OpenCloseComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -240,8 +232,6 @@ export class Block
   }
 
   load(): void {
-    setUpLoadableComponent(this);
-
     if (!this.heading && !this.label) {
       logger.warn(
         `${this.el.tagName} is missing both heading & label. Please provide a heading or label for the component to be accessible.`,
@@ -267,10 +257,6 @@ export class Block
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
index e01a3c78450..10ad337a316 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -19,12 +19,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { getIconScale } from "../../utils/component";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
@@ -53,7 +48,7 @@ declare global {
  */
 export class Button
   extends LitElement
-  implements LabelableComponent, InteractiveComponent, FormOwner, LoadableComponent
+  implements LabelableComponent, InteractiveComponent, FormOwner
 {
   // #region Static Members
 
@@ -212,7 +207,6 @@ export class Button
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     if (isBrowser()) {
       this.updateHasContent();
     }
@@ -223,7 +217,6 @@ export class Button
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.setTooltipText();
   }
 
diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx
index a06ca88c072..02d7e8ec0f6 100644
--- a/packages/calcite-components/src/components/card-group/card-group.tsx
+++ b/packages/calcite-components/src/components/card-group/card-group.tsx
@@ -9,12 +9,6 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { SelectionMode } from "../interfaces";
-import {
-  componentLoaded,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
 import type { Card } from "../card/card";
 import { styles } from "./card-group.scss";
 
@@ -25,7 +19,7 @@ declare global {
 }
 
 /** @slot - A slot for adding one or more `calcite-card`s. */
-export class CardGroup extends LitElement implements InteractiveComponent, LoadableComponent {
+export class CardGroup extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -72,7 +66,7 @@ export class CardGroup extends LitElement implements InteractiveComponent, Loada
   /** Sets focus on the component's first focusable element. */
   @method()
   async setFocus(): Promise<void> {
-    await componentLoaded(this);
+    await this.componentOnReady();
     if (!this.disabled) {
       focusElement(this.items[0]);
     }
@@ -95,10 +89,6 @@ export class CardGroup extends LitElement implements InteractiveComponent, Loada
     this.listen("calciteCardSelect", this.calciteCardSelectListener);
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -114,7 +104,6 @@ export class CardGroup extends LitElement implements InteractiveComponent, Loada
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.updateSelectedItems();
   }
 
diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx
index 6492165df54..894d780a368 100644
--- a/packages/calcite-components/src/components/card/card.tsx
+++ b/packages/calcite-components/src/components/card/card.tsx
@@ -11,12 +11,7 @@ import {
   ToEvents,
 } from "@arcgis/lumina";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { LogicalFlowPosition, SelectionMode } from "../interfaces";
 import {
   InteractiveComponent,
@@ -47,7 +42,7 @@ declare global {
  * @slot footer-start - A slot for adding a leading footer.
  * @slot footer-end - A slot for adding a trailing footer.
  */
-export class Card extends LitElement implements InteractiveComponent, LoadableComponent {
+export class Card extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -152,18 +147,10 @@ export class Card extends LitElement implements InteractiveComponent, LoadableCo
 
   // #region Lifecycle
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index 330b6fbb8ce..200cb7eb531 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -13,12 +13,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { breakpoints } from "../../utils/responsive";
 import { getRoundRobinIndex } from "../../utils/array";
@@ -37,7 +32,7 @@ declare global {
 }
 
 /** @slot - A slot for adding `calcite-carousel-item`s. */
-export class Carousel extends LitElement implements InteractiveComponent, LoadableComponent {
+export class Carousel extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -227,7 +222,6 @@ export class Carousel extends LitElement implements InteractiveComponent, Loadab
     } else if (this.autoplay === "paused") {
       this.paused = true;
     }
-    setUpLoadableComponent(this);
   }
 
   override willUpdate(changes: PropertyValues<this>): void {
@@ -261,10 +255,6 @@ export class Carousel extends LitElement implements InteractiveComponent, Loadab
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.clearIntervals();
     this.resizeObserver?.disconnect();
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx
index 3fe4378ff19..6d4432c775b 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.tsx
+++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx
@@ -16,12 +16,7 @@ import {
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Scale, Status } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import type { Label } from "../label/label";
@@ -36,7 +31,7 @@ declare global {
 
 export class Checkbox
   extends LitElement
-  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent
+  implements LabelableComponent, CheckableFormComponent, InteractiveComponent
 {
   // #region Static Members
 
@@ -190,18 +185,10 @@ export class Checkbox
     connectForm(this);
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     disconnectLabel(this);
     disconnectForm(this);
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 e49aeee748e..b3859f22bc0 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.tsx
+++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx
@@ -9,11 +9,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { Scale, SelectionMode } from "../interfaces";
-import {
-  componentFocusable,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import type { Chip } from "../chip/chip";
 import { styles } from "./chip-group.scss";
 
@@ -109,10 +105,6 @@ export class ChipGroup extends LitElement implements InteractiveComponent {
     this.listen("calciteInternalSyncSelectedChips", this.calciteInternalSyncSelectedChips);
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -127,10 +119,6 @@ export class ChipGroup extends LitElement implements InteractiveComponent {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
index 23667692195..53c49989fca 100644
--- a/packages/calcite-components/src/components/chip/chip.tsx
+++ b/packages/calcite-components/src/components/chip/chip.tsx
@@ -4,12 +4,7 @@ import { createRef } from "lit-html/directives/ref.js";
 import { LitElement, property, createEvent, h, method, state, JsxNode } from "@arcgis/lumina";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
 import { Appearance, Kind, Scale, SelectionMode } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -35,7 +30,7 @@ declare global {
  * @slot - A slot for adding text.
  * @slot image - A slot for adding an image.
  */
-export class Chip extends LitElement implements InteractiveComponent, LoadableComponent {
+export class Chip extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -180,7 +175,6 @@ export class Chip extends LitElement implements InteractiveComponent, LoadableCo
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     if (isBrowser()) {
       this.updateHasText();
     }
@@ -201,7 +195,6 @@ export class Chip extends LitElement implements InteractiveComponent, LoadableCo
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     if (this.selectionMode !== "none" && this.interactive && this.selected) {
       this.handleSelectionPropertyChange(this.selected);
     }
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 e69b96e6959..beed655eb3c 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
@@ -16,12 +16,7 @@ import {
   rgbToHex,
 } from "../color-picker/utils";
 import { focusElement } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { NumberingSystem } from "../../utils/locale";
 import { OPACITY_LIMITS } from "../color-picker/resources";
 import type { InputNumber } from "../input-number/input-number";
@@ -38,7 +33,7 @@ declare global {
 
 const DEFAULT_COLOR = Color();
 
-export class ColorPickerHexInput extends LitElement implements LoadableComponent {
+export class ColorPickerHexInput extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -143,10 +138,6 @@ export class ColorPickerHexInput extends LitElement implements LoadableComponent
     }
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -162,10 +153,6 @@ export class ColorPickerHexInput extends LitElement implements LoadableComponent
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
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 0f290e8bfc4..918c768ddf0 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -16,12 +16,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { NumberingSystem } from "../../utils/locale";
 import { clamp, closeToRangeEdge, remap } from "../../utils/math";
 import { useT9n } from "../../controllers/useT9n";
@@ -70,7 +65,7 @@ declare global {
 
 const throttleFor60FpsInMs = 16;
 
-export class ColorPicker extends LitElement implements InteractiveComponent, LoadableComponent {
+export class ColorPicker extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -302,7 +297,6 @@ export class ColorPicker extends LitElement implements InteractiveComponent, Loa
     if (!this._valueWasSet) {
       this._value ??= normalizeHex(hexify(DEFAULT_COLOR, this.alphaChannel));
     }
-    setUpLoadableComponent(this);
 
     this.handleAllowEmptyOrClearableChange();
 
@@ -370,7 +364,6 @@ export class ColorPicker extends LitElement implements InteractiveComponent, Loa
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.handleAlphaChannelDimensionsChange();
   }
 
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 93a9a5b8660..8db3b0b67c2 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -44,13 +44,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  componentLoaded,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { DEBOUNCE } from "../../utils/resources";
@@ -96,8 +90,7 @@ export class Combobox
     FormComponent,
     InteractiveComponent,
     OpenCloseComponent,
-    FloatingUIComponent,
-    LoadableComponent
+    FloatingUIComponent
 {
   // #region Static Members
 
@@ -570,10 +563,6 @@ export class Combobox
     connectFloatingUI(this);
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -620,7 +609,6 @@ export class Combobox
   loaded(): void {
     afterConnectDefaultValueSet(this, this.getValue());
     connectFloatingUI(this);
-    setComponentLoaded(this);
     this.updateItems();
     this.filterItems(this.filterText, false, false);
   }
@@ -1005,7 +993,7 @@ export class Combobox
   }
 
   private async refreshSelectionDisplay() {
-    await componentLoaded(this);
+    this.componentOnReady();
 
     if (isSingleLike(this.selectionMode)) {
       return;
diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
index 5b2346b5421..6bfba0547ff 100644
--- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
+++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
@@ -18,12 +18,7 @@ import {
 import { isActivationKey } from "../../utils/key";
 import { numberStringFormatter } from "../../utils/locale";
 import { Scale } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import type { DatePicker } from "../date-picker/date-picker";
 import { styles } from "./date-picker-day.scss";
 
@@ -33,7 +28,7 @@ declare global {
   }
 }
 
-export class DatePickerDay extends LitElement implements InteractiveComponent, LoadableComponent {
+export class DatePickerDay extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -143,7 +138,6 @@ export class DatePickerDay extends LitElement implements InteractiveComponent, L
   }
 
   load(): void {
-    setUpLoadableComponent(this);
     this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
   }
 
@@ -151,10 +145,6 @@ export class DatePickerDay extends LitElement implements InteractiveComponent, L
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
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 fc34a1de4a0..26c5910fcbd 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -22,12 +22,7 @@ import {
   prevMonth,
   sameDate,
 } from "../../utils/date";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { getDateTimeFormat, NumberingSystem, numberStringFormatter } from "../../utils/locale";
 import { HeadingLevel } from "../functional/Heading";
 import { isBrowser } from "../../utils/browser";
@@ -44,7 +39,7 @@ declare global {
   }
 }
 
-export class DatePicker extends LitElement implements LoadableComponent {
+export class DatePicker extends LitElement {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -206,7 +201,6 @@ export class DatePicker extends LitElement implements LoadableComponent {
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     await this.loadLocaleData();
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
@@ -238,10 +232,6 @@ export class DatePicker extends LitElement implements LoadableComponent {
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index f5439d08d51..9dcf2c4d5af 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -5,12 +5,7 @@ import { PropertyValues } from "lit";
 import { createRef } from "lit-html/directives/ref.js";
 import { createEvent, h, JsxNode, LitElement, method, property, state } from "@arcgis/lumina";
 import { focusFirstTabbable, isPixelValue } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { getDimensionClass } from "../../utils/dynamicClasses";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
@@ -59,7 +54,7 @@ let initialDocumentOverflowStyle: string = "";
  * @slot footer-end - A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot.
  * @slot footer-start - A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot.
  */
-export class Dialog extends LitElement implements OpenCloseComponent, LoadableComponent {
+export class Dialog extends LitElement implements OpenCloseComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -327,10 +322,6 @@ export class Dialog extends LitElement implements OpenCloseComponent, LoadableCo
     this.setupInteractions();
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -362,10 +353,6 @@ export class Dialog extends LitElement implements OpenCloseComponent, LoadableCo
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
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 e322310f7e7..aea81279047 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -13,12 +13,7 @@ import { toAriaBoolean } from "../../utils/dom";
 import { ItemKeyboardEvent } from "../dropdown/interfaces";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { FlipContext, Scale, SelectionMode } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { getIconScale } from "../../utils/component";
 import {
   InteractiveComponent,
@@ -37,7 +32,7 @@ declare global {
 }
 
 /** @slot - A slot for adding text. */
-export class DropdownItem extends LitElement implements InteractiveComponent, LoadableComponent {
+export class DropdownItem extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -158,7 +153,6 @@ export class DropdownItem extends LitElement implements InteractiveComponent, Lo
   }
 
   load(): void {
-    setUpLoadableComponent(this);
     this.initialize();
   }
 
@@ -166,10 +160,6 @@ export class DropdownItem extends LitElement implements InteractiveComponent, Lo
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 875d1a806e7..316ee692851 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -22,12 +22,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { getDimensionClass } from "../../utils/dynamicClasses";
@@ -51,7 +46,7 @@ declare global {
  */
 export class Dropdown
   extends LitElement
-  implements InteractiveComponent, LoadableComponent, OpenCloseComponent, FloatingUIComponent
+  implements InteractiveComponent, OpenCloseComponent, FloatingUIComponent
 {
   // #region Static Members
 
@@ -240,10 +235,6 @@ export class Dropdown
     connectFloatingUI(this);
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -284,7 +275,6 @@ export class Dropdown
 
   loaded(): void {
     this.updateSelectedItems();
-    setComponentLoaded(this);
     connectFloatingUI(this);
   }
 
diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx
index 6c16b24479d..f0824c94cbf 100755
--- a/packages/calcite-components/src/components/fab/fab.tsx
+++ b/packages/calcite-components/src/components/fab/fab.tsx
@@ -7,12 +7,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Appearance, Kind, Scale } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
 import type { Button } from "../button/button";
@@ -25,7 +20,7 @@ declare global {
   }
 }
 
-export class Fab extends LitElement implements InteractiveComponent, LoadableComponent {
+export class Fab extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -91,18 +86,10 @@ export class Fab extends LitElement implements InteractiveComponent, LoadableCom
 
   // #region Lifecycle
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Rendering
diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx
index 47275f4723e..d8651483aba 100644
--- a/packages/calcite-components/src/components/filter/filter.tsx
+++ b/packages/calcite-components/src/components/filter/filter.tsx
@@ -9,12 +9,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Scale } from "../interfaces";
 import { DEBOUNCE } from "../../utils/resources";
 import { useT9n } from "../../controllers/useT9n";
@@ -29,7 +24,7 @@ declare global {
   }
 }
 
-export class Filter extends LitElement implements InteractiveComponent, LoadableComponent {
+export class Filter extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -152,7 +147,6 @@ export class Filter extends LitElement implements InteractiveComponent, Loadable
   // #region Lifecycle
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.updateFiltered(filter(this.items ?? [], this.value, this.filterProps));
   }
 
@@ -173,10 +167,6 @@ export class Filter extends LitElement implements InteractiveComponent, Loadable
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.filterDebounced.cancel();
   }
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 6b2828d386c..24a648356e9 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -7,12 +7,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { HeadingLevel } from "../functional/Heading";
 import { SLOTS as PANEL_SLOTS } from "../panel/resources";
 import { OverlayPositioning } from "../../utils/floating-ui";
@@ -46,7 +41,7 @@ declare global {
  * @slot footer-end - A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot.
  * @slot footer-start - A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot.
  */
-export class FlowItem extends LitElement implements InteractiveComponent, LoadableComponent {
+export class FlowItem extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -200,10 +195,6 @@ export class FlowItem extends LitElement implements InteractiveComponent, Loadab
 
   // #region Lifecycle
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -218,10 +209,6 @@ export class FlowItem extends LitElement implements InteractiveComponent, Loadab
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx
index ecf175e7991..17a3867eb86 100755
--- a/packages/calcite-components/src/components/flow/flow.tsx
+++ b/packages/calcite-components/src/components/flow/flow.tsx
@@ -2,12 +2,7 @@
 import { PropertyValues } from "lit";
 import { LitElement, property, h, method, state, JsxNode } from "@arcgis/lumina";
 import { createObserver } from "../../utils/observers";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { whenAnimationDone } from "../../utils/dom";
 import type { FlowItem } from "../flow-item/flow-item";
 import { FlowDirection, FlowItemLikeElement } from "./interfaces";
@@ -21,7 +16,7 @@ declare global {
 }
 
 /** @slot - A slot for adding `calcite-flow-item` elements to the component. */
-export class Flow extends LitElement implements LoadableComponent {
+export class Flow extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -122,10 +117,6 @@ export class Flow extends LitElement implements LoadableComponent {
     this.itemMutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -137,7 +128,6 @@ export class Flow extends LitElement implements LoadableComponent {
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.updateItemsAndProps();
   }
 
diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx
index 900a9e83ca1..7c0b70b635d 100644
--- a/packages/calcite-components/src/components/handle/handle.tsx
+++ b/packages/calcite-components/src/components/handle/handle.tsx
@@ -2,12 +2,7 @@
 import { PropertyValues } from "lit";
 import { createRef } from "lit-html/directives/ref.js";
 import { LitElement, property, createEvent, h, method, JsxNode } from "@arcgis/lumina";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -29,7 +24,7 @@ declare global {
 /**
  * @deprecated Use the `calcite-sort-handle` component instead.
  */
-export class Handle extends LitElement implements LoadableComponent, InteractiveComponent {
+export class Handle extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -121,10 +116,6 @@ export class Handle extends LitElement implements LoadableComponent, Interactive
 
   // #region Lifecycle
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -151,8 +142,6 @@ export class Handle extends LitElement implements LoadableComponent, Interactive
       removalVersion: 4,
       suggested: "sort-handle",
     });
-
-    setComponentLoaded(this);
   }
 
   // #endregion
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 f3adea8da03..fee98833d11 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
@@ -8,12 +8,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Scale } from "../interfaces";
 import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { useT9n } from "../../controllers/useT9n";
@@ -31,10 +26,7 @@ declare global {
 }
 
 /** @slot - A slot for adding a `calcite-input`. */
-export class InlineEditable
-  extends LitElement
-  implements InteractiveComponent, LabelableComponent, LoadableComponent
-{
+export class InlineEditable extends LitElement implements InteractiveComponent, LabelableComponent {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -146,10 +138,6 @@ export class InlineEditable
     connectLabel(this);
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -164,10 +152,6 @@ export class InlineEditable
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     disconnectLabel(this);
   }
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 20e313785c8..44a2b72fbba 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
@@ -49,12 +49,7 @@ import {
 } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import {
   getDateFormatSupportedLocale,
   getSupportedNumberingSystem,
@@ -101,7 +96,6 @@ export class InputDatePicker
     FormComponent,
     InteractiveComponent,
     LabelableComponent,
-    LoadableComponent,
     OpenCloseComponent
 {
   // #region Static Members
@@ -448,7 +442,6 @@ export class InputDatePicker
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.handleDateTimeFormatChange();
     await this.loadLocaleData();
     this.onMinChanged(this.min);
@@ -517,7 +510,6 @@ export class InputDatePicker
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.localizeInputValues();
     connectFloatingUI(this);
   }
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 114378ed733..37f3743abe1 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -31,12 +31,7 @@ import {
 } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { NumberingSystem, numberStringFormatter } from "../../utils/locale";
 import {
   addLocalizedTrailingDecimalZeros,
@@ -76,8 +71,7 @@ export class InputNumber
     FormComponent,
     InteractiveComponent,
     NumericInputComponent,
-    TextualInputComponent,
-    LoadableComponent
+    TextualInputComponent
 {
   // #region Static Members
 
@@ -417,7 +411,6 @@ export class InputNumber
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.maxString = this.max?.toString();
     this.minString = this.min?.toString();
     this.requestedIcon = setRequestedIcon({}, this.icon, "number");
@@ -463,10 +456,6 @@ export class InputNumber
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     disconnectLabel(this);
     disconnectForm(this);
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 478aa119565..4979314d431 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -29,12 +29,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { CSS_UTILITY } from "../../utils/resources";
 import { SetValueOrigin } from "../input/interfaces";
 import { Alignment, Scale, Status } from "../interfaces";
@@ -58,12 +53,7 @@ declare global {
 /** @slot action - A slot for positioning a button next to the component. */
 export class InputText
   extends LitElement
-  implements
-    LabelableComponent,
-    FormComponent,
-    InteractiveComponent,
-    LoadableComponent,
-    TextualInputComponent
+  implements LabelableComponent, FormComponent, InteractiveComponent, TextualInputComponent
 {
   // #region Static Members
 
@@ -358,7 +348,6 @@ export class InputText
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon({}, this.icon, "text");
     this.setPreviousEmittedValue(this.value);
     this.setPreviousValue(this.value);
@@ -374,10 +363,6 @@ export class InputText
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     disconnectLabel(this);
     disconnectForm(this);
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 547c98960df..1439f2e38e6 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
@@ -32,12 +32,7 @@ import {
 } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import {
   localizedTwentyFourHourMeridiems,
   getSupportedLocale,
@@ -158,7 +153,7 @@ interface GetLocalizedTimeStringParameters {
 
 export class InputTimePicker
   extends LitElement
-  implements FormComponent, InteractiveComponent, LabelableComponent, LoadableComponent
+  implements FormComponent, InteractiveComponent, LabelableComponent
 {
   // #region Static Members
 
@@ -400,7 +395,6 @@ export class InputTimePicker
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     await this.loadLocaleData();
     this.updateLocale();
   }
@@ -448,7 +442,6 @@ export class InputTimePicker
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     if (isValidTime(this.value)) {
       this.setLocalizedInputValue();
     }
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
index b9bf276246a..af68ac6b589 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
@@ -17,12 +17,7 @@ import {
 } from "../../utils/interactive";
 import { Scale, Status } from "../interfaces";
 import { OverlayPositioning } from "../../utils/floating-ui";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import {
   afterConnectDefaultValueSet,
   connectForm,
@@ -56,7 +51,7 @@ declare global {
 
 export class InputTimeZone
   extends LitElement
-  implements FormComponent, InteractiveComponent, LabelableComponent, LoadableComponent
+  implements FormComponent, InteractiveComponent, LabelableComponent
 {
   // #region Static Members
 
@@ -271,8 +266,6 @@ export class InputTimeZone
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
-
     this.normalizer = await getNormalizer(this.mode);
     await this.updateTimeZoneItems();
     const initialValue = this.value;
@@ -312,7 +305,6 @@ export class InputTimeZone
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.overrideSelectedLabelForRegion(this.open);
     this.openChanged();
   }
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index 1a207199d22..459135e2352 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -37,12 +37,7 @@ import {
 } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { NumberingSystem, numberStringFormatter } from "../../utils/locale";
 import {
   addLocalizedTrailingDecimalZeros,
@@ -77,7 +72,6 @@ export class Input
     LabelableComponent,
     FormComponent,
     InteractiveComponent,
-    LoadableComponent,
     NumericInputComponent,
     TextualInputComponent
 {
@@ -483,7 +477,6 @@ export class Input
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.childElType = this.type === "textarea" ? "textarea" : "input";
     this.maxString = this.max?.toString();
     this.minString = this.min?.toString();
@@ -527,10 +520,6 @@ export class Input
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     disconnectLabel(this);
     disconnectForm(this);
diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx
index 3d0858bd488..5089b373e91 100644
--- a/packages/calcite-components/src/components/link/link.tsx
+++ b/packages/calcite-components/src/components/link/link.tsx
@@ -7,12 +7,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { CSS_UTILITY } from "../../utils/resources";
 import { FlipContext } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
@@ -33,7 +28,7 @@ declare global {
  *
  * @slot - A slot for adding text.
  */
-export class Link extends LitElement implements InteractiveComponent, LoadableComponent {
+export class Link extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -99,18 +94,10 @@ export class Link extends LitElement implements InteractiveComponent, LoadableCo
     this.listen("click", this.clickHandler);
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
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 b4ba1cc611e..7807ce81743 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -10,12 +10,7 @@ import {
 } from "../../utils/interactive";
 import { SelectionMode, InteractionMode, Scale, FlipContext } from "../interfaces";
 import { SelectionAppearance } from "../list/resources";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { IconNameOrString } from "../icon/interfaces";
 import { SortableComponentItem } from "../../utils/sortableComponent";
 import { MoveTo } from "../sort-handle/interfaces";
@@ -45,10 +40,7 @@ const focusMap = new Map<List["el"], number>();
  * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
  * @slot content-bottom - A slot for adding content below the component's `label` and `description`.
  */
-export class ListItem
-  extends LitElement
-  implements InteractiveComponent, LoadableComponent, SortableComponentItem
-{
+export class ListItem extends LitElement implements InteractiveComponent, SortableComponentItem {
   // #region Static Members
 
   static override styles = styles;
@@ -352,10 +344,6 @@ export class ListItem
     this.setSelectionDefaults();
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   /**
    * TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code
    *
@@ -399,10 +387,6 @@ export class ListItem
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index eb379b3d84d..9485ad0706f 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -26,12 +26,7 @@ import {
   SortableComponent,
 } from "../../utils/sortableComponent";
 import { SLOTS as STACK_SLOTS } from "../stack/resources";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { NumberingSystem, numberStringFormatter } from "../../utils/locale";
 import { MoveEventDetail, MoveTo, ReorderEventDetail } from "../sort-handle/interfaces";
 import { guid } from "../../utils/guid";
@@ -62,10 +57,7 @@ const parentSelector = `${listItemGroupSelector}, ${listItemSelector}`;
  * @slot filter-actions-end - A slot for adding actionable `calcite-action` elements after the filter component.
  * @slot filter-no-results - When `filterEnabled` is `true`, a slot for adding content to display when no results are found.
  */
-export class List
-  extends LitElement
-  implements InteractiveComponent, LoadableComponent, SortableComponent
-{
+export class List extends LitElement implements InteractiveComponent, SortableComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -418,7 +410,6 @@ export class List
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.handleInteractionModeWarning();
   }
 
@@ -455,10 +446,6 @@ export class List
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.disconnectObserver();
     disconnectSortableComponent(this);
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 6609f266a34..2576ff2b043 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -12,12 +12,7 @@ import {
 } from "@arcgis/lumina";
 import { FlipContext, Layout } from "../interfaces";
 import { Direction, getElementDir, slotChangeGetAssignedElements } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { CSS_UTILITY } from "../../utils/resources";
 import { IconNameOrString } from "../icon/interfaces";
 import { useT9n } from "../../controllers/useT9n";
@@ -34,7 +29,7 @@ declare global {
 }
 
 /** @slot submenu-item - A slot for adding `calcite-menu-item`s in a submenu. */
-export class MenuItem extends LitElement implements LoadableComponent {
+export class MenuItem extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -158,14 +153,6 @@ export class MenuItem extends LitElement implements LoadableComponent {
     this.listen("focus", this.focusHandler);
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/menu/menu.tsx b/packages/calcite-components/src/components/menu/menu.tsx
index 892004e50d5..b0cccc1efbd 100644
--- a/packages/calcite-components/src/components/menu/menu.tsx
+++ b/packages/calcite-components/src/components/menu/menu.tsx
@@ -8,12 +8,7 @@ import {
   focusFirstTabbable,
   slotChangeGetAssignedElements,
 } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { useT9n } from "../../controllers/useT9n";
 import type { MenuItem } from "../menu-item/menu-item";
 import T9nStrings from "./assets/t9n/messages.en.json";
@@ -27,7 +22,7 @@ declare global {
 
 type Layout = "horizontal" | "vertical";
 
-export class Menu extends LitElement implements LoadableComponent {
+export class Menu extends LitElement {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -86,10 +81,6 @@ export class Menu extends LitElement implements LoadableComponent {
     this.listen("calciteInternalMenuItemKeyEvent", this.calciteInternalNavMenuItemKeyEvent);
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -100,10 +91,6 @@ export class Menu extends LitElement implements LoadableComponent {
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/meter/meter.tsx b/packages/calcite-components/src/components/meter/meter.tsx
index 4129322ec83..fa6e996954e 100644
--- a/packages/calcite-components/src/components/meter/meter.tsx
+++ b/packages/calcite-components/src/components/meter/meter.tsx
@@ -3,11 +3,6 @@ import { PropertyValues } from "lit";
 import { createRef } from "lit-html/directives/ref.js";
 import { LitElement, property, h, state, JsxNode } from "@arcgis/lumina";
 import { Appearance, Scale } from "../interfaces";
-import {
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
 import {
   afterConnectDefaultValueSet,
   connectForm,
@@ -34,7 +29,7 @@ declare global {
   }
 }
 
-export class Meter extends LitElement implements FormComponent, LoadableComponent {
+export class Meter extends LitElement implements FormComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -178,7 +173,6 @@ export class Meter extends LitElement implements FormComponent, LoadableComponen
   }
 
   load(): void {
-    setUpLoadableComponent(this);
     this.calculateValues();
     afterConnectDefaultValueSet(this, this.value);
   }
@@ -210,7 +204,6 @@ export class Meter extends LitElement implements FormComponent, LoadableComponen
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.updateLabels();
   }
 
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index e900da50085..b524263c8c4 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -18,12 +18,7 @@ import {
   slotChangeGetAssignedElements,
   slotChangeHasAssignedElement,
 } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Kind, Scale } from "../interfaces";
@@ -54,7 +49,7 @@ let initialDocumentOverflowStyle: string = "";
  * @slot secondary - A slot for adding a secondary button.
  * @slot back - A slot for adding a back button.
  */
-export class Modal extends LitElement implements OpenCloseComponent, LoadableComponent {
+export class Modal extends LitElement implements OpenCloseComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -293,7 +288,6 @@ export class Modal extends LitElement implements OpenCloseComponent, LoadableCom
       removalVersion: 4,
       suggested: "dialog",
     });
-    setUpLoadableComponent(this);
     // when modal initially renders, if active was set we need to open as watcher doesn't fire
     if (this.open) {
       this.openModal();
@@ -318,10 +312,6 @@ export class Modal extends LitElement implements OpenCloseComponent, LoadableCom
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
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 953463d5dc3..4eb88c87773 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
@@ -1,11 +1,6 @@
 // @ts-strict-ignore
 import { h, JsxNode, LitElement, method, property } from "@arcgis/lumina";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Heading, HeadingLevel } from "../functional/Heading";
 import { IconNameOrString } from "../icon/interfaces";
 import { CSS } from "./resources";
@@ -17,7 +12,7 @@ declare global {
   }
 }
 
-export class NavigationLogo extends LitElement implements LoadableComponent {
+export class NavigationLogo extends LitElement {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -84,18 +79,6 @@ export class NavigationLogo extends LitElement implements LoadableComponent {
 
   // #endregion
 
-  // #region Lifecycle
-
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
-  // #endregion
-
   // #region Rendering
 
   private renderIcon(): JsxNode {
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 20a668094e7..dfb45076938 100644
--- a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx
+++ b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx
@@ -1,11 +1,6 @@
 // @ts-strict-ignore
 import { LitElement, property, h, method, JsxNode } from "@arcgis/lumina";
-import {
-  LoadableComponent,
-  componentFocusable,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { CSS } from "./resources";
 import { styles } from "./navigation-user.scss";
 
@@ -15,7 +10,7 @@ declare global {
   }
 }
 
-export class NavigationUser extends LitElement implements LoadableComponent {
+export class NavigationUser extends LitElement {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -60,18 +55,6 @@ export class NavigationUser extends LitElement implements LoadableComponent {
 
   // #endregion
 
-  // #region Lifecycle
-
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
-  // #endregion
-
   // #region Rendering
 
   override render(): JsxNode {
diff --git a/packages/calcite-components/src/components/navigation/navigation.tsx b/packages/calcite-components/src/components/navigation/navigation.tsx
index 90e15eff327..9c26ed08997 100644
--- a/packages/calcite-components/src/components/navigation/navigation.tsx
+++ b/packages/calcite-components/src/components/navigation/navigation.tsx
@@ -11,12 +11,7 @@ import {
   JsxNode,
 } from "@arcgis/lumina";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
-import {
-  LoadableComponent,
-  componentFocusable,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import type { Action } from "../action/action";
 import { CSS, ICONS, SLOTS } from "./resources";
 import { styles } from "./navigation.scss";
@@ -38,7 +33,7 @@ declare global {
  * @slot navigation-secondary - A slot for adding a `calcite-navigation` component in the secondary navigation level. Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.
  * @slot navigation-tertiary - A slot for adding a `calcite-navigation` component in the tertiary navigation level.  Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.
  */
-export class Navigation extends LitElement implements LoadableComponent {
+export class Navigation extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -101,18 +96,6 @@ export class Navigation extends LitElement implements LoadableComponent {
 
   // #endregion
 
-  // #region Lifecycle
-
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
-  // #endregion
-
   // #region Private Methods
 
   private actionClickHandler() {
diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx
index 3eb9787a535..db997a3239a 100644
--- a/packages/calcite-components/src/components/notice/notice.tsx
+++ b/packages/calcite-components/src/components/notice/notice.tsx
@@ -12,12 +12,7 @@ import {
   stringOrBoolean,
 } from "@arcgis/lumina";
 import { setRequestedIcon, slotChangeHasAssignedElement } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Kind, Scale, Width } from "../interfaces";
 import { KindIcons } from "../resources";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
@@ -45,7 +40,7 @@ declare global {
  * @slot link - A slot for adding a `calcite-action` to take, such as: "undo", "try again", "link to page", etc.
  * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.
  */
-export class Notice extends LitElement implements LoadableComponent, OpenCloseComponent {
+export class Notice extends LitElement implements OpenCloseComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -150,7 +145,6 @@ export class Notice extends LitElement implements LoadableComponent, OpenCloseCo
   // #region Lifecycle
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
   }
 
@@ -171,10 +165,6 @@ export class Notice extends LitElement implements LoadableComponent, OpenCloseCo
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx
index a3c32429a9d..c22a67bcc58 100644
--- a/packages/calcite-components/src/components/pagination/pagination.tsx
+++ b/packages/calcite-components/src/components/pagination/pagination.tsx
@@ -1,12 +1,7 @@
 // @ts-strict-ignore
 import { PropertyValues } from "lit";
 import { LitElement, property, createEvent, h, method, state, JsxNode } from "@arcgis/lumina";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { NumberingSystem, numberStringFormatter } from "../../utils/locale";
 import { Scale } from "../interfaces";
 import { createObserver } from "../../utils/observers";
@@ -40,7 +35,7 @@ const maxItemBreakpoints = {
   xxsmall: 1,
 };
 
-export class Pagination extends LitElement implements LoadableComponent {
+export class Pagination extends LitElement {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -167,7 +162,6 @@ export class Pagination extends LitElement implements LoadableComponent {
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.handleTotalPages();
     this.handleLastStartItemChange();
     this.handleIsXXSmall();
@@ -206,7 +200,6 @@ export class Pagination extends LitElement implements LoadableComponent {
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.setMaxItemsToBreakpoint(this.el.clientWidth);
   }
 
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index a9010866de4..72d11e825b3 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -11,12 +11,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Heading, HeadingLevel } from "../functional/Heading";
@@ -56,7 +51,7 @@ declare global {
  * @slot footer-end - A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot.
  * @slot footer-start - A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot.
  */
-export class Panel extends LitElement implements InteractiveComponent, LoadableComponent {
+export class Panel extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -226,7 +221,6 @@ export class Panel extends LitElement implements InteractiveComponent, LoadableC
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.isClosed = this.closed;
   }
 
@@ -248,10 +242,6 @@ export class Panel extends LitElement implements InteractiveComponent, LoadableC
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.resizeObserver?.disconnect();
   }
diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index 65b0ff638b2..d56a16e9b96 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -31,12 +31,7 @@ import { guid } from "../../utils/guid";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Heading, HeadingLevel } from "../functional/Heading";
 import { Scale } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { FloatingArrow } from "../functional/FloatingArrow";
 import { getIconScale } from "../../utils/component";
@@ -57,10 +52,7 @@ declare global {
 const manager = new PopoverManager();
 
 /** @slot - A slot for adding custom content. */
-export class Popover
-  extends LitElement
-  implements FloatingUIComponent, OpenCloseComponent, LoadableComponent
-{
+export class Popover extends LitElement implements FloatingUIComponent, OpenCloseComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -292,10 +284,6 @@ export class Popover
     requestAnimationFrame(() => this.setUpReferenceElement(this.hasLoaded));
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -326,7 +314,6 @@ export class Popover
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     if (this.referenceElement && !this.referenceEl) {
       this.setUpReferenceElement();
     }
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 b92aeded18b..cd9ad30358b 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
@@ -13,12 +13,7 @@ import {
 } from "@arcgis/lumina";
 import { createObserver } from "../../utils/observers";
 import { Layout, Scale, Status } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Validation } from "../functional/Validation";
 import { IconNameOrString } from "../icon/interfaces";
 import type { RadioButton } from "../radio-button/radio-button";
@@ -33,7 +28,7 @@ declare global {
 }
 
 /** @slot - A slot for adding `calcite-radio-button`s. */
-export class RadioButtonGroup extends LitElement implements LoadableComponent {
+export class RadioButtonGroup extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -133,10 +128,6 @@ export class RadioButtonGroup extends LitElement implements LoadableComponent {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -153,7 +144,6 @@ export class RadioButtonGroup extends LitElement implements LoadableComponent {
 
   loaded(): void {
     this.passPropsToRadioButtons();
-    setComponentLoaded(this);
   }
 
   override disconnectedCallback(): void {
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 9f7975a83df..f35ce71ed8c 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.tsx
+++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx
@@ -15,12 +15,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Scale } from "../interfaces";
 import type { Label } from "../label/label";
 import { CSS } from "./resources";
@@ -34,7 +29,7 @@ declare global {
 
 export class RadioButton
   extends LitElement
-  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent
+  implements LabelableComponent, CheckableFormComponent, InteractiveComponent
 {
   // #region Static Members
 
@@ -194,10 +189,6 @@ export class RadioButton
     super.connectedCallback();
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -221,8 +212,6 @@ export class RadioButton
   }
 
   loaded(): void {
-    setComponentLoaded(this);
-
     if (this.focused && !this.disabled) {
       this.setFocus();
     }
diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx
index d7d522e3ba2..b0ab860ff48 100644
--- a/packages/calcite-components/src/components/rating/rating.tsx
+++ b/packages/calcite-components/src/components/rating/rating.tsx
@@ -23,12 +23,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Scale, Status } from "../interfaces";
 import { focusFirstTabbable } from "../../utils/dom";
 import { Validation } from "../functional/Validation";
@@ -49,7 +44,7 @@ declare global {
 
 export class Rating
   extends LitElement
-  implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent
+  implements LabelableComponent, FormComponent, InteractiveComponent
 {
   // #region Static Members
 
@@ -221,7 +216,6 @@ export class Rating
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.requestUpdate("value");
   }
 
@@ -256,7 +250,6 @@ export class Rating
 
   loaded(): void {
     this.labelElements = Array.from(this.renderRoot.querySelectorAll("label"));
-    setComponentLoaded(this);
   }
 
   override disconnectedCallback(): void {
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 0d405a24c1e..d6e10755d31 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -25,12 +25,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Appearance, Layout, Scale, Status, Width } from "../interfaces";
 import { Validation } from "../functional/Validation";
 import { IconNameOrString } from "../icon/interfaces";
@@ -49,7 +44,7 @@ declare global {
 /** @slot - A slot for adding `calcite-segmented-control-item`s. */
 export class SegmentedControl
   extends LitElement
-  implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent
+  implements LabelableComponent, FormComponent, InteractiveComponent
 {
   // #region Static Members
 
@@ -185,10 +180,6 @@ export class SegmentedControl
     connectForm(this);
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -217,7 +208,6 @@ export class SegmentedControl
 
   loaded(): void {
     afterConnectDefaultValueSet(this, this.value);
-    setComponentLoaded(this);
   }
 
   override disconnectedCallback(): void {
diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
index a9d0c81872c..efa8c915233 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -24,12 +24,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { Scale, Status, Width } from "../interfaces";
 import { getIconScale } from "../../utils/component";
@@ -61,7 +56,7 @@ function isOptionGroup(optionOrGroup: OptionOrGroup): optionOrGroup is OptionGro
 /** @slot - A slot for adding `calcite-option`s. */
 export class Select
   extends LitElement
-  implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent
+  implements LabelableComponent, FormComponent, InteractiveComponent
 {
   // #region Static Members
 
@@ -205,10 +200,6 @@ export class Select
     connectForm(this);
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -228,8 +219,6 @@ export class Select
   }
 
   loaded(): void {
-    setComponentLoaded(this);
-
     if (typeof this.value === "string") {
       this.updateItemsFromValue(this.value);
     }
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index 374393abe2a..587de8f1734 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -13,12 +13,7 @@ import {
   setAttribute,
 } from "@arcgis/lumina";
 import { ensureId, focusFirstTabbable, getElementDir, isPixelValue } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { getDimensionClass } from "../../utils/dynamicClasses";
@@ -39,7 +34,7 @@ declare global {
 }
 
 /** @slot - A slot for adding custom content. */
-export class Sheet extends LitElement implements OpenCloseComponent, LoadableComponent {
+export class Sheet extends LitElement implements OpenCloseComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -268,7 +263,6 @@ export class Sheet extends LitElement implements OpenCloseComponent, LoadableCom
   }
 
   load(): void {
-    setUpLoadableComponent(this);
     // when sheet initially renders, if active was set we need to open as watcher doesn't fire
     if (this.open) {
       this.openSheet();
@@ -293,10 +287,6 @@ export class Sheet extends LitElement implements OpenCloseComponent, LoadableCom
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
index aaacc1821df..ba00f7c50b2 100644
--- a/packages/calcite-components/src/components/slider/slider.tsx
+++ b/packages/calcite-components/src/components/slider/slider.tsx
@@ -29,12 +29,7 @@ import {
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { NumberingSystem, numberStringFormatter } from "../../utils/locale";
 import { clamp, decimalPlaces } from "../../utils/math";
 import { ColorStop, DataSeries } from "../graph/interfaces";
@@ -59,7 +54,7 @@ function isRange(value: number | number[]): value is number[] {
 
 export class Slider
   extends LitElement
-  implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent
+  implements LabelableComponent, FormComponent, InteractiveComponent
 {
   // #region Static Members
 
@@ -376,7 +371,6 @@ export class Slider
   }
 
   load(): void {
-    setUpLoadableComponent(this);
     if (!isRange(this.value)) {
       this.value = this.snap ? this.getClosestStep(this.value) : this.clamp(this.value);
     }
@@ -419,10 +413,6 @@ export class Slider
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     disconnectLabel(this);
     disconnectForm(this);
diff --git a/packages/calcite-components/src/components/sort-handle/sort-handle.tsx b/packages/calcite-components/src/components/sort-handle/sort-handle.tsx
index 81e1a66b3f4..817fd400cbe 100644
--- a/packages/calcite-components/src/components/sort-handle/sort-handle.tsx
+++ b/packages/calcite-components/src/components/sort-handle/sort-handle.tsx
@@ -1,12 +1,7 @@
 // @ts-strict-ignore
 import { PropertyValues } from "lit";
 import { LitElement, property, createEvent, h, method, JsxNode, state } from "@arcgis/lumina";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -32,7 +27,7 @@ declare global {
   }
 }
 
-export class SortHandle extends LitElement implements LoadableComponent, InteractiveComponent {
+export class SortHandle extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -153,10 +148,6 @@ export class SortHandle extends LitElement implements LoadableComponent, Interac
 
   // #region Lifecycle
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -171,10 +162,6 @@ export class SortHandle extends LitElement implements LoadableComponent, Interac
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
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 f71d98b2b8e..87c18326cfe 100644
--- a/packages/calcite-components/src/components/split-button/split-button.tsx
+++ b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -6,12 +6,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { DropdownIconType } from "../button/interfaces";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
@@ -26,7 +21,7 @@ declare global {
 }
 
 /** @slot - A slot for adding `calcite-dropdown` content. */
-export class SplitButton extends LitElement implements InteractiveComponent, LoadableComponent {
+export class SplitButton extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -145,18 +140,10 @@ export class SplitButton extends LitElement implements InteractiveComponent, Loa
 
   // #region Lifecycle
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
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 f7294e27c4f..5732396aba9 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -23,12 +23,7 @@ import {
   StepperLayout,
 } from "../stepper/interfaces";
 import { NumberingSystem, numberStringFormatter } from "../../utils/locale";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { IconNameOrString } from "../icon/interfaces";
 import { useT9n } from "../../controllers/useT9n";
 import type { Stepper } from "../stepper/stepper";
@@ -44,7 +39,7 @@ declare global {
 }
 
 /** @slot - A slot for adding custom content. */
-export class StepperItem extends LitElement implements InteractiveComponent, LoadableComponent {
+export class StepperItem extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -183,7 +178,6 @@ export class StepperItem extends LitElement implements InteractiveComponent, Loa
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.parentStepperEl = this.el.parentElement as Stepper["el"];
     this.itemPosition = this.getItemPosition();
     this.registerStepperItem();
@@ -215,10 +209,6 @@ export class StepperItem extends LitElement implements InteractiveComponent, Loa
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx
index c004276bb56..6976181c7ba 100644
--- a/packages/calcite-components/src/components/switch/switch.tsx
+++ b/packages/calcite-components/src/components/switch/switch.tsx
@@ -14,12 +14,7 @@ import {
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Scale } from "../interfaces";
 import type { Label } from "../label/label";
 import { CSS } from "./resources";
@@ -33,7 +28,7 @@ declare global {
 
 export class Switch
   extends LitElement
-  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent
+  implements LabelableComponent, CheckableFormComponent, InteractiveComponent
 {
   // #region Static Members
 
@@ -120,18 +115,10 @@ export class Switch
     connectForm(this);
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     disconnectLabel(this);
     disconnectForm(this);
diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx
index 036e57ebca2..7d2b54009ea 100644
--- a/packages/calcite-components/src/components/table-cell/table-cell.tsx
+++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx
@@ -3,12 +3,7 @@ import { PropertyValues } from "lit";
 import { createRef } from "lit-html/directives/ref.js";
 import { LitElement, property, h, method, state, JsxNode } from "@arcgis/lumina";
 import { Alignment, Scale } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -29,7 +24,7 @@ declare global {
 }
 
 /** @slot - A slot for adding content, usually text content. */
-export class TableCell extends LitElement implements InteractiveComponent, LoadableComponent {
+export class TableCell extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -125,7 +120,6 @@ export class TableCell extends LitElement implements InteractiveComponent, Loada
   // #region Lifecycle
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.updateScreenReaderContentsText();
     this.updateScreenReaderSelectionText();
   }
@@ -140,10 +134,6 @@ export class TableCell extends LitElement implements InteractiveComponent, Loada
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx
index 38fc08b8344..a630bb44ae5 100644
--- a/packages/calcite-components/src/components/table-header/table-header.tsx
+++ b/packages/calcite-components/src/components/table-header/table-header.tsx
@@ -2,12 +2,7 @@
 import { PropertyValues } from "lit";
 import { createRef } from "lit-html/directives/ref.js";
 import { LitElement, property, h, method, state, JsxNode } from "@arcgis/lumina";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Alignment, Scale, SelectionMode } from "../interfaces";
 import { RowType, TableInteractionMode } from "../table/interfaces";
 import { getIconScale } from "../../utils/component";
@@ -22,7 +17,7 @@ declare global {
   }
 }
 
-export class TableHeader extends LitElement implements LoadableComponent {
+export class TableHeader extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -125,7 +120,6 @@ export class TableHeader extends LitElement implements LoadableComponent {
   // #region Lifecycle
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.updateScreenReaderText();
   }
 
@@ -135,10 +129,6 @@ export class TableHeader extends LitElement implements LoadableComponent {
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx
index e44a4571072..c3428427369 100644
--- a/packages/calcite-components/src/components/table/table.tsx
+++ b/packages/calcite-components/src/components/table/table.tsx
@@ -4,11 +4,6 @@ import { render } from "lit-html";
 import { createRef } from "lit-html/directives/ref.js";
 import { createEvent, h, JsxNode, LitElement, property, state } from "@arcgis/lumina";
 import { Scale, SelectionMode } from "../interfaces";
-import {
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
 import { NumberingSystem, numberStringFormatter } from "../../utils/locale";
 import { getUserAgentString } from "../../utils/browser";
 import { useT9n } from "../../controllers/useT9n";
@@ -37,7 +32,7 @@ declare global {
  * @slot table-footer - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
  * @slot selection-actions - A slot for adding `calcite-actions` or other elements to display when `selectionMode` is not `"none"` and `selectionDisplay` is not `"none"`.
  */
-export class Table extends LitElement implements LoadableComponent {
+export class Table extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -175,8 +170,6 @@ export class Table extends LitElement implements LoadableComponent {
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
-
     /* Workaround for Safari https://bugs.webkit.org/show_bug.cgi?id=258430 https://bugs.webkit.org/show_bug.cgi?id=239478 */
     // ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
     this.readCellContentsToAT = /safari/i.test(getUserAgentString());
@@ -203,10 +196,6 @@ export class Table extends LitElement implements LoadableComponent {
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
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 1b17457c3ee..9541e669812 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -23,13 +23,7 @@ import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from
 import { slotChangeHasAssignedElement } from "../../utils/dom";
 import { NumberingSystem, numberStringFormatter } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
-import {
-  componentFocusable,
-  componentLoaded,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -63,7 +57,6 @@ export class TextArea
   implements
     FormComponent,
     LabelableComponent,
-    LoadableComponent,
     InteractiveComponent,
     Omit<TextualInputComponent, "pattern">
 {
@@ -93,7 +86,7 @@ export class TextArea
   private localizedCharacterLengthObj: CharacterLengthObj;
 
   private resizeObserver = createObserver("resize", async () => {
-    await componentLoaded(this);
+    await this.componentOnReady();
     const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth } =
       this.getHeightAndWidthOfElements();
     if (footerWidth > 0 && footerWidth !== textAreaWidth) {
@@ -285,7 +278,7 @@ export class TextArea
   /** Selects the text of the component's `value`. */
   @method()
   async selectText(): Promise<void> {
-    await componentLoaded(this);
+    await this.componentOnReady();
     this.textAreaEl.select();
   }
 
@@ -315,19 +308,11 @@ export class TextArea
     connectForm(this);
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
     this.setTextAreaHeight();
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     disconnectLabel(this);
     disconnectForm(this);
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 85a8c16e2dc..1aea3debbf9 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.tsx
+++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx
@@ -7,12 +7,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Alignment, Width } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
 import { logger } from "../../utils/logger";
@@ -32,7 +27,7 @@ declare global {
  * @deprecated Use the `calcite-tile` component instead.
  * @slot - A slot for adding custom content.
  */
-export class TileSelect extends LitElement implements InteractiveComponent, LoadableComponent {
+export class TileSelect extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -151,8 +146,6 @@ export class TileSelect extends LitElement implements InteractiveComponent, Load
       removalVersion: 4,
       suggested: ["tile", "tile-group"],
     });
-
-    setUpLoadableComponent(this);
   }
 
   override willUpdate(changes: PropertyValues<this>): void {
@@ -173,10 +166,6 @@ export class TileSelect extends LitElement implements InteractiveComponent, Load
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.input?.remove();
   }
diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx
index 8764493c981..a2e934e9e03 100644
--- a/packages/calcite-components/src/components/tile/tile.tsx
+++ b/packages/calcite-components/src/components/tile/tile.tsx
@@ -7,13 +7,9 @@ import {
 } from "../../utils/interactive";
 import { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from "../interfaces";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
-import {
-  componentFocusable,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
 import { SelectableComponent } from "../../utils/selectableComponent";
 import { IconNameOrString } from "../icon/interfaces";
+import { componentFocusable } from "../../utils/component";
 import { CSS, ICONS, SLOTS } from "./resources";
 import { styles } from "./tile.scss";
 
@@ -180,18 +176,10 @@ export class Tile extends LitElement implements InteractiveComponent, Selectable
     this.listen("keydown", this.keyDownHandler);
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
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 c7d68a97b14..f5a76f58783 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.tsx
+++ b/packages/calcite-components/src/components/time-picker/time-picker.tsx
@@ -24,12 +24,7 @@ import {
   TimePart,
 } from "../../utils/time";
 import { getIconScale } from "../../utils/component";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { decimalPlaces, getDecimals } from "../../utils/math";
 import { getElementDir } from "../../utils/dom";
 import { useT9n } from "../../controllers/useT9n";
@@ -47,7 +42,7 @@ function capitalize(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-export class TimePicker extends LitElement implements LoadableComponent {
+export class TimePicker extends LitElement {
   // #region Static Members
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
 
@@ -183,10 +178,6 @@ export class TimePicker extends LitElement implements LoadableComponent {
     this.toggleSecond();
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -205,10 +196,6 @@ export class TimePicker extends LitElement implements LoadableComponent {
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods
diff --git a/packages/calcite-components/src/utils/component.ts b/packages/calcite-components/src/utils/component.ts
index 50d8f77f140..959c2ad611b 100644
--- a/packages/calcite-components/src/utils/component.ts
+++ b/packages/calcite-components/src/utils/component.ts
@@ -4,6 +4,7 @@ import { ComboboxChildElement } from "../components/combobox/interfaces";
 import { StepperItem } from "../components/stepper-item/stepper-item";
 import { TableRow } from "../components/table-row/table-row";
 import { logger } from "./logger";
+import { isBrowser } from "./browser";
 
 export function getIconScale(componentScale: Scale): Extract<Scale, "s" | "m"> {
   return componentScale === "l" ? "m" : "s";
@@ -33,3 +34,28 @@ export function warnIfMissingRequiredProp<C extends LitElement>(
 export function isHidden<C extends ComboboxChildElement | StepperItem["el"] | TableRow["el"]>(el: C): boolean {
   return el.hidden || el.itemHidden;
 }
+
+/**
+ * This helper util can be used to ensuring the component is loaded and rendered by the browser (The "componentOnReady" lifecycle method has been called and any internal elements are focusable).
+ *
+ * A component developer can await this method before proceeding with any logic that requires a component to be loaded first and then an internal element be focused.
+ *
+ * @example
+ * async setFocus(): Promise<void> {
+ *   await componentFocusable(this);
+ *   this.internalElement?.focus();
+ * }
+ *
+ * @param component
+ * @returns Promise<void>
+ */
+export async function componentFocusable(component: LitElement): Promise<void> {
+  await component.componentOnReady();
+
+  if (!isBrowser()) {
+    return;
+  }
+
+  component.requestUpdate();
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
diff --git a/packages/calcite-components/src/utils/loadable.spec.ts b/packages/calcite-components/src/utils/loadable.spec.ts
deleted file mode 100644
index b161730230b..00000000000
--- a/packages/calcite-components/src/utils/loadable.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { waitForAnimationFrame } from "../tests/utils";
-import { createControlledPromise } from "../tests/utils/promises";
-import { componentLoaded } from "./loadable";
-
-describe("loadable", () => {
-  it("should honor loadable component lifecycle", async () => {
-    const controlledPromise = createControlledPromise<void>();
-
-    const fakeComponent: any = {
-      componentOnReady: () => controlledPromise.promise,
-    };
-
-    const afterLoad = vi.fn();
-    componentLoaded(fakeComponent)?.then(afterLoad);
-    expect(afterLoad).toHaveBeenCalledTimes(0);
-
-    controlledPromise.resolve();
-    await waitForAnimationFrame();
-    expect(afterLoad).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/packages/calcite-components/src/utils/loadable.ts b/packages/calcite-components/src/utils/loadable.ts
deleted file mode 100644
index c6f7f56e8e9..00000000000
--- a/packages/calcite-components/src/utils/loadable.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-// @ts-strict-ignore
-import { LitElement } from "@arcgis/lumina";
-import { isBrowser } from "./browser";
-
-/**
- * This helper adds support for knowing when a component has been loaded.
- *
- * @deprecated this interface is no longer needed, and you can use LitElement.componentOnReady instead
- *
- * Implementing
- *
- * ```
- * export class MyComponent implements LoadableComponent { }
- * ```
- *
- * ```
- *  //--------------------------------------------------------------------------
- *  //
- *  //  Lifecycle
- *  //
- *  //--------------------------------------------------------------------------
- *
- *  load(): void {
- *    setUpLoadableComponent(this);
- *  }
- *
- *  loaded(): void {
- *    setComponentLoaded(this);
- *  }
- *
- *  // --------------------------------------------------------------------------
- *  //
- *  //  Methods
- *  //
- *  // --------------------------------------------------------------------------
- *
- *  async myMethod(): Promise<void> {
- *    await componentLoaded(this);
- *  }
- * ```
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- this interface is deprecated, and we allow it to be empty for incremental migration
-export interface LoadableComponent {}
-
-/**
- * This helper util sets up the component for the ability to know when the component has been loaded.
- *
- * This should be used in the `load` lifecycle hook.
- *
- * @deprecated this method is no longer needed, and you can use LitElement.componentOnReady instead
- *
- * @example
- * load(): void {
- *   setUpLoadableComponent(this);
- * }
- *
- * @param _component
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- this method is deprecated, and we allow it to be empty for incremental migration
-export function setUpLoadableComponent(_component: LoadableComponent): void {
-  // intentionally empty
-}
-
-/**
- * This helper util lets the loadable component know that it is now loaded.
- *
- * This should be used in the `loaded` lifecycle hook.
- *
- * @deprecated this method is no longer needed, and you can use LitElement.componentOnReady instead
- *
- * @example
- * loaded(): void {
- *   setComponentLoaded(this);
- * }
- *
- * @param _component
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- this method is deprecated, and we allow it to be empty for incremental migration
-export function setComponentLoaded(_component: LoadableComponent): void {
-  // intentionally empty
-}
-
-/**
- * This helper util can be used to ensure a component has been loaded (The "componentOnReady" lifecycle method has been called).
- *
- * A component developer can await this method before proceeding with any logic that requires a component to be loaded first.
- *
- * @deprecated use LitElement.componentOnReady instead
- *
- * @example
- * async myMethod(): Promise<void> {
- *   await componentLoaded(this);
- * }
- *
- * @param component
- * @returns Promise<void>
- */
-export async function componentLoaded(component: LitElement): Promise<void> {
-  await component.componentOnReady();
-}
-
-/**
- * This helper util can be used to ensuring the component is loaded and rendered by the browser (The "componentOnReady" lifecycle method has been called and any internal elements are focusable).
- *
- * A component developer can await this method before proceeding with any logic that requires a component to be loaded first and then an internal element be focused.
- *
- * @example
- * async setFocus(): Promise<void> {
- *   await componentFocusable(this);
- *   this.internalElement?.focus();
- * }
- *
- * @param component
- * @returns Promise<void>
- */
-export async function componentFocusable(component: LitElement): Promise<void> {
-  await component.componentOnReady();
-
-  if (!isBrowser()) {
-    return;
-  }
-
-  component.requestUpdate();
-  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
-}