From 500698a83cfbb8d6b5aed561072ff08614e79b10 Mon Sep 17 00:00:00 2001
From: matthilo96 <matthias.lorenz@muenchen.de>
Date: Fri, 24 Oct 2025 17:42:22 +0200
Subject: [PATCH 1/8] Add new component MucSpinner

---
 src/components/Spinner/MucSpinner.stories.ts |  28 +++
 src/components/Spinner/MucSpinner.vue        | 214 +++++++++++++++++++
 src/components/Spinner/index.ts              |   3 +
 src/components/index.ts                      |   2 +
 4 files changed, 247 insertions(+)
 create mode 100644 src/components/Spinner/MucSpinner.stories.ts
 create mode 100644 src/components/Spinner/MucSpinner.vue
 create mode 100644 src/components/Spinner/index.ts

diff --git a/src/components/Spinner/MucSpinner.stories.ts b/src/components/Spinner/MucSpinner.stories.ts
new file mode 100644
index 00000000..d7259082
--- /dev/null
+++ b/src/components/Spinner/MucSpinner.stories.ts
@@ -0,0 +1,28 @@
+import MucSpinner from "./MucSpinner.vue";
+
+export default {
+  component: MucSpinner,
+  title: "MucSpinner",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-spinner\` is a spinner represents a loading progress.
+`,
+      },
+    },
+  },
+};
+
+export const Relative = {
+  args: {
+    size: "40%",
+    text: "Hier könnte ihr Text stehen",
+  },
+};
+
+export const Default = {
+  args: {
+    size: "300",
+  },
+};
diff --git a/src/components/Spinner/MucSpinner.vue b/src/components/Spinner/MucSpinner.vue
new file mode 100644
index 00000000..62eb6801
--- /dev/null
+++ b/src/components/Spinner/MucSpinner.vue
@@ -0,0 +1,214 @@
+<template>
+  <!-- Live region controls announcement; focus target when fading in -->
+  <div
+    ref="liveRegionEl"
+    role="status"
+    aria-live="polite"
+    aria-atomic="true"
+    tabindex="-1"
+  >
+    <span class="visually-hidden">{{ announcement }}</span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="size"
+      :height="size"
+      viewBox="-10 -10 220 220"
+      fill="none"
+      color="#005a9f"
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="spinner-firstHalf">
+          <stop
+            offset="0%"
+            stop-opacity="1"
+            stop-color="currentColor"
+          />
+          <stop
+            offset="100%"
+            stop-opacity="0.5"
+            stop-color="currentColor"
+          />
+        </linearGradient>
+        <linearGradient id="spinner-secondHalf">
+          <stop
+            offset="0%"
+            stop-opacity="0"
+            stop-color="currentColor"
+          />
+          <stop
+            offset="100%"
+            stop-opacity="0.5"
+            stop-color="currentColor"
+          />
+        </linearGradient>
+      </defs>
+
+      <g stroke-width="12">
+        <path
+          stroke="url(#spinner-firstHalf)"
+          d="M 4 100 A 96 96 0 0 1 196 100"
+        />
+        <path
+          stroke="url(#spinner-secondHalf)"
+          d="M 196 100 A 96 96 0 0 1 4 100"
+        />
+        <animateTransform
+          from="90 100 100"
+          to="450 100 100"
+          attributeName="transform"
+          type="rotate"
+          repeatCount="indefinite"
+          dur="2300ms"
+        />
+      </g>
+      <text
+        x="100"
+        y="108"
+        text-anchor="middle"
+        dominant-baseline="middle"
+        fill="#3a5368"
+        font-size="16"
+        font-weight="bold"
+      >
+        <tspan
+          v-for="(line, i) in lines"
+          :key="i"
+          x="100"
+          :dy="i === 0 ? `-${((lines.length - 1) / 2) * lineHeightEm}em` : `${lineHeightEm}em`"
+        >
+          {{ line }}
+        </tspan>
+      </text>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ComputedRef, onMounted, onUnmounted, ref, nextTick } from "vue";
+
+const { size = "300", text } = defineProps<{
+  /**
+   * Size of the spinner relative or absolute.
+   * Typical units for styling size are allowed.
+   */
+  size: string;
+  /**
+   * Any text in the center of the spinner.
+   * An empty value results in an empty string.
+   */
+  text?: string;
+}>();
+
+
+const MAX_TOTAL = 80;
+const MAX_PER_LINE = 14;
+const lineHeightEm = 1.2;
+
+/** Reduction to 80 characters */
+const displayText: ComputedRef<string> = computed(() => {
+  const raw = text ? String(text) : "";
+  if (raw.length <= MAX_TOTAL) return raw;
+  return raw.slice(0, MAX_TOTAL - 1) + "…"; // insgesamt 60 Zeichen
+});
+
+/** Break at spaces with fallback to hard break for long words */
+function wrapText(s: string, maxPerLine: number): string[] {
+  if (!s) return [];
+  const words = s.trim().split(/\s+/);
+  const out: string[] = [];
+  let line = "";
+
+  const flush = () => { if (line) { out.push(line); line = ""; } };
+
+  for (const w of words) {
+    if (w.length > maxPerLine) {
+      flush();
+      let i = 0;
+      while (i < w.length) {
+        out.push(w.slice(i, i + maxPerLine));
+        i += maxPerLine;
+      }
+    } else {
+      const candidate = line ? `${line} ${w}` : w;
+      if (candidate.length <= maxPerLine) {
+        line = candidate;
+      } else {
+        flush();
+        line = w;
+      }
+    }
+  }
+  flush();
+  return out;
+}
+
+const lines: ComputedRef<string[]> = computed(() => wrapText(displayText.value, MAX_PER_LINE));
+
+const liveRegionEl = ref<HTMLElement | null>(null);
+const announcement = ref<string>("");
+let previouslyFocusedEl: HTMLElement | null = null;
+let lastHeadingBefore: HTMLElement | null = null;
+
+function findNearestPrecedingHeading(anchor: HTMLElement | null): HTMLElement | null {
+  if (!anchor) return null;
+  const headings = Array.from(document.querySelectorAll<HTMLElement>("h1, h2, h3, h4, h5, h6"));
+  let candidate: HTMLElement | null = null;
+  for (const h of headings) {
+    const pos = h.compareDocumentPosition(anchor);
+    const isBefore = !!(pos & Node.DOCUMENT_POSITION_FOLLOWING);
+    if (isBefore) candidate = h;
+  }
+  return candidate;
+}
+
+function focusElement(el: HTMLElement | null) {
+  if (!el) return;
+  let addedTabindex = false;
+  if (!el.hasAttribute("tabindex")) {
+    el.setAttribute("tabindex", "-1");
+    addedTabindex = true;
+  }
+  el.focus({ preventScroll: false });
+  // Remove tabindex to not affect the tab order anymore
+  queueMicrotask(() => {
+    if (addedTabindex) el.removeAttribute("tabindex");
+  });
+}
+
+function announceNow() {
+  announcement.value = "";
+  void nextTick(() => {
+    announcement.value = displayText.value;
+  });
+}
+
+function restoreFocus() {
+  const target = lastHeadingBefore || previouslyFocusedEl;
+  focusElement(target || null);
+}
+
+onMounted(() => {
+  previouslyFocusedEl = document.activeElement as HTMLElement | null;
+  lastHeadingBefore = findNearestPrecedingHeading(liveRegionEl.value);
+  announceNow();
+});
+
+onUnmounted(() => {
+  restoreFocus();
+});
+</script>
+
+<style scoped>
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+</style>
diff --git a/src/components/Spinner/index.ts b/src/components/Spinner/index.ts
new file mode 100644
index 00000000..8ad8330e
--- /dev/null
+++ b/src/components/Spinner/index.ts
@@ -0,0 +1,3 @@
+import MucSpinner from "./MucSpinner.vue";
+
+export { MucSpinner };
diff --git a/src/components/index.ts b/src/components/index.ts
index 7a46fe24..3fe021d5 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -23,6 +23,7 @@ import { MucLink } from "./Link";
 import { MucModal } from "./Modal";
 import { MucPercentageSpinner } from "./PercentageSpinner";
 import { MucSlider, MucSliderItem } from "./Slider";
+import { MucSpinner } from "./Spinner";
 import { MucStepper } from "./Stepper";
 
 export {
@@ -49,6 +50,7 @@ export {
   MucFileDropzone,
   MucCounter,
   MucPercentageSpinner,
+  MucSpinner,
   MucStepper,
   MucCalendar,
   MucSlider,

From b5bdb051ff67817af7a4f274add7330ce2c15115 Mon Sep 17 00:00:00 2001
From: matthilo96 <matthias.lorenz@muenchen.de>
Date: Fri, 24 Oct 2025 17:44:15 +0200
Subject: [PATCH 2/8] code matting

---
 src/components/Spinner/MucSpinner.vue | 35 +++++++++++++++++++++------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/Spinner/MucSpinner.vue b/src/components/Spinner/MucSpinner.vue
index 62eb6801..2c3073bb 100644
--- a/src/components/Spinner/MucSpinner.vue
+++ b/src/components/Spinner/MucSpinner.vue
@@ -75,7 +75,11 @@
           v-for="(line, i) in lines"
           :key="i"
           x="100"
-          :dy="i === 0 ? `-${((lines.length - 1) / 2) * lineHeightEm}em` : `${lineHeightEm}em`"
+          :dy="
+            i === 0
+              ? `-${((lines.length - 1) / 2) * lineHeightEm}em`
+              : `${lineHeightEm}em`
+          "
         >
           {{ line }}
         </tspan>
@@ -85,7 +89,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ComputedRef, onMounted, onUnmounted, ref, nextTick } from "vue";
+import {
+  computed,
+  ComputedRef,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+} from "vue";
 
 const { size = "300", text } = defineProps<{
   /**
@@ -100,7 +111,6 @@ const { size = "300", text } = defineProps<{
   text?: string;
 }>();
 
-
 const MAX_TOTAL = 80;
 const MAX_PER_LINE = 14;
 const lineHeightEm = 1.2;
@@ -119,7 +129,12 @@ function wrapText(s: string, maxPerLine: number): string[] {
   const out: string[] = [];
   let line = "";
 
-  const flush = () => { if (line) { out.push(line); line = ""; } };
+  const flush = () => {
+    if (line) {
+      out.push(line);
+      line = "";
+    }
+  };
 
   for (const w of words) {
     if (w.length > maxPerLine) {
@@ -143,16 +158,22 @@ function wrapText(s: string, maxPerLine: number): string[] {
   return out;
 }
 
-const lines: ComputedRef<string[]> = computed(() => wrapText(displayText.value, MAX_PER_LINE));
+const lines: ComputedRef<string[]> = computed(() =>
+  wrapText(displayText.value, MAX_PER_LINE)
+);
 
 const liveRegionEl = ref<HTMLElement | null>(null);
 const announcement = ref<string>("");
 let previouslyFocusedEl: HTMLElement | null = null;
 let lastHeadingBefore: HTMLElement | null = null;
 
-function findNearestPrecedingHeading(anchor: HTMLElement | null): HTMLElement | null {
+function findNearestPrecedingHeading(
+  anchor: HTMLElement | null
+): HTMLElement | null {
   if (!anchor) return null;
-  const headings = Array.from(document.querySelectorAll<HTMLElement>("h1, h2, h3, h4, h5, h6"));
+  const headings = Array.from(
+    document.querySelectorAll<HTMLElement>("h1, h2, h3, h4, h5, h6")
+  );
   let candidate: HTMLElement | null = null;
   for (const h of headings) {
     const pos = h.compareDocumentPosition(anchor);

From 9de843c1df1c75b61512692c058e84ec5c558655 Mon Sep 17 00:00:00 2001
From: matthilo96 <matthias.lorenz@muenchen.de>
Date: Fri, 24 Oct 2025 17:55:46 +0200
Subject: [PATCH 3/8] remove commentar

---
 src/components/Spinner/MucSpinner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Spinner/MucSpinner.vue b/src/components/Spinner/MucSpinner.vue
index 2c3073bb..e977ab6c 100644
--- a/src/components/Spinner/MucSpinner.vue
+++ b/src/components/Spinner/MucSpinner.vue
@@ -119,7 +119,7 @@ const lineHeightEm = 1.2;
 const displayText: ComputedRef<string> = computed(() => {
   const raw = text ? String(text) : "";
   if (raw.length <= MAX_TOTAL) return raw;
-  return raw.slice(0, MAX_TOTAL - 1) + "…"; // insgesamt 60 Zeichen
+  return raw.slice(0, MAX_TOTAL - 1) + "…";
 });
 
 /** Break at spaces with fallback to hard break for long words */

From 9e47331f40fc19f840b4759bf717ae13dd110f1a Mon Sep 17 00:00:00 2001
From: matthilo96 <matthias.lorenz@muenchen.de>
Date: Mon, 27 Oct 2025 10:11:08 +0100
Subject: [PATCH 4/8] Grammar correction

---
 src/components/Spinner/MucSpinner.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Spinner/MucSpinner.stories.ts b/src/components/Spinner/MucSpinner.stories.ts
index d7259082..aa29c24d 100644
--- a/src/components/Spinner/MucSpinner.stories.ts
+++ b/src/components/Spinner/MucSpinner.stories.ts
@@ -17,7 +17,7 @@ export default {
 export const Relative = {
   args: {
     size: "40%",
-    text: "Hier könnte ihr Text stehen",
+    text: "Hier könnte Ihr Text stehen ...",
   },
 };
 

From 7b6a7581de70970829c4dfd4fe8620aaaa53a2db Mon Sep 17 00:00:00 2001
From: matthilo96 <matthias.lorenz@muenchen.de>
Date: Tue, 28 Oct 2025 17:14:10 +0100
Subject: [PATCH 5/8] remove screenreader announcement

---
 src/components/Spinner/MucSpinner.vue | 232 ++++++++------------------
 1 file changed, 72 insertions(+), 160 deletions(-)

diff --git a/src/components/Spinner/MucSpinner.vue b/src/components/Spinner/MucSpinner.vue
index e977ab6c..37b2317a 100644
--- a/src/components/Spinner/MucSpinner.vue
+++ b/src/components/Spinner/MucSpinner.vue
@@ -1,102 +1,85 @@
 <template>
-  <!-- Live region controls announcement; focus target when fading in -->
-  <div
-    ref="liveRegionEl"
-    role="status"
-    aria-live="polite"
-    aria-atomic="true"
-    tabindex="-1"
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="-10 -10 220 220"
+    fill="none"
+    color="#005a9f"
+    aria-hidden="true"
   >
-    <span class="visually-hidden">{{ announcement }}</span>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      :width="size"
-      :height="size"
-      viewBox="-10 -10 220 220"
-      fill="none"
-      color="#005a9f"
-      aria-hidden="true"
-    >
-      <defs>
-        <linearGradient id="spinner-firstHalf">
-          <stop
-            offset="0%"
-            stop-opacity="1"
-            stop-color="currentColor"
-          />
-          <stop
-            offset="100%"
-            stop-opacity="0.5"
-            stop-color="currentColor"
-          />
-        </linearGradient>
-        <linearGradient id="spinner-secondHalf">
-          <stop
-            offset="0%"
-            stop-opacity="0"
-            stop-color="currentColor"
-          />
-          <stop
-            offset="100%"
-            stop-opacity="0.5"
-            stop-color="currentColor"
-          />
-        </linearGradient>
-      </defs>
-
-      <g stroke-width="12">
-        <path
-          stroke="url(#spinner-firstHalf)"
-          d="M 4 100 A 96 96 0 0 1 196 100"
+    <defs>
+      <linearGradient id="spinner-firstHalf">
+        <stop
+          offset="0%"
+          stop-opacity="1"
+          stop-color="currentColor"
+        />
+        <stop
+          offset="100%"
+          stop-opacity="0.5"
+          stop-color="currentColor"
         />
-        <path
-          stroke="url(#spinner-secondHalf)"
-          d="M 196 100 A 96 96 0 0 1 4 100"
+      </linearGradient>
+      <linearGradient id="spinner-secondHalf">
+        <stop
+          offset="0%"
+          stop-opacity="0"
+          stop-color="currentColor"
         />
-        <animateTransform
-          from="90 100 100"
-          to="450 100 100"
-          attributeName="transform"
-          type="rotate"
-          repeatCount="indefinite"
-          dur="2300ms"
+        <stop
+          offset="100%"
+          stop-opacity="0.5"
+          stop-color="currentColor"
         />
-      </g>
-      <text
+      </linearGradient>
+    </defs>
+
+    <g stroke-width="12">
+      <path
+        stroke="url(#spinner-firstHalf)"
+        d="M 4 100 A 96 96 0 0 1 196 100"
+      />
+      <path
+        stroke="url(#spinner-secondHalf)"
+        d="M 196 100 A 96 96 0 0 1 4 100"
+      />
+      <animateTransform
+        from="90 100 100"
+        to="450 100 100"
+        attributeName="transform"
+        type="rotate"
+        repeatCount="indefinite"
+        dur="2300ms"
+      />
+    </g>
+    <text
+      x="100"
+      y="108"
+      text-anchor="middle"
+      dominant-baseline="middle"
+      fill="#3a5368"
+      font-size="16"
+      font-weight="bold"
+    >
+      <tspan
+        v-for="(line, i) in lines"
+        :key="i"
         x="100"
-        y="108"
-        text-anchor="middle"
-        dominant-baseline="middle"
-        fill="#3a5368"
-        font-size="16"
-        font-weight="bold"
+        :dy="
+          i === 0
+            ? `-${((lines.length - 1) / 2) * lineHeightEm}em`
+            : `${lineHeightEm}em`
+        "
       >
-        <tspan
-          v-for="(line, i) in lines"
-          :key="i"
-          x="100"
-          :dy="
-            i === 0
-              ? `-${((lines.length - 1) / 2) * lineHeightEm}em`
-              : `${lineHeightEm}em`
-          "
-        >
-          {{ line }}
-        </tspan>
-      </text>
-    </svg>
-  </div>
+        {{ line }}
+      </tspan>
+    </text>
+  </svg>
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  ComputedRef,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  ref,
-} from "vue";
+import { computed, ComputedRef } from "vue";
 
 const { size = "300", text } = defineProps<{
   /**
@@ -161,75 +144,4 @@ function wrapText(s: string, maxPerLine: number): string[] {
 const lines: ComputedRef<string[]> = computed(() =>
   wrapText(displayText.value, MAX_PER_LINE)
 );
-
-const liveRegionEl = ref<HTMLElement | null>(null);
-const announcement = ref<string>("");
-let previouslyFocusedEl: HTMLElement | null = null;
-let lastHeadingBefore: HTMLElement | null = null;
-
-function findNearestPrecedingHeading(
-  anchor: HTMLElement | null
-): HTMLElement | null {
-  if (!anchor) return null;
-  const headings = Array.from(
-    document.querySelectorAll<HTMLElement>("h1, h2, h3, h4, h5, h6")
-  );
-  let candidate: HTMLElement | null = null;
-  for (const h of headings) {
-    const pos = h.compareDocumentPosition(anchor);
-    const isBefore = !!(pos & Node.DOCUMENT_POSITION_FOLLOWING);
-    if (isBefore) candidate = h;
-  }
-  return candidate;
-}
-
-function focusElement(el: HTMLElement | null) {
-  if (!el) return;
-  let addedTabindex = false;
-  if (!el.hasAttribute("tabindex")) {
-    el.setAttribute("tabindex", "-1");
-    addedTabindex = true;
-  }
-  el.focus({ preventScroll: false });
-  // Remove tabindex to not affect the tab order anymore
-  queueMicrotask(() => {
-    if (addedTabindex) el.removeAttribute("tabindex");
-  });
-}
-
-function announceNow() {
-  announcement.value = "";
-  void nextTick(() => {
-    announcement.value = displayText.value;
-  });
-}
-
-function restoreFocus() {
-  const target = lastHeadingBefore || previouslyFocusedEl;
-  focusElement(target || null);
-}
-
-onMounted(() => {
-  previouslyFocusedEl = document.activeElement as HTMLElement | null;
-  lastHeadingBefore = findNearestPrecedingHeading(liveRegionEl.value);
-  announceNow();
-});
-
-onUnmounted(() => {
-  restoreFocus();
-});
 </script>
-
-<style scoped>
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-</style>

From b0ba0a5f50b0d9b46ccfda85be2dad8018e9bede Mon Sep 17 00:00:00 2001
From: matthilo96 <matthias.lorenz@muenchen.de>
Date: Mon, 10 Nov 2025 11:52:58 +0100
Subject: [PATCH 6/8] merge Spinner and PercentageSpinner

---
 .../MucPercentageSpinner.stories.ts           | 28 ------
 .../MucPercentageSpinner.vue                  | 98 -------------------
 src/components/PercentageSpinner/index.ts     |  4 +-
 src/components/Spinner/MucSpinner.stories.ts  | 33 +++++--
 src/components/Spinner/MucSpinner.vue         | 60 +++++++++++-
 5 files changed, 85 insertions(+), 138 deletions(-)
 delete mode 100644 src/components/PercentageSpinner/MucPercentageSpinner.stories.ts
 delete mode 100644 src/components/PercentageSpinner/MucPercentageSpinner.vue

diff --git a/src/components/PercentageSpinner/MucPercentageSpinner.stories.ts b/src/components/PercentageSpinner/MucPercentageSpinner.stories.ts
deleted file mode 100644
index 78f49383..00000000
--- a/src/components/PercentageSpinner/MucPercentageSpinner.stories.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import MucPercentageSpinner from "./MucPercentageSpinner.vue";
-
-export default {
-  component: MucPercentageSpinner,
-  title: "MucPercentageSpinner",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `The \`muc-percentage-spinner\` is a spinner represents a loading progress.
-`,
-      },
-    },
-  },
-};
-
-export const Relative = {
-  args: {
-    size: "40%",
-    percentage: 42,
-  },
-};
-
-export const Default = {
-  args: {
-    size: "300",
-  },
-};
diff --git a/src/components/PercentageSpinner/MucPercentageSpinner.vue b/src/components/PercentageSpinner/MucPercentageSpinner.vue
deleted file mode 100644
index 877c1b62..00000000
--- a/src/components/PercentageSpinner/MucPercentageSpinner.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :width="size"
-    :height="size"
-    viewBox="-10 -10 220 220"
-    fill="none"
-    color="#005a9f"
-  >
-    <defs>
-      <linearGradient id="spinner-firstHalf">
-        <stop
-          offset="0%"
-          stop-opacity="1"
-          stop-color="currentColor"
-        />
-        <stop
-          offset="100%"
-          stop-opacity="0.5"
-          stop-color="currentColor"
-        />
-      </linearGradient>
-      <linearGradient id="spinner-secondHalf">
-        <stop
-          offset="0%"
-          stop-opacity="0"
-          stop-color="currentColor"
-        />
-        <stop
-          offset="100%"
-          stop-opacity="0.5"
-          stop-color="currentColor"
-        />
-      </linearGradient>
-    </defs>
-
-    <g stroke-width="12">
-      <path
-        stroke="url(#spinner-firstHalf)"
-        d="M 4 100 A 96 96 0 0 1 196 100"
-      />
-      <path
-        stroke="url(#spinner-secondHalf)"
-        d="M 196 100 A 96 96 0 0 1 4 100"
-      />
-      <animateTransform
-        from="90 100 100"
-        to="450 100 100"
-        attributeName="transform"
-        type="rotate"
-        repeatCount="indefinite"
-        dur="2300ms"
-      />
-    </g>
-    <text
-      x="100"
-      y="108"
-      text-anchor="middle"
-      fill="#3a5368"
-      font-size="24"
-      font-weight="bold"
-    >
-      {{ validPercentage }}
-    </text>
-  </svg>
-</template>
-
-<script setup lang="ts">
-import { computed, ComputedRef } from "vue";
-
-const { size = "300", percentage } = defineProps<{
-  /**
-   * Size of the spinner relative or absolute.
-   * Typical units for styling size are allowed.
-   */
-  size: string;
-  /**
-   * Number that represents the progress.
-   * Numbers lower than 0 result in '0%'.
-   * Numbers greater than 100 result in '100%'.
-   * An empty value results in an empty string.
-   */
-  percentage?: number;
-}>();
-
-/**
- * Ensures that the progress indication is within the reasonable range between 0 and 100 percent.
- * An empty property 'percentage' results in an empty string.
- */
-const validPercentage: ComputedRef<string> = computed(() => {
-  if (percentage || percentage === 0) {
-    if (percentage < 0) return 0 + "%";
-    if (percentage > 100) return 100 + "%";
-    return Math.round(percentage) + "%";
-  }
-  return "";
-});
-</script>
diff --git a/src/components/PercentageSpinner/index.ts b/src/components/PercentageSpinner/index.ts
index 02afd450..01886421 100644
--- a/src/components/PercentageSpinner/index.ts
+++ b/src/components/PercentageSpinner/index.ts
@@ -1,3 +1 @@
-import MucPercentageSpinner from "./MucPercentageSpinner.vue";
-
-export { MucPercentageSpinner };
+export { MucSpinner as MucPercentageSpinner } from "../Spinner";
diff --git a/src/components/Spinner/MucSpinner.stories.ts b/src/components/Spinner/MucSpinner.stories.ts
index aa29c24d..f52b6ae3 100644
--- a/src/components/Spinner/MucSpinner.stories.ts
+++ b/src/components/Spinner/MucSpinner.stories.ts
@@ -8,21 +8,40 @@ export default {
     docs: {
       description: {
         component: `The \`muc-spinner\` is a spinner represents a loading progress.
-`,
+        `,
       },
     },
   },
 };
 
-export const Relative = {
+export const Default = {
   args: {
     size: "40%",
+    percentage: 42,
     text: "Hier könnte Ihr Text stehen ...",
   },
-};
+  render: (args: any) => ({
+    components: { MucSpinner },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display:flex; flex-direction:column; gap:24px;">
+        <section>
+          <h3>Percentage</h3>
+          <MucSpinner :size="args.size" :percentage="args.percentage" />
+        </section>
 
-export const Default = {
-  args: {
-    size: "300",
-  },
+        <section>
+          <h3>Text</h3>
+          <MucSpinner :size="args.size" :text="args.text" />
+        </section>
+
+        <section>
+          <h3>Default</h3>
+          <MucSpinner :size="args.size" />
+        </section>
+      </div>
+    `,
+  }),
 };
diff --git a/src/components/Spinner/MucSpinner.vue b/src/components/Spinner/MucSpinner.vue
index 37b2317a..43429225 100644
--- a/src/components/Spinner/MucSpinner.vue
+++ b/src/components/Spinner/MucSpinner.vue
@@ -54,6 +54,19 @@
       />
     </g>
     <text
+      v-if="hasPercentage && !hasText"
+      x="100"
+      y="108"
+      text-anchor="middle"
+      fill="#3a5368"
+      font-size="24"
+      font-weight="bold"
+    >
+      {{ validPercentage }}
+    </text>
+
+    <text
+      v-else-if="hasText && !hasPercentage"
       x="100"
       y="108"
       text-anchor="middle"
@@ -81,12 +94,23 @@
 <script setup lang="ts">
 import { computed, ComputedRef } from "vue";
 
-const { size = "300", text } = defineProps<{
+const {
+  size = "300",
+  percentage,
+  text,
+} = defineProps<{
   /**
    * Size of the spinner relative or absolute.
    * Typical units for styling size are allowed.
    */
   size: string;
+  /**
+   * Number that represents the progress.
+   * Numbers lower than 0 result in '0%'.
+   * Numbers greater than 100 result in '100%'.
+   * An empty value results in an empty string.
+   */
+  percentage?: number;
   /**
    * Any text in the center of the spinner.
    * An empty value results in an empty string.
@@ -94,13 +118,45 @@ const { size = "300", text } = defineProps<{
   text?: string;
 }>();
 
+const hasText = typeof text === "string" && text.trim().length > 0;
+const hasPercentage = percentage || percentage === 0;
+
+/** Runtime protection against simultaneous use */
+if (hasText && hasPercentage) {
+  const msg =
+    "MucSpinner: Die Props 'text' und 'percentage' dürfen nicht gleichzeitig verwendet werden.";
+  if (
+    typeof import.meta !== "undefined" &&
+    import.meta.env &&
+    import.meta.env.MODE !== "production"
+  ) {
+    throw new Error(msg);
+  } else {
+    // eslint-disable-next-line no-console
+    console.error(msg);
+  }
+}
+
+/**
+ * Ensures that the progress indication is within the reasonable range between 0 and 100 percent.
+ * An empty property 'percentage' results in an empty string.
+ */
+const validPercentage: ComputedRef<string> = computed(() => {
+  if (percentage || percentage === 0) {
+    if (percentage < 0) return 0 + "%";
+    if (percentage > 100) return 100 + "%";
+    return Math.round(percentage) + "%";
+  }
+  return "";
+});
+
 const MAX_TOTAL = 80;
 const MAX_PER_LINE = 14;
 const lineHeightEm = 1.2;
 
 /** Reduction to 80 characters */
 const displayText: ComputedRef<string> = computed(() => {
-  const raw = text ? String(text) : "";
+  const raw = hasText ? String(text) : "";
   if (raw.length <= MAX_TOTAL) return raw;
   return raw.slice(0, MAX_TOTAL - 1) + "…";
 });

From 587cd16a2da95d721bce9d9c1cb13f509dbfd3de Mon Sep 17 00:00:00 2001
From: matthilo96 <matthias.lorenz@muenchen.de>
Date: Mon, 10 Nov 2025 14:14:29 +0100
Subject: [PATCH 7/8] fix lint error

---
 src/components/Spinner/MucSpinner.stories.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Spinner/MucSpinner.stories.ts b/src/components/Spinner/MucSpinner.stories.ts
index f52b6ae3..1f3ef50e 100644
--- a/src/components/Spinner/MucSpinner.stories.ts
+++ b/src/components/Spinner/MucSpinner.stories.ts
@@ -1,5 +1,11 @@
 import MucSpinner from "./MucSpinner.vue";
 
+type SpinnerArgs = {
+  size?: string;
+  text?: string;
+  percentage?: number;
+};
+
 export default {
   component: MucSpinner,
   title: "MucSpinner",
@@ -7,8 +13,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `The \`muc-spinner\` is a spinner represents a loading progress.
-        `,
+        component: `The \`muc-spinner\` is a spinner represents a loading progress.`,
       },
     },
   },
@@ -20,7 +25,7 @@ export const Default = {
     percentage: 42,
     text: "Hier könnte Ihr Text stehen ...",
   },
-  render: (args: any) => ({
+  render: (args: SpinnerArgs) => ({
     components: { MucSpinner },
     setup() {
       return { args };

From 9984a60b93d66d37d0fe596a638f0d54c90f2b3f Mon Sep 17 00:00:00 2001
From: matthilo96 <matthias.lorenz@muenchen.de>
Date: Mon, 10 Nov 2025 14:25:04 +0100
Subject: [PATCH 8/8] change type zo interface

---
 src/components/Spinner/MucSpinner.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Spinner/MucSpinner.stories.ts b/src/components/Spinner/MucSpinner.stories.ts
index 1f3ef50e..6a8de068 100644
--- a/src/components/Spinner/MucSpinner.stories.ts
+++ b/src/components/Spinner/MucSpinner.stories.ts
@@ -1,10 +1,10 @@
 import MucSpinner from "./MucSpinner.vue";
 
-type SpinnerArgs = {
+interface SpinnerArgs {
   size?: string;
   text?: string;
   percentage?: number;
-};
+}
 
 export default {
   component: MucSpinner,