From a9b8e6444c589579b81bb323e0690a0931bdb5bf Mon Sep 17 00:00:00 2001
From: Eunsun Mota <eunsun.mota@alaskaair.com>
Date: Wed, 18 Dec 2024 14:58:43 -0500
Subject: [PATCH] refactor: set customEvent's detail correctly

---
 components/combobox/demo/api.min.js        | 13 ++++++------
 components/combobox/demo/index.min.js      | 13 ++++++------
 components/menu/demo/api.md                | 24 +++++++++++-----------
 components/menu/demo/api.min.js            | 13 ++++++------
 components/menu/demo/index.min.js          | 13 ++++++------
 components/menu/docs/api.md                | 24 +++++++++++-----------
 components/menu/src/auro-menu.js           | 13 ++++++------
 components/select/apiExamples/loading.html |  2 +-
 components/select/demo/api.md              |  4 ++--
 components/select/demo/api.min.js          | 13 ++++++------
 components/select/demo/index.min.js        | 13 ++++++------
 11 files changed, 76 insertions(+), 69 deletions(-)

diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js
index 8e80bae7..cd574f3f 100644
--- a/components/combobox/demo/api.min.js
+++ b/components/combobox/demo/api.min.js
@@ -8187,12 +8187,13 @@ class AuroMenu extends r$6 {
     }
 
     if (changedProperties.has('loading')) {
-      const event = new CustomEvent("auroMenu-loadingChange");
-      event.detail = {
-        loading: this.loading,
-        hasLoadingPlaceholder:
-        this.hasLoadingPlaceholder
-      };
+      const event = new CustomEvent("auroMenu-loadingChange", {
+        detail: {
+          loading: this.loading,
+          hasLoadingPlaceholder:
+          this.hasLoadingPlaceholder
+        }
+      });
       this.setAttribute("aria-busy", this.hasAttribute("loading"));
       this.dispatchEvent(event);
     }
diff --git a/components/combobox/demo/index.min.js b/components/combobox/demo/index.min.js
index 244869a2..391bb0a6 100644
--- a/components/combobox/demo/index.min.js
+++ b/components/combobox/demo/index.min.js
@@ -8053,12 +8053,13 @@ class AuroMenu extends r$6 {
     }
 
     if (changedProperties.has('loading')) {
-      const event = new CustomEvent("auroMenu-loadingChange");
-      event.detail = {
-        loading: this.loading,
-        hasLoadingPlaceholder:
-        this.hasLoadingPlaceholder
-      };
+      const event = new CustomEvent("auroMenu-loadingChange", {
+        detail: {
+          loading: this.loading,
+          hasLoadingPlaceholder:
+          this.hasLoadingPlaceholder
+        }
+      });
       this.setAttribute("aria-busy", this.hasAttribute("loading"));
       this.dispatchEvent(event);
     }
diff --git a/components/menu/demo/api.md b/components/menu/demo/api.md
index 7d144249..f2fc5ad2 100644
--- a/components/menu/demo/api.md
+++ b/components/menu/demo/api.md
@@ -28,18 +28,18 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Events
 
-| Event                         | Type                   | Description                                      |
-|-------------------------------|------------------------|--------------------------------------------------|
-| `auroMenu-activatedOption`    | `CustomEvent<Element>` | Notifies that a menuoption has been made `active`. |
-| `auroMenu-customEventFired`   | `CustomEvent<any>`     | Notifies that a custom event has been fired.     |
-| `auroMenu-loadingChange`      | `CustomEvent<any>`     | Notifies when the loading attribute is changed.  |
-| `auroMenu-selectValueFailure` | `CustomEvent<any>`     | Notifies that a an attempt to select a menuoption by matching a value has failed. |
-| `auroMenu-selectValueReset`   | `CustomEvent<any>`     | Notifies that the component value has been reset. |
-| `auroMenu-selectedOption`     | `CustomEvent<any>`     | Notifies that a new menuoption selection has been made. |
-| [auroMenuActivatedOption](#auroMenuActivatedOption)     | `CustomEvent<Element>` | (DEPRECATED) Notifies that a menuoption has been made `active`. |
-| [auroMenuCustomEventFired](#auroMenuCustomEventFired)    | `CustomEvent<any>`     | (DEPRECATED) Notifies that a custom event has been fired. |
-| [auroMenuSelectValueFailure](#auroMenuSelectValueFailure)  | `CustomEvent<any>`     | (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. |
-| [selectedOption](#selectedOption)              | `CustomEvent<any>`     | (DEPRECATED) Notifies that a new menuoption selection has been made. |
+| Event                         | Type                                             | Description                                      |
+|-------------------------------|--------------------------------------------------|--------------------------------------------------|
+| `auroMenu-activatedOption`    | `CustomEvent<Element>`                           | Notifies that a menuoption has been made `active`. |
+| `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
+| `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
+| `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that a an attempt to select a menuoption by matching a value has failed. |
+| `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
+| `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
+| [auroMenuActivatedOption](#auroMenuActivatedOption)     | `CustomEvent<Element>`                           | (DEPRECATED) Notifies that a menuoption has been made `active`. |
+| [auroMenuCustomEventFired](#auroMenuCustomEventFired)    | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a custom event has been fired. |
+| [auroMenuSelectValueFailure](#auroMenuSelectValueFailure)  | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. |
+| [selectedOption](#selectedOption)              | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a new menuoption selection has been made. |
 
 ## Slots
 
diff --git a/components/menu/demo/api.min.js b/components/menu/demo/api.min.js
index bf7d39d0..4637cc09 100644
--- a/components/menu/demo/api.min.js
+++ b/components/menu/demo/api.min.js
@@ -291,12 +291,13 @@ class AuroMenu extends r {
     }
 
     if (changedProperties.has('loading')) {
-      const event = new CustomEvent("auroMenu-loadingChange");
-      event.detail = {
-        loading: this.loading,
-        hasLoadingPlaceholder:
-        this.hasLoadingPlaceholder
-      };
+      const event = new CustomEvent("auroMenu-loadingChange", {
+        detail: {
+          loading: this.loading,
+          hasLoadingPlaceholder:
+          this.hasLoadingPlaceholder
+        }
+      });
       this.setAttribute("aria-busy", this.hasAttribute("loading"));
       this.dispatchEvent(event);
     }
diff --git a/components/menu/demo/index.min.js b/components/menu/demo/index.min.js
index 78e90be2..555505ec 100644
--- a/components/menu/demo/index.min.js
+++ b/components/menu/demo/index.min.js
@@ -251,12 +251,13 @@ class AuroMenu extends r {
     }
 
     if (changedProperties.has('loading')) {
-      const event = new CustomEvent("auroMenu-loadingChange");
-      event.detail = {
-        loading: this.loading,
-        hasLoadingPlaceholder:
-        this.hasLoadingPlaceholder
-      };
+      const event = new CustomEvent("auroMenu-loadingChange", {
+        detail: {
+          loading: this.loading,
+          hasLoadingPlaceholder:
+          this.hasLoadingPlaceholder
+        }
+      });
       this.setAttribute("aria-busy", this.hasAttribute("loading"));
       this.dispatchEvent(event);
     }
diff --git a/components/menu/docs/api.md b/components/menu/docs/api.md
index bad3ee9d..80c16594 100644
--- a/components/menu/docs/api.md
+++ b/components/menu/docs/api.md
@@ -25,18 +25,18 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Events
 
-| Event                         | Type                   | Description                                      |
-|-------------------------------|------------------------|--------------------------------------------------|
-| `auroMenu-activatedOption`    | `CustomEvent<Element>` | Notifies that a menuoption has been made `active`. |
-| `auroMenu-customEventFired`   | `CustomEvent<any>`     | Notifies that a custom event has been fired.     |
-| `auroMenu-loadingChange`      | `CustomEvent<any>`     | Notifies when the loading attribute is changed.  |
-| `auroMenu-selectValueFailure` | `CustomEvent<any>`     | Notifies that a an attempt to select a menuoption by matching a value has failed. |
-| `auroMenu-selectValueReset`   | `CustomEvent<any>`     | Notifies that the component value has been reset. |
-| `auroMenu-selectedOption`     | `CustomEvent<any>`     | Notifies that a new menuoption selection has been made. |
-| `auroMenuActivatedOption`     | `CustomEvent<Element>` | (DEPRECATED) Notifies that a menuoption has been made `active`. |
-| `auroMenuCustomEventFired`    | `CustomEvent<any>`     | (DEPRECATED) Notifies that a custom event has been fired. |
-| `auroMenuSelectValueFailure`  | `CustomEvent<any>`     | (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. |
-| `selectedOption`              | `CustomEvent<any>`     | (DEPRECATED) Notifies that a new menuoption selection has been made. |
+| Event                         | Type                                             | Description                                      |
+|-------------------------------|--------------------------------------------------|--------------------------------------------------|
+| `auroMenu-activatedOption`    | `CustomEvent<Element>`                           | Notifies that a menuoption has been made `active`. |
+| `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
+| `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
+| `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that a an attempt to select a menuoption by matching a value has failed. |
+| `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
+| `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
+| `auroMenuActivatedOption`     | `CustomEvent<Element>`                           | (DEPRECATED) Notifies that a menuoption has been made `active`. |
+| `auroMenuCustomEventFired`    | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a custom event has been fired. |
+| `auroMenuSelectValueFailure`  | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. |
+| `selectedOption`              | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a new menuoption selection has been made. |
 
 ## Slots
 
diff --git a/components/menu/src/auro-menu.js b/components/menu/src/auro-menu.js
index a75bc021..a53fd708 100644
--- a/components/menu/src/auro-menu.js
+++ b/components/menu/src/auro-menu.js
@@ -158,12 +158,13 @@ export class AuroMenu extends LitElement {
     }
 
     if (changedProperties.has('loading')) {
-      const event = new CustomEvent("auroMenu-loadingChange");
-      event.detail = {
-        loading: this.loading,
-        hasLoadingPlaceholder:
-        this.hasLoadingPlaceholder
-      };
+      const event = new CustomEvent("auroMenu-loadingChange", {
+        detail: {
+          loading: this.loading,
+          hasLoadingPlaceholder:
+          this.hasLoadingPlaceholder
+        }
+      });
       this.setAttribute("aria-busy", this.hasAttribute("loading"));
       this.dispatchEvent(event);
     }
diff --git a/components/select/apiExamples/loading.html b/components/select/apiExamples/loading.html
index 7e222613..8b256c13 100644
--- a/components/select/apiExamples/loading.html
+++ b/components/select/apiExamples/loading.html
@@ -1,6 +1,6 @@
 <auro-select id="loadingExample">
   <span slot="label">Please select a preference</span>
   <auro-menu id="loadingExampleSelectMenu">
-    <!-- <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span> -->
+    <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
   </auro-menu>
 </auro-select>
diff --git a/components/select/demo/api.md b/components/select/demo/api.md
index 88eb2a93..e5c4cbb3 100644
--- a/components/select/demo/api.md
+++ b/components/select/demo/api.md
@@ -671,7 +671,7 @@ While content is loading, the menu can either remain empty or display a loading
   <auro-select id="loadingExample">
     <span slot="label">Please select a preference</span>
     <auro-menu id="loadingExampleSelectMenu">
-      <!-- <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span> -->
+      <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
     </auro-menu>
   </auro-select>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -721,7 +721,7 @@ export function auroMenuLoadingExample() {
 <auro-select id="loadingExample">
   <span slot="label">Please select a preference</span>
   <auro-menu id="loadingExampleSelectMenu">
-    <!-- <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span> -->
+    <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
   </auro-menu>
 </auro-select>
 ```
diff --git a/components/select/demo/api.min.js b/components/select/demo/api.min.js
index 0abf8907..ea581b2b 100644
--- a/components/select/demo/api.min.js
+++ b/components/select/demo/api.min.js
@@ -4006,12 +4006,13 @@ class AuroMenu extends r$4 {
     }
 
     if (changedProperties.has('loading')) {
-      const event = new CustomEvent("auroMenu-loadingChange");
-      event.detail = {
-        loading: this.loading,
-        hasLoadingPlaceholder:
-        this.hasLoadingPlaceholder
-      };
+      const event = new CustomEvent("auroMenu-loadingChange", {
+        detail: {
+          loading: this.loading,
+          hasLoadingPlaceholder:
+          this.hasLoadingPlaceholder
+        }
+      });
       this.setAttribute("aria-busy", this.hasAttribute("loading"));
       this.dispatchEvent(event);
     }
diff --git a/components/select/demo/index.min.js b/components/select/demo/index.min.js
index 7b8f8b18..d0174517 100644
--- a/components/select/demo/index.min.js
+++ b/components/select/demo/index.min.js
@@ -3916,12 +3916,13 @@ class AuroMenu extends r$4 {
     }
 
     if (changedProperties.has('loading')) {
-      const event = new CustomEvent("auroMenu-loadingChange");
-      event.detail = {
-        loading: this.loading,
-        hasLoadingPlaceholder:
-        this.hasLoadingPlaceholder
-      };
+      const event = new CustomEvent("auroMenu-loadingChange", {
+        detail: {
+          loading: this.loading,
+          hasLoadingPlaceholder:
+          this.hasLoadingPlaceholder
+        }
+      });
       this.setAttribute("aria-busy", this.hasAttribute("loading"));
       this.dispatchEvent(event);
     }