From 55c7a925e6e76dd3ca3842b9ada4b371828382c4 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 30 Jun 2023 16:29:23 -0700
Subject: [PATCH 01/23] fix(tooltip): emits close and beforeClose events when
 container is set to display:none

---
 .../src/components/tooltip/tooltip.tsx        | 17 ++++----
 .../calcite-components/src/demos/tooltip.html | 42 ++++++++++++++++---
 .../src/utils/openCloseComponent.ts           | 23 ++++++----
 3 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index 4b221917173..649dc3658dd 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -25,11 +25,7 @@ import {
   reposition
 } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
-import {
-  connectOpenCloseComponent,
-  disconnectOpenCloseComponent,
-  OpenCloseComponent
-} from "../../utils/openCloseComponent";
+import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { ARIA_DESCRIBED_BY, CSS } from "./resources";
 
 import TooltipManager from "./TooltipManager";
@@ -92,6 +88,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
 
   @Watch("open")
   openHandler(value: boolean): void {
+    onToggleOpenCloseComponent(this);
     if (value) {
       this.reposition(true);
     }
@@ -165,10 +162,16 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    connectOpenCloseComponent(this);
     this.setUpReferenceElement(this.hasLoaded);
   }
 
+  async componentWillLoad(): Promise<void> {
+    // when modal initially renders, if active was set we need to open as watcher doesn't fire
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
+  }
+
   componentDidLoad(): void {
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
@@ -180,7 +183,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   disconnectedCallback(): void {
     this.removeReferences();
     disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);
-    disconnectOpenCloseComponent(this);
   }
 
   //--------------------------------------------------------------------------
@@ -264,7 +266,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
 
   private setTransitionEl = (el): void => {
     this.transitionEl = el;
-    connectOpenCloseComponent(this);
   };
 
   setUpReferenceElement = (warn = true): void => {
diff --git a/packages/calcite-components/src/demos/tooltip.html b/packages/calcite-components/src/demos/tooltip.html
index dae9be1f990..b04ab79dada 100644
--- a/packages/calcite-components/src/demos/tooltip.html
+++ b/packages/calcite-components/src/demos/tooltip.html
@@ -45,16 +45,46 @@ <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
       <div class="parent">
         <div class="child right-aligned-text">auto</div>
 
-        <div class="child">
-          <calcite-button appearance="outline" id="tooltip-auto-ref">auto</calcite-button>
+        <div>
+          <div class="container">
+            <div class="template">
+              <calcite-link id="tooltip-button">Hover for Tooltip</calcite-link>
+              <calcite-tooltip label="Example label" reference-element="tooltip-button" id="actualTestCase">
+                <span>Tooltip content lorem ipsum</span>
+              </calcite-tooltip>
+            </div>
+          </div>
         </div>
 
-        <div class="child">
-          <calcite-button appearance="outline" id="tooltip-auto-start-ref">auto-start</calcite-button>
-        </div>
         <div class="child">
           <calcite-button appearance="outline" id="tooltip-auto-end-ref">auto-end</calcite-button>
         </div>
+        <style>
+          .container {
+            border: 1px solid red;
+            height: 33vh;
+            min-height: 1.5em;
+          }
+
+          .container:hover .template {
+            display: initial;
+          }
+
+          .template {
+            display: none;
+          }
+        </style>
+        <script>
+          const tooltip = document.getElementById("actualTestCase");
+
+          tooltip.addEventListener("calciteTooltipBeforeClose", () => {
+            console.log("calciteTooltipBeforeClose");
+          });
+
+          tooltip.addEventListener("calciteTooltipClose", () => {
+            console.log("calciteTooltipClose");
+          });
+        </script>
       </div>
 
       <!-- top, top-start, top-end -->
@@ -190,7 +220,7 @@ <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
 
       <!-- containers to hold the tooltip -->
       <div>
-        <calcite-tooltip placement="auto" reference-element="tooltip-auto-ref">
+        <calcite-tooltip placement="auto" reference-element="tooltip-auto-ref" id="testing">
           <p>placement: auto</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index c32a302499f..a2eb84f247c 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -77,18 +77,16 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
   readTask((): void => {
     if (component.transitionEl) {
       const allTransitionPropsArray = getComputedStyle(component.transitionEl).transition.split(" ");
+      const visibility = getComputedStyle(component.transitionEl).visibility;
+      const display = getComputedStyle(component.transitionEl).display;
+      console.log("visibility", visibility);
+      console.log("display", display);
+
       const openTransitionPropIndex = allTransitionPropsArray.findIndex(
         (item) => item === component.openTransitionProp
       );
-      const transitionDuration = allTransitionPropsArray[openTransitionPropIndex + 1];
-      if (transitionDuration === "0s") {
-        (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-          ? component.onBeforeOpen()
-          : component.onBeforeClose();
-        (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-          ? component.onOpen()
-          : component.onClose();
-      } else {
+      const transitionDuration = Number(allTransitionPropsArray[openTransitionPropIndex + 1].replace(/^\D+/g, ""));
+      if (transitionDuration > 0) {
         component.transitionEl.addEventListener(
           "transitionstart",
           () => {
@@ -107,6 +105,13 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
           },
           { once: true }
         );
+      } else {
+        (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+          ? component.onBeforeOpen()
+          : component.onBeforeClose();
+        (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+          ? component.onOpen()
+          : component.onClose();
       }
     }
   });

From ae243ddb7e5d85dfd3229525739218aafa3ea3c9 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sun, 2 Jul 2023 22:19:39 -0700
Subject: [PATCH 02/23] mark connect/disconnectOpenCloseComponent as
 @deprecated and update the doc

---
 packages/calcite-components/src/utils/openCloseComponent.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index a2eb84f247c..97e1b54a185 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -122,6 +122,7 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
  * For component which do not have open prop, use `onToggleOpenCloseComponent` implementation.
  *
  * @param component
+ * @deprecated Call `onToggleOpenCloseComponent` instead in `open` watcher and `compoponentWillLoad` lifecycle hook for a simpler setup.
  */
 export function connectOpenCloseComponent(component: OpenCloseComponent): void {
   disconnectOpenCloseComponent(component);
@@ -143,6 +144,7 @@ export function connectOpenCloseComponent(component: OpenCloseComponent): void {
  * Helper to tear down transition listeners on disconnectedCallback on OpenCloseComponent components.
  *
  * @param component
+ * @deprecated Call `onToggleOpenCloseComponent` instead in `open` watcher and `compoponentWillLoad` lifecycle hook for a simpler setup.
  */
 export function disconnectOpenCloseComponent(component: OpenCloseComponent): void {
   if (!componentToTransitionListeners.has(component)) {

From b70f025fd531bdaae0a8b50dd4d3fca6ff21af4a Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 3 Jul 2023 15:05:20 -0700
Subject: [PATCH 03/23] e2e test for cancelled transition

---
 .../src/components/tooltip/tooltip.e2e.ts     | 133 +++++++++++++-----
 .../src/utils/openCloseComponent.ts           |   4 -
 2 files changed, 95 insertions(+), 42 deletions(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
index a62583b2952..0368d538808 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
@@ -677,59 +677,115 @@ describe("calcite-tooltip", () => {
     expect(await tooltip.isVisible()).toBe(true);
   });
 
-  it("should emit open and beforeOpen events", async () => {
-    const page = await newE2EPage();
-    await page.setContent(
-      `<calcite-tooltip placement="auto" reference-element="ref">content</calcite-tooltip><div id="ref">referenceElement</div>`
-    );
-    const tooltip = await page.find("calcite-tooltip");
+  describe("openClose eventing", () => {
+    it("should emit open and beforeOpen events", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        `<calcite-tooltip placement="auto" reference-element="ref">content</calcite-tooltip><div id="ref">referenceElement</div>`
+      );
+      const tooltip = await page.find("calcite-tooltip");
 
-    const openEvent = await tooltip.spyOnEvent("calciteTooltipOpen");
-    const beforeOpenEvent = await tooltip.spyOnEvent("calciteTooltipBeforeOpen");
+      const openEvent = await tooltip.spyOnEvent("calciteTooltipOpen");
+      const beforeOpenEvent = await tooltip.spyOnEvent("calciteTooltipBeforeOpen");
 
-    expect(openEvent).toHaveReceivedEventTimes(0);
-    expect(beforeOpenEvent).toHaveReceivedEventTimes(0);
+      expect(openEvent).toHaveReceivedEventTimes(0);
+      expect(beforeOpenEvent).toHaveReceivedEventTimes(0);
 
-    const tooltipOpenEvent = page.waitForEvent("calciteTooltipOpen");
-    const tooltipBeforeOpenEvent = page.waitForEvent("calciteTooltipBeforeOpen");
+      const tooltipOpenEvent = page.waitForEvent("calciteTooltipOpen");
+      const tooltipBeforeOpenEvent = page.waitForEvent("calciteTooltipBeforeOpen");
 
-    tooltip.setProperty("open", true);
-    await page.waitForChanges();
+      tooltip.setProperty("open", true);
+      await page.waitForChanges();
 
-    await tooltipOpenEvent;
-    await tooltipBeforeOpenEvent;
+      await tooltipOpenEvent;
+      await tooltipBeforeOpenEvent;
 
-    expect(openEvent).toHaveReceivedEventTimes(1);
-    expect(beforeOpenEvent).toHaveReceivedEventTimes(1);
-  });
+      expect(openEvent).toHaveReceivedEventTimes(1);
+      expect(beforeOpenEvent).toHaveReceivedEventTimes(1);
+    });
 
-  it("should emit close and beforeClose events", async () => {
-    const page = await newE2EPage();
-    await page.setContent(
-      `<calcite-tooltip placement="auto" reference-element="ref" open>content</calcite-tooltip><div id="ref">referenceElement</div>`
-    );
+    it("should emit close and beforeClose events", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        `<calcite-tooltip placement="auto" reference-element="ref" open>content</calcite-tooltip><div id="ref">referenceElement</div>`
+      );
 
-    const tooltip = await page.find("calcite-tooltip");
+      const tooltip = await page.find("calcite-tooltip");
 
-    const closeEvent = await tooltip.spyOnEvent("calciteTooltipClose");
-    const beforeCloseEvent = await tooltip.spyOnEvent("calciteTooltipBeforeClose");
+      const closeEvent = await tooltip.spyOnEvent("calciteTooltipClose");
+      const beforeCloseEvent = await tooltip.spyOnEvent("calciteTooltipBeforeClose");
 
-    expect(closeEvent).toHaveReceivedEventTimes(0);
-    expect(beforeCloseEvent).toHaveReceivedEventTimes(0);
+      expect(closeEvent).toHaveReceivedEventTimes(0);
+      expect(beforeCloseEvent).toHaveReceivedEventTimes(0);
 
-    const tooltipCloseEvent = page.waitForEvent("calciteTooltipClose");
-    const tooltipBeforeCloseEvent = page.waitForEvent("calciteTooltipBeforeClose");
+      const tooltipCloseEvent = page.waitForEvent("calciteTooltipClose");
+      const tooltipBeforeCloseEvent = page.waitForEvent("calciteTooltipBeforeClose");
 
-    await page.evaluate(() => {
-      const tooltip = document.querySelector("calcite-tooltip");
-      tooltip.open = false;
+      await page.evaluate(() => {
+        const tooltip = document.querySelector("calcite-tooltip");
+        tooltip.open = false;
+      });
+
+      await tooltipBeforeCloseEvent;
+      await tooltipCloseEvent;
+
+      expect(closeEvent).toHaveReceivedEventTimes(1);
+      expect(beforeCloseEvent).toHaveReceivedEventTimes(1);
     });
 
-    await tooltipBeforeCloseEvent;
-    await tooltipCloseEvent;
+    it("should emit close and beforeClose events when inside a container with display: none", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <style>
+          * {
+            margin: 0;
+            padding: 0;
+          }
+          .container {
+            height: 100px;
+            width: 100px;
+          }
+          .container:hover .template {
+            display: initial;
+          }
+          .template {
+            display: none;
+          }
+        </style>
+        <div class="container">
+          <div class="template">
+            <calcite-link id="tooltip-button">Hover for Tooltip</calcite-link>
+            <calcite-tooltip label="Example label" reference-element="tooltip-button">
+              <span>Tooltip content lorem ipsum</span>
+            </calcite-tooltip>
+          </div>
+        </div>
+      `);
+
+      await page.mouse.move(0, 0);
+      await page.waitForChanges();
+
+      const beforeOpenEvent = await page.spyOnEvent("calciteTooltipBeforeOpen");
+      const openEvent = await page.spyOnEvent("calciteTooltipOpen");
 
-    expect(closeEvent).toHaveReceivedEventTimes(1);
-    expect(beforeCloseEvent).toHaveReceivedEventTimes(1);
+      expect(beforeOpenEvent).toHaveReceivedEventTimes(1);
+      expect(openEvent).toHaveReceivedEventTimes(1);
+
+      await page.mouse.move(200, 200);
+      await page.waitForChanges();
+
+      const emitted = await page.evaluate(() => {
+        return document.addEventListener("transitioncancel", (event) => event);
+      });
+      console.log("emitted", emitted);
+      expect(emitted).toHaveLength(1);
+
+      const beforeCloseEvent = await page.spyOnEvent("calciteTooltipBeforeClose");
+      const closeEvent = await page.spyOnEvent("calciteTooltipClose");
+
+      expect(beforeCloseEvent).toHaveReceivedEventTimes(1);
+      expect(closeEvent).toHaveReceivedEventTimes(1);
+    });
   });
 
   it.skip("should open hovered tooltip while pointer is moving", async () => {
@@ -852,6 +908,7 @@ describe("calcite-tooltip", () => {
   describe("within shadowRoot", () => {
     async function defineTestComponents(page: E2EPage): Promise<void> {
       await page.setContent("<calcite-tooltip></calcite-tooltip>");
+
       await page.evaluate((): void => {
         const customComponents: { name: string; html: string }[] = [
           {
diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 97e1b54a185..2868a924a6a 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -77,10 +77,6 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
   readTask((): void => {
     if (component.transitionEl) {
       const allTransitionPropsArray = getComputedStyle(component.transitionEl).transition.split(" ");
-      const visibility = getComputedStyle(component.transitionEl).visibility;
-      const display = getComputedStyle(component.transitionEl).display;
-      console.log("visibility", visibility);
-      console.log("display", display);
 
       const openTransitionPropIndex = allTransitionPropsArray.findIndex(
         (item) => item === component.openTransitionProp

From 3df762c8f40b194d2ad4a8b673e040d65a974d2a Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 3 Jul 2023 17:00:16 -0700
Subject: [PATCH 04/23] cleanup

---
 .../src/components/tooltip/tooltip.e2e.ts     | 26 ++++++------
 .../calcite-components/src/demos/tooltip.html | 42 +++----------------
 2 files changed, 18 insertions(+), 50 deletions(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
index 0368d538808..3156a371379 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
@@ -754,34 +754,32 @@ describe("calcite-tooltip", () => {
         </style>
         <div class="container">
           <div class="template">
-            <calcite-link id="tooltip-button">Hover for Tooltip</calcite-link>
-            <calcite-tooltip label="Example label" reference-element="tooltip-button">
-              <span>Tooltip content lorem ipsum</span>
-            </calcite-tooltip>
+            <calcite-link id="ref">referenceElement</calcite-link>
+            <calcite-tooltip reference-element="ref">content</calcite-tooltip>
           </div>
         </div>
       `);
 
-      await page.mouse.move(0, 0);
-      await page.waitForChanges();
-
       const beforeOpenEvent = await page.spyOnEvent("calciteTooltipBeforeOpen");
       const openEvent = await page.spyOnEvent("calciteTooltipOpen");
 
-      expect(beforeOpenEvent).toHaveReceivedEventTimes(1);
-      expect(openEvent).toHaveReceivedEventTimes(1);
+      const beforeCloseEvent = await page.spyOnEvent("calciteTooltipBeforeClose");
+      const closeEvent = await page.spyOnEvent("calciteTooltipClose");
 
-      await page.mouse.move(200, 200);
+      await page.mouse.move(10, 10);
       await page.waitForChanges();
 
+      expect(beforeOpenEvent).toHaveReceivedEventTimes(1);
+      expect(openEvent).toHaveReceivedEventTimes(1);
+
       const emitted = await page.evaluate(() => {
         return document.addEventListener("transitioncancel", (event) => event);
       });
-      console.log("emitted", emitted);
-      expect(emitted).toHaveLength(1);
 
-      const beforeCloseEvent = await page.spyOnEvent("calciteTooltipBeforeClose");
-      const closeEvent = await page.spyOnEvent("calciteTooltipClose");
+      await page.mouse.move(200, 200);
+      await page.waitForChanges();
+
+      expect(emitted).toHaveLength(1);
 
       expect(beforeCloseEvent).toHaveReceivedEventTimes(1);
       expect(closeEvent).toHaveReceivedEventTimes(1);
diff --git a/packages/calcite-components/src/demos/tooltip.html b/packages/calcite-components/src/demos/tooltip.html
index b04ab79dada..dae9be1f990 100644
--- a/packages/calcite-components/src/demos/tooltip.html
+++ b/packages/calcite-components/src/demos/tooltip.html
@@ -45,46 +45,16 @@ <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
       <div class="parent">
         <div class="child right-aligned-text">auto</div>
 
-        <div>
-          <div class="container">
-            <div class="template">
-              <calcite-link id="tooltip-button">Hover for Tooltip</calcite-link>
-              <calcite-tooltip label="Example label" reference-element="tooltip-button" id="actualTestCase">
-                <span>Tooltip content lorem ipsum</span>
-              </calcite-tooltip>
-            </div>
-          </div>
+        <div class="child">
+          <calcite-button appearance="outline" id="tooltip-auto-ref">auto</calcite-button>
         </div>
 
+        <div class="child">
+          <calcite-button appearance="outline" id="tooltip-auto-start-ref">auto-start</calcite-button>
+        </div>
         <div class="child">
           <calcite-button appearance="outline" id="tooltip-auto-end-ref">auto-end</calcite-button>
         </div>
-        <style>
-          .container {
-            border: 1px solid red;
-            height: 33vh;
-            min-height: 1.5em;
-          }
-
-          .container:hover .template {
-            display: initial;
-          }
-
-          .template {
-            display: none;
-          }
-        </style>
-        <script>
-          const tooltip = document.getElementById("actualTestCase");
-
-          tooltip.addEventListener("calciteTooltipBeforeClose", () => {
-            console.log("calciteTooltipBeforeClose");
-          });
-
-          tooltip.addEventListener("calciteTooltipClose", () => {
-            console.log("calciteTooltipClose");
-          });
-        </script>
       </div>
 
       <!-- top, top-start, top-end -->
@@ -220,7 +190,7 @@ <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
 
       <!-- containers to hold the tooltip -->
       <div>
-        <calcite-tooltip placement="auto" reference-element="tooltip-auto-ref" id="testing">
+        <calcite-tooltip placement="auto" reference-element="tooltip-auto-ref">
           <p>placement: auto</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.

From 0b4ec0be06de48eb060622f7e01f6e9f01f3d529 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 6 Jul 2023 15:40:34 -0700
Subject: [PATCH 05/23] provide example to deprecation notice and refactor test

---
 .../src/components/tooltip/tooltip.e2e.ts     | 35 +++++++++++++------
 .../src/utils/openCloseComponent.ts           | 15 ++++++--
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
index 3156a371379..d0f4059cba6 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
@@ -3,6 +3,7 @@ import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "../tooltip/resour
 import { accessible, defaults, hidden, floatingUIOwner, renders } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { GlobalTestProps } from "../../tests/utils";
+import { visualizeMouseCursor } from "../../tests/utils";
 
 interface PointerMoveOptions {
   delay: number;
@@ -744,6 +745,7 @@ describe("calcite-tooltip", () => {
           .container {
             height: 100px;
             width: 100px;
+            border: 1px solid red;
           }
           .container:hover .template {
             display: initial;
@@ -754,32 +756,45 @@ describe("calcite-tooltip", () => {
         </style>
         <div class="container">
           <div class="template">
-            <calcite-link id="ref">referenceElement</calcite-link>
+            <button id="ref">referenceElement</button>
             <calcite-tooltip reference-element="ref">content</calcite-tooltip>
           </div>
         </div>
+        <button class="hoverOutsideContainer">hoverOutsideContainer referenceElement</button>
       `);
 
+      const beforeCloseEvent = await page.spyOnEvent("calciteTooltipBeforeClose");
+      const closeEvent = await page.spyOnEvent("calciteTooltipClose");
       const beforeOpenEvent = await page.spyOnEvent("calciteTooltipBeforeOpen");
       const openEvent = await page.spyOnEvent("calciteTooltipOpen");
 
-      const beforeCloseEvent = await page.spyOnEvent("calciteTooltipBeforeClose");
-      const closeEvent = await page.spyOnEvent("calciteTooltipClose");
+      const container = await page.find(".container");
+
+      await visualizeMouseCursor(page);
+      await page.waitForChanges();
 
-      await page.mouse.move(10, 10);
+      const tooltip = await page.find(`calcite-tooltip`);
+      expect(await tooltip.isVisible()).toBe(false);
+
+      await container.hover();
       await page.waitForChanges();
 
+      const ref = await page.find("#ref");
+      await ref.hover();
+
+      await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS);
+
+      expect(await tooltip.isVisible()).toBe(true);
+
       expect(beforeOpenEvent).toHaveReceivedEventTimes(1);
       expect(openEvent).toHaveReceivedEventTimes(1);
 
-      const emitted = await page.evaluate(() => {
-        return document.addEventListener("transitioncancel", (event) => event);
-      });
+      const hoverOutsideContainer = await page.find(".hoverOutsideContainer");
+      await hoverOutsideContainer.hover();
 
-      await page.mouse.move(200, 200);
-      await page.waitForChanges();
+      await page.waitForTimeout(TOOLTIP_CLOSE_DELAY_MS);
 
-      expect(emitted).toHaveLength(1);
+      expect(await tooltip.isVisible()).not.toBe(true);
 
       expect(beforeCloseEvent).toHaveReceivedEventTimes(1);
       expect(closeEvent).toHaveReceivedEventTimes(1);
diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 2868a924a6a..78ec71f31bb 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -118,7 +118,18 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
  * For component which do not have open prop, use `onToggleOpenCloseComponent` implementation.
  *
  * @param component
- * @deprecated Call `onToggleOpenCloseComponent` instead in `open` watcher and `compoponentWillLoad` lifecycle hook for a simpler setup.
+ * @deprecated Call `onToggleOpenClose` in `componentWillLoad` and `open` property watchers instead.
+ *
+ * @example
+ * async componentWillLoad() {
+ * // When componenet initially renders, if `open` was set we need to trigger on load as watcher doesn't fire.
+ * if (this.open) {
+ *    onToggleOpenCloseComponent(this);
+ * }
+ * @Watch("open")
+ * async toggleModal(value: boolean): Promise<void> {
+ *    onToggleOpenCloseComponent(this);
+ * }
  */
 export function connectOpenCloseComponent(component: OpenCloseComponent): void {
   disconnectOpenCloseComponent(component);
@@ -140,7 +151,7 @@ export function connectOpenCloseComponent(component: OpenCloseComponent): void {
  * Helper to tear down transition listeners on disconnectedCallback on OpenCloseComponent components.
  *
  * @param component
- * @deprecated Call `onToggleOpenCloseComponent` instead in `open` watcher and `compoponentWillLoad` lifecycle hook for a simpler setup.
+ * @deprecated Call `onToggleOpenClose` in `componentWillLoad` and `open` property watchers instead.
  */
 export function disconnectOpenCloseComponent(component: OpenCloseComponent): void {
   if (!componentToTransitionListeners.has(component)) {

From 54c464781856b669a4232f199479853c8bbe0bcf Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 5 Jul 2023 22:58:14 +0000
Subject: [PATCH 06/23] chore: release next

---
 package-lock.json                              | 8 ++++----
 packages/calcite-components-react/CHANGELOG.md | 4 ++++
 packages/calcite-components-react/package.json | 4 ++--
 packages/calcite-components/CHANGELOG.md       | 6 ++++++
 packages/calcite-components/package.json       | 2 +-
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7d47ef36c8b..810ed1a0f5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40970,7 +40970,7 @@
     },
     "packages/calcite-components": {
       "name": "@esri/calcite-components",
-      "version": "1.5.0-next.13",
+      "version": "1.5.0-next.14",
       "license": "SEE LICENSE.md",
       "dependencies": {
         "@floating-ui/dom": "1.4.3",
@@ -40997,10 +40997,10 @@
     },
     "packages/calcite-components-react": {
       "name": "@esri/calcite-components-react",
-      "version": "1.5.0-next.13",
+      "version": "1.5.0-next.14",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^1.5.0-next.13"
+        "@esri/calcite-components": "^1.5.0-next.14"
       },
       "peerDependencies": {
         "react": ">=16.7",
@@ -42847,7 +42847,7 @@
     "@esri/calcite-components-react": {
       "version": "file:packages/calcite-components-react",
       "requires": {
-        "@esri/calcite-components": "^1.5.0-next.13"
+        "@esri/calcite-components": "^1.5.0-next.14"
       }
     },
     "@esri/calcite-design-tokens": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index 21e875d7506..3c75d6338f0 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.5.0-next.13...@esri/calcite-components-react@1.5.0-next.14) (2023-07-05)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [1.5.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.5.0-next.12...@esri/calcite-components-react@1.5.0-next.13) (2023-07-05)
 
 **Note:** Version bump only for package @esri/calcite-components-react
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index f2e6763d646..99b2df90ea9 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "1.5.0-next.13",
+  "version": "1.5.0-next.14",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
   "scripts": {
@@ -18,7 +18,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^1.5.0-next.13"
+    "@esri/calcite-components": "^1.5.0-next.14"
   },
   "peerDependencies": {
     "react": ">=16.7",
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index b5b8d2b3a83..e4dedeca18b 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.5.0-next.13...@esri/calcite-components@1.5.0-next.14) (2023-07-05)
+
+### Features
+
+- **flow:** Adds setFocus method ([#7252](https://github.com/Esri/calcite-design-system/issues/7252)) ([2472c58](https://github.com/Esri/calcite-design-system/commit/2472c58aa70b996b8df6e48e51d8651009742ee6)), closes [#6400](https://github.com/Esri/calcite-design-system/issues/6400) [#5369](https://github.com/Esri/calcite-design-system/issues/5369) [#7255](https://github.com/Esri/calcite-design-system/issues/7255)
+
 ## [1.5.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.5.0-next.12...@esri/calcite-components@1.5.0-next.13) (2023-07-05)
 
 ### Bug Fixes
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index 72a8b524b71..fb0c456aab5 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.5.0-next.13",
+  "version": "1.5.0-next.14",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

From 84c5332a158599ceb656ac0c26b97dc616bc4ca7 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 5 Jul 2023 16:35:28 -0700
Subject: [PATCH 07/23] fix(flow): Call setFocus() on back button click (#7285)

**Related Issue:** None

## Summary

- Depends on #7252
- When the back button is clicked, `setFocus()` is called and the newly
active panel is focused.
- Adds test
---
 .../src/components/flow/flow.e2e.ts           | 22 +++++++++++++++++++
 .../src/components/flow/flow.tsx              |  5 +++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/flow/flow.e2e.ts b/packages/calcite-components/src/components/flow/flow.e2e.ts
index 3d373bbf94c..ed9e9867937 100755
--- a/packages/calcite-components/src/components/flow/flow.e2e.ts
+++ b/packages/calcite-components/src/components/flow/flow.e2e.ts
@@ -4,6 +4,7 @@ import { html } from "../../../support/formatting";
 import { accessible, focusable, hidden, renders } from "../../tests/commonTests";
 import { CSS as ITEM_CSS } from "../flow-item/resources";
 import { CSS } from "./resources";
+import { isElementFocused } from "../../tests/utils";
 
 describe("calcite-flow", () => {
   describe("renders", () => {
@@ -55,6 +56,27 @@ describe("calcite-flow", () => {
       expect(flowItem).toBeNull();
     });
 
+    it("should call setFocus() on back button click", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent(
+        html`<calcite-flow
+          ><calcite-flow-item id="one"></calcite-flow-item><calcite-flow-item id="two"></calcite-flow-item
+        ></calcite-flow>`
+      );
+
+      await page.$eval(
+        "#two",
+        (elm: HTMLCalciteFlowItemElement, backButtonCSS: string) => {
+          elm.shadowRoot.querySelector<HTMLCalciteActionElement>(`.${backButtonCSS}`)?.click();
+        },
+        ITEM_CSS.backButton
+      );
+      await page.waitForChanges();
+
+      await isElementFocused(page, "#one");
+    });
+
     it("goes back when item back button is clicked", async () => {
       const page = await newE2EPage();
 
diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx
index 1cb668e3030..40222395191 100755
--- a/packages/calcite-components/src/components/flow/flow.tsx
+++ b/packages/calcite-components/src/components/flow/flow.tsx
@@ -107,8 +107,9 @@ export class Flow implements LoadableComponent {
   // --------------------------------------------------------------------------
 
   @Listen("calciteFlowItemBack")
-  handleItemBackClick(): void {
-    this.back();
+  async handleItemBackClick(): Promise<void> {
+    await this.back();
+    return this.setFocus();
   }
 
   getFlowDirection = (oldFlowItemCount: number, newFlowItemCount: number): FlowDirection | null => {

From ddc5c1d44622ac6549d08c45702a9625861d475e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 6 Jul 2023 00:04:38 +0000
Subject: [PATCH 08/23] chore: release next

---
 package-lock.json                              | 8 ++++----
 packages/calcite-components-react/CHANGELOG.md | 4 ++++
 packages/calcite-components-react/package.json | 4 ++--
 packages/calcite-components/CHANGELOG.md       | 6 ++++++
 packages/calcite-components/package.json       | 2 +-
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 810ed1a0f5d..c5e1ffd23d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40970,7 +40970,7 @@
     },
     "packages/calcite-components": {
       "name": "@esri/calcite-components",
-      "version": "1.5.0-next.14",
+      "version": "1.5.0-next.15",
       "license": "SEE LICENSE.md",
       "dependencies": {
         "@floating-ui/dom": "1.4.3",
@@ -40997,10 +40997,10 @@
     },
     "packages/calcite-components-react": {
       "name": "@esri/calcite-components-react",
-      "version": "1.5.0-next.14",
+      "version": "1.5.0-next.15",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^1.5.0-next.14"
+        "@esri/calcite-components": "^1.5.0-next.15"
       },
       "peerDependencies": {
         "react": ">=16.7",
@@ -42847,7 +42847,7 @@
     "@esri/calcite-components-react": {
       "version": "file:packages/calcite-components-react",
       "requires": {
-        "@esri/calcite-components": "^1.5.0-next.14"
+        "@esri/calcite-components": "^1.5.0-next.15"
       }
     },
     "@esri/calcite-design-tokens": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index 3c75d6338f0..3faf7f19fa8 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.5.0-next.14...@esri/calcite-components-react@1.5.0-next.15) (2023-07-06)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [1.5.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.5.0-next.13...@esri/calcite-components-react@1.5.0-next.14) (2023-07-05)
 
 **Note:** Version bump only for package @esri/calcite-components-react
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index 99b2df90ea9..ae6771d47fa 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "1.5.0-next.14",
+  "version": "1.5.0-next.15",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
   "scripts": {
@@ -18,7 +18,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^1.5.0-next.14"
+    "@esri/calcite-components": "^1.5.0-next.15"
   },
   "peerDependencies": {
     "react": ">=16.7",
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index e4dedeca18b..90d8f276cec 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.5.0-next.14...@esri/calcite-components@1.5.0-next.15) (2023-07-06)
+
+### Bug Fixes
+
+- **flow:** Call setFocus() on back button click ([#7285](https://github.com/Esri/calcite-design-system/issues/7285)) ([9102aa4](https://github.com/Esri/calcite-design-system/commit/9102aa4d97f1f658aaa3891d7304460c737e9a68)), closes [#7252](https://github.com/Esri/calcite-design-system/issues/7252)
+
 ## [1.5.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.5.0-next.13...@esri/calcite-components@1.5.0-next.14) (2023-07-05)
 
 ### Features
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index fb0c456aab5..cbba10d3165 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.5.0-next.14",
+  "version": "1.5.0-next.15",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

From 7ce60114c0f3b024c724e32a548b929789b1df6e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 6 Jul 2023 10:30:51 -0700
Subject: [PATCH 09/23] build(deps): Bump focus-trap from 7.4.3 to 7.5.2
 (#7279)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps [focus-trap](https://github.com/focus-trap/focus-trap) from 7.4.3
to 7.5.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/focus-trap/focus-trap/releases">focus-trap's
releases</a>.</em></p>
<blockquote>
<h2>v7.5.1</h2>
<h3>Patch Changes</h3>
<ul>
<li>d9e2546: Fix possible exception in new
<code>Tabbable.getTabIndex()</code> when initializing trap</li>
</ul>
<h2>v7.5.0</h2>
<h3>Minor Changes</h3>
<ul>
<li>5e2f913: Adds support for nodes with a positive tabindex in
single-container traps only (<a
href="https://redirect.github.com/focus-trap/focus-trap/issues/375">#375</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/focus-trap/focus-trap/blob/master/CHANGELOG.md">focus-trap's
changelog</a>.</em></p>
<blockquote>
<h2>7.5.1</h2>
<h3>Patch Changes</h3>
<ul>
<li>d9e2546: Fix possible exception in new
<code>Tabbable.getTabIndex()</code> when initializing trap</li>
</ul>
<h2>7.5.0</h2>
<h3>Minor Changes</h3>
<ul>
<li>5e2f913: Adds support for nodes with a positive tabindex in
single-container traps only (<a
href="https://redirect.github.com/focus-trap/focus-trap/issues/375">#375</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/07eec1ec96695bef99959e67f80fc891debb7249"><code>07eec1e</code></a>
Version Packages (<a
href="https://redirect.github.com/focus-trap/focus-trap/issues/995">#995</a>)</li>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/d9e25466ab5ff1aeb7d5dceadc6b829720285812"><code>d9e2546</code></a>
Fix mostRecentlyFocusedNode being initially null causing exception in
getTabI...</li>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/72cbfa96e7b66bb16fe13d76c21d14fc6fa05da9"><code>72cbfa9</code></a>
Changes for v7.5.0 that Changesets didn't do for some reason</li>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/54ff3e0de43d55fb3afdbbb827674ed5c5425624"><code>54ff3e0</code></a>
Version Packages (<a
href="https://redirect.github.com/focus-trap/focus-trap/issues/993">#993</a>)</li>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/b9225d65b8bc39e349dadd73d6dcb491039732d2"><code>b9225d6</code></a>
add DaviDevMod as a contributor for code, and bug (<a
href="https://redirect.github.com/focus-trap/focus-trap/issues/992">#992</a>)</li>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/5e2f913b4a4988c813cc51427b1a2b957c50ac15"><code>5e2f913</code></a>
Support elements with positive tabindex attributes in single-container
traps ...</li>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/bc4ac04fda6653bf294640429e55209562e2c340"><code>bc4ac04</code></a>
[DEPENDABOT]: Bump <code>@​changesets/cli</code> from 2.26.1 to 2.26.2
(<a
href="https://redirect.github.com/focus-trap/focus-trap/issues/988">#988</a>)</li>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/1b6694e2e7cbfbb9f43a3b91b1bd0f0d62330b34"><code>1b6694e</code></a>
[DEPENDABOT]: Bump typescript from 5.1.3 to 5.1.5 (<a
href="https://redirect.github.com/focus-trap/focus-trap/issues/989">#989</a>)</li>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/085db4ac004c8f50fbbfc1897c4eceb673a3c0a6"><code>085db4a</code></a>
[DEPENDABOT]: Bump cypress from 12.15.0 to 12.16.0 (<a
href="https://redirect.github.com/focus-trap/focus-trap/issues/990">#990</a>)</li>
<li><a
href="https://github.com/focus-trap/focus-trap/commit/a4b3948c7fce410841dc247227cbaa1292d2efcb"><code>a4b3948</code></a>
[DEPENDABOT]: Bump eslint-plugin-jest from 27.2.1 to 27.2.2 (<a
href="https://redirect.github.com/focus-trap/focus-trap/issues/983">#983</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/focus-trap/focus-trap/compare/v7.4.3...v7.5.1">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=focus-trap&package-manager=npm_and_yarn&previous-version=7.4.3&new-version=7.5.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Matt Driscoll <mdriscoll@esri.com>
---
 package-lock.json                        | 32 ++++++++++++------------
 packages/calcite-components/package.json |  2 +-
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c5e1ffd23d8..75947c7da84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19184,11 +19184,11 @@
       "dev": true
     },
     "node_modules/focus-trap": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.3.tgz",
-      "integrity": "sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==",
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz",
+      "integrity": "sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==",
       "dependencies": {
-        "tabbable": "^6.1.2"
+        "tabbable": "^6.2.0"
       }
     },
     "node_modules/follow-redirects": {
@@ -36498,9 +36498,9 @@
       "dev": true
     },
     "node_modules/tabbable": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.2.tgz",
-      "integrity": "sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ=="
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
     "node_modules/table": {
       "version": "6.8.1",
@@ -40979,7 +40979,7 @@
         "color": "4.2.3",
         "composed-offset-position": "0.0.4",
         "dayjs": "1.11.9",
-        "focus-trap": "7.4.3",
+        "focus-trap": "7.5.2",
         "form-request-submit-polyfill": "2.0.0",
         "lodash-es": "4.17.21",
         "sortablejs": "1.15.0"
@@ -42838,7 +42838,7 @@
         "color": "4.2.3",
         "composed-offset-position": "0.0.4",
         "dayjs": "1.11.9",
-        "focus-trap": "7.4.3",
+        "focus-trap": "7.5.2",
         "form-request-submit-polyfill": "2.0.0",
         "lodash-es": "4.17.21",
         "sortablejs": "1.15.0"
@@ -55412,11 +55412,11 @@
       }
     },
     "focus-trap": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.3.tgz",
-      "integrity": "sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==",
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz",
+      "integrity": "sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==",
       "requires": {
-        "tabbable": "^6.1.2"
+        "tabbable": "^6.2.0"
       }
     },
     "follow-redirects": {
@@ -68658,9 +68658,9 @@
       "dev": true
     },
     "tabbable": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.2.tgz",
-      "integrity": "sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ=="
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
     "table": {
       "version": "6.8.1",
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index cbba10d3165..77f153bee31 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -67,7 +67,7 @@
     "color": "4.2.3",
     "composed-offset-position": "0.0.4",
     "dayjs": "1.11.9",
-    "focus-trap": "7.4.3",
+    "focus-trap": "7.5.2",
     "form-request-submit-polyfill": "2.0.0",
     "lodash-es": "4.17.21",
     "sortablejs": "1.15.0"

From 48b6359a3c78ca39ce92a26978a2b73289f1b1c3 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 6 Jul 2023 11:05:25 -0700
Subject: [PATCH 10/23] refactor(popover): renames private method (#7286)

**Related Issue:** None

## Summary

- renames private method from `handlefocusTrapDisabled` to
`handleFocusTrapDisabled`
---
 packages/calcite-components/src/components/popover/popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index 4092929ca83..472b7eee49e 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -111,7 +111,7 @@ export class Popover
   @Prop({ reflect: true }) focusTrapDisabled = false;
 
   @Watch("focusTrapDisabled")
-  handlefocusTrapDisabled(focusTrapDisabled: boolean): void {
+  handleFocusTrapDisabled(focusTrapDisabled: boolean): void {
     if (!this.open) {
       return;
     }

From e0850b5e272c45e28c608f8dcdb4fc468413dbad Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 6 Jul 2023 12:14:55 -0700
Subject: [PATCH 11/23] feat: improve focus behavior in components (#7277)

**Related Issue:** None

## Summary

- Updates all `setFocus()` methods to use `componentFocusable()` instead
of `componentLoaded()`.
- `TimePicker` component also updates in the `focusPart` private method
to use `componentFocusable()`.
- `TextArea` uses `componentLoaded()` outside of the `setFocus()`
method. This was in the `selectText()` and `resizeObserver`. I left
those them alone since they are not doing any focusing specifically.
- Added `await page.waitForChanges();` to tests that required it.
  - action-menu
  - split-button
  - commonTests helper (removed setTimeout of 0 as well)
---
 .../src/components/action-bar/action-bar.tsx          |  4 ++--
 .../src/components/action-group/action-group.tsx      |  4 ++--
 .../src/components/action-menu/action-menu.e2e.ts     |  6 +++---
 .../src/components/action-menu/action-menu.tsx        |  4 ++--
 .../src/components/action-pad/action-pad.tsx          |  4 ++--
 .../calcite-components/src/components/alert/alert.tsx |  4 ++--
 .../src/components/block-section/block-section.tsx    |  4 ++--
 .../calcite-components/src/components/block/block.tsx |  4 ++--
 .../src/components/button/button.tsx                  |  4 ++--
 .../src/components/checkbox/checkbox.tsx              |  4 ++--
 .../src/components/chip-group/chip-group.tsx          |  8 ++++++--
 .../calcite-components/src/components/chip/chip.tsx   |  4 ++--
 .../color-picker-hex-input/color-picker-hex-input.tsx |  4 ++--
 .../src/components/color-picker/color-picker.tsx      |  4 ++--
 .../src/components/combobox/combobox.tsx              |  4 ++--
 .../src/components/date-picker/date-picker.tsx        |  4 ++--
 .../src/components/dropdown-item/dropdown-item.tsx    |  4 ++--
 .../src/components/dropdown/dropdown.tsx              |  4 ++--
 .../calcite-components/src/components/fab/fab.tsx     |  4 ++--
 .../src/components/filter/filter.tsx                  |  4 ++--
 .../src/components/flow-item/flow-item.tsx            |  4 ++--
 .../src/components/handle/handle.tsx                  |  4 ++--
 .../components/inline-editable/inline-editable.tsx    |  4 ++--
 .../input-date-picker/input-date-picker.tsx           |  4 ++--
 .../src/components/input-number/input-number.tsx      |  4 ++--
 .../src/components/input-text/input-text.tsx          |  4 ++--
 .../input-time-picker/input-time-picker.tsx           |  4 ++--
 .../calcite-components/src/components/input/input.tsx |  4 ++--
 .../calcite-components/src/components/link/link.tsx   |  4 ++--
 .../src/components/list-item/list-item.tsx            |  4 ++--
 .../calcite-components/src/components/list/list.tsx   |  4 ++--
 .../src/components/menu-item/menu-item.tsx            |  4 ++--
 .../calcite-components/src/components/menu/menu.tsx   |  4 ++--
 .../calcite-components/src/components/modal/modal.tsx |  4 ++--
 .../components/navigation-logo/navigation-logo.tsx    |  4 ++--
 .../components/navigation-user/navigation-user.tsx    |  4 ++--
 .../src/components/navigation/navigation.tsx          |  4 ++--
 .../src/components/notice/notice.tsx                  |  4 ++--
 .../src/components/pagination/pagination.tsx          |  4 ++--
 .../calcite-components/src/components/panel/panel.tsx |  4 ++--
 .../src/components/pick-list-item/pick-list-item.tsx  |  4 ++--
 .../src/components/pick-list/pick-list.tsx            |  4 ++--
 .../src/components/pick-list/shared-list-tests.ts     | 11 +++++++++++
 .../src/components/popover/popover.tsx                |  4 ++--
 .../radio-button-group/radio-button-group.tsx         |  4 ++--
 .../src/components/radio-button/radio-button.tsx      |  4 ++--
 .../src/components/rating/rating.tsx                  |  4 ++--
 .../segmented-control/segmented-control.tsx           |  4 ++--
 .../src/components/select/select.tsx                  |  4 ++--
 .../src/components/slider/slider.tsx                  |  4 ++--
 .../src/components/split-button/split-button.e2e.ts   |  2 ++
 .../src/components/split-button/split-button.tsx      |  4 ++--
 .../src/components/stepper-item/stepper-item.tsx      |  4 ++--
 .../src/components/switch/switch.tsx                  |  4 ++--
 .../src/components/text-area/text-area.tsx            |  3 ++-
 .../src/components/tile-select/tile-select.tsx        |  4 ++--
 .../src/components/time-picker/time-picker.tsx        |  6 +++---
 .../components/value-list-item/value-list-item.tsx    |  4 ++--
 .../src/components/value-list/value-list.tsx          |  4 ++--
 packages/calcite-components/src/tests/commonTests.ts  |  2 +-
 60 files changed, 134 insertions(+), 116 deletions(-)

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

From 7aed1b23baf8331890048c5adab8c7c87a46f1af Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 6 Jul 2023 16:06:29 -0700
Subject: [PATCH 12/23] move the example to onToggle

---
 .../src/utils/openCloseComponent.ts           | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 78ec71f31bb..26bdbce735e 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -70,6 +70,17 @@ function transitionEnd(event: TransitionEvent): void {
  * Helper to determine globally set transition duration on the given openTransitionProp, which is imported and set in the @Watch("open").
  * Used to emit (before)open/close events both for when the opacity transition is present and when there is none (transition-duration is set to 0).
  *
+ * @example
+ * async componentWillLoad() {
+ * // When componenet initially renders, if `open` was set we need to trigger on load as watcher doesn't fire.
+ * if (this.open) {
+ *    onToggleOpenCloseComponent(this);
+ * }
+ * @Watch("open")
+ * async toggleModal(value: boolean): Promise<void> {
+ *    onToggleOpenCloseComponent(this);
+ * }
+ *
  * @param component
  * @param nonOpenCloseComponent
  */
@@ -120,16 +131,6 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
  * @param component
  * @deprecated Call `onToggleOpenClose` in `componentWillLoad` and `open` property watchers instead.
  *
- * @example
- * async componentWillLoad() {
- * // When componenet initially renders, if `open` was set we need to trigger on load as watcher doesn't fire.
- * if (this.open) {
- *    onToggleOpenCloseComponent(this);
- * }
- * @Watch("open")
- * async toggleModal(value: boolean): Promise<void> {
- *    onToggleOpenCloseComponent(this);
- * }
  */
 export function connectOpenCloseComponent(component: OpenCloseComponent): void {
   disconnectOpenCloseComponent(component);

From 8d918308683c36a5ce75cd0a899e827683a0a09d Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 20 Jul 2023 15:48:25 -0700
Subject: [PATCH 13/23] additional info to implementation details of
 onToggleOpenCloseComponent

---
 .../calcite-components/src/utils/openCloseComponent.ts    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 32207f4dac4..7523247d9b0 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -71,8 +71,10 @@ function transitionEnd(event: TransitionEvent): void {
  * Used to emit (before)open/close events both for when the opacity transition is present and when there is none (transition-duration is set to 0).
  *
  * @example
+ * import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+ *
  * async componentWillLoad() {
- * // When componenet initially renders, if `open` was set we need to trigger on load as watcher doesn't fire.
+ * // When component initially renders, if `open` was set we need to trigger on load as watcher doesn't fire.
  * if (this.open) {
  *    onToggleOpenCloseComponent(this);
  * }
@@ -81,8 +83,8 @@ function transitionEnd(event: TransitionEvent): void {
  *    onToggleOpenCloseComponent(this);
  * }
  *
- * @param component
- * @param nonOpenCloseComponent
+ * @param component - OpenCloseComponent uses `open` prop to emit (before)open/close.
+ * @param nonOpenCloseComponent - OpenCloseComponent uses `expanded` prop to emit (before)open/close.
  */
 export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpenCloseComponent = false): void {
   readTask((): void => {

From b3f3d9d17e6f84cbde8e3077f30fc7e507f111c6 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 1 Aug 2023 16:44:12 -0700
Subject: [PATCH 14/23] modify onToggleOpenCloseComponent to account for the
 cases when open is toggled, event listeners are set up and the element is
 removed before the transition gets a chance to start by adding a timeout with
 a check of wheather the transition has started

---
 .../src/utils/openCloseComponent.ts           | 55 +++++++++++++------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 7523247d9b0..1b78ee21ffc 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -66,6 +66,15 @@ function transitionEnd(event: TransitionEvent): void {
   }
 }
 
+function emitImmediately(component: OpenCloseComponent, nonOpenCloseComponent = false): void {
+  (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+    ? component.onBeforeOpen()
+    : component.onBeforeClose();
+  (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+    ? component.onOpen()
+    : component.onClose();
+}
+
 /**
  * Helper to determine globally set transition duration on the given openTransitionProp, which is imported and set in the @Watch("open").
  * Used to emit (before)open/close events both for when the opacity transition is present and when there is none (transition-duration is set to 0).
@@ -94,37 +103,47 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
       const openTransitionPropIndex = allTransitionPropsArray.findIndex(
         (item) => item === component.openTransitionProp
       );
-      const transitionDuration = Number(allTransitionPropsArray[openTransitionPropIndex + 1].replace(/^\D+/g, ""));
-      if (transitionDuration > 0) {
+
+      const transitionDuration = allTransitionPropsArray[openTransitionPropIndex + 1];
+
+      if (transitionDuration === "0s") {
+        emitImmediately(component, nonOpenCloseComponent);
+      } else {
+        const timeoutId = setTimeout(
+          function startChecker() {
+            emitImmediately(component, nonOpenCloseComponent);
+          },
+          // need to play with this value, as long as it's > transition duration we should be good
+          parseFloat(transitionDuration) + 100
+        );
+
         component.transitionEl.addEventListener(
           "transitionstart",
           () => {
+            clearTimeout(timeoutId);
             (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
               ? component.onBeforeOpen()
               : component.onBeforeClose();
           },
           { once: true }
         );
-        component.transitionEl.addEventListener(
-          "transitionend",
-          () => {
-            (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-              ? component.onOpen()
-              : component.onClose();
-          },
-          { once: true }
-        );
-      } else {
-        (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-          ? component.onBeforeOpen()
-          : component.onBeforeClose();
-        (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-          ? component.onOpen()
-          : component.onClose();
+
+        function onEndOrCancel(): void {
+          (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+            ? component.onOpen()
+            : component.onClose();
+
+          component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
+          component.transitionEl.removeEventListener("transitioncancel", onEndOrCancel);
+        }
+
+        component.transitionEl.addEventListener("transitionend", onEndOrCancel, { once: true });
+        component.transitionEl.addEventListener("transitioncancel", onEndOrCancel, { once: true });
       }
     }
   });
 }
+
 /**
  * Helper to keep track of transition listeners on setTransitionEl and connectedCallback on OpenCloseComponent components.
  *

From a638fc4c14b962f50d2a3350364fd604641d7229 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Wed, 2 Aug 2023 20:01:56 -0700
Subject: [PATCH 15/23] fix: ensure open/close components emit events when
 removed before, during or after a transition starts

---
 .../src/components/tooltip/tooltip.e2e.ts     | 17 ++++---
 .../src/utils/openCloseComponent.ts           | 51 +++++++++----------
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
index d79c3f13a01..1f61788888a 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
@@ -784,15 +784,10 @@ describe("calcite-tooltip", () => {
       expect(closeEvent).toHaveReceivedEventTimes(1);
     }
 
-    it("should emit close and beforeClose events when inside a container with display: none", async () => {
+    it("when open, it emits close events if no longer rendered", async () => {
       const page = await newE2EPage();
       await page.setContent(html`
         <style>
-          * {
-            margin: 0;
-            padding: 0;
-          }
-
           .container {
             height: 100px;
             width: 100px;
@@ -813,7 +808,7 @@ describe("calcite-tooltip", () => {
             <calcite-tooltip reference-element="ref">content</calcite-tooltip>
           </div>
         </div>
-        <button class="hoverOutsideContainer">hoverOutsideContainer referenceElement</button>
+        <button class="hoverOutsideContainer">some other content</button>
       `);
 
       const beforeCloseEvent = await page.spyOnEvent("calciteTooltipBeforeClose");
@@ -822,8 +817,8 @@ describe("calcite-tooltip", () => {
       const openEvent = await page.spyOnEvent("calciteTooltipOpen");
 
       const container = await page.find(".container");
-
       const tooltip = await page.find(`calcite-tooltip`);
+
       expect(await tooltip.isVisible()).toBe(false);
 
       await container.hover();
@@ -833,19 +828,25 @@ describe("calcite-tooltip", () => {
       await ref.hover();
 
       await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS);
+      await page.waitForChanges();
 
       expect(await tooltip.isVisible()).toBe(true);
 
       expect(beforeOpenEvent).toHaveReceivedEventTimes(1);
       expect(openEvent).toHaveReceivedEventTimes(1);
+      expect(beforeCloseEvent).toHaveReceivedEventTimes(0);
+      expect(closeEvent).toHaveReceivedEventTimes(0);
 
       const hoverOutsideContainer = await page.find(".hoverOutsideContainer");
       await hoverOutsideContainer.hover();
 
       await page.waitForTimeout(TOOLTIP_CLOSE_DELAY_MS);
+      await page.waitForChanges();
 
       expect(await tooltip.isVisible()).not.toBe(true);
 
+      expect(beforeOpenEvent).toHaveReceivedEventTimes(1);
+      expect(openEvent).toHaveReceivedEventTimes(1);
       expect(beforeCloseEvent).toHaveReceivedEventTimes(1);
       expect(closeEvent).toHaveReceivedEventTimes(1);
     });
diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 1b78ee21ffc..7220da199ff 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -99,36 +99,38 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
   readTask((): void => {
     if (component.transitionEl) {
       const allTransitionPropsArray = getComputedStyle(component.transitionEl).transition.split(" ");
-
       const openTransitionPropIndex = allTransitionPropsArray.findIndex(
         (item) => item === component.openTransitionProp
       );
-
       const transitionDuration = allTransitionPropsArray[openTransitionPropIndex + 1];
 
       if (transitionDuration === "0s") {
         emitImmediately(component, nonOpenCloseComponent);
-      } else {
-        const timeoutId = setTimeout(
-          function startChecker() {
-            emitImmediately(component, nonOpenCloseComponent);
-          },
-          // need to play with this value, as long as it's > transition duration we should be good
-          parseFloat(transitionDuration) + 100
-        );
-
-        component.transitionEl.addEventListener(
-          "transitionstart",
-          () => {
-            clearTimeout(timeoutId);
-            (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-              ? component.onBeforeOpen()
-              : component.onBeforeClose();
-          },
-          { once: true }
-        );
-
-        function onEndOrCancel(): void {
+        return;
+      }
+
+      const fallbackTimeoutId = setTimeout((): void => {
+        component.transitionEl.removeEventListener("transitionstart", onStart);
+        component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
+        component.transitionEl.removeEventListener("transitioncancel", onEndOrCancel);
+        emitImmediately(component, nonOpenCloseComponent);
+      }, parseFloat(transitionDuration) * 1000);
+
+      component.transitionEl.addEventListener("transitionstart", onStart, { once: true });
+      component.transitionEl.addEventListener("transitionend", onEndOrCancel, { once: true });
+      component.transitionEl.addEventListener("transitioncancel", onEndOrCancel, { once: true });
+
+      function onStart(event: TransitionEvent): void {
+        if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
+          clearTimeout(fallbackTimeoutId);
+          (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+            ? component.onBeforeOpen()
+            : component.onBeforeClose();
+        }
+      }
+
+      function onEndOrCancel(event: TransitionEvent): void {
+        if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
           (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
             ? component.onOpen()
             : component.onClose();
@@ -136,9 +138,6 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
           component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
           component.transitionEl.removeEventListener("transitioncancel", onEndOrCancel);
         }
-
-        component.transitionEl.addEventListener("transitionend", onEndOrCancel, { once: true });
-        component.transitionEl.addEventListener("transitioncancel", onEndOrCancel, { once: true });
       }
     }
   });

From ec85604030c217f2194e4b5424bb42cebb7540df Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Wed, 2 Aug 2023 20:36:50 -0700
Subject: [PATCH 16/23] tidy up

---
 packages/calcite-components/src/components/tooltip/tooltip.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index 47bc67df85c..94ee94a73c0 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -169,7 +169,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   }
 
   async componentWillLoad(): Promise<void> {
-    // when modal initially renders, if active was set we need to open as watcher doesn't fire
     if (this.open) {
       onToggleOpenCloseComponent(this);
     }

From 2005e86856a469fd0f4c3b2320b77bc865385e52 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 3 Aug 2023 02:27:48 -0700
Subject: [PATCH 17/23] fix modal test

---
 .../src/components/modal/modal.e2e.ts         | 124 +++++++-----------
 .../src/utils/openCloseComponent.ts           |   7 +-
 2 files changed, 55 insertions(+), 76 deletions(-)

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index 66131631a17..773b41e17cb 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -1,8 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { focusable, renders, slots, hidden, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
-import { CSS, SLOTS, DURATIONS } from "./resources";
-import { isElementFocused, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
+import { CSS, SLOTS } from "./resources";
+import { GlobalTestProps, isElementFocused, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
 
 describe("calcite-modal properties", () => {
   describe("renders", () => {
@@ -132,29 +132,24 @@ describe("calcite-modal properties", () => {
 });
 
 describe("opening and closing behavior", () => {
-  function getTransitionTransform(
-    modalSelector: string,
-    modalContainerSelector: string,
-    type: "none" | "matrix"
-  ): boolean {
-    const modalContainer = document
-      .querySelector(modalSelector)
-      .shadowRoot.querySelector<HTMLElement>(modalContainerSelector);
-    return getComputedStyle(modalContainer).transform.startsWith(type);
-  }
-
-  const getTransitionDuration = (): { duration: string } => {
-    const modal = document.querySelector("calcite-modal");
-    const { transitionDuration } = window.getComputedStyle(modal);
-    return {
-      duration: transitionDuration,
-    };
-  };
-
-  it.skip("opens and closes", async () => {
+  it("opens and closes", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-modal style="transition: opacity ${DURATIONS.test}s"></calcite-modal>`);
+    await page.setContent(html` <calcite-modal></calcite-modal>`);
     const modal = await page.find("calcite-modal");
+
+    type ModalEventOrderWindow = GlobalTestProps<{ events: string[] }>;
+
+    await page.$eval("calcite-modal", (modal: HTMLCalciteModalElement) => {
+      const receivedEvents: string[] = [];
+      (window as ModalEventOrderWindow).events = receivedEvents;
+
+      ["calciteModalBeforeOpen", "calciteModalOpen", "calciteModalBeforeClose", "calciteModalClose"].forEach(
+        (eventType) => {
+          modal.addEventListener(eventType, (event) => receivedEvents.push(event.type));
+        }
+      );
+    });
+
     const beforeOpenSpy = await modal.spyOnEvent("calciteModalBeforeOpen");
     const openSpy = await modal.spyOnEvent("calciteModalOpen");
     const beforeCloseSpy = await modal.spyOnEvent("calciteModalBeforeClose");
@@ -164,54 +159,45 @@ describe("opening and closing behavior", () => {
     expect(openSpy).toHaveReceivedEventTimes(0);
     expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
     expect(closeSpy).toHaveReceivedEventTimes(0);
-    await page.waitForFunction(getTransitionTransform, {}, "calcite-modal", `.${CSS.modal}`, "none");
 
+    expect(await modal.isVisible()).toBe(false);
+
+    const modalBeforeOpen = page.waitForEvent("calciteModalBeforeOpen");
+    const modalOpen = page.waitForEvent("calciteModalOpen");
     await modal.setProperty("open", true);
-    let waitForEvent = page.waitForEvent("calciteModalBeforeOpen");
     await page.waitForChanges();
-    await waitForEvent;
-
-    expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
-    expect(openSpy).toHaveReceivedEventTimes(0);
-    expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
-    expect(closeSpy).toHaveReceivedEventTimes(0);
-    await page.waitForFunction(getTransitionTransform, {}, "calcite-modal", `.${CSS.modal}`, "matrix");
 
-    waitForEvent = page.waitForEvent("calciteModalOpen");
-    await waitForEvent;
+    await modalBeforeOpen;
+    await modalOpen;
 
     expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
     expect(openSpy).toHaveReceivedEventTimes(1);
     expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
     expect(closeSpy).toHaveReceivedEventTimes(0);
-    expect(await modal.getProperty("open")).toBe(true);
-    await page.waitForFunction(getTransitionTransform, {}, "calcite-modal", `.${CSS.modal}`, "matrix");
-    await page.waitForFunction(getTransitionTransform, {}, "calcite-modal", `.${CSS.modal}`, "none");
 
+    expect(await modal.isVisible()).toBe(true);
+
+    const modalBeforeClose = page.waitForEvent("calciteModalBeforeClose");
+    const modalClose = page.waitForEvent("calciteModalClose");
     await modal.setProperty("open", false);
-    waitForEvent = page.waitForEvent("calciteModalBeforeClose");
     await page.waitForChanges();
-    await waitForEvent;
 
-    const opacityTransition = await page.evaluate(getTransitionDuration);
-    expect(opacityTransition.duration).toEqual(`${DURATIONS.test}s`);
+    await modalBeforeClose;
+    await modalClose;
 
     expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
     expect(openSpy).toHaveReceivedEventTimes(1);
     expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
-    expect(closeSpy).toHaveReceivedEventTimes(0);
-    await page.waitForFunction(getTransitionTransform, {}, "calcite-modal", `.${CSS.modal}`, "matrix");
+    expect(closeSpy).toHaveReceivedEventTimes(1);
 
-    waitForEvent = page.waitForEvent("calciteModalClose");
-    await waitForEvent;
+    expect(await modal.isVisible()).toBe(false);
 
-    expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
-    expect(openSpy).toHaveReceivedEventTimes(1);
-    expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
-    expect(closeSpy).toHaveReceivedEventTimes(1);
-    await page.waitForFunction(getTransitionTransform, {}, "calcite-modal", `.${CSS.modal}`, "matrix");
-    await page.waitForFunction(getTransitionTransform, {}, "calcite-modal", `.${CSS.modal}`, "none");
-    expect(await modal.getProperty("open")).toBe(false);
+    expect(await page.evaluate(() => (window as ModalEventOrderWindow).events)).toEqual([
+      "calciteModalBeforeOpen",
+      "calciteModalOpen",
+      "calciteModalBeforeClose",
+      "calciteModalClose",
+    ]);
   });
 
   it("emits when set to open on initial render", async () => {
@@ -220,18 +206,16 @@ describe("opening and closing behavior", () => {
     const beforeOpenSpy = await page.spyOnEvent("calciteModalBeforeOpen");
     const openSpy = await page.spyOnEvent("calciteModalOpen");
 
-    await page.evaluate((transitionDuration: string): void => {
+    const waitForBeforeOpenEvent = page.waitForEvent("calciteModalBeforeOpen");
+    const waitForOpenEvent = page.waitForEvent("calciteModalOpen");
+
+    await page.evaluate((): void => {
       const modal = document.createElement("calcite-modal");
       modal.open = true;
-      modal.style.transition = `opacity ${transitionDuration}s`;
       document.body.append(modal);
-    }, `${DURATIONS.test}`);
-
-    await page.waitForTimeout(DURATIONS.test);
-
-    const waitForBeforeOpenEvent = page.waitForEvent("calciteModalBeforeOpen");
-    const waitForOpenEvent = page.waitForEvent("calciteModalOpen");
+    });
 
+    await page.waitForChanges();
     await waitForBeforeOpenEvent;
     await waitForOpenEvent;
 
@@ -246,20 +230,16 @@ describe("opening and closing behavior", () => {
     const beforeOpenSpy = await page.spyOnEvent("calciteModalBeforeOpen");
     const openSpy = await page.spyOnEvent("calciteModalOpen");
 
+    const waitForOpenEvent = page.waitForEvent("calciteModalOpen");
+    const waitForBeforeOpenEvent = page.waitForEvent("calciteModalBeforeOpen");
+
     await page.evaluate((): void => {
       const modal = document.createElement("calcite-modal");
       modal.open = true;
       document.body.append(modal);
     });
 
-    const opacityTransition = await page.evaluate(getTransitionDuration);
-    expect(opacityTransition.duration).toEqual("0s");
-
-    await page.waitForChanges;
-
-    const waitForOpenEvent = page.waitForEvent("calciteModalOpen");
-    const waitForBeforeOpenEvent = page.waitForEvent("calciteModalBeforeOpen");
-
+    await page.waitForChanges();
     await waitForBeforeOpenEvent;
     await waitForOpenEvent;
 
@@ -267,7 +247,7 @@ describe("opening and closing behavior", () => {
     expect(openSpy).toHaveReceivedEventTimes(1);
   });
 
-  it.skip("emits when duration is set to 0", async () => {
+  it("emits when duration is set to 0", async () => {
     const page = await newProgrammaticE2EPage();
     await skipAnimations(page);
 
@@ -283,9 +263,6 @@ describe("opening and closing behavior", () => {
       document.body.append(modal);
     });
 
-    const opacityTransition = await page.evaluate(getTransitionDuration);
-    expect(opacityTransition.duration).toEqual("0s");
-
     await page.waitForChanges();
     await beforeOpenSpy;
     await openSpy;
@@ -321,10 +298,11 @@ describe("calcite-modal accessibility checks", () => {
       </calcite-modal>`
     );
     await skipAnimations(page);
-    await page.waitForChanges();
     const modal = await page.find("calcite-modal");
+    const opened = page.waitForEvent("calciteModalOpen");
     modal.setProperty("open", true);
     await page.waitForChanges();
+    await opened;
 
     expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true);
     await page.keyboard.press("Tab");
diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 7220da199ff..fef61e73a00 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -116,13 +116,14 @@ export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpe
         emitImmediately(component, nonOpenCloseComponent);
       }, parseFloat(transitionDuration) * 1000);
 
-      component.transitionEl.addEventListener("transitionstart", onStart, { once: true });
-      component.transitionEl.addEventListener("transitionend", onEndOrCancel, { once: true });
-      component.transitionEl.addEventListener("transitioncancel", onEndOrCancel, { once: true });
+      component.transitionEl.addEventListener("transitionstart", onStart);
+      component.transitionEl.addEventListener("transitionend", onEndOrCancel);
+      component.transitionEl.addEventListener("transitioncancel", onEndOrCancel);
 
       function onStart(event: TransitionEvent): void {
         if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
           clearTimeout(fallbackTimeoutId);
+          component.transitionEl.removeEventListener("transitionstart", onStart);
           (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
             ? component.onBeforeOpen()
             : component.onBeforeClose();

From 5df1aecc08de04b9cc19b5e28bbd2752110de198 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 3 Aug 2023 09:11:27 -0700
Subject: [PATCH 18/23] add extra delay for focus trap to kick in

---
 packages/calcite-components/src/components/modal/modal.e2e.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index 773b41e17cb..d5be5fcbae9 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -134,7 +134,7 @@ describe("calcite-modal properties", () => {
 describe("opening and closing behavior", () => {
   it("opens and closes", async () => {
     const page = await newE2EPage();
-    await page.setContent(html` <calcite-modal></calcite-modal>`);
+    await page.setContent(html`<calcite-modal></calcite-modal>`);
     const modal = await page.find("calcite-modal");
 
     type ModalEventOrderWindow = GlobalTestProps<{ events: string[] }>;
@@ -303,6 +303,7 @@ describe("calcite-modal accessibility checks", () => {
     modal.setProperty("open", true);
     await page.waitForChanges();
     await opened;
+    await page.waitForChanges();
 
     expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true);
     await page.keyboard.press("Tab");

From 6a3d52ba51228a03f50a760db9b9732fe727ab02 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 3 Aug 2023 09:45:06 -0700
Subject: [PATCH 19/23] isolate modal E2E test for quicker CI troubleshooting

---
 packages/calcite-components/stencil.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/calcite-components/stencil.config.ts b/packages/calcite-components/stencil.config.ts
index 347c6e94b23..93cd83e2672 100644
--- a/packages/calcite-components/stencil.config.ts
+++ b/packages/calcite-components/stencil.config.ts
@@ -136,6 +136,7 @@ export const create: () => Config = () => ({
       "^lodash-es$": "lodash",
     },
     setupFilesAfterEnv: ["<rootDir>/src/tests/setupTests.ts"],
+    testRegex: "(/__tests__/.*|(\\.|/)modal.e2e)\\.[jt]sx?$",
   },
   hydratedFlag: {
     selector: "attribute",

From ab6597b2e23d25c32faa3e498665cb9e3bf67961 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 3 Aug 2023 09:51:00 -0700
Subject: [PATCH 20/23] wait longer before asserting on focus target

---
 packages/calcite-components/src/components/modal/modal.e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index d5be5fcbae9..38a18ad9bee 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -303,7 +303,7 @@ describe("calcite-modal accessibility checks", () => {
     modal.setProperty("open", true);
     await page.waitForChanges();
     await opened;
-    await page.waitForChanges();
+    await page.waitForTimeout(5000);
 
     expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true);
     await page.keyboard.press("Tab");

From 3d71180c7546a25470f68f37e03680414ccc2dc7 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 3 Aug 2023 10:00:32 -0700
Subject: [PATCH 21/23] restore animation delay

---
 packages/calcite-components/src/components/modal/modal.e2e.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index 38a18ad9bee..aebc070405a 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -297,7 +297,6 @@ describe("calcite-modal accessibility checks", () => {
         </div>
       </calcite-modal>`
     );
-    await skipAnimations(page);
     const modal = await page.find("calcite-modal");
     const opened = page.waitForEvent("calciteModalOpen");
     modal.setProperty("open", true);

From cdb7ed78c93f72d8f7561a93b594924c1a91c33d Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 3 Aug 2023 10:22:51 -0700
Subject: [PATCH 22/23] remove delay after modal opens

---
 packages/calcite-components/src/components/modal/modal.e2e.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index aebc070405a..30a4a205732 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -302,7 +302,6 @@ describe("calcite-modal accessibility checks", () => {
     modal.setProperty("open", true);
     await page.waitForChanges();
     await opened;
-    await page.waitForTimeout(5000);
 
     expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true);
     await page.keyboard.press("Tab");

From 4d3d7d77d44dd6ded1d16df03dca0267f90fddf5 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 3 Aug 2023 10:32:52 -0700
Subject: [PATCH 23/23] restore test suites

---
 packages/calcite-components/stencil.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/calcite-components/stencil.config.ts b/packages/calcite-components/stencil.config.ts
index 93cd83e2672..347c6e94b23 100644
--- a/packages/calcite-components/stencil.config.ts
+++ b/packages/calcite-components/stencil.config.ts
@@ -136,7 +136,6 @@ export const create: () => Config = () => ({
       "^lodash-es$": "lodash",
     },
     setupFilesAfterEnv: ["<rootDir>/src/tests/setupTests.ts"],
-    testRegex: "(/__tests__/.*|(\\.|/)modal.e2e)\\.[jt]sx?$",
   },
   hydratedFlag: {
     selector: "attribute",