diff --git a/packages/calcite-components/index-2.html b/packages/calcite-components/index-2.html
new file mode 100644
index 00000000000..25585ac5628
--- /dev/null
+++ b/packages/calcite-components/index-2.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Demos</title>
+    <style>
+      a {
+        text-decoration: none;
+      }
+    </style>
+  </head>
+
+  <body>
+    <p>
+      Notice in the console how <code>component.componentOnReady()</code> is not available when called early (needs
+      short interval and no throttling to repro). based on
+      <a href="https://github.com/Esri/calcite-design-system/issues/11514">#11514</a>
+    </p>
+    <div class="container"></div>
+    <script>
+      const container = document.querySelector(".container");
+
+      function toggleTest() {
+        if (container.matches(":empty")) {
+          const testComponent = document.createElement("calcite-test");
+          container.append(testComponent);
+        } else {
+          container.innerHTML = "";
+        }
+      }
+
+      let testComponentReady;
+
+      const intervalId = setInterval(async () => {
+        toggleTest();
+
+        const test = document.querySelector("calcite-test");
+        if (!test) {
+          return;
+        }
+
+        testComponentReady ||= customElements
+          .whenDefined("calcite-test")
+          .then(
+            // 💥
+            () => test.componentOnReady(),
+          )
+          .finally(() => {
+            console.log("interval cleared");
+            clearInterval(intervalId);
+          });
+      }, 10);
+    </script>
+  </body>
+</html>
diff --git a/packages/calcite-components/index.html b/packages/calcite-components/index.html
index 735936934ce..89823c9f893 100644
--- a/packages/calcite-components/index.html
+++ b/packages/calcite-components/index.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Demos</title>
-    <script src="/src/demos/_assets/head.ts"></script>
     <style>
       a {
         text-decoration: none;
@@ -13,527 +12,53 @@
   </head>
 
   <body>
-    <!--
-      **************************************************
-      * NAVIGATION
-      **************************************************
-    -->
-    <div class="navigation body-margin">
-      <div>
-        <h1 id="calcite-demo">Calcite demo</h1>
-      </div>
-
-      <div class="examples-github-storybook">
-        <div>
-          <calcite-button href="https://esri.github.io/calcite-ui-icons/#?" appearance="solid" kind="inverse"
-            >Calcite UI Icons</calcite-button
-          >
-        </div>
-
-        <div>
-          <calcite-button href="https://github.com/Esri/calcite-design-system" appearance="solid" kind="inverse"
-            >GitHub</calcite-button
-          >
-        </div>
-
-        <div>
-          <calcite-button href="https://esri.github.io/calcite-design-system" appearance="solid" kind="inverse"
-            >Storybook</calcite-button
-          >
-        </div>
-      </div>
-    </div>
-
-    <!-- calcite components -->
-    <div class="calcite-comp">Calcite Components</div>
-
-    <!--
-      **************************************************
-      * CALCITE COMPONENTS
-      **************************************************
-    -->
-    <div class="calcite-components">
-      <div>
-        <div>
-          <a href="/src/demos/accordion.html">
-            <calcite-action scale="s" text="Accordion" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/action.html">
-            <calcite-action scale="s" text="Action" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/alert.html">
-            <calcite-action scale="s" text="Alert" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/animation/animation.html">
-            <calcite-action scale="s" text="Animation" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/autocomplete.html">
-            <calcite-action scale="s" text="Autocomplete" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/avatar.html">
-            <calcite-action scale="s" text="Avatar" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/block.html">
-            <calcite-action scale="s" text="Block" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/button.html">
-            <calcite-action scale="s" text="Button" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/card.html">
-            <calcite-action scale="s" text="Card / Card Group" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/carousel.html">
-            <calcite-action scale="s" text="Carousel" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/checkbox.html">
-            <calcite-action scale="s" text="Checkbox" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/chip.html">
-            <calcite-action scale="s" text="Chip" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/chip-group.html">
-            <calcite-action scale="s" text="Chip Group" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-        <div>
-          <a href="/src/demos/color-picker.html">
-            <calcite-action scale="s" text="Color-picker" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/combobox.html">
-            <calcite-action scale="s" text="Combobox" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/date-picker.html">
-            <calcite-action scale="s" text="Date-picker" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/dialog.html">
-            <calcite-action scale="s" text="Dialog" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/dropdown.html">
-            <calcite-action scale="s" text="Dropdown" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/fab.html">
-            <calcite-action scale="s" text="Fab" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/flow.html">
-            <calcite-action scale="s" text="Flow" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/form.html">
-            <calcite-action scale="s" text="Form" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/validation.html">
-            <calcite-action scale="s" text="Form Validation" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/graph.html">
-            <calcite-action scale="s" text="Graph" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/handle/basic.html">
-            <calcite-action scale="s" text="Handle" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/icon.html">
-            <calcite-action scale="s" text="Icon" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/inline-editable.html">
-            <calcite-action scale="s" text="Inline-editable" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/input.html">
-            <calcite-action scale="s" text="Input" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/input-date-picker.html">
-            <calcite-action scale="s" text="Input Date Picker" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-      </div>
-
-      <!-- second column -->
-      <div>
-        <div>
-          <a href="/src/demos/input-number.html">
-            <calcite-action scale="s" text="Input Number" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/input-text.html">
-            <calcite-action scale="s" text="Input Text" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/input-time-picker.html">
-            <calcite-action scale="s" text="Input Time Picker" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/input-time-zone.html">
-            <calcite-action scale="s" text="Input Time Zone" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/label.html">
-            <calcite-action scale="s" text="Label" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/link.html">
-            <calcite-action scale="s" text="Link" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/list.html">
-            <calcite-action scale="s" text="List" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/loader.html">
-            <calcite-action scale="s" text="Loader" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/menu.html">
-            <calcite-action scale="s" text="Menu / Menu Item" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/meter.html">
-            <calcite-action scale="s" text="Meter" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/modal.html">
-            <calcite-action scale="s" text="Modal" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/navigation.html">
-            <calcite-action scale="s" text="Navigation" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/notice.html">
-            <calcite-action scale="s" text="Notice" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/pagination.html">
-            <calcite-action scale="s" text="Pagination" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/panel.html">
-            <calcite-action scale="s" text="Panel" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/popover.html">
-            <calcite-action scale="s" text="Popover" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/progress.html">
-            <calcite-action scale="s" text="Progress" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/radio-button.html">
-            <calcite-action scale="s" text="Radio-button" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/radio-button-group.html">
-            <calcite-action scale="s" text="Radio Button Group" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/rating.html">
-            <calcite-action scale="s" text="Rating" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/scrim.html">
-            <calcite-action scale="s" text="Scrim" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/segmented-control.html">
-            <calcite-action scale="s" text="Segmented Control" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-      </div>
-
-      <!-- third column -->
-      <div>
-        <div>
-          <a href="/src/demos/select.html">
-            <calcite-action scale="s" text="Select" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/shell/">
-            <calcite-action scale="s" text="Shell" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/shell-panel.html">
-            <calcite-action scale="s" text="Shell Panel" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/sheet.html">
-            <calcite-action scale="s" text="Sheet" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/slider.html">
-            <calcite-action scale="s" text="Slider" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/sortable-list.html">
-            <calcite-action scale="s" text="Sortable-list" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/sort-handle.html">
-            <calcite-action scale="s" text="Sort Handle" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/split-button.html">
-            <calcite-action scale="s" text="Split-Button" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/stack.html">
-            <calcite-action scale="s" text="Stack" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/stepper.html">
-            <calcite-action scale="s" text="Stepper" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/switch.html">
-            <calcite-action scale="s" text="Switch" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/table.html">
-            <calcite-action scale="s" text="Table" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/text-area.html">
-            <calcite-action scale="s" text="TextArea" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/tabs.html">
-            <calcite-action scale="s" text="Tabs" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/theme/auto.html">
-            <calcite-action scale="s" text="Theme" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/tile.html">
-            <calcite-action scale="s" text="Tile" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/tile-group.html">
-            <calcite-action scale="s" text="Tile Group" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/tile-select.html">
-            <calcite-action scale="s" text="Tile-select" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/tip/basic.html">
-            <calcite-action scale="s" text="Tip" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/tip-manager.html">
-            <calcite-action scale="s" text="Tip Manager" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/tooltip.html">
-            <calcite-action scale="s" text="Tooltip" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-
-        <div>
-          <a href="/src/demos/tree.html">
-            <calcite-action scale="s" text="Tree" alignment="start" text-enabled appearance="solid"> </calcite-action>
-          </a>
-        </div>
+    <p>
+      Notice in the console how the reference element is not set (from ref callback) on first updates. This might need
+      reloading, tweaking the interval, or throttling the network, to repro. based on
+      <a href="https://github.com/Esri/calcite-design-system/issues/11514">#11514</a>
+    </p>
+    <calcite-label layout="inline">
+      Toggle block
+      <calcite-switch></calcite-switch>
+    </calcite-label>
+    <calcite-block open></calcite-block>
+    <script>
+      const [htmlSwitch, block] = document.querySelectorAll("calcite-switch, calcite-block");
+      htmlSwitch.addEventListener("calciteSwitchChange", toggleBlockContent);
+
+      function toggleBlockContent() {
+        let content = [];
+
+        if (block.matches(":empty")) {
+          const testComponent = document.createElement("calcite-test");
+          content.push(testComponent);
+        }
+
+        if (content.length === 0) {
+          block.innerHTML = "";
+        } else {
+          block.append(...content);
+        }
+      }
 
-        <div>
-          <a href="/src/demos/tree-scales.html">
-            <calcite-action scale="s" text="Tree Scales" alignment="start" text-enabled appearance="solid">
-            </calcite-action>
-          </a>
-        </div>
-      </div>
-    </div>
+      let testComponent;
+
+      const intervalId = setInterval(async () => {
+        htmlSwitch.click();
+
+        const test = document.querySelector("calcite-test");
+        if (!test) {
+          return;
+        }
+
+        testComponent ||= customElements
+          .whenDefined("calcite-test")
+          .then(() => test.componentOnReady())
+          .then(() => {
+            console.log("interval cleared");
+            clearInterval(intervalId);
+          });
+      }, 10);
+    </script>
   </body>
 </html>
diff --git a/packages/calcite-components/src/components/test/test.tsx b/packages/calcite-components/src/components/test/test.tsx
new file mode 100644
index 00000000000..284a97bc0a4
--- /dev/null
+++ b/packages/calcite-components/src/components/test/test.tsx
@@ -0,0 +1,45 @@
+import { h, LitElement, JsxNode } from "@arcgis/lumina";
+
+declare global {
+  interface DeclareElements {
+    "calcite-test": Test;
+  }
+}
+
+export class Test extends LitElement {
+  internalEl!: HTMLDivElement;
+
+  private setInternalEl(el: HTMLDivElement): void {
+    this.internalEl = el;
+    console.log("[ref callback]::setInternalEl", el);
+  }
+
+  override connectedCallback(): void {
+    console.log("[connectedCallback()]");
+  }
+
+  load(): void {
+    console.log("[load()]");
+  }
+
+  override firstUpdated(): void {
+    console.log("[firstUpdated()]::internalEl:", this.internalEl);
+  }
+
+  override updated(): void {
+    console.log("[updated()]::internalEl:", this.internalEl);
+  }
+
+  loaded(): void {
+    console.log("[loaded()]");
+  }
+
+  override disconnectedCallback(): void {
+    console.log("[disconnectedCallback()]");
+  }
+
+  override render(): JsxNode {
+    console.log("[render()]");
+    return <div ref={this.setInternalEl} />;
+  }
+}
