From 46584147783f9451514f3e98ae85c2f6e69368a4 Mon Sep 17 00:00:00 2001
From: lehju <julia.grasmeier@muenchen.de>
Date: Thu, 18 Dec 2025 16:30:33 +0100
Subject: [PATCH 1/5] :sparkles: add MucAccordion component

---
 .../Accordion/MucAccordion.stories.ts         | 161 +++++++++++++++++
 src/components/Accordion/MucAccordion.vue     |  84 +++++++++
 .../Accordion/MucAccordionItem.stories.ts     |  37 ++++
 src/components/Accordion/MucAccordionItem.vue | 165 ++++++++++++++++++
 src/components/Accordion/index.ts             |   4 +
 src/components/index.ts                       |   3 +
 6 files changed, 454 insertions(+)
 create mode 100644 src/components/Accordion/MucAccordion.stories.ts
 create mode 100644 src/components/Accordion/MucAccordion.vue
 create mode 100644 src/components/Accordion/MucAccordionItem.stories.ts
 create mode 100644 src/components/Accordion/MucAccordionItem.vue
 create mode 100644 src/components/Accordion/index.ts

diff --git a/src/components/Accordion/MucAccordion.stories.ts b/src/components/Accordion/MucAccordion.stories.ts
new file mode 100644
index 00000000..0f0c984a
--- /dev/null
+++ b/src/components/Accordion/MucAccordion.stories.ts
@@ -0,0 +1,161 @@
+import MucAccordion from "./MucAccordion.vue";
+import MucAccordionItem from "./MucAccordionItem.vue";
+
+export default {
+  components: { MucAccordion },
+  component: MucAccordion,
+  title: "Accordion/MucAccordion",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-accordion\` component offers the option of displaying content clearly in an accordion format. <br> A template with the following v-slot must be placed around the MucAccordionItems \`v-slot:default=“{onOpen, onClose, activeItems}”\`. <br> Each MucAccordionItem must be passed the following parameters with exactly this values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\` . <br> For exmaple:
+        <template v-slot:default="{onOpen, onClose, activeItems}">
+      <MucAccordionItem
+          id="accordion-item-1"
+          header="Accordion item 1"
+          :active-items="activeItems"
+          @open="onOpen"
+          @close="onClose"
+      >
+        <template #text>
+          Text of   Accordion item 1
+        </template>
+      </MucAccordionItem>
+      <MucAccordionItem
+      id="accordion-item-2"
+      header="Accordion item 2"
+      :active-items="activeItems"
+      @open="onOpen"
+      @close="onClose"
+      >
+        <template #text>
+          Text of   Accordion item 2
+        </template>
+      </MucAccordionItem>
+    </template>
+        
+             
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-accordion)
+`,
+      },
+    },
+  },
+};
+
+export const Template = () => ({
+  components: { MucAccordion, MucAccordionItem },
+  template: `
+    <MucAccordion
+        id="accordion"
+        header="Lorem ipsum dolor"
+        defaultItem="accordion-item-1"
+    >
+      <template v-slot:default="{onOpen, onClose, activeItems}">
+        <MucAccordionItem
+            id="accordion-item-1"
+            header="Accordion item 1"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 1
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-2"
+            header="Accordion item 2"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 2
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-3"
+            header="Accordion item 3"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 3
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-4"
+            header="Accordion item 4"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 4
+          </template>
+        </MucAccordionItem>
+      </template>
+    </MucAccordion>
+    `,
+});
+
+export const Multiple = () => ({
+  components: { MucAccordion, MucAccordionItem },
+  template: `
+    <MucAccordion
+        id="accordion"
+        header="Lorem ipsum dolor"
+        multiple
+    >
+      <template v-slot:default="{onOpen, onClose, activeItems}">
+        <MucAccordionItem
+            id="accordion-item-1"
+            header="Accordion item 1"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 1
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-2"
+            header="Accordion item 2"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 2
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-3"
+            header="Accordion item 3"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 3
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-4"
+            header="Accordion item 4"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 4
+          </template>
+        </MucAccordionItem>
+      </template>
+    </MucAccordion>
+    `,
+});
diff --git a/src/components/Accordion/MucAccordion.vue b/src/components/Accordion/MucAccordion.vue
new file mode 100644
index 00000000..ca738795
--- /dev/null
+++ b/src/components/Accordion/MucAccordion.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="m-component m-component-accordion">
+    <div class="container">
+      <div class="m-component__grid">
+        <div class="m-component__column">
+          <div class="m-component__head">
+            <h2 class="m-component__heading">{{ header }}</h2>
+            <p class="m-component__summary"></p>
+          </div>
+          <div class="m-component__body">
+            <div
+              class="m-accordion"
+              :id="id"
+            >
+              <slot
+                name="default"
+                :active-items="activeItems"
+                :on-open="onOpen"
+                :on-close="onClose"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const {
+  header,
+  multiple = false,
+  defaultItem = undefined,
+} = defineProps<{
+  /**
+   * Id of accordion
+   */
+  id: string;
+  /**
+   * Heading of accordion
+   */
+  header: string;
+  /**
+   * Multiple MucAccordionItems can be active at the same time
+   */
+  multiple?: boolean;
+  /**
+   * Id of default activ item
+   */
+  defaultItem?: string;
+}>();
+
+defineSlots<{
+  /**
+   * MucAccordionItems can be put into this slot.
+   */
+  default(): unknown;
+}>();
+
+/**
+ * List of active MucAccordionItems
+ */
+const activeItems = ref<string[]>(defaultItem ? [defaultItem] : []);
+
+/**
+ * On open set as active Item
+ */
+const onOpen = (id: string) => {
+  if (multiple) {
+    activeItems.value.push(id);
+  } else {
+    activeItems.value = [id];
+  }
+};
+
+/**
+ * On close delete from active Items
+ */
+const onClose = (id: string) => {
+  activeItems.value = activeItems.value.filter((item) => item !== id);
+};
+</script>
diff --git a/src/components/Accordion/MucAccordionItem.stories.ts b/src/components/Accordion/MucAccordionItem.stories.ts
new file mode 100644
index 00000000..f052bf8e
--- /dev/null
+++ b/src/components/Accordion/MucAccordionItem.stories.ts
@@ -0,0 +1,37 @@
+import MucAccordionItem from "./MucAccordionItem.vue";
+
+export default {
+  components: { MucAccordionItem },
+  component: MucAccordionItem,
+  title: "Accordion/MucAccordionItem",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-accordion-item\` component represents an item of an \`muc-accordion\` <br> Each MucAccordionItem must be passed the following parameters with exactly this values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\`
+             
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-accordion)
+`,
+      },
+    },
+  },
+};
+
+export const Template = () => ({
+  components: { MucAccordionItem },
+  template: `
+
+    <MucAccordionItem
+        id="accordion-item-1"
+        header="Accordion item 1"
+        :active-items="activeItems"
+        @open="onOpen"
+        @close="onClose"
+    >
+      <template #text>
+        Text of   Accordion item 1
+      </template>
+    </MucAccordionItem>
+
+  `,
+});
diff --git a/src/components/Accordion/MucAccordionItem.vue b/src/components/Accordion/MucAccordionItem.vue
new file mode 100644
index 00000000..4439757c
--- /dev/null
+++ b/src/components/Accordion/MucAccordionItem.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="m-accordion__section">
+    <h3
+      class="m-accordion__section-header"
+      :id="'heading-' + id"
+    >
+      <button
+        @click="toggleCollapsable"
+        class="m-accordion__section-button"
+        :class="{ collapsed: collapsed }"
+        type="button"
+        :aria-expanded="!collapsed"
+        :aria-controls="'content-' + id"
+      >
+        {{ header }}
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          class="icon"
+        >
+          <use
+            v-if="collapsed"
+            xlink:href="#icon-chevron-down"
+          ></use>
+          <use
+            v-else
+            xlink:href="#icon-chevron-up"
+          ></use>
+        </svg>
+      </button>
+    </h3>
+    <section
+      ref="section"
+      :id="'content-' + id"
+      class="m-accordion__section-content"
+      :class="{
+        collapse: !collapsing,
+        collapsing: collapsing,
+        show: !collapsed,
+      }"
+      :aria-labelledby="'heading-' + id"
+    >
+      <div class="m-textplus__content m-content">
+        <p>
+          <slot name="text" />
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+const { id, activeItems = [] } = defineProps<{
+  /**
+   * Id of accordion item.
+   */
+  id: string;
+  /**
+   * Heading of accordion item.
+   */
+  header: string;
+
+  /**
+   * List of active accordion items.
+   */
+  activeItems?: string[];
+}>();
+
+defineSlots<{
+  /**
+   * Formatted text can be put into this slot.
+   */
+  text(): unknown;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Event emitted to show content of the accordion item.
+   */
+  open: [id: string];
+
+  /**
+   * Event emitted to hide content of the accordion item.
+   */
+  close: [id: string];
+}>();
+
+/**
+ * HTMLElement of section.
+ */
+const section = ref<HTMLElement>();
+
+/**
+ * Displays accordion item content.
+ */
+const collapsed = ref<boolean>(true);
+
+/**
+ * Accordion item is collapsing.
+ */
+const collapsing = ref<boolean>(false);
+
+watch(
+  () => activeItems,
+  () => {
+    if (!activeItems.includes(id) && !collapsed.value) {
+      collapsed.value = true;
+      section.value.style.height = section.value.scrollHeight + "px";
+      collapsing.value = true;
+      setTimeout(() => {
+        section.value.style.height = "0";
+      }, 0);
+    }
+  }
+);
+
+/**
+ * Toggles the collapsed state of the accordion item content.
+ */
+const toggleCollapsable = () => {
+  if (section.value) {
+    collapsed.value = !collapsed.value;
+    if (collapsed.value) {
+      section.value.style.height = section.value.scrollHeight + "px";
+      collapsing.value = true;
+      emit("close", id);
+      setTimeout(() => {
+        section.value.style.height = "0";
+      }, 0);
+    } else {
+      section.value.style.height = "0";
+      collapsing.value = true;
+      emit("open", id);
+      setTimeout(() => {
+        section.value.style.height = section.value.scrollHeight + "px";
+      }, 0);
+    }
+  }
+};
+
+/**
+ * Handles the end of the collapsing transition.
+ */
+const handleTransitionEnd = () => {
+  collapsing.value = false;
+  section.value.style.height = "";
+};
+
+onMounted(() => {
+  if (section.value) {
+    section.value.addEventListener("transitionend", handleTransitionEnd);
+    if (activeItems.includes(id)) {
+      collapsed.value = false;
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  if (section.value) {
+    section.value.removeEventListener("transitionend", handleTransitionEnd);
+  }
+});
+</script>
diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts
new file mode 100644
index 00000000..6b9f41d7
--- /dev/null
+++ b/src/components/Accordion/index.ts
@@ -0,0 +1,4 @@
+import MucAccordion from "./MucAccordion.vue";
+import MucAccordionItem from "./MucAccordionItem.vue";
+
+export { MucAccordion, MucAccordionItem };
diff --git a/src/components/index.ts b/src/components/index.ts
index 3fe021d5..d05e5a28 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
+import { MucAccordion, MucAccordionItem } from "./Accordion";
 import { MucBanner } from "./Banner";
 import { MucButton } from "./Button";
 import { MucCalendar } from "./Calendar";
@@ -27,6 +28,8 @@ import { MucSpinner } from "./Spinner";
 import { MucStepper } from "./Stepper";
 
 export {
+  MucAccordion,
+  MucAccordionItem,
   MucButton,
   MucBanner,
   MucIntro,

From e58c448088ccd4608460d697680984e044d90984 Mon Sep 17 00:00:00 2001
From: lehju <julia.grasmeier@muenchen.de>
Date: Thu, 18 Dec 2025 16:43:41 +0100
Subject: [PATCH 2/5] :green_heart: linter

---
 src/components/Accordion/MucAccordionItem.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Accordion/MucAccordionItem.vue b/src/components/Accordion/MucAccordionItem.vue
index 4439757c..bcde3ed7 100644
--- a/src/components/Accordion/MucAccordionItem.vue
+++ b/src/components/Accordion/MucAccordionItem.vue
@@ -105,12 +105,14 @@ const collapsing = ref<boolean>(false);
 watch(
   () => activeItems,
   () => {
-    if (!activeItems.includes(id) && !collapsed.value) {
+    if (!activeItems.includes(id) && !collapsed.value && section.value) {
       collapsed.value = true;
       section.value.style.height = section.value.scrollHeight + "px";
       collapsing.value = true;
       setTimeout(() => {
-        section.value.style.height = "0";
+        if (section.value) {
+          section.value.style.height = "0";
+        }
       }, 0);
     }
   }
@@ -127,14 +129,18 @@ const toggleCollapsable = () => {
       collapsing.value = true;
       emit("close", id);
       setTimeout(() => {
-        section.value.style.height = "0";
+        if (section.value) {
+          section.value.style.height = "0";
+        }
       }, 0);
     } else {
       section.value.style.height = "0";
       collapsing.value = true;
       emit("open", id);
       setTimeout(() => {
-        section.value.style.height = section.value.scrollHeight + "px";
+        if (section.value) {
+          section.value.style.height = section.value.scrollHeight + "px";
+        }
       }, 0);
     }
   }
@@ -145,7 +151,9 @@ const toggleCollapsable = () => {
  */
 const handleTransitionEnd = () => {
   collapsing.value = false;
-  section.value.style.height = "";
+  if (section.value) {
+    section.value.style.height = "";
+  }
 };
 
 onMounted(() => {

From fadaa0bb6dfcdfc5d881a4ad37cfd4ea4e1e73bf Mon Sep 17 00:00:00 2001
From: lehju <julia.grasmeier@muenchen.de>
Date: Thu, 18 Dec 2025 16:58:54 +0100
Subject: [PATCH 3/5] :ok_hand: review feedback

---
 src/components/Accordion/MucAccordion.stories.ts | 2 +-
 src/components/Accordion/MucAccordion.vue        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Accordion/MucAccordion.stories.ts b/src/components/Accordion/MucAccordion.stories.ts
index 0f0c984a..b7072f0d 100644
--- a/src/components/Accordion/MucAccordion.stories.ts
+++ b/src/components/Accordion/MucAccordion.stories.ts
@@ -9,7 +9,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `The \`muc-accordion\` component offers the option of displaying content clearly in an accordion format. <br> A template with the following v-slot must be placed around the MucAccordionItems \`v-slot:default=“{onOpen, onClose, activeItems}”\`. <br> Each MucAccordionItem must be passed the following parameters with exactly this values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\` . <br> For exmaple:
+        component: `The \`muc-accordion\` component offers the option of displaying content clearly in an accordion format. <br> A template with the following v-slot must be placed around the MucAccordionItems \`v-slot:default=“{onOpen, onClose, activeItems}”\`. <br> Each MucAccordionItem must be passed the following parameters with exactly this values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\` . <br> For example:
         <template v-slot:default="{onOpen, onClose, activeItems}">
       <MucAccordionItem
           id="accordion-item-1"
diff --git a/src/components/Accordion/MucAccordion.vue b/src/components/Accordion/MucAccordion.vue
index ca738795..cf4f7f19 100644
--- a/src/components/Accordion/MucAccordion.vue
+++ b/src/components/Accordion/MucAccordion.vue
@@ -47,7 +47,7 @@ const {
    */
   multiple?: boolean;
   /**
-   * Id of default activ item
+   * Id of default active item
    */
   defaultItem?: string;
 }>();

From 673847bf5d791ecc61bf70e5727ffe702c91b095 Mon Sep 17 00:00:00 2001
From: lehju <122289623+lehju@users.noreply.github.com>
Date: Fri, 19 Dec 2025 12:14:00 +0100
Subject: [PATCH 4/5] Update src/components/Accordion/MucAccordion.stories.ts

Co-authored-by: Fabian Wilms <10800158+FabianWilms@users.noreply.github.com>
---
 src/components/Accordion/MucAccordion.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Accordion/MucAccordion.stories.ts b/src/components/Accordion/MucAccordion.stories.ts
index b7072f0d..9af45c8f 100644
--- a/src/components/Accordion/MucAccordion.stories.ts
+++ b/src/components/Accordion/MucAccordion.stories.ts
@@ -9,7 +9,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `The \`muc-accordion\` component offers the option of displaying content clearly in an accordion format. <br> A template with the following v-slot must be placed around the MucAccordionItems \`v-slot:default=“{onOpen, onClose, activeItems}”\`. <br> Each MucAccordionItem must be passed the following parameters with exactly this values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\` . <br> For example:
+        component: `The \`muc-accordion\` component offers the option of displaying content clearly in an accordion format. <br> A template with the following v-slot must be placed around the MucAccordionItems \`v-slot:default=“{onOpen, onClose, activeItems}”\`. <br> Each MucAccordionItem must be passed the following parameters with exactly these values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\` . <br> For example:
         <template v-slot:default="{onOpen, onClose, activeItems}">
       <MucAccordionItem
           id="accordion-item-1"

From 2fa828dd494eef306e956c20395092d504b281e9 Mon Sep 17 00:00:00 2001
From: lehju <julia.grasmeier@muenchen.de>
Date: Fri, 19 Dec 2025 14:46:32 +0100
Subject: [PATCH 5/5] :ok_hand: review feedback

---
 src/components/Accordion/MucAccordion.vue     |  7 ++-
 src/components/Accordion/MucAccordionItem.vue | 44 ++++++++++++-------
 2 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/Accordion/MucAccordion.vue b/src/components/Accordion/MucAccordion.vue
index cf4f7f19..c0d02c00 100644
--- a/src/components/Accordion/MucAccordion.vue
+++ b/src/components/Accordion/MucAccordion.vue
@@ -3,7 +3,10 @@
     <div class="container">
       <div class="m-component__grid">
         <div class="m-component__column">
-          <div class="m-component__head">
+          <div
+            v-if="header"
+            class="m-component__head"
+          >
             <h2 class="m-component__heading">{{ header }}</h2>
             <p class="m-component__summary"></p>
           </div>
@@ -41,7 +44,7 @@ const {
   /**
    * Heading of accordion
    */
-  header: string;
+  header?: string;
   /**
    * Multiple MucAccordionItems can be active at the same time
    */
diff --git a/src/components/Accordion/MucAccordionItem.vue b/src/components/Accordion/MucAccordionItem.vue
index bcde3ed7..11f46ae1 100644
--- a/src/components/Accordion/MucAccordionItem.vue
+++ b/src/components/Accordion/MucAccordionItem.vue
@@ -13,20 +13,15 @@
         :aria-controls="'content-' + id"
       >
         {{ header }}
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          class="icon"
-        >
-          <use
-            v-if="collapsed"
-            xlink:href="#icon-chevron-down"
-          ></use>
-          <use
-            v-else
-            xlink:href="#icon-chevron-up"
-          ></use>
-        </svg>
+
+        <muc-icon
+          v-if="collapsed"
+          icon="chevron-down"
+        />
+        <muc-icon
+          v-else
+          icon="chevron-up"
+        />
       </button>
     </h3>
     <section
@@ -52,6 +47,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
+import { MucIcon } from "../Icon";
+
 const { id, activeItems = [] } = defineProps<{
   /**
    * Id of accordion item.
@@ -107,7 +104,8 @@ watch(
   () => {
     if (!activeItems.includes(id) && !collapsed.value && section.value) {
       collapsed.value = true;
-      section.value.style.height = section.value.scrollHeight + "px";
+      section.value.style.height =
+        section.value.scrollHeight + calculateMargin() + "px";
       collapsing.value = true;
       setTimeout(() => {
         if (section.value) {
@@ -125,7 +123,8 @@ const toggleCollapsable = () => {
   if (section.value) {
     collapsed.value = !collapsed.value;
     if (collapsed.value) {
-      section.value.style.height = section.value.scrollHeight + "px";
+      section.value.style.height =
+        section.value.scrollHeight + calculateMargin() + "px";
       collapsing.value = true;
       emit("close", id);
       setTimeout(() => {
@@ -146,6 +145,19 @@ const toggleCollapsable = () => {
   }
 };
 
+/**
+ * Calculation of the margin of 1.5em to improve the animation
+ */
+const calculateMargin = () => {
+  if (section.value) {
+    const computedStyle = window.getComputedStyle(section.value);
+    const fontSize = parseFloat(computedStyle.fontSize);
+    return 1.5 * fontSize;
+  } else {
+    return 0;
+  }
+};
+
 /**
  * Handles the end of the collapsing transition.
  */