From 3ab342ebb685c0f381f4a813f59882383f0df305 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 3 Jun 2025 15:10:31 -0400
Subject: [PATCH] add support for name attribute (#1022)

---
 .../docs/docs/components/details.md           | 45 ++++++-------------
 .../docs/docs/resources/changelog.md          |  1 +
 .../src/components/details/details.ts         | 20 +++++++++
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/packages/webawesome/docs/docs/components/details.md b/packages/webawesome/docs/docs/components/details.md
index 9f6d94107..0678f6c4a 100644
--- a/packages/webawesome/docs/docs/components/details.md
+++ b/packages/webawesome/docs/docs/components/details.md
@@ -49,7 +49,7 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 </style>
 ```
 
-### HTML in summary
+### HTML in Summary
 
 To use HTML in the summary, use the `summary` slot.
 Links and other interactive elements will still retain their behavior:
@@ -67,7 +67,7 @@ Links and other interactive elements will still retain their behavior:
 </wa-details>
 ```
 
-### Right-to-Left languages
+### Right-to-Left Languages
 
 The details component automatically adapts to right-to-left languages:
 
@@ -104,40 +104,23 @@ Use the `appearance` attribute to change the element’s visual appearance.
 
 ### Grouping Details
 
-Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `wa-show` event.
+Use the `name` attribute to create accordion-like behavior where only one details element with the same name can be open at a time. This matches the behavior of native `<details>` elements.
 
 ```html {.example}
-<div class="details-group-example">
-  <wa-details summary="First" open>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+<div class="wa-stack">
+  <wa-details name="group-1" summary="Section 1" open>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </wa-details>
 
-  <wa-details summary="Second">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  <wa-details name="group-1" summary="Section 2">
+  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
+  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
   </wa-details>
 
-  <wa-details summary="Third">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  <wa-details name="group-1" summary="Section 3">
+  At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
+  corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
   </wa-details>
 </div>
-
-<script>
-  const container = document.querySelector('.details-group-example');
-
-  // Close all other details when one is shown
-  container.addEventListener('wa-show', event => {
-    if (event.target.localName === 'wa-details') {
-      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
-    }
-  });
-</script>
-
-<style>
-  .details-group-example wa-details:not(:last-of-type) {
-    margin-bottom: var(--wa-space-2xs);
-  }
-</style>
-```
+```
\ No newline at end of file
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 4512ddac1..ee35c081d 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -33,6 +33,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - 🚨 BREAKING: removed the `size` attribute from `<wa-card>`; please set the size of child elements on the children directly
 - Added a new free component: `<wa-popover>` (#2 of 14 per stretch goals)
 - Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
+- Added support for `name` in `<wa-details>` for exclusively opening one in a group
 - Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
 - Fixed `<wa-button-group>` so dividers properly show between buttons
 - Fixed the tooltip position in `<wa-slider>` when using RTL
diff --git a/packages/webawesome/src/components/details/details.ts b/packages/webawesome/src/components/details/details.ts
index b47d24b4d..1b1ffc2d0 100644
--- a/packages/webawesome/src/components/details/details.ts
+++ b/packages/webawesome/src/components/details/details.ts
@@ -65,6 +65,9 @@ export default class WaDetails extends WebAwesomeElement {
   /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
   @property() summary: string;
 
+  /** Groups related details elements. When one opens, others with the same name will close. */
+  @property() name: string;
+
   /** Disables the details so it can't be toggled. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -138,6 +141,20 @@ export default class WaDetails extends WebAwesomeElement {
     }
   }
 
+  /** Closes other <wa-details> elements in the same document when they have the same name. */
+  private closeOthersWithSameName() {
+    if (!this.name) return;
+
+    const root = this.getRootNode() as Document | ShadowRoot;
+    const otherDetails = root.querySelectorAll(`wa-details[name="${this.name}"]`) as NodeListOf<WaDetails>;
+
+    otherDetails.forEach(detail => {
+      if (detail !== this && detail.open) {
+        detail.open = false;
+      }
+    });
+  }
+
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.open) {
@@ -151,6 +168,9 @@ export default class WaDetails extends WebAwesomeElement {
         return;
       }
 
+      // Close other details with the same name
+      this.closeOthersWithSameName();
+
       const duration = parseDuration(getComputedStyle(this.body).getPropertyValue('--show-duration'));
       // We can't animate to 'auto', so use the scroll height for now
       await animate(