From e656c4603fa8be115ba30b6f70d65064476b164a Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 3 Jul 2024 17:52:52 -0700
Subject: [PATCH 01/21] feat(action-menu): implement OpenCloseComponent
 interface

---
 .../calcite-components/src/components.d.ts    | 17 +++++++-
 .../components/action-menu/action-menu.e2e.ts |  5 +++
 .../components/action-menu/action-menu.tsx    | 42 ++++++++++++++++---
 3 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 0546404fefd..0e3a1523bd0 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -6162,6 +6162,9 @@ declare global {
         new (): HTMLCalciteActionGroupElement;
     };
     interface HTMLCalciteActionMenuElementEventMap {
+        "calciteActionMenuBeforeClose": void;
+        "calciteActionMenuClose": void;
+        "calciteActionMenuBeforeOpen": void;
         "calciteActionMenuOpen": void;
     }
     interface HTMLCalciteActionMenuElement extends Components.CalciteActionMenu, HTMLStencilElement {
@@ -8186,7 +8189,19 @@ declare namespace LocalJSX {
          */
         "label": string;
         /**
-          * Fires when the `open` property is toggled.
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteActionMenuBeforeClose"?: (event: CalciteActionMenuCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteActionMenuBeforeOpen"?: (event: CalciteActionMenuCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteActionMenuClose"?: (event: CalciteActionMenuCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
          */
         "onCalciteActionMenuOpen"?: (event: CalciteActionMenuCustomEvent<void>) => void;
         /**
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 a1ffdeb388d..0d43a73f8db 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
@@ -6,6 +6,7 @@ import {
   delegatesToFloatingUiOwningComponent,
   focusable,
   hidden,
+  openClose,
   reflects,
   renders,
   slots,
@@ -93,6 +94,10 @@ describe("calcite-action-menu", () => {
     ]);
   });
 
+  describe("openClose", () => {
+    openClose(`<calcite-action-menu id="actionMenuOpenClose"></calcite-action-menu>`);
+  });
+
   describe("delegates to floating-ui-owner component", () => {
     delegatesToFloatingUiOwningComponent(
       html`<calcite-action-menu>
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 c49e17b093d..b65451b6c43 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -21,6 +21,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Appearance, Scale } from "../interfaces";
 import { activeAttr, CSS, ICONS, SLOTS } from "./resources";
 
@@ -36,7 +37,7 @@ const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
   styleUrl: "action-menu.scss",
   shadow: true,
 })
-export class ActionMenu implements LoadableComponent {
+export class ActionMenu implements LoadableComponent, OpenCloseComponent {
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -49,6 +50,10 @@ export class ActionMenu implements LoadableComponent {
 
   componentWillLoad(): void {
     setUpLoadableComponent(this);
+
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
 
   componentDidLoad(): void {
@@ -96,6 +101,7 @@ export class ActionMenu implements LoadableComponent {
 
   @Watch("open")
   openHandler(open: boolean): void {
+    onToggleOpenCloseComponent(this);
     this.activeMenuItemIndex = this.open ? 0 : -1;
     if (this.menuButtonEl) {
       this.menuButtonEl.active = open;
@@ -130,10 +136,16 @@ export class ActionMenu implements LoadableComponent {
   //
   // --------------------------------------------------------------------------
 
-  /**
-   * Fires when the `open` property is toggled.
-   *
-   */
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  @Event({ cancelable: false }) calciteActionMenuBeforeClose: EventEmitter<void>;
+
+  /** Fires when the component is closed and animation is complete. */
+  @Event({ cancelable: false }) calciteActionMenuClose: EventEmitter<void>;
+
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  @Event({ cancelable: false }) calciteActionMenuBeforeOpen: EventEmitter<void>;
+
+  /** Fires when the component is open and animation is complete. */
   @Event({ cancelable: false }) calciteActionMenuOpen: EventEmitter<void>;
 
   // --------------------------------------------------------------------------
@@ -158,8 +170,12 @@ export class ActionMenu implements LoadableComponent {
 
   menuButtonId = `${this.guid}-menu-button`;
 
+  openTransitionProp = "opacity";
+
   tooltipEl: HTMLCalciteTooltipElement;
 
+  transitionEl: HTMLDivElement;
+
   @State() activeMenuItemIndex = -1;
 
   @Watch("activeMenuItemIndex")
@@ -507,4 +523,20 @@ export class ActionMenu implements LoadableComponent {
   private handlePopoverClose = (): void => {
     this.open = false;
   };
+
+  onBeforeOpen(): void {
+    this.calciteActionMenuBeforeOpen.emit();
+  }
+
+  onOpen(): void {
+    this.calciteActionMenuOpen.emit();
+  }
+
+  onBeforeClose(): void {
+    this.calciteActionMenuBeforeClose.emit();
+  }
+
+  onClose(): void {
+    this.calciteActionMenuClose.emit();
+  }
 }

From d2a793df98cfe6832c6ce83807ee6732873ee443 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 3 Jul 2024 18:14:47 -0700
Subject: [PATCH 02/21] add interface to block-section

---
 .../calcite-components/src/components.d.ts    | 20 ++++++++
 .../components/action-menu/action-menu.e2e.ts |  2 +-
 .../components/action-menu/action-menu.tsx    |  1 -
 .../block-section/block-section.e2e.ts        |  6 ++-
 .../block-section/block-section.tsx           | 46 ++++++++++++++++++-
 5 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 0e3a1523bd0..878b861158f 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -6249,6 +6249,10 @@ declare global {
     };
     interface HTMLCalciteBlockSectionElementEventMap {
         "calciteBlockSectionToggle": void;
+        "calciteBlockSectionBeforeClose": void;
+        "calciteBlockSectionClose": void;
+        "calciteBlockSectionBeforeOpen": void;
+        "calciteBlockSectionOpen": void;
     }
     interface HTMLCalciteBlockSectionElement extends Components.CalciteBlockSection, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteBlockSectionElementEventMap>(type: K, listener: (this: HTMLCalciteBlockSectionElement, ev: CalciteBlockSectionCustomEvent<HTMLCalciteBlockSectionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -8475,6 +8479,22 @@ declare namespace LocalJSX {
           * Made into a prop for testing purposes only
          */
         "messages"?: BlockSectionMessages;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteBlockSectionBeforeClose"?: (event: CalciteBlockSectionCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteBlockSectionBeforeOpen"?: (event: CalciteBlockSectionCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteBlockSectionClose"?: (event: CalciteBlockSectionCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteBlockSectionOpen"?: (event: CalciteBlockSectionCustomEvent<void>) => void;
         /**
           * Fires when the header has been clicked.
          */
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 0d43a73f8db..e671cd21b3f 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
@@ -95,7 +95,7 @@ describe("calcite-action-menu", () => {
   });
 
   describe("openClose", () => {
-    openClose(`<calcite-action-menu id="actionMenuOpenClose"></calcite-action-menu>`);
+    openClose("calcite-action-menu");
   });
 
   describe("delegates to floating-ui-owner component", () => {
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 b65451b6c43..2905252eaf3 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -106,7 +106,6 @@ export class ActionMenu implements LoadableComponent, OpenCloseComponent {
     if (this.menuButtonEl) {
       this.menuButtonEl.active = open;
     }
-    this.calciteActionMenuOpen.emit();
 
     this.setTooltipReferenceElement();
   }
diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
index 0913ae112b9..221b1a3347f 100644
--- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts
+++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -1,5 +1,5 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, openClose, reflects, renders, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
@@ -38,6 +38,10 @@ describe("calcite-block-section", () => {
     t9n("calcite-block-section");
   });
 
+  describe("openClose", () => {
+    openClose("calcite-block-section");
+  });
+
   describe("setFocus", () => {
     describe("focuses toggle switch", () => {
       focusable(
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 fe1a3842b85..3a658a29b9e 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -29,6 +29,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { IconName } from "../icon/interfaces";
+import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { BlockSectionMessages } from "./assets/block-section/t9n";
 import { BlockSectionToggleDisplay } from "./interfaces";
 import { CSS, ICONS, IDS } from "./resources";
@@ -42,7 +43,9 @@ import { CSS, ICONS, IDS } from "./resources";
   shadow: true,
   assetsDirs: ["assets"],
 })
-export class BlockSection implements LocalizedComponent, T9nComponent, LoadableComponent {
+export class BlockSection
+  implements LocalizedComponent, T9nComponent, LoadableComponent, OpenCloseComponent
+{
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -63,6 +66,11 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
    */
   @Prop({ reflect: true, mutable: true }) open = false;
 
+  @Watch("open")
+  openHandler(): void {
+    onToggleOpenCloseComponent(this);
+  }
+
   /**
    * Displays a status-related indicator icon.
    *
@@ -119,6 +127,22 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
     focusFirstTabbable(this.el);
   }
 
+  onBeforeOpen(): void {
+    this.calciteBlockSectionBeforeOpen.emit();
+  }
+
+  onOpen(): void {
+    this.calciteBlockSectionOpen.emit();
+  }
+
+  onBeforeClose(): void {
+    this.calciteBlockSectionBeforeClose.emit();
+  }
+
+  onClose(): void {
+    this.calciteBlockSectionClose.emit();
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -136,6 +160,10 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
 
   @State() defaultMessages: BlockSectionMessages;
 
+  openTransitionProp = "opacity";
+
+  transitionEl: HTMLDivElement;
+
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -147,6 +175,18 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
    */
   @Event({ cancelable: false }) calciteBlockSectionToggle: EventEmitter<void>;
 
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  @Event({ cancelable: false }) calciteBlockSectionBeforeClose: EventEmitter<void>;
+
+  /** Fires when the component is closed and animation is complete. */
+  @Event({ cancelable: false }) calciteBlockSectionClose: EventEmitter<void>;
+
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  @Event({ cancelable: false }) calciteBlockSectionBeforeOpen: EventEmitter<void>;
+
+  /** Fires when the component is open and animation is complete. */
+  @Event({ cancelable: false }) calciteBlockSectionOpen: EventEmitter<void>;
+
   // --------------------------------------------------------------------------
   //
   //  Private Methods
@@ -180,6 +220,10 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
   async componentWillLoad(): Promise<void> {
     await setUpMessages(this);
     setUpLoadableComponent(this);
+
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
 
   componentDidLoad(): void {

From ae4be25c73af33390941f6779718356d7dd76c80 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 3 Jul 2024 23:10:31 -0700
Subject: [PATCH 03/21] cleanup tests

---
 .../components/action-menu/action-menu.e2e.ts | 33 ++++---------------
 .../block-section/block-section.e2e.ts        | 22 ++++++++-----
 .../block-section/block-section.tsx           |  7 ++--
 3 files changed, 22 insertions(+), 40 deletions(-)

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 e671cd21b3f..1876c6628c9 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
@@ -94,37 +94,16 @@ describe("calcite-action-menu", () => {
     ]);
   });
 
+  const simpleActionMenuHTML = html`<calcite-action-menu>
+    <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+  </calcite-action-menu>`;
+
   describe("openClose", () => {
-    openClose("calcite-action-menu");
+    openClose(simpleActionMenuHTML);
   });
 
   describe("delegates to floating-ui-owner component", () => {
-    delegatesToFloatingUiOwningComponent(
-      html`<calcite-action-menu>
-        <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
-      </calcite-action-menu>`,
-      "calcite-popover",
-    );
-  });
-
-  it("should emit 'calciteActionMenuOpen' event", async () => {
-    const page = await newE2EPage({
-      html: `<calcite-action-menu>
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    </calcite-action-menu>`,
-    });
-
-    await page.waitForChanges();
-
-    const clickSpy = await page.spyOnEvent("calciteActionMenuOpen");
-
-    const actionMenu = await page.find("calcite-action-menu");
-
-    actionMenu.setProperty("open", true);
-
-    await page.waitForChanges();
-
-    expect(clickSpy).toHaveReceivedEventTimes(1);
+    delegatesToFloatingUiOwningComponent(simpleActionMenuHTML, "calcite-popover");
   });
 
   describe("should focus on menu button", () => {
diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
index 221b1a3347f..140f06f5c04 100644
--- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts
+++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -38,20 +38,24 @@ describe("calcite-block-section", () => {
     t9n("calcite-block-section");
   });
 
+  const simpleBlockSectionHTML = html` <calcite-block-section
+    id="myBlockSection"
+    text="text"
+    toggle-display="switch"
+    open
+  >
+    <div>some content</div>
+  </calcite-block-section>`;
+
   describe("openClose", () => {
-    openClose("calcite-block-section");
+    openClose(simpleBlockSectionHTML);
   });
 
   describe("setFocus", () => {
     describe("focuses toggle switch", () => {
-      focusable(
-        html`<calcite-block-section text="text" toggle-display="switch" open>
-          <div>some content</div>
-        </calcite-block-section>`,
-        {
-          shadowFocusTargetSelector: `.${CSS.toggle}`,
-        },
-      );
+      focusable(simpleBlockSectionHTML, {
+        shadowFocusTargetSelector: `.${CSS.toggle}`,
+      });
     });
 
     describe("focuses toggle button", () => {
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 3a658a29b9e..77c802cdec2 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -215,15 +215,14 @@ export class BlockSection
   connectedCallback(): void {
     connectLocalized(this);
     connectMessages(this);
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
 
   async componentWillLoad(): Promise<void> {
     await setUpMessages(this);
     setUpLoadableComponent(this);
-
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
   }
 
   componentDidLoad(): void {

From d13441e58bd05290c47d62d5fe193878e98325ef Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 4 Jul 2024 13:53:22 -0700
Subject: [PATCH 04/21] list item

---
 .../calcite-components/src/components.d.ts    | 19 +++++++-
 .../src/components/list-item/list-item.e2e.ts |  6 ++-
 .../src/components/list-item/list-item.tsx    | 44 ++++++++++++++++---
 .../calcite-components/src/demos/action.html  | 25 ++++++++++-
 .../calcite-components/src/demos/block.html   | 21 ++++++++-
 5 files changed, 105 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 878b861158f..816173a325d 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -6894,7 +6894,6 @@ declare global {
     };
     interface HTMLCalciteListItemElementEventMap {
         "calciteListItemSelect": void;
-        "calciteListItemClose": void;
         "calciteListItemDragHandleChange": void;
         "calciteListItemToggle": void;
         "calciteInternalListItemSelect": void;
@@ -6905,6 +6904,10 @@ declare global {
         "calciteInternalFocusPreviousItem": void;
         "calciteInternalListItemChange": void;
         "calciteInternalListItemToggle": void;
+        "calciteListItemBeforeClose": void;
+        "calciteListItemClose": void;
+        "calciteListItemBeforeOpen": void;
+        "calciteListItemOpen": void;
     }
     interface HTMLCalciteListItemElement extends Components.CalciteListItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteListItemElementEventMap>(type: K, listener: (this: HTMLCalciteListItemElement, ev: CalciteListItemCustomEvent<HTMLCalciteListItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -11106,13 +11109,25 @@ declare namespace LocalJSX {
   }>) => void;
         "onCalciteInternalListItemToggle"?: (event: CalciteListItemCustomEvent<void>) => void;
         /**
-          * Fires when the close button is clicked.
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteListItemBeforeClose"?: (event: CalciteListItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteListItemBeforeOpen"?: (event: CalciteListItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
          */
         "onCalciteListItemClose"?: (event: CalciteListItemCustomEvent<void>) => void;
         /**
           * Fires when the drag handle is selected.
          */
         "onCalciteListItemDragHandleChange"?: (event: CalciteListItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteListItemOpen"?: (event: CalciteListItemCustomEvent<void>) => void;
         /**
           * Fires when the component is selected.
          */
diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
index f053f7b303f..3dcbfc52b7e 100755
--- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts
+++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests";
+import { defaults, disabled, focusable, hidden, openClose, renders, slots } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
@@ -67,6 +67,10 @@ describe("calcite-list-item", () => {
     disabled(`<calcite-list-item label="test" active></calcite-list-item>`);
   });
 
+  describe("openClose", () => {
+    openClose("calcite-list-item");
+  });
+
   it("always displays hover class", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-list-item></calcite-list-item>`);
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 6d9e924f41e..fa8190ff2e9 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -42,6 +42,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { SortableComponentItem } from "../../utils/sortableComponent";
+import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { ListItemMessages } from "./assets/list-item/t9n";
 import {
   getDepth,
@@ -74,6 +75,7 @@ export class ListItem
     InteractiveComponent,
     LoadableComponent,
     LocalizedComponent,
+    OpenCloseComponent,
     T9nComponent,
     SortableComponentItem
 {
@@ -171,6 +173,7 @@ export class ListItem
 
   @Watch("open")
   handleOpenChange(): void {
+    onToggleOpenCloseComponent(this);
     this.emitCalciteInternalListItemToggle();
   }
 
@@ -250,11 +253,6 @@ export class ListItem
    */
   @Event({ cancelable: false }) calciteListItemSelect: EventEmitter<void>;
 
-  /**
-   * Fires when the close button is clicked.
-   */
-  @Event({ cancelable: false }) calciteListItemClose: EventEmitter<void>;
-
   /**
    * Fires when the drag handle is selected.
    */
@@ -311,6 +309,18 @@ export class ListItem
     this.handleOpenableChange(this.defaultSlotEl);
   }
 
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  @Event({ cancelable: false }) calciteListItemBeforeClose: EventEmitter<void>;
+
+  /** Fires when the component is closed and animation is complete. */
+  @Event({ cancelable: false }) calciteListItemClose: EventEmitter<void>;
+
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  @Event({ cancelable: false }) calciteListItemBeforeOpen: EventEmitter<void>;
+
+  /** Fires when the component is open and animation is complete. */
+  @Event({ cancelable: false }) calciteListItemOpen: EventEmitter<void>;
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -358,6 +368,10 @@ export class ListItem
 
   defaultSlotEl: HTMLSlotElement;
 
+  openTransitionProp = "opacity";
+
+  transitionEl: HTMLDivElement;
+
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -377,6 +391,10 @@ export class ListItem
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
     await setUpMessages(this);
+
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
 
   componentDidLoad(): void {
@@ -946,4 +964,20 @@ export class ListItem
     this.setFocusCell(focusEl, focusedEl, saveFocusIndex);
     focusedEl?.focus();
   };
+
+  onBeforeOpen(): void {
+    this.calciteListItemBeforeOpen.emit();
+  }
+
+  onOpen(): void {
+    this.calciteListItemOpen.emit();
+  }
+
+  onBeforeClose(): void {
+    this.calciteListItemBeforeClose.emit();
+  }
+
+  onClose(): void {
+    this.calciteListItemClose.emit();
+  }
 }
diff --git a/packages/calcite-components/src/demos/action.html b/packages/calcite-components/src/demos/action.html
index a3a3d6d26f3..9cf76837196 100644
--- a/packages/calcite-components/src/demos/action.html
+++ b/packages/calcite-components/src/demos/action.html
@@ -459,12 +459,35 @@
     -->
       <!-- action bar  -->
       <div class="parent-action-bar">
-        <div class="child right-aligned-text">action bar</div>
+        <div class="child right-aligned-text">action bar with action-menu</div>
         <div class="child-action-bar">
           <div>basic</div>
           <calcite-action-bar>
             <calcite-action text="Add" icon="plus"> </calcite-action>
+            <calcite-action-menu id="action-menu">
+              <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
+              <calcite-action text="Add" icon="plus" text-enabled></calcite-action>
+              <calcite-action text="Add" icon="plus" text-enabled></calcite-action>
+              <calcite-action text="Add" icon="plus" text-enabled></calcite-action>
+            </calcite-action-menu>
           </calcite-action-bar>
+          <script>
+            const actionMenu = document.querySelector("#action-menu");
+            window.onload = () => {
+              actionMenu.addEventListener("calciteActionMenuBeforeOpen", () => {
+                console.log("calciteActionMenuBeforeOpen event was emitted");
+              });
+              actionMenu.addEventListener("calciteActionMenuOpen", () => {
+                console.log("calciteActionMenuOpen event was emitted");
+              });
+              actionMenu.addEventListener("calciteActionMenuBeforeClose", () => {
+                console.log("calciteActionMenuBeforeClose event was emitted");
+              });
+              actionMenu.addEventListener("calciteActionMenuClose", () => {
+                console.log("calciteActionMenuClose event was emitted");
+              });
+            };
+          </script>
         </div>
 
         <div class="child-action-bar">
diff --git a/packages/calcite-components/src/demos/block.html b/packages/calcite-components/src/demos/block.html
index c8c261662fa..30bf3fbb6f4 100644
--- a/packages/calcite-components/src/demos/block.html
+++ b/packages/calcite-components/src/demos/block.html
@@ -53,7 +53,7 @@
 
         <div class="child">
           <calcite-block heading="Heading" description="summary" collapsible open>
-            <calcite-block-section text="input block-section" open>
+            <calcite-block-section text="input block-section" open id="block-section">
               <calcite-input
                 icon="form-field"
                 placeholder="This is an input field... enter something here"
@@ -62,6 +62,25 @@
 
             <calcite-block-section text="a block-section"> </calcite-block-section>
           </calcite-block>
+          <script>
+            const blockSection = document.getElementById("block-section");
+            console.log(blockSection);
+
+            window.onload = () => {
+              blockSection.addEventListener("calciteBlockSectionBeforeOpen", () => {
+                console.log("calciteBlockSectionBeforeOpen event was emitted");
+              });
+              blockSection.addEventListener("calciteBlockSectionOpen", () => {
+                console.log("calciteBlockSectionOpen event was emitted");
+              });
+              blockSection.addEventListener("calciteBlockSectionBeforeClose", () => {
+                console.log("calciteBlockSectionBeforeClose event was emitted");
+              });
+              blockSection.addEventListener("calciteBlockSectionClose", () => {
+                console.log("calciteBlockSectionClose event was emitted");
+              });
+            };
+          </script>
         </div>
       </div>
 

From a965e35095ca71454dbe0f0da6a2028aa791c39f Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 4 Jul 2024 14:02:44 -0700
Subject: [PATCH 05/21] menu-item

---
 .../calcite-components/src/components.d.ts    | 20 +++++++++
 .../src/components/menu-item/menu-item.e2e.ts |  6 ++-
 .../src/components/menu-item/menu-item.tsx    | 45 ++++++++++++++++++-
 3 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 816173a325d..380e3e7333f 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -6955,6 +6955,10 @@ declare global {
     interface HTMLCalciteMenuItemElementEventMap {
         "calciteInternalMenuItemKeyEvent": MenuItemCustomEvent;
         "calciteMenuItemSelect": void;
+        "calciteMenuItemBeforeClose": void;
+        "calciteMenuItemClose": void;
+        "calciteMenuItemBeforeOpen": void;
+        "calciteMenuItemOpen": void;
     }
     interface HTMLCalciteMenuItemElement extends Components.CalciteMenuItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteMenuItemElementEventMap>(type: K, listener: (this: HTMLCalciteMenuItemElement, ev: CalciteMenuItemCustomEvent<HTMLCalciteMenuItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -11270,6 +11274,22 @@ declare namespace LocalJSX {
          */
         "messages"?: MenuItemMessages;
         "onCalciteInternalMenuItemKeyEvent"?: (event: CalciteMenuItemCustomEvent<MenuItemCustomEvent>) => void;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteMenuItemBeforeClose"?: (event: CalciteMenuItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteMenuItemBeforeOpen"?: (event: CalciteMenuItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteMenuItemClose"?: (event: CalciteMenuItemCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteMenuItemOpen"?: (event: CalciteMenuItemCustomEvent<void>) => void;
         /**
           * Emits when the component is selected.
          */
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts b/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
index 057d12bf700..c5d125a5d3c 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
+++ b/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
-import { accessible, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
+import { accessible, focusable, hidden, openClose, reflects, renders, t9n } from "../../tests/commonTests";
 import { getFocusedElementProp } from "../../tests/utils";
 
 describe("calcite-menu-item", () => {
@@ -37,6 +37,10 @@ describe("calcite-menu-item", () => {
     t9n("calcite-menu-item");
   });
 
+  describe("openClose", () => {
+    openClose("calcite-menu-item");
+  });
+
   it("should emit calciteMenuItemSelect event on user click", async () => {
     const page = await newE2EPage();
     await page.setContent(html` <calcite-menu-item id="Nature" text="Nature" href="#nature"> </calcite-menu-item> `);
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 f54fdb40829..73a7b492c29 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -22,6 +22,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { CSS_UTILITY } from "../../utils/resources";
+import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import {
   connectMessages,
   disconnectMessages,
@@ -46,7 +47,9 @@ type Layout = "horizontal" | "vertical";
   shadow: true,
   assetsDirs: ["assets"],
 })
-export class CalciteMenuItem implements LoadableComponent, T9nComponent, LocalizedComponent {
+export class CalciteMenuItem
+  implements LoadableComponent, T9nComponent, LocalizedComponent, OpenCloseComponent
+{
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -106,6 +109,11 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
   /** When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.*/
   @Prop({ mutable: true, reflect: true }) open = false;
 
+  @Watch("open")
+  openHandler(): void {
+    onToggleOpenCloseComponent(this);
+  }
+
   /**
    * Defines the relationship between the `href` value and the current document.
    *
@@ -155,6 +163,10 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
 
   isFocused: boolean;
 
+  openTransitionProp = "opacity";
+
+  transitionEl: HTMLDivElement;
+
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -168,6 +180,22 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
     this.anchorEl.focus();
   }
 
+  onBeforeOpen(): void {
+    this.calciteMenuItemBeforeOpen.emit();
+  }
+
+  onOpen(): void {
+    this.calciteMenuItemOpen.emit();
+  }
+
+  onBeforeClose(): void {
+    this.calciteMenuItemBeforeClose.emit();
+  }
+
+  onClose(): void {
+    this.calciteMenuItemClose.emit();
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -179,6 +207,18 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
   /** Emits when the component is selected.*/
   @Event() calciteMenuItemSelect: EventEmitter<void>;
 
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  @Event({ cancelable: false }) calciteMenuItemBeforeClose: EventEmitter<void>;
+
+  /** Fires when the component is closed and animation is complete. */
+  @Event({ cancelable: false }) calciteMenuItemClose: EventEmitter<void>;
+
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  @Event({ cancelable: false }) calciteMenuItemBeforeOpen: EventEmitter<void>;
+
+  /** Fires when the component is open and animation is complete. */
+  @Event({ cancelable: false }) calciteMenuItemOpen: EventEmitter<void>;
+
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -215,6 +255,9 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
   connectedCallback(): void {
     connectLocalized(this);
     connectMessages(this);
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
 
   async componentWillLoad(): Promise<void> {

From 6979c3f29dd301b2c061b0723015d10432bebe99 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 5 Jul 2024 12:19:01 -0700
Subject: [PATCH 06/21] assign transitionEl prop

---
 .../src/components/block-section/block-section.tsx   | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

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 77c802cdec2..ddafecb5890 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -206,6 +206,10 @@ export class BlockSection
     this.calciteBlockSectionToggle.emit();
   };
 
+  private setTransitionEl = (el: HTMLDivElement): void => {
+    this.transitionEl = el;
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -342,7 +346,13 @@ export class BlockSection
     return (
       <Host>
         {headerNode}
-        <section aria-labelledby={IDS.toggle} class={CSS.content} hidden={!open} id={IDS.content}>
+        <section
+          aria-labelledby={IDS.toggle}
+          class={CSS.content}
+          hidden={!open}
+          id={IDS.content}
+          ref={this.setTransitionEl}
+        >
           <slot />
         </section>
       </Host>

From 8eadb1cd52383bd249e5c4725d0c93d4aa760c62 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 5 Jul 2024 14:12:30 -0700
Subject: [PATCH 07/21] list item setTransitionEl

---
 .../src/components/list-item/list-item.tsx    |  5 +++++
 .../calcite-components/src/demos/list.html    | 22 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

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 fa8190ff2e9..ab46ae493ec 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -606,6 +606,7 @@ export class ListItem
           [CSS.nestedContainer]: true,
           [CSS.nestedContainerOpen]: this.openable && this.open,
         }}
+        ref={this.setTransitionEl}
       >
         <slot
           onSlotchange={this.handleDefaultSlotChange}
@@ -795,6 +796,10 @@ export class ListItem
     this.hasContentBottom = slotChangeHasAssignedElement(event);
   };
 
+  private setTransitionEl = (el: HTMLDivElement): void => {
+    this.transitionEl = el;
+  };
+
   private setSelectionDefaults(): void {
     const { parentListEl, selectionMode, selectionAppearance } = this;
 
diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
index 92e783add62..a104cfc339c 100644
--- a/packages/calcite-components/src/demos/list.html
+++ b/packages/calcite-components/src/demos/list.html
@@ -673,7 +673,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
                   </calcite-dropdown-group>
                 </calcite-dropdown>
               </calcite-list-item>
-              <calcite-list-item label="Rivers" value="rivers" open>
+              <calcite-list-item label="Rivers" value="rivers" open id="listItemTested">
                 <calcite-list-item label="Estuaries" value="estuaries">
                   <calcite-dropdown slot="actions-end" overlay-positioning="fixed" placement="bottom-end" scale="s">
                     <calcite-action
@@ -727,6 +727,26 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               </calcite-list-item>
             </calcite-list-item-group>
           </calcite-list>
+
+          <script>
+            const listItem = document.getElementById("listItemTested");
+            console.log(listItem);
+
+            window.onload = () => {
+              listItem.addEventListener("calciteListItemBeforeOpen", () => {
+                console.log("calciteListItemBeforeOpen event was emitted");
+              });
+              listItem.addEventListener("calciteListItemOpen", () => {
+                console.log("calciteBListItemOpen event was emitted");
+              });
+              listItem.addEventListener("calciteListItemBeforeClose", () => {
+                console.log("calciteListItemBeforeClose event was emitted");
+              });
+              listItem.addEventListener("calciteListItemClose", () => {
+                console.log("calciteListItemClose event was emitted");
+              });
+            };
+          </script>
         </div>
       </div>
 

From bedcb50032f5b371d1c622a9a8088c3dff76d341 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 5 Jul 2024 14:34:43 -0700
Subject: [PATCH 08/21] menu-item setTransition el

---
 .../src/components/menu-item/menu-item.tsx    |  8 +++++++-
 .../calcite-components/src/demos/menu.html    | 20 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

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 73a7b492c29..abb9eb6d366 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -165,7 +165,7 @@ export class CalciteMenuItem
 
   openTransitionProp = "opacity";
 
-  transitionEl: HTMLDivElement;
+  transitionEl: HTMLElement;
 
   //--------------------------------------------------------------------------
   //
@@ -309,6 +309,10 @@ export class CalciteMenuItem
     this.hasSubmenu = this.submenuItems.length > 0;
   };
 
+  private setTransitionEl = (el: HTMLElement): void => {
+    this.transitionEl = el;
+  };
+
   private keyDownHandler = async (event: KeyboardEvent): Promise<void> => {
     const { hasSubmenu, href, layout, open, submenuItems } = this;
     const key = event.key;
@@ -465,6 +469,7 @@ export class CalciteMenuItem
         }}
         label={this.messages.submenu}
         layout="vertical"
+        ref={this.setTransitionEl}
         role="menu"
       >
         <slot name="submenu-item" onSlotchange={this.handleMenuItemSlotChange} />
@@ -508,6 +513,7 @@ export class CalciteMenuItem
             [CSS.container]: true,
             [CSS.isParentVertical]: this.topLevelMenuLayout === "vertical",
           }}
+          ref={this.setTransitionEl}
           role="none"
         >
           <div class={CSS.itemContent}>
diff --git a/packages/calcite-components/src/demos/menu.html b/packages/calcite-components/src/demos/menu.html
index 221adb99efc..bb57a879f27 100644
--- a/packages/calcite-components/src/demos/menu.html
+++ b/packages/calcite-components/src/demos/menu.html
@@ -365,7 +365,7 @@ <h3>
                   </calcite-menu-item>
                 </calcite-menu-item>
               </calcite-menu-item>
-              <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous">
+              <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous" id="menuItemTested">
                 <calcite-menu-item slot="submenu-item" text="Very nice example"> </calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Short one">
                   <calcite-menu-item slot="submenu-item" text="Another thing">
@@ -445,5 +445,23 @@ <h3>
         console.log(event);
       });
     });
+
+    const menuItem = document.getElementById("menuItemTested");
+    console.log(menuItem);
+
+    window.onload = () => {
+      menuItem.addEventListener("calciteMenuItemBeforeOpen", () => {
+        console.log("calciteMenuItemBeforeOpen event was emitted");
+      });
+      menuItem.addEventListener("calciteMenuItemOpen", () => {
+        console.log("calciteMenuItemOpen event was emitted");
+      });
+      menuItem.addEventListener("calciteMenuItemBeforeClose", () => {
+        console.log("calciteMenuItemBeforeClose event was emitted");
+      });
+      menuItem.addEventListener("calciteMenuItemClose", () => {
+        console.log("calciteMenuItemClose event was emitted");
+      });
+    };
   </script>
 </html>

From c008e0ecaf0cec85132178459cb5e15a7e39d998 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 5 Jul 2024 15:16:58 -0700
Subject: [PATCH 09/21] clean up

---
 .../src/components/action-menu/action-menu.e2e.ts   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

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 1876c6628c9..cae20d6f915 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
@@ -94,16 +94,17 @@ describe("calcite-action-menu", () => {
     ]);
   });
 
-  const simpleActionMenuHTML = html`<calcite-action-menu>
-    <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
-  </calcite-action-menu>`;
-
   describe("openClose", () => {
-    openClose(simpleActionMenuHTML);
+    openClose("calcite-action-menu");
   });
 
   describe("delegates to floating-ui-owner component", () => {
-    delegatesToFloatingUiOwningComponent(simpleActionMenuHTML, "calcite-popover");
+    delegatesToFloatingUiOwningComponent(
+      html`<calcite-action-menu>
+        <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      </calcite-action-menu>`,
+      "calcite-popover",
+    );
   });
 
   describe("should focus on menu button", () => {

From b09f18fac046195e4dfbfb7c7d723f7289528aba Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 5 Jul 2024 15:18:33 -0700
Subject: [PATCH 10/21] clean up

---
 .../block-section/block-section.e2e.ts        | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
index 140f06f5c04..8a9b1d143a8 100644
--- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts
+++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -38,24 +38,20 @@ describe("calcite-block-section", () => {
     t9n("calcite-block-section");
   });
 
-  const simpleBlockSectionHTML = html` <calcite-block-section
-    id="myBlockSection"
-    text="text"
-    toggle-display="switch"
-    open
-  >
-    <div>some content</div>
-  </calcite-block-section>`;
-
   describe("openClose", () => {
-    openClose(simpleBlockSectionHTML);
+    openClose("calcite-block-section");
   });
 
   describe("setFocus", () => {
     describe("focuses toggle switch", () => {
-      focusable(simpleBlockSectionHTML, {
-        shadowFocusTargetSelector: `.${CSS.toggle}`,
-      });
+      focusable(
+        html`<calcite-block-section id="myBlockSection" text="text" toggle-display="switch" open>
+          <div>some content</div>
+        </calcite-block-section>`,
+        {
+          shadowFocusTargetSelector: `.${CSS.toggle}`,
+        },
+      );
     });
 
     describe("focuses toggle button", () => {

From 79917869bc287568cb93a4b78a8f52faf8f5fdad Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sat, 6 Jul 2024 22:41:22 -0700
Subject: [PATCH 11/21] cleanup

---
 .../src/components/block-section/block-section.e2e.ts           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
index 8a9b1d143a8..221b1a3347f 100644
--- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts
+++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -45,7 +45,7 @@ describe("calcite-block-section", () => {
   describe("setFocus", () => {
     describe("focuses toggle switch", () => {
       focusable(
-        html`<calcite-block-section id="myBlockSection" text="text" toggle-display="switch" open>
+        html`<calcite-block-section text="text" toggle-display="switch" open>
           <div>some content</div>
         </calcite-block-section>`,
         {

From cacc5793ef8e15f93bd2d57e7bf50dbd825ea5b2 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 12 Jul 2024 11:07:59 -0700
Subject: [PATCH 12/21] for components that use popover, rely on the supporting
 component's events

---
 .../components/action-menu/action-menu.tsx    | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

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 2905252eaf3..bf586728682 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -339,6 +339,10 @@ export class ActionMenu implements LoadableComponent, OpenCloseComponent {
       <Fragment>
         {this.renderMenuButton()}
         {this.renderMenuItems()}
+        onActionMenuBeforeOpen = {this.onActionMenuBeforeOpen}
+        onActionMenuOpen = {this.onActionMenuOpen}
+        onActionMenuBeforeClose = {this.onActionMenuBeforeClose}
+        onActionMenuClose = {this.onActionMenuClose}
         <slot name={SLOTS.tooltip} onSlotchange={this.updateTooltip} />
       </Fragment>
     );
@@ -523,19 +527,23 @@ export class ActionMenu implements LoadableComponent, OpenCloseComponent {
     this.open = false;
   };
 
-  onBeforeOpen(): void {
+  private onActionMenuBeforeOpen = (event: CustomEvent): void => {
+    event.stopPropagation();
     this.calciteActionMenuBeforeOpen.emit();
-  }
+  };
 
-  onOpen(): void {
+  private onActionMenuOpen = (event: CustomEvent): void => {
+    event.stopPropagation();
     this.calciteActionMenuOpen.emit();
-  }
+  };
 
-  onBeforeClose(): void {
+  private onActionMenuBeforeClose = (event: CustomEvent): void => {
+    event.stopPropagation();
     this.calciteActionMenuBeforeClose.emit();
-  }
+  };
 
-  onClose(): void {
+  private onActionMenuClose = (event: CustomEvent): void => {
+    event.stopPropagation();
     this.calciteActionMenuClose.emit();
-  }
+  };
 }

From 2981e6a83eb19fb262d579c915b3b0d4c8ae9415 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 12 Jul 2024 11:41:30 -0700
Subject: [PATCH 13/21] for components that use popover, rely on the supporting
 component's events

---
 .../components/action-menu/action-menu.tsx    | 36 ++++++-------------
 1 file changed, 11 insertions(+), 25 deletions(-)

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 bf586728682..c746d35a7fd 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -21,7 +21,6 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
-import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Appearance, Scale } from "../interfaces";
 import { activeAttr, CSS, ICONS, SLOTS } from "./resources";
 
@@ -37,7 +36,7 @@ const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
   styleUrl: "action-menu.scss",
   shadow: true,
 })
-export class ActionMenu implements LoadableComponent, OpenCloseComponent {
+export class ActionMenu implements LoadableComponent {
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -50,10 +49,6 @@ export class ActionMenu implements LoadableComponent, OpenCloseComponent {
 
   componentWillLoad(): void {
     setUpLoadableComponent(this);
-
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
   }
 
   componentDidLoad(): void {
@@ -101,7 +96,6 @@ export class ActionMenu implements LoadableComponent, OpenCloseComponent {
 
   @Watch("open")
   openHandler(open: boolean): void {
-    onToggleOpenCloseComponent(this);
     this.activeMenuItemIndex = this.open ? 0 : -1;
     if (this.menuButtonEl) {
       this.menuButtonEl.active = open;
@@ -311,8 +305,10 @@ export class ActionMenu implements LoadableComponent, OpenCloseComponent {
         focusTrapDisabled={true}
         label={label}
         offsetDistance={0}
-        onCalcitePopoverClose={this.handlePopoverClose}
-        onCalcitePopoverOpen={this.handlePopoverOpen}
+        onCalcitePopoverBeforeClose={this.onPopoverBeforeClose}
+        onCalcitePopoverBeforeOpen={this.onPopoverBeforeOpen}
+        onCalcitePopoverClose={this.onPopoverClose}
+        onCalcitePopoverOpen={this.onPopoverOpen}
         open={open}
         overlayPositioning={overlayPositioning}
         placement={placement}
@@ -339,10 +335,6 @@ export class ActionMenu implements LoadableComponent, OpenCloseComponent {
       <Fragment>
         {this.renderMenuButton()}
         {this.renderMenuItems()}
-        onActionMenuBeforeOpen = {this.onActionMenuBeforeOpen}
-        onActionMenuOpen = {this.onActionMenuOpen}
-        onActionMenuBeforeClose = {this.onActionMenuBeforeClose}
-        onActionMenuClose = {this.onActionMenuClose}
         <slot name={SLOTS.tooltip} onSlotchange={this.updateTooltip} />
       </Fragment>
     );
@@ -519,30 +511,24 @@ export class ActionMenu implements LoadableComponent, OpenCloseComponent {
     this.open = value;
   };
 
-  private handlePopoverOpen = (): void => {
-    this.open = true;
-  };
-
-  private handlePopoverClose = (): void => {
-    this.open = false;
-  };
-
-  private onActionMenuBeforeOpen = (event: CustomEvent): void => {
+  private onPopoverBeforeOpen = (event: CustomEvent): void => {
     event.stopPropagation();
+    this.open = true;
     this.calciteActionMenuBeforeOpen.emit();
   };
 
-  private onActionMenuOpen = (event: CustomEvent): void => {
+  private onPopoverOpen = (event: CustomEvent): void => {
     event.stopPropagation();
     this.calciteActionMenuOpen.emit();
   };
 
-  private onActionMenuBeforeClose = (event: CustomEvent): void => {
+  private onPopoverBeforeClose = (event: CustomEvent): void => {
     event.stopPropagation();
     this.calciteActionMenuBeforeClose.emit();
   };
 
-  private onActionMenuClose = (event: CustomEvent): void => {
+  private onPopoverClose = (event: CustomEvent): void => {
+    this.open = false;
     event.stopPropagation();
     this.calciteActionMenuClose.emit();
   };

From b437c1f985c38f1f49df789448fe4c0235aab2c1 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 12 Jul 2024 11:49:18 -0700
Subject: [PATCH 14/21] cleanup

---
 .../src/components/action-menu/action-menu.tsx                  | 2 --
 1 file changed, 2 deletions(-)

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 c746d35a7fd..cc564c434ca 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -167,8 +167,6 @@ export class ActionMenu implements LoadableComponent {
 
   tooltipEl: HTMLCalciteTooltipElement;
 
-  transitionEl: HTMLDivElement;
-
   @State() activeMenuItemIndex = -1;
 
   @Watch("activeMenuItemIndex")

From 1e54074548788324592783b29a2afcbbb812e7c9 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 12 Jul 2024 11:59:55 -0700
Subject: [PATCH 15/21] apply stopPropagation to keep events internal

---
 .../src/components/block-section/block-section.tsx   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

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 ddafecb5890..357398c9b06 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -127,19 +127,23 @@ export class BlockSection
     focusFirstTabbable(this.el);
   }
 
-  onBeforeOpen(): void {
+  onBeforeOpen(event: CustomEvent): void {
+    event.stopPropagation();
     this.calciteBlockSectionBeforeOpen.emit();
   }
 
-  onOpen(): void {
+  onOpen(event: CustomEvent): void {
+    event.stopPropagation();
     this.calciteBlockSectionOpen.emit();
   }
 
-  onBeforeClose(): void {
+  onBeforeClose(event: CustomEvent): void {
+    event.stopPropagation();
     this.calciteBlockSectionBeforeClose.emit();
   }
 
-  onClose(): void {
+  onClose(event: CustomEvent): void {
+    event.stopPropagation();
     this.calciteBlockSectionClose.emit();
   }
 

From 4e29201547662e850f3addbe7e4718908e2c00d7 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 12 Jul 2024 12:00:27 -0700
Subject: [PATCH 16/21] apply stopPropagation to keep events internal

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

diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 3ee33162dc7..5e2ea1b7433 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -44,22 +44,22 @@ export interface OpenCloseComponent {
   /**
    * Defines method for `beforeOpen` event handler.
    */
-  onBeforeOpen: () => void;
+  onBeforeOpen: (event?: CustomEvent) => void;
 
   /**
    * Defines method for `open` event handler:
    */
-  onOpen: () => void;
+  onOpen: (event?: CustomEvent) => void;
 
   /**
    * Defines method for `beforeClose` event handler:
    */
-  onBeforeClose: () => void;
+  onBeforeClose: (event?: CustomEvent) => void;
 
   /**
    * Defines method for `close` event handler:
    */
-  onClose: () => void;
+  onClose: (event?: CustomEvent) => void;
 }
 
 function isOpen(component: OpenCloseComponent): boolean {

From e96569cfc2c379ed4887bf80437d74546bc05891 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 12 Jul 2024 14:19:43 -0700
Subject: [PATCH 17/21] WIP

---
 .../components/block-section/block-section.tsx  | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

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 357398c9b06..df6c5daf381 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -127,23 +127,19 @@ export class BlockSection
     focusFirstTabbable(this.el);
   }
 
-  onBeforeOpen(event: CustomEvent): void {
-    event.stopPropagation();
+  onBeforeOpen(): void {
     this.calciteBlockSectionBeforeOpen.emit();
   }
 
-  onOpen(event: CustomEvent): void {
-    event.stopPropagation();
+  onOpen(): void {
     this.calciteBlockSectionOpen.emit();
   }
 
-  onBeforeClose(event: CustomEvent): void {
-    event.stopPropagation();
+  onBeforeClose(): void {
     this.calciteBlockSectionBeforeClose.emit();
   }
 
-  onClose(event: CustomEvent): void {
-    event.stopPropagation();
+  onClose(): void {
     this.calciteBlockSectionClose.emit();
   }
 
@@ -199,15 +195,16 @@ export class BlockSection
 
   handleHeaderKeyDown = (event: KeyboardEvent): void => {
     if (isActivationKey(event.key)) {
-      this.toggleSection();
+      this.toggleSection(event);
       event.preventDefault();
       event.stopPropagation();
     }
   };
 
-  toggleSection = (): void => {
+  toggleSection = (event: Event): void => {
     this.open = !this.open;
     this.calciteBlockSectionToggle.emit();
+    event.stopPropagation();
   };
 
   private setTransitionEl = (el: HTMLDivElement): void => {

From 11c11df94106bf4217c4261eaefe8d7390b8e6f4 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 12 Jul 2024 14:45:19 -0700
Subject: [PATCH 18/21] WIP

---
 .../src/components/block-section/block-section.tsx           | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

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 df6c5daf381..ddafecb5890 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -195,16 +195,15 @@ export class BlockSection
 
   handleHeaderKeyDown = (event: KeyboardEvent): void => {
     if (isActivationKey(event.key)) {
-      this.toggleSection(event);
+      this.toggleSection();
       event.preventDefault();
       event.stopPropagation();
     }
   };
 
-  toggleSection = (event: Event): void => {
+  toggleSection = (): void => {
     this.open = !this.open;
     this.calciteBlockSectionToggle.emit();
-    event.stopPropagation();
   };
 
   private setTransitionEl = (el: HTMLDivElement): void => {

From 40fe8cb54d237cec42d43f106d93d1564a161edb Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 12 Jul 2024 14:50:53 -0700
Subject: [PATCH 19/21] WIP

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

diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 5e2ea1b7433..3ee33162dc7 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -44,22 +44,22 @@ export interface OpenCloseComponent {
   /**
    * Defines method for `beforeOpen` event handler.
    */
-  onBeforeOpen: (event?: CustomEvent) => void;
+  onBeforeOpen: () => void;
 
   /**
    * Defines method for `open` event handler:
    */
-  onOpen: (event?: CustomEvent) => void;
+  onOpen: () => void;
 
   /**
    * Defines method for `beforeClose` event handler:
    */
-  onBeforeClose: (event?: CustomEvent) => void;
+  onBeforeClose: () => void;
 
   /**
    * Defines method for `close` event handler:
    */
-  onClose: (event?: CustomEvent) => void;
+  onClose: () => void;
 }
 
 function isOpen(component: OpenCloseComponent): boolean {

From 0387c59f04db8e459988ffea606672ded06c822b Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 12 Jul 2024 14:54:03 -0700
Subject: [PATCH 20/21] revert temporary demo files

---
 .../calcite-components/src/demos/action.html  | 25 +------------------
 .../calcite-components/src/demos/block.html   | 21 +---------------
 .../calcite-components/src/demos/list.html    | 22 +---------------
 .../calcite-components/src/demos/menu.html    | 20 +--------------
 4 files changed, 4 insertions(+), 84 deletions(-)

diff --git a/packages/calcite-components/src/demos/action.html b/packages/calcite-components/src/demos/action.html
index 9cf76837196..a3a3d6d26f3 100644
--- a/packages/calcite-components/src/demos/action.html
+++ b/packages/calcite-components/src/demos/action.html
@@ -459,35 +459,12 @@
     -->
       <!-- action bar  -->
       <div class="parent-action-bar">
-        <div class="child right-aligned-text">action bar with action-menu</div>
+        <div class="child right-aligned-text">action bar</div>
         <div class="child-action-bar">
           <div>basic</div>
           <calcite-action-bar>
             <calcite-action text="Add" icon="plus"> </calcite-action>
-            <calcite-action-menu id="action-menu">
-              <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
-              <calcite-action text="Add" icon="plus" text-enabled></calcite-action>
-              <calcite-action text="Add" icon="plus" text-enabled></calcite-action>
-              <calcite-action text="Add" icon="plus" text-enabled></calcite-action>
-            </calcite-action-menu>
           </calcite-action-bar>
-          <script>
-            const actionMenu = document.querySelector("#action-menu");
-            window.onload = () => {
-              actionMenu.addEventListener("calciteActionMenuBeforeOpen", () => {
-                console.log("calciteActionMenuBeforeOpen event was emitted");
-              });
-              actionMenu.addEventListener("calciteActionMenuOpen", () => {
-                console.log("calciteActionMenuOpen event was emitted");
-              });
-              actionMenu.addEventListener("calciteActionMenuBeforeClose", () => {
-                console.log("calciteActionMenuBeforeClose event was emitted");
-              });
-              actionMenu.addEventListener("calciteActionMenuClose", () => {
-                console.log("calciteActionMenuClose event was emitted");
-              });
-            };
-          </script>
         </div>
 
         <div class="child-action-bar">
diff --git a/packages/calcite-components/src/demos/block.html b/packages/calcite-components/src/demos/block.html
index 30bf3fbb6f4..c8c261662fa 100644
--- a/packages/calcite-components/src/demos/block.html
+++ b/packages/calcite-components/src/demos/block.html
@@ -53,7 +53,7 @@
 
         <div class="child">
           <calcite-block heading="Heading" description="summary" collapsible open>
-            <calcite-block-section text="input block-section" open id="block-section">
+            <calcite-block-section text="input block-section" open>
               <calcite-input
                 icon="form-field"
                 placeholder="This is an input field... enter something here"
@@ -62,25 +62,6 @@
 
             <calcite-block-section text="a block-section"> </calcite-block-section>
           </calcite-block>
-          <script>
-            const blockSection = document.getElementById("block-section");
-            console.log(blockSection);
-
-            window.onload = () => {
-              blockSection.addEventListener("calciteBlockSectionBeforeOpen", () => {
-                console.log("calciteBlockSectionBeforeOpen event was emitted");
-              });
-              blockSection.addEventListener("calciteBlockSectionOpen", () => {
-                console.log("calciteBlockSectionOpen event was emitted");
-              });
-              blockSection.addEventListener("calciteBlockSectionBeforeClose", () => {
-                console.log("calciteBlockSectionBeforeClose event was emitted");
-              });
-              blockSection.addEventListener("calciteBlockSectionClose", () => {
-                console.log("calciteBlockSectionClose event was emitted");
-              });
-            };
-          </script>
         </div>
       </div>
 
diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
index a104cfc339c..92e783add62 100644
--- a/packages/calcite-components/src/demos/list.html
+++ b/packages/calcite-components/src/demos/list.html
@@ -673,7 +673,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
                   </calcite-dropdown-group>
                 </calcite-dropdown>
               </calcite-list-item>
-              <calcite-list-item label="Rivers" value="rivers" open id="listItemTested">
+              <calcite-list-item label="Rivers" value="rivers" open>
                 <calcite-list-item label="Estuaries" value="estuaries">
                   <calcite-dropdown slot="actions-end" overlay-positioning="fixed" placement="bottom-end" scale="s">
                     <calcite-action
@@ -727,26 +727,6 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               </calcite-list-item>
             </calcite-list-item-group>
           </calcite-list>
-
-          <script>
-            const listItem = document.getElementById("listItemTested");
-            console.log(listItem);
-
-            window.onload = () => {
-              listItem.addEventListener("calciteListItemBeforeOpen", () => {
-                console.log("calciteListItemBeforeOpen event was emitted");
-              });
-              listItem.addEventListener("calciteListItemOpen", () => {
-                console.log("calciteBListItemOpen event was emitted");
-              });
-              listItem.addEventListener("calciteListItemBeforeClose", () => {
-                console.log("calciteListItemBeforeClose event was emitted");
-              });
-              listItem.addEventListener("calciteListItemClose", () => {
-                console.log("calciteListItemClose event was emitted");
-              });
-            };
-          </script>
         </div>
       </div>
 
diff --git a/packages/calcite-components/src/demos/menu.html b/packages/calcite-components/src/demos/menu.html
index bb57a879f27..221adb99efc 100644
--- a/packages/calcite-components/src/demos/menu.html
+++ b/packages/calcite-components/src/demos/menu.html
@@ -365,7 +365,7 @@ <h3>
                   </calcite-menu-item>
                 </calcite-menu-item>
               </calcite-menu-item>
-              <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous" id="menuItemTested">
+              <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous">
                 <calcite-menu-item slot="submenu-item" text="Very nice example"> </calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Short one">
                   <calcite-menu-item slot="submenu-item" text="Another thing">
@@ -445,23 +445,5 @@ <h3>
         console.log(event);
       });
     });
-
-    const menuItem = document.getElementById("menuItemTested");
-    console.log(menuItem);
-
-    window.onload = () => {
-      menuItem.addEventListener("calciteMenuItemBeforeOpen", () => {
-        console.log("calciteMenuItemBeforeOpen event was emitted");
-      });
-      menuItem.addEventListener("calciteMenuItemOpen", () => {
-        console.log("calciteMenuItemOpen event was emitted");
-      });
-      menuItem.addEventListener("calciteMenuItemBeforeClose", () => {
-        console.log("calciteMenuItemBeforeClose event was emitted");
-      });
-      menuItem.addEventListener("calciteMenuItemClose", () => {
-        console.log("calciteMenuItemClose event was emitted");
-      });
-    };
   </script>
 </html>

From 7d39a40e3729d27f2073b94db8207fb5d417280e Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 23 Jul 2024 17:02:50 -0700
Subject: [PATCH 21/21] remove transitionEl from menu, leave only on menu-item

---
 .../calcite-components/src/components/menu-item/menu-item.tsx    | 1 -
 1 file changed, 1 deletion(-)

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 abb9eb6d366..5e395b809a3 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -469,7 +469,6 @@ export class CalciteMenuItem
         }}
         label={this.messages.submenu}
         layout="vertical"
-        ref={this.setTransitionEl}
         role="menu"
       >
         <slot name="submenu-item" onSlotchange={this.handleMenuItemSlotChange} />