From c207946b0a3e9a1bc755e7beb34a71c8b120e5ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:20:24 +0200
Subject: [PATCH 1/2] fix(components): Unexpected behavior of multilevel
 accordions

---
 .changeset/big-frogs-admire.md                    |  5 +++++
 .../post-accordion-item/post-accordion-item.tsx   |  2 +-
 .../components/post-accordion/post-accordion.tsx  | 15 ++++++++-------
 3 files changed, 14 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/big-frogs-admire.md

diff --git a/.changeset/big-frogs-admire.md b/.changeset/big-frogs-admire.md
new file mode 100644
index 0000000000..6bee723b00
--- /dev/null
+++ b/.changeset/big-frogs-admire.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed a bug in nested accordions where closing a child item unintentionally closed all parent accordion elements.
diff --git a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx
index dad8c4604a..ba0765e5aa 100644
--- a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx
+++ b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx
@@ -51,7 +51,7 @@ export class PostAccordionItem {
   // capture to make sure the "collapsed" property is updated before the event is consumed
   @Listen('postToggle', { capture: true })
   onCollapseToggle(event: CustomEvent<boolean>): void {
-    if ((event.target as HTMLElement).localName === 'post-accordion-item') {
+    if (event.target === this.host) {
       this.collapsed = !event.detail;
     }
   }
diff --git a/packages/components/src/components/post-accordion/post-accordion.tsx b/packages/components/src/components/post-accordion/post-accordion.tsx
index 487ad1a86c..8f1492cfbe 100644
--- a/packages/components/src/components/post-accordion/post-accordion.tsx
+++ b/packages/components/src/components/post-accordion/post-accordion.tsx
@@ -50,23 +50,24 @@ export class PostAccordion {
 
   @Listen('postToggle')
   collapseToggleHandler(event: CustomEvent<boolean>) {
-    if ((event.target as HTMLElement).localName === 'post-accordion-item') {
-      event.stopPropagation();
+    const toggledItem = event.target as HTMLElement;
+    const closestParentAccordion = toggledItem.closest('post-accordion');
 
-      const toggledItem = event.target as HTMLPostAccordionItemElement;
-      const isClosing = this.expandedItems.has(toggledItem);
+    if (closestParentAccordion === this.host) {
+      const toggledAccordionItem = event.target as HTMLPostAccordionItemElement;
+      const isClosing = this.expandedItems.has(toggledAccordionItem);
 
       if (isClosing) {
-        this.expandedItems.delete(toggledItem);
+        this.expandedItems.delete(toggledAccordionItem);
       } else {
-        this.expandedItems.add(toggledItem);
+        this.expandedItems.add(toggledAccordionItem);
       }
 
       if (this.multiple || isClosing) return;
 
       // close other open accordion items to have only one opened at a time
       Array.from(this.expandedItems.values())
-        .filter(item => item !== toggledItem)
+        .filter(item => item !== toggledAccordionItem)
         .forEach(item => {
           item.toggle(false);
         });

From e3b7a2581ec9677d50f6372430ed2dc857ee1b92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Tue, 27 Aug 2024 12:36:57 +0200
Subject: [PATCH 2/2] chore(components): implemented PR-feedback

---
 .../src/components/post-accordion-item/post-accordion-item.tsx  | 2 +-
 .../components/src/components/post-accordion/post-accordion.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx
index ba0765e5aa..f37be6652c 100644
--- a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx
+++ b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx
@@ -51,7 +51,7 @@ export class PostAccordionItem {
   // capture to make sure the "collapsed" property is updated before the event is consumed
   @Listen('postToggle', { capture: true })
   onCollapseToggle(event: CustomEvent<boolean>): void {
-    if (event.target === this.host) {
+    if (event.target === this.host && (event.target as HTMLElement).localName === 'post-accordion-item') {
       this.collapsed = !event.detail;
     }
   }
diff --git a/packages/components/src/components/post-accordion/post-accordion.tsx b/packages/components/src/components/post-accordion/post-accordion.tsx
index 8f1492cfbe..0138858388 100644
--- a/packages/components/src/components/post-accordion/post-accordion.tsx
+++ b/packages/components/src/components/post-accordion/post-accordion.tsx
@@ -53,7 +53,7 @@ export class PostAccordion {
     const toggledItem = event.target as HTMLElement;
     const closestParentAccordion = toggledItem.closest('post-accordion');
 
-    if (closestParentAccordion === this.host) {
+    if (closestParentAccordion === this.host && toggledItem.localName === 'post-accordion-item') {
       const toggledAccordionItem = event.target as HTMLPostAccordionItemElement;
       const isClosing = this.expandedItems.has(toggledAccordionItem);