From 25e5ea12a23951fc4779b2d720cf6066f3639913 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Fri, 15 Nov 2024 07:51:48 +0100
Subject: [PATCH 01/53] add toggle to popover

---
 .../mt-bare-popover/mt-bare-popover.spec.ts   | 104 ++++++++++++++++++
 .../mt-bare-popover.stories.ts                |  26 +++++
 .../mt-bare-popover/mt-bare-popover.vue       |  13 +++
 3 files changed, 143 insertions(+)
 create mode 100644 packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
 create mode 100644 packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts
 create mode 100644 packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue

diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
new file mode 100644
index 000000000..251406c70
--- /dev/null
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
@@ -0,0 +1,104 @@
+import { userEvent } from "@storybook/test";
+import { screen, render } from "@testing-library/vue";
+import MtBarePopover from "./mt-bare-popover.vue";
+
+describe("mt-bare-popover", () => {
+  it("does not show the popover by default", () => {
+    // ARRANGE
+    render({
+      components: { MtBarePopover },
+      template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default>
+            <div>Content</div>
+          </template>
+        </mt-bare-popover>
+      `,
+    });
+
+    // ASSERT
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("shows the popover when the trigger is clicked", async () => {
+    // ARRANGE
+    render({
+      components: { MtBarePopover },
+      template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default>
+            <div>Content</div>
+          </template>
+        </mt-bare-popover>
+      `,
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("button"));
+
+    // ASSERT
+    expect(screen.getByRole("dialog")).toBeVisible();
+  });
+
+  it("hides the popover when the trigger is clicked again", async () => {
+    // ARRANGE
+    render({
+      components: { MtBarePopover },
+      template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default>
+            <div>Content</div>
+          </template>
+        </mt-bare-popover>
+      `,
+    });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    // ACT
+    await userEvent.click(screen.getByRole("button"));
+
+    // ASSERT
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it.each(["{Enter}", " "])(
+    'opens the popover when pressing "%s" on the trigger',
+    async (keyCode) => {
+      // ARRANGE
+      render({
+        components: { MtBarePopover },
+        template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default>
+            <div>Content</div>
+          </template>
+        </mt-bare-popover>
+      `,
+      });
+
+      // ACT
+      await userEvent.tab();
+      await userEvent.keyboard(keyCode);
+
+      // ASSERT
+      expect(screen.getByRole("dialog")).toBeVisible();
+    },
+  );
+});
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts
new file mode 100644
index 000000000..ae16ad840
--- /dev/null
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts
@@ -0,0 +1,26 @@
+import type { SlottedMeta } from "@/_internal/story-helper";
+import MtBarePopover from "./mt-bare-popover.vue";
+import MtButton from "../../form/mt-button/mt-button.vue";
+
+export type MtBarePopoverMeta = SlottedMeta<typeof MtBarePopover, "default" | "trigger">;
+
+export default {
+  title: "Components/Overlay/mt-bare-popover",
+  render: (args) => ({
+    setup: () => args,
+    components: { MtBarePopover, MtButton },
+    template: `
+<mt-bare-popover>
+    <template #trigger="params">
+        <mt-button variant="secondary" v-bind="params">Open popover</mt-button>
+    </template>
+
+    <template #default>
+        <div>Content</div>
+    </template>
+</mt-bare-popover>
+`,
+  }),
+} satisfies MtBarePopoverMeta;
+
+export const Default = {};
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
new file mode 100644
index 000000000..f5043701f
--- /dev/null
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
@@ -0,0 +1,13 @@
+<template>
+  <slot name="trigger" v-bind="{ onClick: () => (show = !show) }" />
+
+  <div v-if="show" role="dialog">
+    <slot name="default" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const show = ref(false);
+</script>

From 3e129eb7cff437a1b0abc4042bd3bf08e5f81835 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Fri, 15 Nov 2024 09:15:53 +0100
Subject: [PATCH 02/53] wip

---
 .../mt-bare-popover/mt-bare-popover.spec.ts   |  58 +++++
 .../mt-bare-popover.stories.ts                |  11 +-
 .../mt-bare-popover/mt-bare-popover.vue       | 112 ++++++++-
 .../sub-components/mt-bare-popover-item.vue   |   7 +
 pnpm-lock.yaml                                | 223 ++++++------------
 5 files changed, 253 insertions(+), 158 deletions(-)
 create mode 100644 packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue

diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
index 251406c70..d9175af3c 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
@@ -1,6 +1,7 @@
 import { userEvent } from "@storybook/test";
 import { screen, render } from "@testing-library/vue";
 import MtBarePopover from "./mt-bare-popover.vue";
+import { flushPromises } from "@vue/test-utils";
 
 describe("mt-bare-popover", () => {
   it("does not show the popover by default", () => {
@@ -101,4 +102,61 @@ describe("mt-bare-popover", () => {
       expect(screen.getByRole("dialog")).toBeVisible();
     },
   );
+
+  it("closes the popover when clicking outside of it", async () => {
+    // ARRANGE
+    render({
+      components: { MtBarePopover },
+      template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default>
+            <div>Content</div>
+          </template>
+        </mt-bare-popover>
+
+        <div data-testid="element-outside-of-popover"></div>
+      `,
+    });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    // ACT
+    await userEvent.click(screen.getByTestId("element-outside-of-popover"));
+
+    // ASSERT
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("closes the popover when pressing the Escape key", async () => {
+    // ARRANGE
+    render({
+      components: { MtBarePopover },
+      template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default>
+            <div>Content</div>
+          </template>
+        </mt-bare-popover>
+      `,
+    });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    // ACT
+    await userEvent.keyboard("{Escape}");
+
+    // ASSERT
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(document.activeElement?.getAttribute("id")).toBe(
+      screen.getByRole("button").getAttribute("id"),
+    );
+  });
 });
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts
index ae16ad840..95856f05f 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts
@@ -1,6 +1,8 @@
 import type { SlottedMeta } from "@/_internal/story-helper";
 import MtBarePopover from "./mt-bare-popover.vue";
 import MtButton from "../../form/mt-button/mt-button.vue";
+import MtBarePopoverItem from "./sub-components/mt-bare-popover-item.vue";
+import { userEvent, within } from "@storybook/test";
 
 export type MtBarePopoverMeta = SlottedMeta<typeof MtBarePopover, "default" | "trigger">;
 
@@ -8,7 +10,7 @@ export default {
   title: "Components/Overlay/mt-bare-popover",
   render: (args) => ({
     setup: () => args,
-    components: { MtBarePopover, MtButton },
+    components: { MtBarePopover, MtButton, MtBarePopoverItem },
     template: `
 <mt-bare-popover>
     <template #trigger="params">
@@ -16,11 +18,16 @@ export default {
     </template>
 
     <template #default>
-        <div>Content</div>
+        <mt-bare-popover-item />
     </template>
 </mt-bare-popover>
 `,
   }),
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByRole("button", { name: "Open popover" }));
+  },
 } satisfies MtBarePopoverMeta;
 
 export const Default = {};
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
index f5043701f..5046964d3 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
@@ -1,13 +1,115 @@
 <template>
-  <slot name="trigger" v-bind="{ onClick: () => (show = !show) }" />
+  <slot
+    name="trigger"
+    v-bind="{
+      onClick: toggleDialog,
+      id: `mt-popover__trigger--${id}`,
+      'aria-haspopup': 'dialog',
+    }"
+  />
 
-  <div v-if="show" role="dialog">
-    <slot name="default" />
+  <div
+    v-if="isVisible"
+    role="dialog"
+    class="mt-bare-popover__dialog"
+    ref="dialogRef"
+    tabindex="-1"
+    :style="floatingStyles"
+  >
+    <mt-text as="h4" size="s" weight="semibold" class="mt-bare-popover__title">Title</mt-text>
+
+    <ul class="mt-bare-popover__list">
+      <slot name="default" />
+    </ul>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { nextTick, onMounted, ref } from "vue";
+import MtText from "@/components/content/mt-text/mt-text.vue";
+import { flip, offset, shift, useFloating } from "@floating-ui/vue";
+import { createId } from "@/utils/id";
+import { onClickOutside, useEventListener } from "@vueuse/core";
+
+const triggerRef = ref<HTMLElement | null>(null);
+const dialogRef = ref<HTMLElement | null>(null);
+const { floatingStyles } = useFloating(triggerRef, dialogRef, {
+  middleware: [offset(8), flip(), shift()],
+  placement: "bottom-start",
+});
+
+const isVisible = ref(false);
+
+function toggleDialog() {
+  if (isVisible.value) {
+    isVisible.value = false;
+    return;
+  }
+
+  isVisible.value = true;
+  nextTick(() => {
+    dialogRef.value?.focus();
+  });
+}
+
+const id = ref("");
+onMounted(() => {
+  id.value = createId();
+
+  nextTick(() => {
+    const trigger = document.querySelector<HTMLElement>(`#mt-popover__trigger--${id.value}`);
+    if (!trigger)
+      throw new Error(
+        "Failed to render mt-popover; Trigger not found, please make sure the trigger is rendered.",
+      );
+
+    triggerRef.value = trigger;
+  });
+});
+
+onClickOutside(dialogRef, (event) => {
+  const clickedOnTrigger = (event.target as HTMLElement | null)?.closest(
+    `#mt-popover__trigger--${id.value}`,
+  );
 
-const show = ref(false);
+  if (clickedOnTrigger) return;
+
+  isVisible.value = false;
+});
+
+// needs to be in onMounted to avoid SSR issues
+onMounted(() => {
+  useEventListener(dialogRef, "keydown", (event) => {
+    if (!(event instanceof KeyboardEvent)) return;
+
+    const pressedEscape = event.key === "Escape";
+    if (pressedEscape) isVisible.value = false;
+
+    if (triggerRef.value) triggerRef.value.focus();
+  });
+});
 </script>
+
+<style scoped>
+.mt-bare-popover__dialog {
+  padding: 1rem;
+  box-shadow:
+    0px 1px 1px 0px rgba(0, 0, 0, 0.08),
+    0px 2px 1px 0px rgba(0, 0, 0, 0.06),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-overlay);
+  width: max-content;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-border-brand-selected);
+  }
+}
+
+.mt-bare-popover__title {
+  margin-block-end: 0;
+}
+
+.mt-bare-popover__list {
+  list-style: none;
+}
+</style>
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue b/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
new file mode 100644
index 000000000..bc8638c35
--- /dev/null
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
@@ -0,0 +1,7 @@
+<template>
+  <li>item</li>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a247f3ec4..312cd4b1b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -136,10 +136,10 @@ importers:
         version: 0.14.1
       vue:
         specifier: ^3.5.0
-        version: 3.5.0(typescript@5.6.2)
+        version: 3.5.13(typescript@5.6.2)
       vue-router:
         specifier: 4.4.5
-        version: 4.4.5(vue@3.5.0(typescript@5.6.2))
+        version: 4.4.5(vue@3.5.13(typescript@5.6.2))
     devDependencies:
       typescript:
         specifier: ^5.6.2
@@ -180,13 +180,13 @@ importers:
         version: link:../../packages/component-library
       nuxt:
         specifier: ^3.10.3
-        version: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
+        version: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
       vue:
         specifier: ^3.5.0
-        version: 3.5.0(typescript@5.6.2)
+        version: 3.5.13(typescript@5.6.2)
       vue-router:
         specifier: ^4.3.0
-        version: 4.3.3(vue@3.5.0(typescript@5.6.2))
+        version: 4.3.3(vue@3.5.13(typescript@5.6.2))
     devDependencies:
       '@playwright/test':
         specifier: ^1.45.0
@@ -4303,14 +4303,11 @@ packages:
   '@vue/compiler-core@3.4.29':
     resolution: {integrity: sha512-TFKiRkKKsRCKvg/jTSSKK7mYLJEQdUiUfykbG49rubC9SfDyvT2JrzTReopWlz2MxqeLyxh9UZhvxEIBgAhtrg==}
 
-  '@vue/compiler-core@3.5.0':
-    resolution: {integrity: sha512-ja7cpqAOfw4tyFAxgBz70Z42miNDeaqTxExTsnXDLomRpqfyCgyvZvFp482fmsElpfvsoMJUsvzULhvxUTW6Iw==}
-
   '@vue/compiler-core@3.5.13':
     resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
 
-  '@vue/compiler-dom@3.5.0':
-    resolution: {integrity: sha512-xYjUybWZXl+1R/toDy815i4PbeehL2hThiSGkcpmIOCy2HoYyeeC/gAWK/Y/xsoK+GSw198/T5O31bYuQx5uvQ==}
+  '@vue/compiler-dom@3.4.29':
+    resolution: {integrity: sha512-A6+iZ2fKIEGnfPJejdB7b1FlJzgiD+Y/sxxKwJWg1EbJu6ZPgzaPQQ51ESGNv0CP6jm6Z7/pO6Ia8Ze6IKrX7w==}
 
   '@vue/compiler-dom@3.5.13':
     resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
@@ -4318,14 +4315,14 @@ packages:
   '@vue/compiler-sfc@2.7.16':
     resolution: {integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==}
 
-  '@vue/compiler-sfc@3.5.0':
-    resolution: {integrity: sha512-B9DgLtrqok2GLuaFjLlSL15ZG3ZDBiitUH1ecex9guh/ZcA5MCdwuVE6nsfQxktuZY/QY0awJ35/ripIviCQTQ==}
+  '@vue/compiler-sfc@3.4.29':
+    resolution: {integrity: sha512-zygDcEtn8ZimDlrEQyLUovoWgKQic6aEQqRXce2WXBvSeHbEbcAsXyCk9oG33ZkyWH4sl9D3tkYc1idoOkdqZQ==}
 
   '@vue/compiler-sfc@3.5.13':
     resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
 
-  '@vue/compiler-ssr@3.5.0':
-    resolution: {integrity: sha512-E263QZmA1dqRd7c3u/sWTLRMpQOT0aZ8av/L9SoD/v/BVMZaWFHPUUBswS+bzrfvG2suJF8vSLKx6k6ba5SUdA==}
+  '@vue/compiler-ssr@3.4.29':
+    resolution: {integrity: sha512-rFbwCmxJ16tDp3N8XCx5xSQzjhidYjXllvEcqX/lopkoznlNPz3jyy0WGJCyhAaVQK677WWFt3YO/WUEkMMUFQ==}
 
   '@vue/compiler-ssr@3.5.13':
     resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
@@ -4387,29 +4384,15 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity@3.5.0':
-    resolution: {integrity: sha512-Ew3F5riP3B3ZDGjD3ZKb9uZylTTPSqt8hAf4sGbvbjrjDjrFb3Jm15Tk1/w7WwTE5GbQ2Qhwxx1moc9hr8A/OQ==}
-
   '@vue/reactivity@3.5.13':
     resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
 
-  '@vue/runtime-core@3.5.0':
-    resolution: {integrity: sha512-mQyW0F9FaNRdt8ghkAs+BMG3iQ7LGgWKOpkzUzR5AI5swPNydHGL5hvVTqFaeMzwecF1g0c86H4yFQsSxJhH1w==}
-
   '@vue/runtime-core@3.5.13':
     resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
 
-  '@vue/runtime-dom@3.5.0':
-    resolution: {integrity: sha512-NQQXjpdXgyYVJ2M56FJ+lSJgZiecgQ2HhxhnQBN95FymXegRNY/N2htI7vOTwpP75pfxhIeYOJ8mE8sW8KAW6A==}
-
   '@vue/runtime-dom@3.5.13':
     resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
 
-  '@vue/server-renderer@3.5.0':
-    resolution: {integrity: sha512-HyDIFUg+l7L4PKrEnJlCYWHUOlm6NxZhmSxIefZ5MTYjkIPfDfkwhX7hqxAQHfgIAE1uLMLQZwuNR/ozI0NhZg==}
-    peerDependencies:
-      vue: 3.5.0
-
   '@vue/server-renderer@3.5.13':
     resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
     peerDependencies:
@@ -4418,9 +4401,6 @@ packages:
   '@vue/shared@3.4.29':
     resolution: {integrity: sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==}
 
-  '@vue/shared@3.5.0':
-    resolution: {integrity: sha512-m9IgiteBpCkFaMNwCOBkFksA7z8QiKc30ooRuoXWUFRDu0mGyNPlFHmbncF0/Kra1RlX8QrmBbRaIxVvikaR0Q==}
-
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
@@ -8734,8 +8714,8 @@ packages:
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
-  magic-string@0.30.14:
-    resolution: {integrity: sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==}
+  magic-string@0.30.15:
+    resolution: {integrity: sha512-zXeaYRgZ6ldS1RJJUrMrYgNJ4fdwnyI6tVqoiIhyCyv5IVTK9BU8Ic2l253GGETQHxI4HNUwhJ3fjDhKqEoaAw==}
 
   magicast@0.3.4:
     resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
@@ -12672,14 +12652,6 @@ packages:
     resolution: {integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==}
     deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
 
-  vue@3.5.0:
-    resolution: {integrity: sha512-1t70favYoFijwfWJ7g81aTd32obGaAnKYE9FNyMgnEzn3F4YncRi/kqAHHKloG0VXTD8vBYMhbgLKCA+Sk6QDw==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   vue@3.5.13:
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
@@ -13241,7 +13213,7 @@ snapshots:
       '@babel/generator': 7.24.7
       '@babel/helper-module-transforms': 7.24.7(@babel/core@7.12.9)
       '@babel/helpers': 7.24.7
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
       '@babel/template': 7.24.7
       '@babel/traverse': 7.24.7
       '@babel/types': 7.24.7
@@ -16198,12 +16170,12 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@1.3.3(magicast@0.3.4)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)))(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))':
+  '@nuxt/devtools-kit@1.3.3(magicast@0.3.4)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)))(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))':
     dependencies:
       '@nuxt/kit': 3.12.2(magicast@0.3.4)(rollup@4.18.0)
       '@nuxt/schema': 3.12.2(rollup@4.18.0)
       execa: 7.2.0
-      nuxt: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
+      nuxt: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
       vite: 5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)
     transitivePeerDependencies:
       - magicast
@@ -16223,13 +16195,13 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.2
 
-  '@nuxt/devtools@1.3.3(kp24w7dirm5sk46yjklo4malpi)':
+  '@nuxt/devtools@1.3.3(u6sbqw2rjfgzaaghhojmlr5bqq)':
     dependencies:
       '@antfu/utils': 0.7.8
-      '@nuxt/devtools-kit': 1.3.3(magicast@0.3.4)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)))(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))
+      '@nuxt/devtools-kit': 1.3.3(magicast@0.3.4)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)))(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))
       '@nuxt/devtools-wizard': 1.3.3
       '@nuxt/kit': 3.12.2(magicast@0.3.4)(rollup@4.18.0)
-      '@vue/devtools-applet': 7.1.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.5.13(typescript@5.6.2))
+      '@vue/devtools-applet': 7.1.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.5.13(typescript@5.6.2))
       '@vue/devtools-core': 7.1.3(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.5.13(typescript@5.6.2))
       '@vue/devtools-kit': 7.1.3(vue@3.5.13(typescript@5.6.2))
       birpc: 0.2.17
@@ -16247,7 +16219,7 @@ snapshots:
       launch-editor: 2.7.0
       local-pkg: 0.5.0
       magicast: 0.3.4
-      nuxt: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
+      nuxt: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
       nypm: 0.3.8
       ohash: 1.1.3
       pacote: 18.0.6
@@ -17480,7 +17452,7 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
       '@babel/types': 7.24.7
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
@@ -17492,7 +17464,7 @@ snapshots:
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
       '@babel/types': 7.24.7
 
   '@types/babel__traverse@7.20.6':
@@ -18325,7 +18297,7 @@ snapshots:
       colorette: 2.0.20
       consola: 3.2.3
       fast-glob: 3.3.2
-      magic-string: 0.30.14
+      magic-string: 0.30.10
       pathe: 1.1.2
       perfect-debounce: 1.0.0
     transitivePeerDependencies:
@@ -18356,7 +18328,7 @@ snapshots:
       '@unocss/rule-utils': 0.61.0
       css-tree: 2.3.1
       fast-glob: 3.3.2
-      magic-string: 0.30.14
+      magic-string: 0.30.10
       postcss: 8.4.49
 
   '@unocss/preset-attributify@0.61.0':
@@ -18409,7 +18381,7 @@ snapshots:
   '@unocss/rule-utils@0.61.0':
     dependencies:
       '@unocss/core': 0.61.0
-      magic-string: 0.30.14
+      magic-string: 0.30.10
 
   '@unocss/scope@0.61.0': {}
 
@@ -18451,7 +18423,7 @@ snapshots:
       '@unocss/transformer-directives': 0.61.0
       chokidar: 3.6.0
       fast-glob: 3.3.2
-      magic-string: 0.30.14
+      magic-string: 0.30.10
       vite: 5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)
     transitivePeerDependencies:
       - rollup
@@ -18602,7 +18574,7 @@ snapshots:
     dependencies:
       '@babel/types': 7.24.7
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
-      '@vue/compiler-sfc': 3.5.13
+      '@vue/compiler-sfc': 3.4.29
       ast-kit: 0.12.2
       local-pkg: 0.5.0
       magic-string-ast: 0.6.1
@@ -18637,8 +18609,8 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/parser': 7.26.3
-      '@vue/compiler-sfc': 3.5.13
+      '@babel/parser': 7.24.7
+      '@vue/compiler-sfc': 3.4.29
 
   '@vue/compiler-core@3.4.29':
     dependencies:
@@ -18648,14 +18620,6 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-core@3.5.0':
-    dependencies:
-      '@babel/parser': 7.26.3
-      '@vue/shared': 3.5.0
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
-
   '@vue/compiler-core@3.5.13':
     dependencies:
       '@babel/parser': 7.26.3
@@ -18664,10 +18628,10 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.0':
+  '@vue/compiler-dom@3.4.29':
     dependencies:
-      '@vue/compiler-core': 3.5.0
-      '@vue/shared': 3.5.0
+      '@vue/compiler-core': 3.4.29
+      '@vue/shared': 3.4.29
 
   '@vue/compiler-dom@3.5.13':
     dependencies:
@@ -18682,15 +18646,15 @@ snapshots:
     optionalDependencies:
       prettier: 2.8.8
 
-  '@vue/compiler-sfc@3.5.0':
+  '@vue/compiler-sfc@3.4.29':
     dependencies:
-      '@babel/parser': 7.26.3
-      '@vue/compiler-core': 3.5.0
-      '@vue/compiler-dom': 3.5.0
-      '@vue/compiler-ssr': 3.5.0
-      '@vue/shared': 3.5.0
+      '@babel/parser': 7.24.7
+      '@vue/compiler-core': 3.4.29
+      '@vue/compiler-dom': 3.4.29
+      '@vue/compiler-ssr': 3.4.29
+      '@vue/shared': 3.4.29
       estree-walker: 2.0.2
-      magic-string: 0.30.14
+      magic-string: 0.30.10
       postcss: 8.4.49
       source-map-js: 1.2.1
 
@@ -18702,14 +18666,14 @@ snapshots:
       '@vue/compiler-ssr': 3.5.13
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
-      magic-string: 0.30.14
+      magic-string: 0.30.15
       postcss: 8.4.49
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.0':
+  '@vue/compiler-ssr@3.4.29':
     dependencies:
-      '@vue/compiler-dom': 3.5.0
-      '@vue/shared': 3.5.0
+      '@vue/compiler-dom': 3.4.29
+      '@vue/shared': 3.4.29
 
   '@vue/compiler-ssr@3.5.13':
     dependencies:
@@ -18720,12 +18684,12 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-applet@7.1.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.5.13(typescript@5.6.2))':
+  '@vue/devtools-applet@7.1.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.5.13(typescript@5.6.2))':
     dependencies:
       '@vue/devtools-core': 7.1.3(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.5.13(typescript@5.6.2))
       '@vue/devtools-kit': 7.1.3(vue@3.5.13(typescript@5.6.2))
       '@vue/devtools-shared': 7.3.1
-      '@vue/devtools-ui': 7.3.1(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vue@3.5.13(typescript@5.6.2))
+      '@vue/devtools-ui': 7.3.1(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vue@3.5.13(typescript@5.6.2))
       lodash-es: 4.17.21
       perfect-debounce: 1.0.0
       shiki: 1.3.0
@@ -18775,7 +18739,7 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/devtools-ui@7.3.1(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vue@3.5.13(typescript@5.6.2))':
+  '@vue/devtools-ui@7.3.1(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vue@3.5.13(typescript@5.6.2))':
     dependencies:
       '@unocss/reset': 0.61.0
       '@vue/devtools-shared': 7.3.1
@@ -18783,7 +18747,7 @@ snapshots:
       '@vueuse/core': 10.11.0(vue@3.5.13(typescript@5.6.2))
       '@vueuse/integrations': 10.11.0(axios@1.7.2)(change-case@4.1.2)(focus-trap@7.5.4)(nprogress@0.2.0)(vue@3.5.13(typescript@5.6.2))
       colord: 2.9.3
-      floating-vue: 5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2))
+      floating-vue: 5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2))
       focus-trap: 7.5.4
       unocss: 0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))
       vue: 3.5.13(typescript@5.6.2)
@@ -18817,8 +18781,8 @@ snapshots:
     dependencies:
       '@volar/language-core': 1.11.1
       '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.5.13
-      '@vue/shared': 3.5.13
+      '@vue/compiler-dom': 3.4.29
+      '@vue/shared': 3.4.29
       computeds: 0.0.1
       minimatch: 9.0.4
       muggle-string: 0.3.1
@@ -18830,8 +18794,8 @@ snapshots:
   '@vue/language-core@2.0.21(typescript@5.2.2)':
     dependencies:
       '@volar/language-core': 2.3.0
-      '@vue/compiler-dom': 3.5.13
-      '@vue/shared': 3.5.13
+      '@vue/compiler-dom': 3.4.29
+      '@vue/shared': 3.4.29
       computeds: 0.0.1
       minimatch: 9.0.4
       path-browserify: 1.0.1
@@ -18842,8 +18806,8 @@ snapshots:
   '@vue/language-core@2.0.21(typescript@5.6.2)':
     dependencies:
       '@volar/language-core': 2.3.0
-      '@vue/compiler-dom': 3.5.13
-      '@vue/shared': 3.5.13
+      '@vue/compiler-dom': 3.4.29
+      '@vue/shared': 3.4.29
       computeds: 0.0.1
       minimatch: 9.0.4
       path-browserify: 1.0.1
@@ -18851,31 +18815,15 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.2
 
-  '@vue/reactivity@3.5.0':
-    dependencies:
-      '@vue/shared': 3.5.0
-
   '@vue/reactivity@3.5.13':
     dependencies:
       '@vue/shared': 3.5.13
 
-  '@vue/runtime-core@3.5.0':
-    dependencies:
-      '@vue/reactivity': 3.5.0
-      '@vue/shared': 3.5.0
-
   '@vue/runtime-core@3.5.13':
     dependencies:
       '@vue/reactivity': 3.5.13
       '@vue/shared': 3.5.13
 
-  '@vue/runtime-dom@3.5.0':
-    dependencies:
-      '@vue/reactivity': 3.5.0
-      '@vue/runtime-core': 3.5.0
-      '@vue/shared': 3.5.0
-      csstype: 3.1.3
-
   '@vue/runtime-dom@3.5.13':
     dependencies:
       '@vue/reactivity': 3.5.13
@@ -18883,12 +18831,6 @@ snapshots:
       '@vue/shared': 3.5.13
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.0(vue@3.5.0(typescript@5.6.2))':
-    dependencies:
-      '@vue/compiler-ssr': 3.5.0
-      '@vue/shared': 3.5.0
-      vue: 3.5.0(typescript@5.6.2)
-
   '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.2.2))':
     dependencies:
       '@vue/compiler-ssr': 3.5.13
@@ -18909,8 +18851,6 @@ snapshots:
 
   '@vue/shared@3.4.29': {}
 
-  '@vue/shared@3.5.0': {}
-
   '@vue/shared@3.5.13': {}
 
   '@vue/test-utils@2.4.6':
@@ -19355,12 +19295,12 @@ snapshots:
 
   ast-kit@0.12.2:
     dependencies:
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
       pathe: 1.1.2
 
   ast-kit@0.9.5(rollup@4.18.0):
     dependencies:
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
       pathe: 1.1.2
     transitivePeerDependencies:
@@ -20179,7 +20119,7 @@ snapshots:
 
   constantinople@4.0.1:
     dependencies:
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
       '@babel/types': 7.24.7
 
   content-disposition@0.5.2: {}
@@ -21913,11 +21853,11 @@ snapshots:
 
   flatten@1.0.3: {}
 
-  floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)):
+  floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)):
     dependencies:
       '@floating-ui/dom': 1.1.1
-      vue: 3.5.0(typescript@5.6.2)
-      vue-resize: 2.0.0-alpha.1(vue@3.5.0(typescript@5.6.2))
+      vue: 3.5.13(typescript@5.6.2)
+      vue-resize: 2.0.0-alpha.1(vue@3.5.13(typescript@5.6.2))
     optionalDependencies:
       '@nuxt/kit': 3.12.2(magicast@0.3.4)(rollup@4.18.0)
 
@@ -23095,7 +23035,7 @@ snapshots:
   istanbul-lib-instrument@5.2.1:
     dependencies:
       '@babel/core': 7.24.7
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 6.3.1
@@ -23105,7 +23045,7 @@ snapshots:
   istanbul-lib-instrument@6.0.2:
     dependencies:
       '@babel/core': 7.24.7
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 7.6.2
@@ -24298,13 +24238,13 @@ snapshots:
 
   magic-string-ast@0.6.1:
     dependencies:
-      magic-string: 0.30.14
+      magic-string: 0.30.10
 
   magic-string@0.30.10:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  magic-string@0.30.14:
+  magic-string@0.30.15:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
@@ -24928,7 +24868,7 @@ snapshots:
 
   node-source-walk@4.3.0:
     dependencies:
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
 
   nodemon@2.0.22:
     dependencies:
@@ -25053,10 +24993,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.0(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)):
+  nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.5.13(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(stylelint@16.10.0(typescript@5.6.2))(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.49)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)):
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.3.3(kp24w7dirm5sk46yjklo4malpi)
+      '@nuxt/devtools': 1.3.3(u6sbqw2rjfgzaaghhojmlr5bqq)
       '@nuxt/kit': 3.12.2(magicast@0.3.4)(rollup@4.18.0)
       '@nuxt/schema': 3.12.2(rollup@4.18.0)
       '@nuxt/telemetry': 2.5.4(magicast@0.3.4)(rollup@4.18.0)
@@ -28897,7 +28837,7 @@ snapshots:
       '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.7)
       '@babel/plugin-transform-typescript': 7.24.7(@babel/core@7.24.7)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.7)
-      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-dom': 3.4.29
       kolorist: 1.8.0
       magic-string: 0.30.10
       vite: 5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)
@@ -29083,8 +29023,8 @@ snapshots:
     dependencies:
       '@babel/parser': 7.24.7
       '@babel/types': 7.24.7
-      '@vue/compiler-dom': 3.5.13
-      '@vue/compiler-sfc': 3.5.13
+      '@vue/compiler-dom': 3.4.29
+      '@vue/compiler-sfc': 3.4.29
       ast-types: 0.16.1
       esm-resolve: 1.0.11
       hash-sum: 2.0.0
@@ -29130,23 +29070,14 @@ snapshots:
     dependencies:
       vue: 3.5.13(typescript@5.6.2)
 
-  vue-resize@2.0.0-alpha.1(vue@3.5.0(typescript@5.6.2)):
-    dependencies:
-      vue: 3.5.0(typescript@5.6.2)
-
   vue-resize@2.0.0-alpha.1(vue@3.5.13(typescript@5.6.2)):
     dependencies:
       vue: 3.5.13(typescript@5.6.2)
 
-  vue-router@4.3.3(vue@3.5.0(typescript@5.6.2)):
+  vue-router@4.3.3(vue@3.5.13(typescript@5.6.2)):
     dependencies:
       '@vue/devtools-api': 6.6.3
-      vue: 3.5.0(typescript@5.6.2)
-
-  vue-router@4.4.5(vue@3.5.0(typescript@5.6.2)):
-    dependencies:
-      '@vue/devtools-api': 6.6.4
-      vue: 3.5.0(typescript@5.6.2)
+      vue: 3.5.13(typescript@5.6.2)
 
   vue-router@4.4.5(vue@3.5.13(typescript@5.6.2)):
     dependencies:
@@ -29196,16 +29127,6 @@ snapshots:
       '@vue/compiler-sfc': 2.7.16
       csstype: 3.1.3
 
-  vue@3.5.0(typescript@5.6.2):
-    dependencies:
-      '@vue/compiler-dom': 3.5.0
-      '@vue/compiler-sfc': 3.5.0
-      '@vue/runtime-dom': 3.5.0
-      '@vue/server-renderer': 3.5.0(vue@3.5.0(typescript@5.6.2))
-      '@vue/shared': 3.5.0
-    optionalDependencies:
-      typescript: 5.6.2
-
   vue@3.5.13(typescript@5.2.2):
     dependencies:
       '@vue/compiler-dom': 3.5.13
@@ -29528,7 +29449,7 @@ snapshots:
 
   with@7.0.2:
     dependencies:
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.24.7
       '@babel/types': 7.24.7
       assert-never: 1.2.1
       babel-walk: 3.0.0-canary-5

From 8037aa2ac513f6ed12accd1f6312a59bd6e85653 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Fri, 15 Nov 2024 09:36:01 +0100
Subject: [PATCH 03/53] trap focus in popover

---
 .../mt-bare-popover/mt-bare-popover.spec.ts   | 32 +++++++++++++++++++
 .../mt-bare-popover/mt-bare-popover.vue       | 21 ++++++++++--
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
index d9175af3c..36ae5daaa 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
@@ -159,4 +159,36 @@ describe("mt-bare-popover", () => {
       screen.getByRole("button").getAttribute("id"),
     );
   });
+
+  it("locks the focus inside the popover when it is open", async () => {
+    // ARRANGE
+    render({
+      components: { MtBarePopover },
+      template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default>
+            <input />
+          </template>
+        </mt-bare-popover>
+      `,
+    });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    // ACT
+    await userEvent.keyboard("{Tab}");
+
+    // focuses the body element
+    await userEvent.keyboard("{Tab}");
+
+    // focuses the button
+    // await userEvent.keyboard("{Tab}");
+
+    // ASSERT
+    expect(screen.getByRole("textbox")).toHaveFocus();
+  });
 });
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
index 5046964d3..a7f75ef9f 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
@@ -25,11 +25,12 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from "vue";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 import { flip, offset, shift, useFloating } from "@floating-ui/vue";
 import { createId } from "@/utils/id";
 import { onClickOutside, useEventListener } from "@vueuse/core";
+import * as focusTrap from "focus-trap";
 
 const triggerRef = ref<HTMLElement | null>(null);
 const dialogRef = ref<HTMLElement | null>(null);
@@ -40,6 +41,8 @@ const { floatingStyles } = useFloating(triggerRef, dialogRef, {
 
 const isVisible = ref(false);
 
+let trap: ReturnType<typeof focusTrap.createFocusTrap> | undefined;
+
 function toggleDialog() {
   if (isVisible.value) {
     isVisible.value = false;
@@ -48,7 +51,16 @@ function toggleDialog() {
 
   isVisible.value = true;
   nextTick(() => {
-    dialogRef.value?.focus();
+    if (!dialogRef.value) return;
+    dialogRef.value.focus();
+
+    trap = focusTrap.createFocusTrap(dialogRef.value, {
+      tabbableOptions: { displayCheck: "none" },
+      allowOutsideClick: true,
+      fallbackFocus: dialogRef.value,
+    });
+
+    trap.activate();
   });
 }
 
@@ -77,6 +89,10 @@ onClickOutside(dialogRef, (event) => {
   isVisible.value = false;
 });
 
+onUnmounted(() => {
+  if (trap) trap.deactivate();
+});
+
 // needs to be in onMounted to avoid SSR issues
 onMounted(() => {
   useEventListener(dialogRef, "keydown", (event) => {
@@ -102,6 +118,7 @@ onMounted(() => {
 
   &:focus-visible {
     outline: 2px solid var(--color-border-brand-selected);
+    outline-offset: 2px;
   }
 }
 

From e8e893a1900e0428efbc6b6dd881b8adea1682c5 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Fri, 15 Nov 2024 09:43:07 +0100
Subject: [PATCH 04/53] make sure focus trap is turned of when closing the
 popover

---
 .../mt-bare-popover/mt-bare-popover.spec.ts   | 31 +++++++++++++++++++
 .../mt-bare-popover/mt-bare-popover.vue       |  2 ++
 2 files changed, 33 insertions(+)

diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
index 36ae5daaa..6f7f5f07a 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
@@ -191,4 +191,35 @@ describe("mt-bare-popover", () => {
     // ASSERT
     expect(screen.getByRole("textbox")).toHaveFocus();
   });
+
+  it("stops locking the focus when the popover gets closed by clicking outside the popover", async () => {
+    // ARRANGE
+    render({
+      components: { MtBarePopover },
+      template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default>
+            <input />
+          </template>
+        </mt-bare-popover>
+
+        <div data-testid="element-outside-of-popover"></div>
+      `,
+    });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    // ACT
+    await userEvent.click(screen.getByTestId("element-outside-of-popover"));
+    await userEvent.tab();
+
+    // ASSERT
+    expect(document.activeElement?.getAttribute("id")).toBe(
+      screen.getByRole("button").getAttribute("id"),
+    );
+  });
 });
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
index a7f75ef9f..4df6150ff 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
@@ -86,6 +86,8 @@ onClickOutside(dialogRef, (event) => {
 
   if (clickedOnTrigger) return;
 
+  if (trap) trap.deactivate();
+
   isVisible.value = false;
 });
 

From 694719098c0f96f21232d03762174c48f8572d1a Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 14:20:04 +0100
Subject: [PATCH 05/53] wip

---
 .../layout/mt-card/mt-card.stories.ts         | 15 ++--
 .../src/components/layout/mt-card/mt-card.vue | 43 +++++++++--
 .../mt-bare-popover.stories.ts                |  4 +-
 .../mt-bare-popover/mt-bare-popover.vue       | 74 ++++++++++++++-----
 .../sub-components/mt-bare-popover-item.vue   | 45 ++++++++++-
 5 files changed, 148 insertions(+), 33 deletions(-)

diff --git a/packages/component-library/src/components/layout/mt-card/mt-card.stories.ts b/packages/component-library/src/components/layout/mt-card/mt-card.stories.ts
index 082108ce8..5c89e8af1 100644
--- a/packages/component-library/src/components/layout/mt-card/mt-card.stories.ts
+++ b/packages/component-library/src/components/layout/mt-card/mt-card.stories.ts
@@ -87,16 +87,12 @@ export const MinimalStory: StoryObj<MtCardMeta> = {
     },
     template: `
     <mt-card v-bind="args" @update:inheritance="args.updateInheritance">
-      <div v-html="args.default"></div>
+        <mt-text>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</mt-text>
+        <br>
+        <mt-text>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</mt-text>
     </mt-card>`,
   }),
   args: {
-    default: `
-    <mt-text>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</mt-text>
-    <br>
-    <mt-text>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</mt-text>
-    <br>
-    `,
     title: "Title",
     subtitle: "Subtitle",
     toolbar: null,
@@ -123,7 +119,10 @@ export const ExtendedStory: StoryObj<MtCardMeta> = {
           Active Tab: {{ activeTab }}
         </mt-text>
 
-        <div v-html="args.default"></div>
+
+        <mt-text>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</mt-text>
+        <br>
+        <mt-text>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</mt-text>
 
         <template #toolbar>
           <template v-if="args.toolbar">
diff --git a/packages/component-library/src/components/layout/mt-card/mt-card.vue b/packages/component-library/src/components/layout/mt-card/mt-card.vue
index 8f25d1451..79e94c012 100644
--- a/packages/component-library/src/components/layout/mt-card/mt-card.vue
+++ b/packages/component-library/src/components/layout/mt-card/mt-card.vue
@@ -56,10 +56,19 @@
       </div>
 
       <div v-if="!!$slots['context-actions']" class="mt-card__context-menu">
-        <mt-context-button>
-          <!-- @slot Slot for adding mt-context-menu-item components for rendering a context menu -->
-          <slot name="context-actions" />
-        </mt-context-button>
+        <mt-bare-popover placement="bottom-end" width="small">
+          <template #trigger="params">
+            <button v-bind="params" class="mt-card__context-button">
+              <mt-icon name="solid-ellipsis-h-s" />
+            </button>
+          </template>
+
+          <template #default>
+            <mt-bare-popover-item>Item A</mt-bare-popover-item>
+            <mt-bare-popover-item>Item B</mt-bare-popover-item>
+            <mt-bare-popover-item>Item C</mt-bare-popover-item>
+          </template>
+        </mt-bare-popover>
       </div>
     </header>
 
@@ -95,10 +104,11 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import MtContextButton from "../../context-menu/mt-context-button/mt-context-button.vue";
 import MtLoader from "../../feedback-indicator/mt-loader/mt-loader.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "../../content/mt-text/mt-text.vue";
+import MtBarePopover from "@/components/overlay/mt-bare-popover/mt-bare-popover.vue";
+import MtBarePopoverItem from "@/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";
 import { useI18n } from "@/composables/useI18n";
 
@@ -380,4 +390,27 @@ const cardClasses = computed(() => ({
     display: none;
   }
 }
+
+.mt-card__context-button {
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--color-border-primary-default);
+  border-radius: var(--border-radius-button);
+  color: var(--color-text-primary-default);
+  background: var(--color-interaction-secondary-default);
+  display: grid;
+  place-items: center;
+  transition: all 0.15s ease-out;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-interaction-secondary-hover);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
+    border-color: var(--color-border-brand-selected);
+    outline: 0;
+  }
+}
 </style>
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts
index 95856f05f..c88a50472 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.stories.ts
@@ -18,7 +18,9 @@ export default {
     </template>
 
     <template #default>
-        <mt-bare-popover-item />
+        <mt-bare-popover-item>
+            Item 1
+        </mt-bare-popover-item>
     </template>
 </mt-bare-popover>
 `,
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
index 4df6150ff..48f219495 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
@@ -8,35 +8,55 @@
     }"
   />
 
-  <div
-    v-if="isVisible"
-    role="dialog"
-    class="mt-bare-popover__dialog"
-    ref="dialogRef"
-    tabindex="-1"
-    :style="floatingStyles"
-  >
-    <mt-text as="h4" size="s" weight="semibold" class="mt-bare-popover__title">Title</mt-text>
-
-    <ul class="mt-bare-popover__list">
-      <slot name="default" />
-    </ul>
-  </div>
+  <teleport to="body">
+    <div
+      v-if="isVisible"
+      role="dialog"
+      :class="['mt-bare-popover__dialog', [`mt-bare-popover__dialog--width-${width}`]]"
+      ref="dialogRef"
+      tabindex="-1"
+      :style="floatingStyles"
+    >
+      <mt-text v-if="!!title" as="h4" size="s" weight="semibold" class="mt-bare-popover__title"
+        >Title</mt-text
+      >
+
+      <ul class="mt-bare-popover__list">
+        <slot name="default" />
+      </ul>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
-import { flip, offset, shift, useFloating } from "@floating-ui/vue";
+import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
 import { createId } from "@/utils/id";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 import * as focusTrap from "focus-trap";
 
+type A = "bottom" | "top" | "left" | "right";
+type B = "start" | "end" | "center";
+
+const props = withDefaults(
+  defineProps<{
+    placement?: `${A}-${B}`;
+    width?: "auto" | "large" | "medium" | "small";
+    title?: string;
+  }>(),
+  {
+    placement: "bottom-start",
+    width: "small",
+  },
+);
+
 const triggerRef = ref<HTMLElement | null>(null);
 const dialogRef = ref<HTMLElement | null>(null);
 const { floatingStyles } = useFloating(triggerRef, dialogRef, {
   middleware: [offset(8), flip(), shift()],
-  placement: "bottom-start",
+  placement: props.placement,
+  whileElementsMounted: autoUpdate,
 });
 
 const isVisible = ref(false);
@@ -110,13 +130,15 @@ onMounted(() => {
 
 <style scoped>
 .mt-bare-popover__dialog {
-  padding: 1rem;
+  padding: 0.5rem 1rem;
   box-shadow:
     0px 1px 1px 0px rgba(0, 0, 0, 0.08),
     0px 2px 1px 0px rgba(0, 0, 0, 0.06),
     0px 1px 3px 0px rgba(0, 0, 0, 0.1);
   border-radius: var(--border-radius-overlay);
+  border: 1px solid var(--color-border-primary-default);
   width: max-content;
+  background: var(--color-elevation-surface-overlay);
 
   &:focus-visible {
     outline: 2px solid var(--color-border-brand-selected);
@@ -124,11 +146,29 @@ onMounted(() => {
   }
 }
 
+.mt-bare-popover__dialog--width-auto {
+  width: max-content;
+}
+
+.mt-bare-popover__dialog--width--large {
+  width: 22rem;
+}
+
+.mt-bare-popover__dialog--width-medium {
+  width: 18rem;
+}
+
+.mt-bare-popover__dialog--width-small {
+  width: 14rem;
+}
+
 .mt-bare-popover__title {
   margin-block-end: 0;
 }
 
 .mt-bare-popover__list {
   list-style: none;
+  display: flex;
+  flex-direction: column;
 }
 </style>
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue b/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
index bc8638c35..b3c4c3bc6 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
@@ -1,7 +1,48 @@
 <template>
-  <li>item</li>
+  <li>
+    <button class="mt-bare-popover-item">
+      <slot />
+    </button>
+  </li>
 </template>
 
 <script setup lang="ts"></script>
 
-<style scoped></style>
+<style scoped>
+.mt-bare-popover-item {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary-default);
+  height: 2.5rem;
+  width: 100%;
+  text-align: left;
+  border-radius: var(--border-radius-xs);
+  position: relative;
+
+  outline: none;
+
+  &:focus-visible::before {
+    outline: 2px solid var(--color-border-brand-selected);
+  }
+
+  &:is(:hover, :focus-visible)&::before {
+    background-color: var(--color-interaction-secondary-hover);
+  }
+
+  &::before {
+    content: "";
+    border-radius: var(--border-radius-xs);
+    top: 0;
+    left: 0;
+    margin-inline: -0.5rem;
+    width: calc(100% + 1rem);
+    height: 100%;
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    z-index: -1;
+  }
+}
+</style>

From 8ebb08820995824647294d2bc94cb01045f2804a Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 15:46:38 +0100
Subject: [PATCH 06/53] allow changing role of mt-bare-popover-item

---
 .../mt-bare-popover/sub-components/mt-bare-popover-item.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue b/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
index b3c4c3bc6..e19151477 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
@@ -1,6 +1,6 @@
 <template>
   <li>
-    <button class="mt-bare-popover-item">
+    <button class="mt-bare-popover-item" :role="$attrs?.role ?? 'button'">
       <slot />
     </button>
   </li>

From 196f959f7aedea2683b37999f4f3340c7d209306 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 15:47:00 +0100
Subject: [PATCH 07/53] fix: add correct type to trigger slot for
 mt-bare-popover

---
 .../components/overlay/mt-bare-popover/mt-bare-popover.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
index 48f219495..d590b5b2c 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
@@ -4,7 +4,7 @@
     v-bind="{
       onClick: toggleDialog,
       id: `mt-popover__trigger--${id}`,
-      'aria-haspopup': 'dialog',
+      'aria-haspopup': 'dialog' as AriaAttributes['aria-haspopup'],
     }"
   />
 
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, ref } from "vue";
+import { AriaAttributes, nextTick, onMounted, onUnmounted, ref } from "vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
 import { createId } from "@/utils/id";

From 9b3c25c4c7a58437653a06ede75fdd170e75678c Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 20:31:06 +0100
Subject: [PATCH 08/53] rewrite tabs component

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        |  44 ++
 .../components/navigation/mt-tabs/mt-tabs.vue | 397 ++----------------
 .../navigation/mt-tabs/sw.tabs.spec.ts        |  65 ---
 3 files changed, 85 insertions(+), 421 deletions(-)
 create mode 100644 packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
 delete mode 100644 packages/component-library/src/components/navigation/mt-tabs/sw.tabs.spec.ts

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
new file mode 100644
index 000000000..2fe1b5f94
--- /dev/null
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -0,0 +1,44 @@
+import { flushPromises } from "@vue/test-utils";
+import type { TabItem } from "./mt-tabs.vue";
+import MtTabs from "./mt-tabs.vue";
+import { render, screen } from "@testing-library/vue";
+
+describe("mt-tabs", () => {
+  it("selects the first tab by default", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2" },
+    ];
+
+    // ACT
+    render(MtTabs, {
+      props: { items },
+    });
+
+    await flushPromises();
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("selects the second tab as a default tab", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2" },
+    ];
+
+    // ACT
+    render(MtTabs, {
+      props: { items, defaultItem: "tab2" },
+    });
+
+    await flushPromises();
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "false");
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
+  });
+});
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index e1d850d76..251b8d363 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -1,90 +1,29 @@
 <template>
-  <priority-plus ref="priorityPlus" #default="{ mainItems, moreItems }" :list="items">
-    <div :class="tabClasses" role="tablist">
-      <span class="mt-tabs__slider" :class="sliderClasses" :style="sliderStyle" />
-
-      <template v-if="!vertical">
-        <button
-          v-for="item in mainItems"
-          :key="item.name"
-          :data-priority-plus="item.name"
-          ref="items"
-          class="mt-tabs__item"
-          :data-text="item.label"
-          :class="getItemClasses(item)"
-          :data-item-name="item.name"
-          role="tab"
-          :aria-selected="item.name === activeItemName"
-          :disabled="item.disabled"
-          @click="handleClick(item.name)"
-          @keyup.enter="handleClick(item.name)"
-        >
-          {{ item.label }}
-
-          <mt-icon
-            v-if="item.hasError"
-            class="mt-tabs__error-badge"
-            name="solid-exclamation-circle"
-          />
-
-          <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
-        </button>
-
-        <!-- @vue-skip -->
-        <mt-context-button
-          v-if="moreItems.length"
-          ref="more-items-button"
-          :has-error="moreItems.some((i) => i.hasError)"
-        >
-          <template #button-text>
-            <!-- Add translation  -->
-            More
-          </template>
-
-          <template #default="{ toggleFloatingUi }">
-            <mt-context-menu-item
-              v-for="moreItem in moreItems"
-              :key="moreItem.name"
-              :type="getContextMenuItemVariant(moreItem)"
-              role="tab"
-              :aria-selected="moreItem.name === activeItemName"
-              :label="moreItem.label"
-              @click="
-                handleClick(moreItem.name);
-                toggleFloatingUi();
-              "
-              @keyup.enter="handleClick(moreItem.name)"
-            />
-          </template>
-        </mt-context-button>
-      </template>
-
-      <template v-if="vertical">
-        <li
-          v-for="item in [...mainItems, ...moreItems]"
-          :key="item.name"
-          ref="items"
-          class="mt-tabs__item"
-          :class="getItemClasses(item)"
-          :data-item-name="item.name"
-          @click="handleClick(item.name)"
-        >
-          {{ item.label }}
-        </li>
-      </template>
-    </div>
-  </priority-plus>
+  <ul class="mt-tabs">
+    <li v-for="item in items" :key="item.name">
+      <button
+        :class="[
+          'mt-tabs__item',
+          {
+            'mt-tabs__item--active': item.name === nameOfActiveItem,
+          },
+        ]"
+        role="tab"
+        :aria-selected="item.name === nameOfActiveItem"
+      >
+        {{ item.label }}
+      </button>
+    </li>
+  </ul>
 </template>
 
-<script lang="ts">
-import type { PropType } from "vue";
-
-import { defineComponent, computed } from "vue";
-import MtContextButton from "../../context-menu/mt-context-button/mt-context-button.vue";
-import MtContextMenuItem from "../../context-menu/mt-context-menu-item/mt-context-menu-item.vue";
+<script setup lang="ts">
+import { defineComponent, computed, ref, onMounted } from "vue";
 import MtColorBadge from "../../feedback-indicator/mt-color-badge/mt-color-badge.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import PriorityPlus from "../../_internal/mt-priority-plus-navigation.vue";
+
+// TODO: add default bottom margin
 import { useFutureFlags } from "@/composables/useFutureFlags";
 
 export interface TabItem {
@@ -98,262 +37,25 @@ export interface TabItem {
   hidden?: boolean;
 }
 
-export default defineComponent({
-  name: "MtTabs",
-
-  components: {
-    "mt-context-button": MtContextButton,
-    "mt-context-menu-item": MtContextMenuItem,
-    "priority-plus": PriorityPlus,
-    "mt-color-badge": MtColorBadge,
-    "mt-icon": MtIcon,
-  },
-
-  emits: ["new-item-active"],
-
-  props: {
-    items: {
-      type: Array as PropType<TabItem[]>,
-      required: true,
-    },
-
-    vertical: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /**
-     * @deprecated v4.0.0 - Set max-width through parent container element
-     */
-    small: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    defaultItem: {
-      type: String,
-      required: false,
-      default: "",
-    },
-  },
-
-  data() {
-    return {
-      // refreshKey is for recalculating specific computed properties
-      refreshKey: true,
-      activeItemName: "",
-      showMoreItems: false,
-      passedFirstRender: false,
-    };
-  },
-
-  computed: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    activeDomItem(): any | undefined {
-      this.refreshKey;
-
-      // Access "this.activeItemName" before to react dynamically on changes
-      const activeItemName = this.activeItemName;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const domItems = this.$refs.items ? (this.$refs.items as any[]) : [];
-
-      const activeDomItem = domItems.find((item) => {
-        return item.getAttribute("data-item-name") === activeItemName;
-      });
-
-      return activeDomItem;
-    },
-
-    sliderPosition(): number {
-      this.refreshKey;
-
-      if (!this.activeItem) {
-        return 0;
-      }
-
-      // Handle the case when the active item is hidden
-      if (!this.activeDomItem && this.$refs["more-items-button"]) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return (this.$refs["more-items-button"] as any).$el?.offsetLeft;
-      }
-
-      const leftPaddingOfActiveDomItem = parseFloat(
-        getComputedStyle(this.activeDomItem).paddingLeft,
-      );
-
-      return this.vertical
-        ? this.activeDomItem.offsetTop
-        : this.activeDomItem.offsetLeft + leftPaddingOfActiveDomItem;
-    },
-
-    sliderLength(): number {
-      this.refreshKey;
-
-      if (!this.activeItem) {
-        return 0;
-      }
-
-      // Handle the case when the active item is hidden
-      if (!this.activeDomItem && this.$refs["more-items-button"]) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return (this.$refs["more-items-button"] as any).$el?.offsetWidth;
-      }
-
-      if (this.activeItem?.hidden && this.$refs["more-items-button"]) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return (this.$refs["more-items-button"] as any).$el?.offsetWidth;
-      }
-
-      const stylesOfActiveDomItem = getComputedStyle(this.activeDomItem);
-      const widthWithoutPadding =
-        this.activeDomItem.clientWidth -
-        parseFloat(stylesOfActiveDomItem.paddingLeft) -
-        parseFloat(stylesOfActiveDomItem.paddingRight);
-
-      return this.vertical ? this.activeDomItem.offsetHeight : widthWithoutPadding;
-    },
-
-    activeItem(): TabItem | undefined {
-      this.refreshKey;
-
-      return this.items.find((item) => {
-        return item.name === this.activeItemName;
-      });
-    },
-
-    sliderClasses(): Record<string, boolean> {
-      this.refreshKey;
-
-      return {
-        "mt-tabs__slider--error": this.activeItem?.hasError ?? false,
-        "mt-tabs__slider--animated": this.passedFirstRender,
-      };
-    },
-
-    sliderStyle(): string {
-      this.refreshKey;
-
-      if (this.vertical) {
-        return `
-          transform: translate(0, ${this.sliderPosition}px) rotate(90deg);
-          width: ${this.sliderLength}px;
-      `;
-      }
-
-      return `
-        transform: translate(${this.sliderPosition}px, 0) rotate(0deg);
-        width: ${this.sliderLength}px;
-    `;
-    },
-  },
-
-  setup(props) {
-    const futureFlags = useFutureFlags();
-
-    const tabClasses = computed(() => {
-      return [
-        "mt-tabs",
-        {
-          "mt-tabs--vertical": props.vertical,
-          "mt-tabs--small": props.small,
-          "mt-tabs--future-remove-default-margin": futureFlags.removeDefaultMargin,
-        },
-      ];
-    });
-
-    return {
-      tabClasses,
-    };
-  },
-
-  watch: {
-    items: "handleResize",
-    vertical: "handleResize",
-    small: "handleResize",
-  },
-
-  mounted() {
-    this.setActiveItem(this.defaultItem);
-
-    this.$nextTick(() => {
-      this.handleResize();
-
-      this.passedFirstRender = true;
-    });
-
-    // @ts-expect-error $device helper is not registered in TS yet
-    this.$device.onResize({
-      listener() {
-        this.handleResize();
-      },
-      component: this,
-      scope: this,
-    });
-  },
-
-  beforeUnmount() {
-    // @ts-expect-error $device helper is not registered in TS yet
-    this.$device.removeResizeListener(this);
-  },
-
-  methods: {
-    handleClick(itemName: string): void {
-      this.setActiveItem(itemName);
-      this.$emit("new-item-active", itemName);
-
-      const matchingItem = this.items.find((item) => item.name === itemName);
-
-      if (!matchingItem?.onClick) {
-        return;
-      }
-
-      matchingItem.onClick(itemName);
-    },
-
-    getItemClasses(item: TabItem) {
-      return {
-        "mt-tabs__item--error": item.hasError,
-        "mt-tabs__item--active": item.name === this.activeItemName,
-      };
-    },
-
-    getContextMenuItemVariant(item: TabItem): string {
-      if (item.hasError) {
-        return "critical";
-      }
-
-      if (item.name === this.activeItemName) {
-        return "active";
-      }
-
-      if (item.badge === "critical") {
-        return "critical";
-      }
-
-      return "default";
-    },
-
-    setActiveItem(itemName: string): void {
-      this.activeItemName = `${itemName}`;
-      this.refreshKey = !this.refreshKey;
-    },
-
-    handleResize() {
-      if (this.$refs.priorityPlus) {
-        this.refreshKey = !this.refreshKey;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (this.$refs.priorityPlus as any).handleResize().then(() => {
-          this.refreshKey = !this.refreshKey;
-        });
-      }
-    },
-
-    toggleMoreTabItems() {
-      this.showMoreItems = !this.showMoreItems;
-    },
-  },
+// TODO: IMO it makes more sense to use v-model for the component
+defineEmits(["new-item-active"]);
+
+const props = defineProps<{
+  items: TabItem[];
+  vertical?: boolean;
+  small?: boolean;
+  defaultItem?: string;
+}>();
+
+const nameOfActiveItem = ref("unknown");
+onMounted(() => {
+  const firstItem = props.items.at(0);
+  if (!firstItem)
+    throw new Error(
+      "Failed to render mt-tabs; No items provided, please provide at least one item.",
+    );
+
+  nameOfActiveItem.value = props.defaultItem ?? firstItem.name;
 });
 </script>
 
@@ -362,6 +64,7 @@ export default defineComponent({
   display: flex;
   position: relative;
   box-shadow: inset 0 -1px 0 var(--color-border-primary-default);
+  list-style: none;
 }
 
 .mt-tabs--small {
@@ -447,31 +150,13 @@ export default defineComponent({
   height: 2px;
   background-color: var(--color-border-brand-selected);
   z-index: 1;
+  transition: 0.2s all ease-in-out;
 }
 
 .mt-tabs__slider--error {
   background-color: var(--color-border-critical-default);
 }
 
-.mt-tabs__slider--animated {
-  transition: 0.2s all ease-in-out;
-}
-
-.mt-context-button {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-primary-default);
-
-  & button {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: var(--font-size-s);
-    line-height: var(--font-line-height-s);
-    font-family: var(--font-family-body);
-  }
-}
-
 .mt-tabs__error-badge {
   margin-left: 2px;
   width: 12px;
diff --git a/packages/component-library/src/components/navigation/mt-tabs/sw.tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/sw.tabs.spec.ts
deleted file mode 100644
index 5c1ec5726..000000000
--- a/packages/component-library/src/components/navigation/mt-tabs/sw.tabs.spec.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { mount } from "@vue/test-utils";
-import MtTabs from "./mt-tabs.vue";
-
-async function createWrapper(customOptions = {}, props = {}) {
-  return mount(MtTabs, {
-    props: {
-      items: [
-        {
-          name: "foo",
-          label: "Foo",
-        },
-        {
-          name: "bar",
-          label: "Bar",
-        },
-      ],
-      ...props,
-    },
-    global: {
-      stubs: {
-        "mt-icon": true,
-      },
-      mocks: {
-        $device: {
-          onResize: () => {},
-          removeResizeListener: () => {},
-        },
-      },
-    },
-    ...customOptions,
-  });
-}
-
-describe("src/app/component/navigation/mt-tabs", () => {
-  let wrapper: undefined | Awaited<ReturnType<typeof createWrapper>>;
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  it("should be a Vue.JS component", async () => {
-    wrapper = await createWrapper();
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("should emit on clicked tab", async () => {
-    wrapper = await createWrapper();
-
-    await wrapper.find(".mt-tabs__item[data-item-name=bar]").trigger("click");
-
-    expect(wrapper.emitted("new-item-active")?.[0]).toStrictEqual(["bar"]);
-  });
-
-  it("should emit on clicked vertical tab", async () => {
-    wrapper = await createWrapper(undefined, {
-      vertical: true,
-    });
-
-    await wrapper.find(".mt-tabs__item[data-item-name=bar]").trigger("click");
-
-    expect(wrapper.emitted("new-item-active")?.[0]).toStrictEqual(["bar"]);
-  });
-});

From 6c758196da99d41e6dbde8ab2f5a1cd6ed21558f Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 20:38:01 +0100
Subject: [PATCH 09/53] allow changing the tab

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 30 +++++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue |  9 +++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index 2fe1b5f94..d5eed1033 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -2,6 +2,7 @@ import { flushPromises } from "@vue/test-utils";
 import type { TabItem } from "./mt-tabs.vue";
 import MtTabs from "./mt-tabs.vue";
 import { render, screen } from "@testing-library/vue";
+import { userEvent } from "@storybook/test";
 
 describe("mt-tabs", () => {
   it("selects the first tab by default", async () => {
@@ -41,4 +42,33 @@ describe("mt-tabs", () => {
     expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "false");
     expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
   });
+
+  it("selects the tab when clicked", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2" },
+    ];
+
+    const handler = vi.fn();
+
+    render(MtTabs, {
+      props: {
+        items,
+        "onNew-item-active": handler,
+      },
+    });
+
+    await flushPromises();
+
+    // ACT
+    await userEvent.click(screen.getByRole("tab", { name: "Tab 2" }));
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "false");
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
+
+    expect(handler).toHaveBeenCalledOnce();
+    expect(handler).toHaveBeenLastCalledWith("tab2");
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 251b8d363..c987c7e99 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -9,6 +9,8 @@
           },
         ]"
         role="tab"
+        @click="() => changeActiveTab(item.name)"
+        :data-text="item.label"
         :aria-selected="item.name === nameOfActiveItem"
       >
         {{ item.label }}
@@ -38,7 +40,7 @@ export interface TabItem {
 }
 
 // TODO: IMO it makes more sense to use v-model for the component
-defineEmits(["new-item-active"]);
+const emit = defineEmits(["new-item-active"]);
 
 const props = defineProps<{
   items: TabItem[];
@@ -47,6 +49,11 @@ const props = defineProps<{
   defaultItem?: string;
 }>();
 
+function changeActiveTab(tabName: string) {
+  nameOfActiveItem.value = tabName;
+  emit("new-item-active", tabName);
+}
+
 const nameOfActiveItem = ref("unknown");
 onMounted(() => {
   const firstItem = props.items.at(0);

From 7ccba7b4e81559bec312f5918c558b596fe465db Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 21:08:32 +0100
Subject: [PATCH 10/53] add slider

---
 .../components/navigation/mt-tabs/mt-tabs.vue | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index c987c7e99..9d698e378 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -1,7 +1,8 @@
 <template>
-  <ul class="mt-tabs">
+  <ul class="mt-tabs" ref="tabListRef">
     <li v-for="item in items" :key="item.name">
       <button
+        :id="`mt-tabs__item--${item.name}`"
         :class="[
           'mt-tabs__item',
           {
@@ -16,6 +17,8 @@
         {{ item.label }}
       </button>
     </li>
+
+    <div class="mt-tabs__slider" :style="sliderStyles" />
   </ul>
 </template>
 
@@ -49,6 +52,27 @@ const props = defineProps<{
   defaultItem?: string;
 }>();
 
+const tabListRef = ref<HTMLElement | null>(null);
+
+const sliderStyles = computed(() => {
+  if (!tabListRef.value || nameOfActiveItem.value === "unknown") return undefined;
+
+  const activeTab = tabListRef.value.querySelector(
+    `#mt-tabs__item--${nameOfActiveItem.value}`,
+  ) as HTMLElement | null;
+
+  if (!activeTab)
+    throw new Error(
+      "Failed to render mt-tabs; Tab not found, please make sure the tab exists. Searched for tab with id: mt-tabs__item--" +
+        nameOfActiveItem.value,
+    );
+
+  return {
+    width: `${activeTab.offsetWidth}px`,
+    left: `${activeTab.offsetLeft}px`,
+  };
+});
+
 function changeActiveTab(tabName: string) {
   nameOfActiveItem.value = tabName;
   emit("new-item-active", tabName);
@@ -157,7 +181,7 @@ onMounted(() => {
   height: 2px;
   background-color: var(--color-border-brand-selected);
   z-index: 1;
-  transition: 0.2s all ease-in-out;
+  transition: 0.25s all cubic-bezier(0.77, 0, 0.175, 1);
 }
 
 .mt-tabs__slider--error {

From 6fa27fd5532cd4fe721a3bb67155a98d483da1f9 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 21:09:37 +0100
Subject: [PATCH 11/53] add tablist role

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 9d698e378..099d60487 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="mt-tabs" ref="tabListRef">
+  <ul class="mt-tabs" ref="tabListRef" role="tablist">
     <li v-for="item in items" :key="item.name">
       <button
         :id="`mt-tabs__item--${item.name}`"

From 264027b8dc827ba59c9438a1b82b195ec1029ab3 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 21:11:25 +0100
Subject: [PATCH 12/53] refactor: rename nameOfActiveItem to nameOfActiveTab

---
 .../components/navigation/mt-tabs/mt-tabs.vue    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 099d60487..cf77e03b4 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -6,13 +6,13 @@
         :class="[
           'mt-tabs__item',
           {
-            'mt-tabs__item--active': item.name === nameOfActiveItem,
+            'mt-tabs__item--active': item.name === nameOfActiveTab,
           },
         ]"
         role="tab"
         @click="() => changeActiveTab(item.name)"
         :data-text="item.label"
-        :aria-selected="item.name === nameOfActiveItem"
+        :aria-selected="item.name === nameOfActiveTab"
       >
         {{ item.label }}
       </button>
@@ -55,16 +55,16 @@ const props = defineProps<{
 const tabListRef = ref<HTMLElement | null>(null);
 
 const sliderStyles = computed(() => {
-  if (!tabListRef.value || nameOfActiveItem.value === "unknown") return undefined;
+  if (!tabListRef.value || nameOfActiveTab.value === "unknown") return undefined;
 
   const activeTab = tabListRef.value.querySelector(
-    `#mt-tabs__item--${nameOfActiveItem.value}`,
+    `#mt-tabs__item--${nameOfActiveTab.value}`,
   ) as HTMLElement | null;
 
   if (!activeTab)
     throw new Error(
       "Failed to render mt-tabs; Tab not found, please make sure the tab exists. Searched for tab with id: mt-tabs__item--" +
-        nameOfActiveItem.value,
+        nameOfActiveTab.value,
     );
 
   return {
@@ -74,11 +74,11 @@ const sliderStyles = computed(() => {
 });
 
 function changeActiveTab(tabName: string) {
-  nameOfActiveItem.value = tabName;
+  nameOfActiveTab.value = tabName;
   emit("new-item-active", tabName);
 }
 
-const nameOfActiveItem = ref("unknown");
+const nameOfActiveTab = ref("unknown");
 onMounted(() => {
   const firstItem = props.items.at(0);
   if (!firstItem)
@@ -86,7 +86,7 @@ onMounted(() => {
       "Failed to render mt-tabs; No items provided, please provide at least one item.",
     );
 
-  nameOfActiveItem.value = props.defaultItem ?? firstItem.name;
+  nameOfActiveTab.value = props.defaultItem ?? firstItem.name;
 });
 </script>
 

From 45037bc882c7f05276dfff69f2f3538975c8b821 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 21:14:07 +0100
Subject: [PATCH 13/53] allow disabling individual tab items

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 28 +++++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue |  1 +
 2 files changed, 29 insertions(+)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index d5eed1033..83a8507e9 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -71,4 +71,32 @@ describe("mt-tabs", () => {
     expect(handler).toHaveBeenCalledOnce();
     expect(handler).toHaveBeenLastCalledWith("tab2");
   });
+
+  it("does not select the tab when clicked if it is disabled", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2", disabled: true },
+    ];
+
+    const handler = vi.fn();
+
+    render(MtTabs, {
+      props: {
+        items,
+        "onNew-item-active": handler,
+      },
+    });
+
+    await flushPromises();
+
+    // ACT
+    await userEvent.click(screen.getByRole("tab", { name: "Tab 2" }));
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "false");
+
+    expect(handler).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index cf77e03b4..aa81abd88 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -10,6 +10,7 @@
           },
         ]"
         role="tab"
+        :disabled="item.disabled"
         @click="() => changeActiveTab(item.name)"
         :data-text="item.label"
         :aria-selected="item.name === nameOfActiveTab"

From ed1173cb317b348bbcd47442571185fcaffb4cb4 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 21:27:00 +0100
Subject: [PATCH 14/53] remove default margin

---
 .../components/navigation/mt-tabs/mt-tabs.vue    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index aa81abd88..f592fb7d8 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -1,5 +1,14 @@
 <template>
-  <ul class="mt-tabs" ref="tabListRef" role="tablist">
+  <ul
+    :class="[
+      'mt-tabs',
+      {
+        'mt-tabs--future-remove-default-margin': futureFlags.removeDefaultMargin,
+      },
+    ]"
+    ref="tabListRef"
+    role="tablist"
+  >
     <li v-for="item in items" :key="item.name">
       <button
         :id="`mt-tabs__item--${item.name}`"
@@ -24,13 +33,14 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, computed, ref, onMounted } from "vue";
+import { defineComponent, computed, ref, onMounted, nextTick } from "vue";
 import MtColorBadge from "../../feedback-indicator/mt-color-badge/mt-color-badge.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import PriorityPlus from "../../_internal/mt-priority-plus-navigation.vue";
 
 // TODO: add default bottom margin
 import { useFutureFlags } from "@/composables/useFutureFlags";
+import { useMounted } from "@vueuse/core";
 
 export interface TabItem {
   label: string;
@@ -89,6 +99,8 @@ onMounted(() => {
 
   nameOfActiveTab.value = props.defaultItem ?? firstItem.name;
 });
+
+const futureFlags = useFutureFlags();
 </script>
 
 <style scoped>

From ddce2e7b106e702cff7e508c0f9f9a2c441c3cbf Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 21:28:42 +0100
Subject: [PATCH 15/53] add small variant

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue                | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index f592fb7d8..dd367cb14 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -3,6 +3,7 @@
     :class="[
       'mt-tabs',
       {
+        'mt-tabs--small': small,
         'mt-tabs--future-remove-default-margin': futureFlags.removeDefaultMargin,
       },
     ]"

From bd5f5c2543d75a441c1a0f1830b31e2ebdba4740 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 21:44:34 +0100
Subject: [PATCH 16/53] do not animate slider on first render

---
 .../components/navigation/mt-tabs/mt-tabs.vue | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index dd367cb14..11bf8849e 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -29,12 +29,24 @@
       </button>
     </li>
 
-    <div class="mt-tabs__slider" :style="sliderStyles" />
+    <div
+      :class="['mt-tabs__slider', { 'mt-tabs__slider--animated': passedFirstRender }]"
+      :style="sliderStyles"
+    />
   </ul>
 </template>
 
 <script setup lang="ts">
-import { defineComponent, computed, ref, onMounted, nextTick } from "vue";
+import {
+  defineComponent,
+  computed,
+  ref,
+  onMounted,
+  watch,
+  onBeforeUpdate,
+  onUpdated,
+  nextTick,
+} from "vue";
 import MtColorBadge from "../../feedback-indicator/mt-color-badge/mt-color-badge.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import PriorityPlus from "../../_internal/mt-priority-plus-navigation.vue";
@@ -66,6 +78,8 @@ const props = defineProps<{
 
 const tabListRef = ref<HTMLElement | null>(null);
 
+const passedFirstRender = ref(false);
+
 const sliderStyles = computed(() => {
   if (!tabListRef.value || nameOfActiveTab.value === "unknown") return undefined;
 
@@ -85,6 +99,15 @@ const sliderStyles = computed(() => {
   };
 });
 
+onMounted(async () => {
+  if (passedFirstRender.value) return;
+
+  // nextTick does not work here, so we use setTimeout
+  setTimeout(() => {
+    passedFirstRender.value = true;
+  }, 1);
+});
+
 function changeActiveTab(tabName: string) {
   nameOfActiveTab.value = tabName;
   emit("new-item-active", tabName);
@@ -195,6 +218,9 @@ const futureFlags = useFutureFlags();
   height: 2px;
   background-color: var(--color-border-brand-selected);
   z-index: 1;
+}
+
+.mt-tabs__slider--animated {
   transition: 0.25s all cubic-bezier(0.77, 0, 0.175, 1);
 }
 

From 7659b79b7b2dee01b0276dc6d613e30dd18eb22d Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sat, 16 Nov 2024 22:02:51 +0100
Subject: [PATCH 17/53] wip

---
 .../components/navigation/mt-tabs/mt-tabs.vue | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 11bf8849e..639f5c772 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -30,7 +30,7 @@
     </li>
 
     <div
-      :class="['mt-tabs__slider', { 'mt-tabs__slider--animated': passedFirstRender }]"
+      :class="['mt-tabs__slider', { 'mt-tabs__slider--animated': !!sliderStyles }]"
       :style="sliderStyles"
     />
   </ul>
@@ -53,7 +53,6 @@ import PriorityPlus from "../../_internal/mt-priority-plus-navigation.vue";
 
 // TODO: add default bottom margin
 import { useFutureFlags } from "@/composables/useFutureFlags";
-import { useMounted } from "@vueuse/core";
 
 export interface TabItem {
   label: string;
@@ -78,8 +77,6 @@ const props = defineProps<{
 
 const tabListRef = ref<HTMLElement | null>(null);
 
-const passedFirstRender = ref(false);
-
 const sliderStyles = computed(() => {
   if (!tabListRef.value || nameOfActiveTab.value === "unknown") return undefined;
 
@@ -93,19 +90,24 @@ const sliderStyles = computed(() => {
         nameOfActiveTab.value,
     );
 
-  return {
-    width: `${activeTab.offsetWidth}px`,
-    left: `${activeTab.offsetLeft}px`,
-  };
-});
+  const paddingInlineStart = parseInt(
+    window.getComputedStyle(activeTab).getPropertyValue("padding-inline-start").replace("px", ""),
+  );
 
-onMounted(async () => {
-  if (passedFirstRender.value) return;
+  const paddingInlineEnd = parseInt(
+    window.getComputedStyle(activeTab).getPropertyValue("padding-inline-end").replace("px", ""),
+  );
 
-  // nextTick does not work here, so we use setTimeout
-  setTimeout(() => {
-    passedFirstRender.value = true;
-  }, 1);
+  const width = parseInt(
+    window.getComputedStyle(activeTab).getPropertyValue("width").replace("px", ""),
+  );
+
+  const sliderWidth = width - paddingInlineStart - paddingInlineEnd + "px";
+
+  return {
+    width: sliderWidth,
+    left: `${activeTab.offsetLeft + paddingInlineStart}px`,
+  };
 });
 
 function changeActiveTab(tabName: string) {

From a9130612702aab34e39a9dcc7992cba978cca0e3 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 11:30:19 +0100
Subject: [PATCH 18/53] only animate slider after first render

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue            | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 639f5c772..ea9b2b43d 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -30,7 +30,7 @@
     </li>
 
     <div
-      :class="['mt-tabs__slider', { 'mt-tabs__slider--animated': !!sliderStyles }]"
+      :class="['mt-tabs__slider', { 'mt-tabs__slider--animated': shouldAnimateSlider }]"
       :style="sliderStyles"
     />
   </ul>
@@ -110,7 +110,10 @@ const sliderStyles = computed(() => {
   };
 });
 
+const shouldAnimateSlider = ref(false);
+
 function changeActiveTab(tabName: string) {
+  shouldAnimateSlider.value = true;
   nameOfActiveTab.value = tabName;
   emit("new-item-active", tabName);
 }

From 154b571fa49759b728ec3eb168a054a66ac4a627 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 11:45:58 +0100
Subject: [PATCH 19/53] only calcualte slider values after font has loaded

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index ea9b2b43d..218f94487 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -77,8 +77,17 @@ const props = defineProps<{
 
 const tabListRef = ref<HTMLElement | null>(null);
 
+const showSlider = ref(false);
+
+onMounted(() => {
+  document.fonts.ready.then(() => {
+    showSlider.value = true;
+  });
+});
+
 const sliderStyles = computed(() => {
-  if (!tabListRef.value || nameOfActiveTab.value === "unknown") return undefined;
+  if (!tabListRef.value || nameOfActiveTab.value === "unknown" || !showSlider.value)
+    return undefined;
 
   const activeTab = tabListRef.value.querySelector(
     `#mt-tabs__item--${nameOfActiveTab.value}`,

From 372cb8773c10f6205edea025a3769ff55d022bda Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 12:07:02 +0100
Subject: [PATCH 20/53] add error badge

---
 .../components/navigation/mt-tabs/mt-tabs.vue | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 218f94487..9137db5c6 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -25,7 +25,15 @@
         :data-text="item.label"
         :aria-selected="item.name === nameOfActiveTab"
       >
-        {{ item.label }}
+        <span>{{ item.label }}</span>
+
+        <mt-icon
+          v-if="item.hasError"
+          color="var(--color-text-critical-default)"
+          size="0.75rem"
+          name="solid-exclamation-circle"
+          :style="{ marginInlineStart: '0.25rem' }"
+        />
       </button>
     </li>
 
@@ -241,16 +249,4 @@ const futureFlags = useFutureFlags();
 .mt-tabs__slider--error {
   background-color: var(--color-border-critical-default);
 }
-
-.mt-tabs__error-badge {
-  margin-left: 2px;
-  width: 12px;
-  height: 12px;
-  color: var(--color-icon-critical-default);
-
-  > svg {
-    width: 100% !important;
-    height: 100% !important;
-  }
-}
 </style>

From 809f9154d8517d51b2dd662c6c57ada6e8906fb9 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 12:12:49 +0100
Subject: [PATCH 21/53] mock document.fonts.ready

---
 packages/component-library/vitest.setup.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/component-library/vitest.setup.ts b/packages/component-library/vitest.setup.ts
index f149f27ae..604c4395e 100644
--- a/packages/component-library/vitest.setup.ts
+++ b/packages/component-library/vitest.setup.ts
@@ -1 +1,5 @@
 import "@testing-library/jest-dom/vitest";
+
+Object.defineProperty(document, "fonts", {
+  value: { ready: Promise.resolve({}) },
+});

From 0fa8293efa85f3e73d4ebea4a0469895cab26023 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 12:13:00 +0100
Subject: [PATCH 22/53] add aria-invalid to errored tab

---
 .../navigation/mt-tabs/mt-tabs.spec.ts          | 17 +++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue   |  1 +
 2 files changed, 18 insertions(+)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index 83a8507e9..471266bc5 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -99,4 +99,21 @@ describe("mt-tabs", () => {
 
     expect(handler).not.toHaveBeenCalled();
   });
+
+  it("announces an errored tab", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2", hasError: true },
+    ];
+
+    render(MtTabs, {
+      props: { items },
+    });
+
+    await flushPromises();
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-invalid", "true");
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 9137db5c6..d72c956b7 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -24,6 +24,7 @@
         @click="() => changeActiveTab(item.name)"
         :data-text="item.label"
         :aria-selected="item.name === nameOfActiveTab"
+        :aria-invalid="item.hasError"
       >
         <span>{{ item.label }}</span>
 

From b3033f817facc663f7a6022a4d95ae14e0f89197 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 12:16:14 +0100
Subject: [PATCH 23/53] add error style to tab text

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue                | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index d72c956b7..a02f24533 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -17,6 +17,7 @@
           'mt-tabs__item',
           {
             'mt-tabs__item--active': item.name === nameOfActiveTab,
+            'mt-tabs__item--error': item.hasError,
           },
         ]"
         role="tab"

From 5d6073c56d17cdf2b47bbc7a3764966ba663c9c1 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 12:45:02 +0100
Subject: [PATCH 24/53] make sure resolving errors does remove error styles

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        |  28 +++++
 .../components/navigation/mt-tabs/mt-tabs.vue | 107 ++++++++++++------
 2 files changed, 98 insertions(+), 37 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index 471266bc5..500110d03 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -116,4 +116,32 @@ describe("mt-tabs", () => {
     // ASSERT
     expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-invalid", "true");
   });
+
+  it("shows normal tab when error is resolved", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2", hasError: true },
+    ];
+
+    const { rerender } = render(MtTabs, {
+      props: { items },
+    });
+
+    await flushPromises();
+
+    await userEvent.click(screen.getByRole("tab", { name: "Tab 2" }));
+
+    // ACT
+    await rerender({
+      items: [
+        { label: "Tab 1", name: "tab1" },
+        { label: "Tab 2", name: "tab2", hasError: false },
+      ],
+    });
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-invalid", "false");
+    expect(screen.getByTestId("mt-tabs__slider")).not.toHaveClass("mt-tabs__slider--error");
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index a02f24533..208481496 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -16,15 +16,15 @@
         :class="[
           'mt-tabs__item',
           {
-            'mt-tabs__item--active': item.name === nameOfActiveTab,
+            'mt-tabs__item--active': item.name === activeTab?.name,
             'mt-tabs__item--error': item.hasError,
           },
         ]"
         role="tab"
         :disabled="item.disabled"
-        @click="() => changeActiveTab(item.name)"
+        @click="() => changeActiveTab(item)"
         :data-text="item.label"
-        :aria-selected="item.name === nameOfActiveTab"
+        :aria-selected="item.name === activeTab?.name"
         :aria-invalid="item.hasError"
       >
         <span>{{ item.label }}</span>
@@ -40,8 +40,15 @@
     </li>
 
     <div
-      :class="['mt-tabs__slider', { 'mt-tabs__slider--animated': shouldAnimateSlider }]"
+      :class="[
+        'mt-tabs__slider',
+        {
+          'mt-tabs__slider--animated': shouldAnimateSlider,
+          'mt-tabs__slider--error': activeTab?.hasError,
+        },
+      ]"
       :style="sliderStyles"
+      data-testid="mt-tabs__slider"
     />
   </ul>
 </template>
@@ -60,9 +67,8 @@ import {
 import MtColorBadge from "../../feedback-indicator/mt-color-badge/mt-color-badge.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import PriorityPlus from "../../_internal/mt-priority-plus-navigation.vue";
-
-// TODO: add default bottom margin
 import { useFutureFlags } from "@/composables/useFutureFlags";
+import { should } from "chai";
 
 export interface TabItem {
   label: string;
@@ -71,11 +77,9 @@ export interface TabItem {
   disabled?: boolean;
   badge?: "positive" | "critical" | "warning" | "info";
   onClick?: (name: string) => void;
-  // @internal - will be added by priority plus menu component
   hidden?: boolean;
 }
 
-// TODO: IMO it makes more sense to use v-model for the component
 const emit = defineEmits(["new-item-active"]);
 
 const props = defineProps<{
@@ -86,68 +90,97 @@ const props = defineProps<{
 }>();
 
 const tabListRef = ref<HTMLElement | null>(null);
-
 const showSlider = ref(false);
+const shouldAnimateSlider = ref(false);
+const activeTab = ref<TabItem | null>(null);
+const sliderStyles = ref<{ width: string; left: string } | undefined>(undefined);
 
-onMounted(() => {
-  document.fonts.ready.then(() => {
-    showSlider.value = true;
-  });
-});
-
-const sliderStyles = computed(() => {
-  if (!tabListRef.value || nameOfActiveTab.value === "unknown" || !showSlider.value)
-    return undefined;
+// Function to calculate slider dimensions
+const calculateSliderDimensions = () => {
+  if (!tabListRef.value || !activeTab.value || !showSlider.value) return undefined;
 
-  const activeTab = tabListRef.value.querySelector(
-    `#mt-tabs__item--${nameOfActiveTab.value}`,
+  const activeTabDOMElement = tabListRef.value.querySelector(
+    `#mt-tabs__item--${activeTab.value.name}`,
   ) as HTMLElement | null;
 
-  if (!activeTab)
+  if (!activeTabDOMElement) {
     throw new Error(
       "Failed to render mt-tabs; Tab not found, please make sure the tab exists. Searched for tab with id: mt-tabs__item--" +
-        nameOfActiveTab.value,
+        activeTab.value.name,
     );
+  }
 
   const paddingInlineStart = parseInt(
-    window.getComputedStyle(activeTab).getPropertyValue("padding-inline-start").replace("px", ""),
+    window
+      .getComputedStyle(activeTabDOMElement)
+      .getPropertyValue("padding-inline-start")
+      .replace("px", ""),
   );
 
   const paddingInlineEnd = parseInt(
-    window.getComputedStyle(activeTab).getPropertyValue("padding-inline-end").replace("px", ""),
+    window
+      .getComputedStyle(activeTabDOMElement)
+      .getPropertyValue("padding-inline-end")
+      .replace("px", ""),
   );
 
   const width = parseInt(
-    window.getComputedStyle(activeTab).getPropertyValue("width").replace("px", ""),
+    window.getComputedStyle(activeTabDOMElement).getPropertyValue("width").replace("px", ""),
   );
 
   const sliderWidth = width - paddingInlineStart - paddingInlineEnd + "px";
 
   return {
     width: sliderWidth,
-    left: `${activeTab.offsetLeft + paddingInlineStart}px`,
+    left: `${activeTabDOMElement.offsetLeft + paddingInlineStart}px`,
   };
-});
+};
 
-const shouldAnimateSlider = ref(false);
+watch(
+  () => [activeTab.value, props.items],
+  async () => {
+    await nextTick();
+    sliderStyles.value = calculateSliderDimensions();
+  },
+  { deep: true },
+);
 
-function changeActiveTab(tabName: string) {
-  shouldAnimateSlider.value = true;
-  nameOfActiveTab.value = tabName;
-  emit("new-item-active", tabName);
-}
-
-const nameOfActiveTab = ref("unknown");
 onMounted(() => {
   const firstItem = props.items.at(0);
-  if (!firstItem)
+  if (!firstItem) {
     throw new Error(
       "Failed to render mt-tabs; No items provided, please provide at least one item.",
     );
+  }
+
+  const defaultItem = props.items.find((item) => item.name === props.defaultItem);
+  activeTab.value = defaultItem ?? firstItem;
 
-  nameOfActiveTab.value = props.defaultItem ?? firstItem.name;
+  document.fonts.ready.then(async () => {
+    showSlider.value = true;
+    await nextTick();
+
+    sliderStyles.value = calculateSliderDimensions();
+  });
 });
 
+function changeActiveTab(tab: TabItem) {
+  shouldAnimateSlider.value = true;
+  activeTab.value = tab;
+
+  emit("new-item-active", tab.name);
+}
+
+watch(
+  () => props.items,
+  () => {
+    const newActiveTab = props.items.find((item) => item.name === activeTab.value?.name);
+    if (!newActiveTab) return;
+
+    activeTab.value = newActiveTab;
+  },
+);
+
 const futureFlags = useFutureFlags();
 </script>
 

From 7582ef00ae19022d9dc94f40baecfb71e3af2311 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 13:13:57 +0100
Subject: [PATCH 25/53] add vertical tabs

---
 .../components/navigation/mt-tabs/mt-tabs.vue   | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 208481496..f4bd77832 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -4,6 +4,7 @@
       'mt-tabs',
       {
         'mt-tabs--small': small,
+        'mt-tabs--vertical': vertical,
         'mt-tabs--future-remove-default-margin': futureFlags.removeDefaultMargin,
       },
     ]"
@@ -63,6 +64,7 @@ import {
   onBeforeUpdate,
   onUpdated,
   nextTick,
+  type CSSProperties,
 } from "vue";
 import MtColorBadge from "../../feedback-indicator/mt-color-badge/mt-color-badge.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
@@ -93,7 +95,7 @@ const tabListRef = ref<HTMLElement | null>(null);
 const showSlider = ref(false);
 const shouldAnimateSlider = ref(false);
 const activeTab = ref<TabItem | null>(null);
-const sliderStyles = ref<{ width: string; left: string } | undefined>(undefined);
+const sliderStyles = ref<CSSProperties | undefined>(undefined);
 
 // Function to calculate slider dimensions
 const calculateSliderDimensions = () => {
@@ -110,6 +112,13 @@ const calculateSliderDimensions = () => {
     );
   }
 
+  if (props.vertical) {
+    return {
+      height: `${activeTabDOMElement.offsetHeight}px`,
+      top: `${activeTabDOMElement.offsetTop}px`,
+    };
+  }
+
   const paddingInlineStart = parseInt(
     window
       .getComputedStyle(activeTabDOMElement)
@@ -205,15 +214,13 @@ const futureFlags = useFutureFlags();
   flex-direction: column;
   box-shadow: none;
 
-  & li {
+  & .mt-tabs__item {
     border-bottom: none;
     border-left: 1px solid var(--color-border-primary-default);
   }
 
   & .mt-tabs__slider {
-    top: 0;
-    bottom: auto;
-    left: 3px;
+    width: 2px;
   }
 }
 

From 63969b7c62c4804974609f73b46f153f9dbb50c5 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 13:16:10 +0100
Subject: [PATCH 26/53] add badge

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue               | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index f4bd77832..9970c764b 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -37,6 +37,8 @@
           name="solid-exclamation-circle"
           :style="{ marginInlineStart: '0.25rem' }"
         />
+
+        <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
       </button>
     </li>
 

From 6ecade22b1faf4a8c46c34879fd15a2274396359 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Sun, 17 Nov 2024 14:05:16 +0100
Subject: [PATCH 27/53] increase space between error badge and text

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 9970c764b..1b152c915 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -35,7 +35,7 @@
           color="var(--color-text-critical-default)"
           size="0.75rem"
           name="solid-exclamation-circle"
-          :style="{ marginInlineStart: '0.25rem' }"
+          :style="{ marginInlineStart: '0.5rem' }"
         />
 
         <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />

From d879703891a95f47cd68430db4da8368ca0cdc3e Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Mon, 18 Nov 2024 09:37:02 +0100
Subject: [PATCH 28/53] wip

---
 .../_internal/mt-priority-plus-navigation.vue |  12 +-
 .../mt-tabs/mt-tabs.interactive.stories.ts    |  28 ++-
 .../components/navigation/mt-tabs/mt-tabs.vue | 178 ++++++++++++------
 .../mt-bare-popover/mt-bare-popover.spec.ts   |  58 +++++-
 .../mt-bare-popover/mt-bare-popover.vue       |  10 +-
 .../sub-components/mt-bare-popover-item.vue   |  12 +-
 6 files changed, 211 insertions(+), 87 deletions(-)

diff --git a/packages/component-library/src/components/_internal/mt-priority-plus-navigation.vue b/packages/component-library/src/components/_internal/mt-priority-plus-navigation.vue
index 5c4b8f354..9d8f09bee 100644
--- a/packages/component-library/src/components/_internal/mt-priority-plus-navigation.vue
+++ b/packages/component-library/src/components/_internal/mt-priority-plus-navigation.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { PropType } from "vue";
 import { defineComponent } from "vue";
 
@@ -12,15 +11,12 @@ interface ItemBase {
   [key: string]: any;
 }
 
-function getWidth(el: Element) {
-  if (!el) {
-    return 0;
-  }
+function getWidth(el: HTMLElement | null) {
+  if (!el) return 0;
 
   const styles = window.getComputedStyle(el);
   const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
 
-  // @ts-expect-error - offsetWidth exists on this element
   return Math.ceil(el.offsetWidth + margin);
 }
 
@@ -134,8 +130,8 @@ export default defineComponent({
     /**
      * The HTML elements of the visible items.
      */
-    visibleElements(): { [key: string]: Element } {
-      const els = {} as { [key: string]: Element };
+    visibleElements(): { [key: string]: HTMLElement } {
+      const els = {} as { [key: string]: HTMLElement };
       this.list.forEach((item) => {
         if (this.hiddenItemIdentifiers.includes(item[this.identifier])) {
           return;
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
index fbe66cbc0..384913fb0 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
@@ -167,28 +167,24 @@ export const VisualTestRenderContextTabWithActiveItem: MtTabsStory = {
 
     // wait until tab bar is loaded and context button gets rendered
 
-    await waitUntil(() => document.body.textContent?.includes("Context tab test"));
-    await waitUntil(() => document.querySelector(".mt-context-button__button"));
+    await waitUntil(() => canvas.getByRole("tab", { name: "Context tab test" }));
+    await waitUntil(() => canvas.getByRole("tab", { name: "More tabs" }));
 
-    const button = canvas.getByRole("button");
+    await userEvent.click(canvas.getByRole("tab", { name: "More tabs" }));
 
-    await userEvent.click(button);
+    const popover = within(document.querySelector('[role="dialog"]') as HTMLElement);
 
-    // Look inside the popover
-    const popover = within(
-      document.getElementsByClassName("mt-popover__content")[0] as HTMLElement,
-    );
-
-    const menuItem = popover.getAllByRole("tab");
+    await userEvent.click(popover.getByRole("tab", { name: "Item 10" }));
 
-    const lastItem = menuItem[menuItem.length - 1];
-    await expect(lastItem).toHaveTextContent("Item 10");
+    expect(document.querySelector('[role="dialog"]')).not.toBeInTheDocument();
 
-    await userEvent.click(lastItem);
+    await userEvent.click(canvas.getByRole("tab", { name: "More tabs" }));
 
-    await waitUntil(() => document.getElementsByClassName("mt-popover__content").length === 0);
-
-    expect(document.getElementsByClassName("mt-popover__content").length).toEqual(0);
+    const popoverWithSelectedTab = within(document.querySelector('[role="dialog"]') as HTMLElement);
+    expect(popoverWithSelectedTab.getByRole("tab", { name: "Item 10" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
   },
 };
 
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 1b152c915..bef6b1eec 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -1,59 +1,100 @@
 <template>
-  <ul
-    :class="[
-      'mt-tabs',
-      {
-        'mt-tabs--small': small,
-        'mt-tabs--vertical': vertical,
-        'mt-tabs--future-remove-default-margin': futureFlags.removeDefaultMargin,
-      },
-    ]"
-    ref="tabListRef"
-    role="tablist"
-  >
-    <li v-for="item in items" :key="item.name">
-      <button
-        :id="`mt-tabs__item--${item.name}`"
-        :class="[
-          'mt-tabs__item',
-          {
-            'mt-tabs__item--active': item.name === activeTab?.name,
-            'mt-tabs__item--error': item.hasError,
-          },
-        ]"
-        role="tab"
-        :disabled="item.disabled"
-        @click="() => changeActiveTab(item)"
-        :data-text="item.label"
-        :aria-selected="item.name === activeTab?.name"
-        :aria-invalid="item.hasError"
-      >
-        <span>{{ item.label }}</span>
-
-        <mt-icon
-          v-if="item.hasError"
-          color="var(--color-text-critical-default)"
-          size="0.75rem"
-          name="solid-exclamation-circle"
-          :style="{ marginInlineStart: '0.5rem' }"
-        />
-
-        <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
-      </button>
-    </li>
-
-    <div
+  <mt-priority-plus :list="items" #default="{ mainItems, moreItems }">
+    <ul
       :class="[
-        'mt-tabs__slider',
+        'mt-tabs',
         {
-          'mt-tabs__slider--animated': shouldAnimateSlider,
-          'mt-tabs__slider--error': activeTab?.hasError,
+          'mt-tabs--small': small,
+          'mt-tabs--vertical': vertical,
+          'mt-tabs--future-remove-default-margin': futureFlags.removeDefaultMargin,
         },
       ]"
-      :style="sliderStyles"
-      data-testid="mt-tabs__slider"
-    />
-  </ul>
+      ref="tabListRef"
+      role="tablist"
+    >
+      <li
+        v-for="item in vertical ? [...mainItems, ...moreItems] : mainItems"
+        :key="item.name"
+        :data-priority-plus="item.name"
+      >
+        <button
+          :id="`mt-tabs__item--${item.name}`"
+          :class="[
+            'mt-tabs__item',
+            {
+              'mt-tabs__item--active': item.name === activeTab?.name,
+              'mt-tabs__item--error': item.hasError,
+            },
+          ]"
+          role="tab"
+          :disabled="item.disabled"
+          @click="() => changeActiveTab(item)"
+          :data-text="item.label"
+          :aria-selected="item.name === activeTab?.name"
+          :aria-invalid="item.hasError"
+        >
+          <span>{{ item.label }}</span>
+
+          <mt-icon
+            v-if="item.hasError"
+            color="var(--color-text-critical-default)"
+            size="0.75rem"
+            name="solid-exclamation-circle"
+            :style="{ marginInlineStart: '0.5rem' }"
+          />
+
+          <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
+        </button>
+      </li>
+
+      <li v-if="moreItems.length && !vertical">
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button
+              ref="moreTabsButton"
+              v-bind="params"
+              role="tab"
+              class="mt-tabs__item"
+              :aria-label="t('moreTabsAriaLabel')"
+            >
+              <mt-icon name="solid-ellipsis-h-s" style="margin-inline-end: 0.5rem" />
+
+              <span>{{ t("moreTabs") }}</span>
+            </button>
+          </template>
+
+          <template #default="{ closePopover }">
+            <mt-bare-popover-item
+              v-for="item in moreItems"
+              :key="item.name"
+              role="tab"
+              :aria-selected="item.name === activeTab?.name"
+              @click="
+                () => {
+                  changeActiveTab(item);
+                  closePopover();
+                }
+              "
+            >
+              {{ item.label }}
+            </mt-bare-popover-item>
+          </template>
+        </mt-bare-popover>
+      </li>
+
+      <div
+        :class="[
+          'mt-tabs__slider',
+          {
+            'mt-tabs__slider--animated': shouldAnimateSlider,
+            'mt-tabs__slider--error': activeTab?.hasError,
+          },
+        ]"
+        :style="sliderStyles"
+        data-testid="mt-tabs__slider"
+      />
+    </ul>
+  </mt-priority-plus>
 </template>
 
 <script setup lang="ts">
@@ -70,9 +111,11 @@ import {
 } from "vue";
 import MtColorBadge from "../../feedback-indicator/mt-color-badge/mt-color-badge.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-import PriorityPlus from "../../_internal/mt-priority-plus-navigation.vue";
+import MtPriorityPlus from "../../_internal/mt-priority-plus-navigation.vue";
+import MtBarePopoverItem from "@/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue";
+import MtBarePopover from "@/components/overlay/mt-bare-popover/mt-bare-popover.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";
-import { should } from "chai";
+import { useI18n } from "@/composables/useI18n";
 
 export interface TabItem {
   label: string;
@@ -93,13 +136,26 @@ const props = defineProps<{
   defaultItem?: string;
 }>();
 
+const { t } = useI18n({
+  messages: {
+    en: {
+      moreTabs: "More",
+      moreTabsAriaLabel: "More tabs",
+    },
+    de: {
+      moreTabs: "Mehr",
+      moreTabsAriaLabel: "Mehr Tabs",
+    },
+  },
+});
+
 const tabListRef = ref<HTMLElement | null>(null);
 const showSlider = ref(false);
 const shouldAnimateSlider = ref(false);
 const activeTab = ref<TabItem | null>(null);
 const sliderStyles = ref<CSSProperties | undefined>(undefined);
+const moreTabsButton = ref<HTMLElement | null>(null);
 
-// Function to calculate slider dimensions
 const calculateSliderDimensions = () => {
   if (!tabListRef.value || !activeTab.value || !showSlider.value) return undefined;
 
@@ -108,10 +164,16 @@ const calculateSliderDimensions = () => {
   ) as HTMLElement | null;
 
   if (!activeTabDOMElement) {
-    throw new Error(
-      "Failed to render mt-tabs; Tab not found, please make sure the tab exists. Searched for tab with id: mt-tabs__item--" +
-        activeTab.value.name,
-    );
+    if (!moreTabsButton.value)
+      throw new Error(
+        "Failed to render mt-tabs; Tab not found, please make sure the tab exists. Searched for tab with id: mt-tabs__item--" +
+          activeTab.value.name,
+      );
+
+    return {
+      width: `${moreTabsButton.value.offsetWidth}px`,
+      left: `${moreTabsButton.value.offsetLeft}px`,
+    };
   }
 
   if (props.vertical) {
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
index 6f7f5f07a..ab7559ac7 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.spec.ts
@@ -1,7 +1,7 @@
 import { userEvent } from "@storybook/test";
 import { screen, render } from "@testing-library/vue";
 import MtBarePopover from "./mt-bare-popover.vue";
-import { flushPromises } from "@vue/test-utils";
+import MtBarePopoverItem from "./sub-components/mt-bare-popover-item.vue";
 
 describe("mt-bare-popover", () => {
   it("does not show the popover by default", () => {
@@ -222,4 +222,60 @@ describe("mt-bare-popover", () => {
       screen.getByRole("button").getAttribute("id"),
     );
   });
+
+  it("closes the popover when clicking on an item", async () => {
+    // ARRANGE
+    render({
+      components: { MtBarePopover, MtBarePopoverItem },
+      template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default="{ closePopover }">
+            <mt-bare-popover-item @click="closePopover">Click me</mt-bare-popover-item>
+          </template>
+        </mt-bare-popover>
+      `,
+    });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: "Click me" }));
+
+    // ASSERT
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(screen.getByRole("button")).toHaveFocus();
+  });
+
+  it("is still possible to tab through elements after closing popover by clicking on an item", async () => {
+    // ARRANGE
+    render({
+      components: { MtBarePopover, MtBarePopoverItem },
+      template: `
+        <mt-bare-popover>
+          <template #trigger="params">
+            <button v-bind="params">Trigger</button>
+          </template>
+
+          <template #default="{ closePopover }">
+            <mt-bare-popover-item @click="closePopover">Click me</mt-bare-popover-item>
+          </template>
+        </mt-bare-popover>
+
+        <input data-testid="input" />
+      `,
+    });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: "Click me" }));
+    await userEvent.tab();
+
+    // ASSERT
+    expect(screen.getByTestId("input")).toHaveFocus();
+  });
 });
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
index d590b5b2c..11ee9eaab 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
@@ -22,14 +22,14 @@
       >
 
       <ul class="mt-bare-popover__list">
-        <slot name="default" />
+        <slot name="default" v-bind="{ closePopover: () => (isVisible = false) }" />
       </ul>
     </div>
   </teleport>
 </template>
 
 <script setup lang="ts">
-import { AriaAttributes, nextTick, onMounted, onUnmounted, ref } from "vue";
+import { AriaAttributes, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
 import { createId } from "@/utils/id";
@@ -111,6 +111,12 @@ onClickOutside(dialogRef, (event) => {
   isVisible.value = false;
 });
 
+watch(isVisible, () => {
+  if (isVisible.value) return;
+
+  if (trap) trap.deactivate();
+});
+
 onUnmounted(() => {
   if (trap) trap.deactivate();
 });
diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue b/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
index e19151477..baa54d2a8 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue
@@ -1,12 +1,20 @@
 <template>
   <li>
-    <button class="mt-bare-popover-item" :role="$attrs?.role ?? 'button'">
+    <button
+      class="mt-bare-popover-item"
+      v-bind="{ ...$attrs, role: $attrs?.role ?? 'button' }"
+      @click="$emit('click')"
+    >
       <slot />
     </button>
   </li>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+
+defineEmits(["click"]);
+</script>
 
 <style scoped>
 .mt-bare-popover-item {

From e3ab57c83768508d18c7bde5fa6c420fc206bb24 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 09:27:14 +0100
Subject: [PATCH 29/53] style active item in more popover

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue          | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index bef6b1eec..9c13a4661 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -69,6 +69,13 @@
               :key="item.name"
               role="tab"
               :aria-selected="item.name === activeTab?.name"
+              :style="
+                item.name === activeTab?.name && {
+                  textDecoration: 'underline',
+                  fontWeight: 'var(--font-weight-semibold)',
+                  color: 'var(--color-text-brand-default)',
+                }
+              "
               @click="
                 () => {
                   changeActiveTab(item);

From 09a15bda4018988c6e0f22548864e2d9c1dbc5d6 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 09:30:24 +0100
Subject: [PATCH 30/53] increase font weight of more button when one of its
 children is active

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 9c13a4661..7d97e5a86 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -54,7 +54,13 @@
               ref="moreTabsButton"
               v-bind="params"
               role="tab"
-              class="mt-tabs__item"
+              :class="[
+                'mt-tabs__item',
+                {
+                  // @ts-expect-error
+                  'mt-tabs__item--active': moreItems.some((item) => item.name === activeTab?.name),
+                },
+              ]"
               :aria-label="t('moreTabsAriaLabel')"
             >
               <mt-icon name="solid-ellipsis-h-s" style="margin-inline-end: 0.5rem" />

From dcd0e22140d5b87265a9a41300a114b340e438e9 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 09:34:32 +0100
Subject: [PATCH 31/53] add error styles to more items

---
 .../components/navigation/mt-tabs/mt-tabs.vue  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 7d97e5a86..857c558df 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -59,6 +59,8 @@
                 {
                   // @ts-expect-error
                   'mt-tabs__item--active': moreItems.some((item) => item.name === activeTab?.name),
+                  // @ts-expect-error
+                  'mt-tabs__item--error': moreItems.some((item) => item.hasError),
                 },
               ]"
               :aria-label="t('moreTabsAriaLabel')"
@@ -75,13 +77,15 @@
               :key="item.name"
               role="tab"
               :aria-selected="item.name === activeTab?.name"
-              :style="
-                item.name === activeTab?.name && {
-                  textDecoration: 'underline',
-                  fontWeight: 'var(--font-weight-semibold)',
-                  color: 'var(--color-text-brand-default)',
-                }
-              "
+              :style="{
+                textDecoration: item.name === activeTab?.name && 'underline',
+                fontWeight: item.name === activeTab?.name && 'var(--font-weight-semibold)',
+                color: item.hasError
+                  ? 'var(--color-text-critical-default)'
+                  : item.name === activeTab?.name
+                    ? 'var(--color-text-brand-default)'
+                    : 'var(--color-text-primary-default)',
+              }"
               @click="
                 () => {
                   changeActiveTab(item);

From 5deeae51bdc54a73cfee8706ef92c10bf62d0a96 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 09:35:57 +0100
Subject: [PATCH 32/53] wip

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue           | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 857c558df..3e4b81838 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -65,7 +65,11 @@
               ]"
               :aria-label="t('moreTabsAriaLabel')"
             >
-              <mt-icon name="solid-ellipsis-h-s" style="margin-inline-end: 0.5rem" />
+              <mt-icon
+                name="solid-ellipsis-h-s"
+                color="var(--color-text-primary-default)"
+                style="margin-inline-end: 0.5rem"
+              />
 
               <span>{{ t("moreTabs") }}</span>
             </button>

From 07e88df26fb624e5127ef323afe0db2ac057ae75 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 09:43:33 +0100
Subject: [PATCH 33/53] add badge to more items

---
 .../mt-tabs/mt-tabs.interactive.stories.ts    | 19 ++++++-------------
 .../components/navigation/mt-tabs/mt-tabs.vue |  4 +++-
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
index 384913fb0..3eae05cdb 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
@@ -245,22 +245,15 @@ export const VisualTestRenderTabsWithContextMenuBadge: MtTabsStory = {
     const canvas = within(canvasElement);
 
     // wait until tab bar is loaded and context button gets rendered
+    await waitUntil(() => canvas.getByRole("tab", { name: "Context tab test" }));
 
-    await waitUntil(() => document.body.textContent?.includes("Context tab test"));
-    await waitUntil(() => document.querySelector("button"));
-
-    const button = canvas.getByRole("button");
-
-    await userEvent.click(button);
-
-    // Look inside the popover
-    const popover = within(
-      document.getElementsByClassName("mt-popover__content")[0] as HTMLElement,
-    );
+    await userEvent.click(canvas.getByRole("tab", { name: "More tabs" }));
 
-    const menuItem = popover.getAllByRole("tab");
+    const popover = within(document.querySelector("[role='dialog']") as HTMLElement);
 
-    await expect(menuItem[menuItem.length - 9]).toHaveTextContent("Item with critical badge");
+    await expect(
+      popover.getByRole("tab", { name: "Item with critical badge" }),
+    ).toBeInTheDocument();
   },
 };
 
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 3e4b81838..60020e21f 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -97,7 +97,9 @@
                 }
               "
             >
-              {{ item.label }}
+              <span>{{ item.label }}</span>
+
+              <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
             </mt-bare-popover-item>
           </template>
         </mt-bare-popover>

From 19321658dd8d74a0bebd290aee1fcbe5795b2d2e Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 10:45:35 +0100
Subject: [PATCH 34/53] only allow users to tab to active element

---
 .../mt-tabs/mt-tabs.interactive.stories.ts    | 43 +++++++++++++++++++
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 42 ++++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue |  2 +
 3 files changed, 87 insertions(+)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
index 3eae05cdb..9ebe8a5d8 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
@@ -291,3 +291,46 @@ export const VisualTestRenderTabsWithDisabledItem: MtTabsStory = {
     expect(canvas.getByRole("tab", { name: /item 1/i })).toHaveAttribute("aria-selected", "true");
   },
 };
+
+export const CannotTabToMoreItemsTabWhenNoneOfItsChildrenIsActive: MtTabsStory = {
+  args: {
+    small: true,
+    defaultItem: "item1",
+    items: [
+      ...tabItems.slice(0, 4),
+      {
+        label: "Item with icon",
+        name: "item5",
+      },
+      ...tabItems.slice(5),
+    ],
+  },
+  async play() {
+    await userEvent.tab();
+    await userEvent.tab();
+
+    await expect(document.body).toHaveFocus();
+  },
+};
+
+export const TabsToMoreItemsTabWhenOneOfItsChildrenIsActive: MtTabsStory = {
+  args: {
+    small: true,
+    defaultItem: "item11",
+    items: [
+      ...tabItems.slice(0, 4),
+      {
+        label: "Item with icon",
+        name: "item5",
+      },
+      ...tabItems.slice(5),
+    ],
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+
+    await userEvent.tab();
+
+    await expect(canvas.getByRole("tab", { name: "More tabs" })).toHaveFocus();
+  },
+};
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index 500110d03..7db5fd5d4 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -3,6 +3,7 @@ import type { TabItem } from "./mt-tabs.vue";
 import MtTabs from "./mt-tabs.vue";
 import { render, screen } from "@testing-library/vue";
 import { userEvent } from "@storybook/test";
+import { setup } from "@storybook/vue3";
 
 describe("mt-tabs", () => {
   it("selects the first tab by default", async () => {
@@ -144,4 +145,45 @@ describe("mt-tabs", () => {
     expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-invalid", "false");
     expect(screen.getByTestId("mt-tabs__slider")).not.toHaveClass("mt-tabs__slider--error");
   });
+
+  it("focuses the active tab when tabbing into the tabs", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2" },
+    ];
+
+    render(MtTabs, {
+      props: { items, defaultItem: "tab2" },
+    });
+
+    await flushPromises();
+
+    // ACT
+    await userEvent.tab();
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveFocus();
+  });
+
+  it("only tabs through one tab and than to the next element", async () => {
+    // ARRANGE
+    render({
+      components: { MtTabs },
+      template: '<div><mt-tabs :items="items" /><button>Some button</button></div>',
+      setup: () => ({
+        items: [
+          { label: "Tab 1", name: "tab1" },
+          { label: "Tab 2", name: "tab2" },
+        ],
+      }),
+    });
+
+    // ACT
+    await userEvent.tab();
+    await userEvent.tab();
+
+    // ASSERT
+    expect(screen.getByRole("button", { name: "Some button" })).toHaveFocus();
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 60020e21f..f03652ea0 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -32,6 +32,7 @@
           :data-text="item.label"
           :aria-selected="item.name === activeTab?.name"
           :aria-invalid="item.hasError"
+          :tabindex="item.name === activeTab?.name ? 0 : -1"
         >
           <span>{{ item.label }}</span>
 
@@ -64,6 +65,7 @@
                 },
               ]"
               :aria-label="t('moreTabsAriaLabel')"
+              :tabindex="moreItems.some((item) => item.name === activeTab?.name) ? 0 : -1"
             >
               <mt-icon
                 name="solid-ellipsis-h-s"

From 3cc1f6da9fe30ddfae15656dbe42c1c80bd4e71d Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 13:38:18 +0100
Subject: [PATCH 35/53] allow user to navigate the tab with the right arrow key

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 53 ++++++++++++++++++-
 .../components/navigation/mt-tabs/mt-tabs.vue | 39 ++++++++++++++
 2 files changed, 91 insertions(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index 7db5fd5d4..e6cd6ede6 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -3,7 +3,6 @@ import type { TabItem } from "./mt-tabs.vue";
 import MtTabs from "./mt-tabs.vue";
 import { render, screen } from "@testing-library/vue";
 import { userEvent } from "@storybook/test";
-import { setup } from "@storybook/vue3";
 
 describe("mt-tabs", () => {
   it("selects the first tab by default", async () => {
@@ -186,4 +185,56 @@ describe("mt-tabs", () => {
     // ASSERT
     expect(screen.getByRole("button", { name: "Some button" })).toHaveFocus();
   });
+
+  it("focuses the next tab when pressing right arrow key", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2" },
+    ];
+
+    render(MtTabs, {
+      props: { items, defaultItem: "tab1" },
+    });
+
+    await flushPromises();
+
+    await userEvent.tab();
+
+    // ACT
+    await userEvent.keyboard("{ArrowRight}");
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveFocus();
+
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("is only possible to focus the active element after navigating via the arrow keys", async () => {
+    // ARRANGE
+    render(MtTabs, {
+      props: {
+        items: [
+          { label: "Tab 1", name: "tab1" },
+          { label: "Tab 2", name: "tab2" },
+        ],
+        defaultItem: "tab1",
+      },
+    });
+
+    await flushPromises();
+
+    await userEvent.tab();
+    await userEvent.keyboard("{ArrowRight}");
+
+    // ACT & ASSERT
+    await userEvent.tab();
+
+    await userEvent.tab();
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveFocus();
+
+    await userEvent.tab();
+    expect(document.body).toHaveFocus();
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index f03652ea0..ff67868cf 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -33,6 +33,8 @@
           :aria-selected="item.name === activeTab?.name"
           :aria-invalid="item.hasError"
           :tabindex="item.name === activeTab?.name ? 0 : -1"
+          @keydown.arrow-right="focusNextTab"
+          @blur="onBlur"
         >
           <span>{{ item.label }}</span>
 
@@ -279,6 +281,43 @@ watch(
   },
 );
 
+function focusNextTab() {
+  const indexOfActiveTab = props.items.findIndex((item) => item.name === activeTab.value?.name);
+  const nextItem = props.items.at(indexOfActiveTab + 1);
+
+  if (!tabListRef.value || !nextItem || !activeTab.value) return;
+
+  const nextTabDOMElement = tabListRef.value.querySelector<HTMLButtonElement>(
+    `#mt-tabs__item--${nextItem.name}`,
+  );
+  const currentFocusedTab = tabListRef.value.querySelector<HTMLButtonElement>(
+    `#mt-tabs__item--${activeTab.value.name}`,
+  );
+
+  if (!nextTabDOMElement || !currentFocusedTab) return;
+
+  nextTabDOMElement.setAttribute("tabindex", "0");
+  nextTabDOMElement.focus();
+
+  currentFocusedTab.setAttribute("tabindex", "-1");
+}
+
+function onBlur(event: FocusEvent) {
+  const focusedAnotherTabItem =
+    event.relatedTarget instanceof HTMLElement &&
+    event.relatedTarget.getAttribute("role") === "tab";
+
+  if (focusedAnotherTabItem || !tabListRef.value || !(event.target instanceof HTMLElement)) return;
+  event.target.setAttribute("tabindex", "-1");
+
+  const activeTabDOMElement = tabListRef.value.querySelector<HTMLButtonElement>(
+    `#mt-tabs__item--${activeTab.value?.name}`,
+  );
+
+  if (!activeTabDOMElement) return;
+  activeTabDOMElement.setAttribute("tabindex", "0");
+}
+
 const futureFlags = useFutureFlags();
 </script>
 

From c034d5b69033b694b9241ff72f3a1715c23fa795 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 13:43:35 +0100
Subject: [PATCH 36/53] it is possible to navigate multiple tabs via the arrow
 key by pressing it multiple times

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 28 +++++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue |  6 ++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index e6cd6ede6..28ab66e96 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -237,4 +237,32 @@ describe("mt-tabs", () => {
     await userEvent.tab();
     expect(document.body).toHaveFocus();
   });
+
+  it("focuses the third tab when pressing the right arrow key two times", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2" },
+      { label: "Tab 3", name: "tab3" },
+    ];
+
+    render(MtTabs, {
+      props: { items, defaultItem: "tab1" },
+    });
+
+    await flushPromises();
+
+    await userEvent.tab();
+
+    // ACT
+    await userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 3" })).toHaveFocus();
+
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "false");
+    expect(screen.getByRole("tab", { name: "Tab 3" })).toHaveAttribute("aria-selected", "false");
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index ff67868cf..f407f7055 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -33,7 +33,7 @@
           :aria-selected="item.name === activeTab?.name"
           :aria-invalid="item.hasError"
           :tabindex="item.name === activeTab?.name ? 0 : -1"
-          @keydown.arrow-right="focusNextTab"
+          @keydown.arrow-right="() => focusNextTab({ currentTab: item.name })"
           @blur="onBlur"
         >
           <span>{{ item.label }}</span>
@@ -281,8 +281,8 @@ watch(
   },
 );
 
-function focusNextTab() {
-  const indexOfActiveTab = props.items.findIndex((item) => item.name === activeTab.value?.name);
+function focusNextTab({ currentTab }: { currentTab: string }) {
+  const indexOfActiveTab = props.items.findIndex((item) => item.name === currentTab);
   const nextItem = props.items.at(indexOfActiveTab + 1);
 
   if (!tabListRef.value || !nextItem || !activeTab.value) return;

From 038c76c18fe64e8770f3532d2bb049e7d3fd2a19 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 13:47:05 +0100
Subject: [PATCH 37/53] move focus to previous item when pressing the left
 arrow key

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 25 +++++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue | 22 ++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index 28ab66e96..fcd563900 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -265,4 +265,29 @@ describe("mt-tabs", () => {
     expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "false");
     expect(screen.getByRole("tab", { name: "Tab 3" })).toHaveAttribute("aria-selected", "false");
   });
+
+  it("focus the first tab when pressing the left arrow key on the second tab", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2" },
+    ];
+
+    render(MtTabs, {
+      props: { items, defaultItem: "tab2" },
+    });
+
+    await flushPromises();
+
+    await userEvent.tab();
+
+    // ACT
+    await userEvent.keyboard("{ArrowLeft}");
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveFocus();
+
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "false");
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index f407f7055..88c680220 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -34,6 +34,7 @@
           :aria-invalid="item.hasError"
           :tabindex="item.name === activeTab?.name ? 0 : -1"
           @keydown.arrow-right="() => focusNextTab({ currentTab: item.name })"
+          @keydown.arrow-left="() => focusPreviousTab({ currentTab: item.name })"
           @blur="onBlur"
         >
           <span>{{ item.label }}</span>
@@ -302,6 +303,27 @@ function focusNextTab({ currentTab }: { currentTab: string }) {
   currentFocusedTab.setAttribute("tabindex", "-1");
 }
 
+function focusPreviousTab({ currentTab }: { currentTab: string }) {
+  const indexOfActiveTab = props.items.findIndex((item) => item.name === currentTab);
+  const previousItem = props.items.at(indexOfActiveTab - 1);
+
+  if (!tabListRef.value || !previousItem || !activeTab.value) return;
+
+  const previousTabDOMElement = tabListRef.value.querySelector<HTMLButtonElement>(
+    `#mt-tabs__item--${previousItem.name}`,
+  );
+  const currentFocusedTab = tabListRef.value.querySelector<HTMLButtonElement>(
+    `#mt-tabs__item--${activeTab.value.name}`,
+  );
+
+  if (!previousTabDOMElement || !currentFocusedTab) return;
+
+  previousTabDOMElement.setAttribute("tabindex", "0");
+  previousTabDOMElement.focus();
+
+  currentFocusedTab.setAttribute("tabindex", "-1");
+}
+
 function onBlur(event: FocusEvent) {
   const focusedAnotherTabItem =
     event.relatedTarget instanceof HTMLElement &&

From de9b264fb8c1707e6d826fc3842065d0177ea464 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 20 Nov 2024 13:57:21 +0100
Subject: [PATCH 38/53] focuses the last item when pressing the left arrow key
 on the first item

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 25 +++++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue | 14 ++++++++---
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index fcd563900..664bcdd89 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -290,4 +290,29 @@ describe("mt-tabs", () => {
     expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "false");
     expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
   });
+
+  it("focuses the last tab when pressing the left arrow key on the first tab", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2" },
+    ];
+
+    render(MtTabs, {
+      props: { items, defaultItem: "tab1" },
+    });
+
+    await flushPromises();
+
+    await userEvent.tab();
+
+    // ACT
+    await userEvent.keyboard("{ArrowLeft}");
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveFocus();
+
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "false");
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 88c680220..c5ae640d3 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -144,6 +144,7 @@ import MtBarePopoverItem from "@/components/overlay/mt-bare-popover/sub-componen
 import MtBarePopover from "@/components/overlay/mt-bare-popover/mt-bare-popover.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";
 import { useI18n } from "@/composables/useI18n";
+import { debug } from "console";
 
 export interface TabItem {
   label: string;
@@ -312,14 +313,21 @@ function focusPreviousTab({ currentTab }: { currentTab: string }) {
   const previousTabDOMElement = tabListRef.value.querySelector<HTMLButtonElement>(
     `#mt-tabs__item--${previousItem.name}`,
   );
+
+  const lastVisibleTabDOMElement = Array.from(
+    tabListRef.value.querySelectorAll<HTMLButtonElement>(".mt-tabs__item:not([aria-haspopup])"),
+  ).at(-1);
+
+  const nextElementToFocus = previousTabDOMElement ?? lastVisibleTabDOMElement;
+
   const currentFocusedTab = tabListRef.value.querySelector<HTMLButtonElement>(
     `#mt-tabs__item--${activeTab.value.name}`,
   );
 
-  if (!previousTabDOMElement || !currentFocusedTab) return;
+  if (!nextElementToFocus || !currentFocusedTab) return;
 
-  previousTabDOMElement.setAttribute("tabindex", "0");
-  previousTabDOMElement.focus();
+  nextElementToFocus.setAttribute("tabindex", "0");
+  nextElementToFocus.focus();
 
   currentFocusedTab.setAttribute("tabindex", "-1");
 }

From 37e3f0a7351b343170f4d62ea7642e96c66aea8c Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 21 Nov 2024 07:22:38 +0100
Subject: [PATCH 39/53] focus first tab when trying to navigate to the next tab
 when on the last tab

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 25 +++++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue |  7 ++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index 664bcdd89..454660e80 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -315,4 +315,29 @@ describe("mt-tabs", () => {
     expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
     expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "false");
   });
+
+  it("focuses the first tab when pressing the right arrow key on the last tab", async () => {
+    // ARRANGE
+    const items: TabItem[] = [
+      { label: "Tab 1", name: "tab1" },
+      { label: "Tab 2", name: "tab2" },
+    ];
+
+    render(MtTabs, {
+      props: { items, defaultItem: "tab2" },
+    });
+
+    await flushPromises();
+
+    await userEvent.tab();
+
+    // ACT
+    await userEvent.keyboard("{ArrowRight}");
+
+    // ASSERT
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveFocus();
+
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "false");
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index c5ae640d3..06a389d2b 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -286,11 +286,14 @@ watch(
 function focusNextTab({ currentTab }: { currentTab: string }) {
   const indexOfActiveTab = props.items.findIndex((item) => item.name === currentTab);
   const nextItem = props.items.at(indexOfActiveTab + 1);
+  const firstItem = props.items.at(0);
+
+  const nextItemToFocus = nextItem ?? firstItem;
 
-  if (!tabListRef.value || !nextItem || !activeTab.value) return;
+  if (!tabListRef.value || !nextItemToFocus || !activeTab.value) return;
 
   const nextTabDOMElement = tabListRef.value.querySelector<HTMLButtonElement>(
-    `#mt-tabs__item--${nextItem.name}`,
+    `#mt-tabs__item--${nextItemToFocus.name}`,
   );
   const currentFocusedTab = tabListRef.value.querySelector<HTMLButtonElement>(
     `#mt-tabs__item--${activeTab.value.name}`,

From 7d5580400f16b3a0f9427155c1fdc912fd8b0ce0 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 21 Nov 2024 07:35:51 +0100
Subject: [PATCH 40/53] fix: do not focus previous element when pressing shift
 and tab

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 29 +++++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue |  7 +++--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index 454660e80..2cebf0f64 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -340,4 +340,33 @@ describe("mt-tabs", () => {
     expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "false");
     expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
   });
+
+  it("moves focus out of the tab component when pressing shift and tab and the user previously navigated via the right arrow key", async () => {
+    // ARRANGE
+    render(MtTabs, {
+      props: {
+        items: [
+          { label: "Tab 1", name: "tab1" },
+          { label: "Tab 2", name: "tab2" },
+          { label: "Tab 3", name: "tab3" },
+          { label: "Tab 4", name: "tab4" },
+        ],
+        defaultItem: "tab1",
+      },
+    });
+
+    await flushPromises();
+
+    await userEvent.tab();
+
+    // ACT
+    await userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
+
+    await userEvent.keyboard("{Shift>}{Tab}{/Shift}");
+
+    // ASSERT
+    expect(document.body).toHaveFocus();
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 06a389d2b..bf1c7d2ff 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -284,8 +284,9 @@ watch(
 );
 
 function focusNextTab({ currentTab }: { currentTab: string }) {
-  const indexOfActiveTab = props.items.findIndex((item) => item.name === currentTab);
-  const nextItem = props.items.at(indexOfActiveTab + 1);
+  const indexOfFocusedTab = props.items.findIndex((item) => item.name === currentTab);
+
+  const nextItem = props.items.at(indexOfFocusedTab + 1);
   const firstItem = props.items.at(0);
 
   const nextItemToFocus = nextItem ?? firstItem;
@@ -296,7 +297,7 @@ function focusNextTab({ currentTab }: { currentTab: string }) {
     `#mt-tabs__item--${nextItemToFocus.name}`,
   );
   const currentFocusedTab = tabListRef.value.querySelector<HTMLButtonElement>(
-    `#mt-tabs__item--${activeTab.value.name}`,
+    `#mt-tabs__item--${currentTab}`,
   );
 
   if (!nextTabDOMElement || !currentFocusedTab) return;

From 240ed33bdb4dc55dab19ff653aa4cca2ee955e57 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 21 Nov 2024 07:42:34 +0100
Subject: [PATCH 41/53] fix: move focus out of tabs when tabbing and pressed
 the left arrow key before

---
 .../navigation/mt-tabs/mt-tabs.spec.ts        | 28 +++++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue |  6 ++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
index 2cebf0f64..16f3b0f10 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.spec.ts
@@ -369,4 +369,32 @@ describe("mt-tabs", () => {
     // ASSERT
     expect(document.body).toHaveFocus();
   });
+
+  it("moves focus out of the tabs when pressing tab and the user navigated via the left arrow key before", async () => {
+    // ARRANGE
+    render(MtTabs, {
+      props: {
+        items: [
+          { label: "Tab 1", name: "tab1" },
+          { label: "Tab 2", name: "tab2" },
+          { label: "Tab 3", name: "tab3" },
+          { label: "Tab 4", name: "tab4" },
+        ],
+        defaultItem: "tab4",
+      },
+    });
+
+    await flushPromises();
+
+    await userEvent.tab();
+
+    // ACT
+    await userEvent.keyboard("{ArrowLeft}");
+    await userEvent.keyboard("{ArrowLeft}");
+
+    await userEvent.tab();
+
+    // ASSERT
+    expect(document.body).toHaveFocus();
+  });
 });
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index bf1c7d2ff..f7caf0502 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -309,8 +309,8 @@ function focusNextTab({ currentTab }: { currentTab: string }) {
 }
 
 function focusPreviousTab({ currentTab }: { currentTab: string }) {
-  const indexOfActiveTab = props.items.findIndex((item) => item.name === currentTab);
-  const previousItem = props.items.at(indexOfActiveTab - 1);
+  const indexOfFocusedTab = props.items.findIndex((item) => item.name === currentTab);
+  const previousItem = props.items.at(indexOfFocusedTab - 1);
 
   if (!tabListRef.value || !previousItem || !activeTab.value) return;
 
@@ -325,7 +325,7 @@ function focusPreviousTab({ currentTab }: { currentTab: string }) {
   const nextElementToFocus = previousTabDOMElement ?? lastVisibleTabDOMElement;
 
   const currentFocusedTab = tabListRef.value.querySelector<HTMLButtonElement>(
-    `#mt-tabs__item--${activeTab.value.name}`,
+    `#mt-tabs__item--${currentTab}`,
   );
 
   if (!nextElementToFocus || !currentFocusedTab) return;

From 82adbec0f7d80fb5208c4133e5252754164399df Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 21 Nov 2024 07:46:06 +0100
Subject: [PATCH 42/53] supress typescript error caused by priority plus
 navigation

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue            | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index f7caf0502..04a96bd26 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -68,7 +68,10 @@
                 },
               ]"
               :aria-label="t('moreTabsAriaLabel')"
-              :tabindex="moreItems.some((item) => item.name === activeTab?.name) ? 0 : -1"
+              :tabindex="
+                // @ts-expect-error
+                moreItems.some((item) => item.name === activeTab?.name) ? 0 : -1
+              "
             >
               <mt-icon
                 name="solid-ellipsis-h-s"

From db171ec8fa3963ddf357c9d6c83527ec1293ea9a Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 21 Nov 2024 07:54:34 +0100
Subject: [PATCH 43/53] focuses the more tabs button when pressing the left
 arrow key on the first element

---
 .../mt-tabs/mt-tabs.interactive.stories.ts      | 17 +++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue   | 10 +++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
index 9ebe8a5d8..1796d45cd 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
@@ -334,3 +334,20 @@ export const TabsToMoreItemsTabWhenOneOfItsChildrenIsActive: MtTabsStory = {
     await expect(canvas.getByRole("tab", { name: "More tabs" })).toHaveFocus();
   },
 };
+
+export const FocusesTheMoreTabsWhenPressingLeftArrowKeyOnFirstTab: MtTabsStory = {
+  args: {
+    small: true,
+    defaultItem: "item1",
+    items: tabItems,
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+
+    await userEvent.tab();
+
+    await userEvent.keyboard("{arrowleft}");
+
+    await expect(canvas.getByRole("tab", { name: "More tabs" })).toHaveFocus();
+  },
+};
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 04a96bd26..d0f4f6695 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -72,6 +72,7 @@
                 // @ts-expect-error
                 moreItems.some((item) => item.name === activeTab?.name) ? 0 : -1
               "
+              @blur="onBlur"
             >
               <mt-icon
                 name="solid-ellipsis-h-s"
@@ -315,17 +316,20 @@ function focusPreviousTab({ currentTab }: { currentTab: string }) {
   const indexOfFocusedTab = props.items.findIndex((item) => item.name === currentTab);
   const previousItem = props.items.at(indexOfFocusedTab - 1);
 
-  if (!tabListRef.value || !previousItem || !activeTab.value) return;
+  const previousItemToFocus = previousItem ?? props.items.at(-1);
+
+  if (!tabListRef.value || !previousItemToFocus || !activeTab.value) return;
 
   const previousTabDOMElement = tabListRef.value.querySelector<HTMLButtonElement>(
-    `#mt-tabs__item--${previousItem.name}`,
+    `#mt-tabs__item--${previousItemToFocus.name}`,
   );
 
   const lastVisibleTabDOMElement = Array.from(
     tabListRef.value.querySelectorAll<HTMLButtonElement>(".mt-tabs__item:not([aria-haspopup])"),
   ).at(-1);
 
-  const nextElementToFocus = previousTabDOMElement ?? lastVisibleTabDOMElement;
+  const nextElementToFocus =
+    previousTabDOMElement ?? moreTabsButton.value ?? lastVisibleTabDOMElement;
 
   const currentFocusedTab = tabListRef.value.querySelector<HTMLButtonElement>(
     `#mt-tabs__item--${currentTab}`,

From f128dd0da11d18ff69744f2bba78fcbf66654aa2 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 21 Nov 2024 08:20:47 +0100
Subject: [PATCH 44/53] allow users to move out of the more tabs button via the
 arrow keys

---
 .../mt-tabs/mt-tabs.interactive.stories.ts    | 23 ++++++++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue | 27 ++++++++++++-------
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
index 1796d45cd..ad0cc649d 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
@@ -351,3 +351,26 @@ export const FocusesTheMoreTabsWhenPressingLeftArrowKeyOnFirstTab: MtTabsStory =
     await expect(canvas.getByRole("tab", { name: "More tabs" })).toHaveFocus();
   },
 };
+
+export const MovesFocusAwayFromTheMoreTabsButtonWhenPressingTheArrowKeys: MtTabsStory = {
+  args: {
+    small: true,
+    defaultItem: "item1",
+    items: tabItems,
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+
+    await userEvent.tab();
+
+    await userEvent.keyboard("{arrowleft}");
+    await userEvent.keyboard("{arrowright}");
+
+    await expect(canvas.getByRole("tab", { name: "Item 1" })).toHaveFocus();
+
+    await userEvent.keyboard("{arrowleft}");
+    await userEvent.keyboard("{arrowleft}");
+
+    await expect(canvas.getByRole("tab", { name: "Item 7" })).toHaveFocus();
+  },
+};
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index d0f4f6695..dd7a4b1e8 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -73,6 +73,8 @@
                 moreItems.some((item) => item.name === activeTab?.name) ? 0 : -1
               "
               @blur="onBlur"
+              @keydown.arrow-right="() => focusNextTab({ currentTab: 'more-tabs' })"
+              @keydown.arrow-left="() => focusPreviousTab({ currentTab: 'more-tabs' })"
             >
               <mt-icon
                 name="solid-ellipsis-h-s"
@@ -287,7 +289,7 @@ watch(
   },
 );
 
-function focusNextTab({ currentTab }: { currentTab: string }) {
+function focusNextTab({ currentTab }: { currentTab: "more-tabs" | string }) {
   const indexOfFocusedTab = props.items.findIndex((item) => item.name === currentTab);
 
   const nextItem = props.items.at(indexOfFocusedTab + 1);
@@ -300,9 +302,11 @@ function focusNextTab({ currentTab }: { currentTab: string }) {
   const nextTabDOMElement = tabListRef.value.querySelector<HTMLButtonElement>(
     `#mt-tabs__item--${nextItemToFocus.name}`,
   );
-  const currentFocusedTab = tabListRef.value.querySelector<HTMLButtonElement>(
-    `#mt-tabs__item--${currentTab}`,
-  );
+
+  const currentFocusedTab =
+    currentTab === "more-tabs"
+      ? moreTabsButton.value
+      : tabListRef.value.querySelector<HTMLButtonElement>(`#mt-tabs__item--${currentTab}`);
 
   if (!nextTabDOMElement || !currentFocusedTab) return;
 
@@ -312,7 +316,7 @@ function focusNextTab({ currentTab }: { currentTab: string }) {
   currentFocusedTab.setAttribute("tabindex", "-1");
 }
 
-function focusPreviousTab({ currentTab }: { currentTab: string }) {
+function focusPreviousTab({ currentTab }: { currentTab: "more-tabs" | string }) {
   const indexOfFocusedTab = props.items.findIndex((item) => item.name === currentTab);
   const previousItem = props.items.at(indexOfFocusedTab - 1);
 
@@ -329,11 +333,14 @@ function focusPreviousTab({ currentTab }: { currentTab: string }) {
   ).at(-1);
 
   const nextElementToFocus =
-    previousTabDOMElement ?? moreTabsButton.value ?? lastVisibleTabDOMElement;
-
-  const currentFocusedTab = tabListRef.value.querySelector<HTMLButtonElement>(
-    `#mt-tabs__item--${currentTab}`,
-  );
+    currentTab === "more-tabs"
+      ? lastVisibleTabDOMElement
+      : previousTabDOMElement ?? moreTabsButton.value ?? lastVisibleTabDOMElement;
+
+  const currentFocusedTab =
+    currentTab === "more-tabs"
+      ? moreTabsButton.value
+      : tabListRef.value.querySelector<HTMLButtonElement>(`#mt-tabs__item--${currentTab}`);
 
   if (!nextElementToFocus || !currentFocusedTab) return;
 

From b3c2222b5b8cdff32f4dadf3957e9e24c285bc2a Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 21 Nov 2024 08:31:42 +0100
Subject: [PATCH 45/53] allow users to fully navigate the tabs component
 through the arrow keys

---
 .../mt-tabs/mt-tabs.interactive.stories.ts    | 18 ++++++++++
 .../components/navigation/mt-tabs/mt-tabs.vue | 36 +++++++++++++++----
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
index ad0cc649d..7c8726c31 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.interactive.stories.ts
@@ -3,6 +3,7 @@ import { expect } from "@storybook/test";
 import { waitUntil } from "../../../_internal/test-helper";
 
 import meta, { type MtTabsMeta, type MtTabsStory } from "./mt-tabs.stories";
+import mtTabsStories from "./mt-tabs.stories";
 
 const tabItems = [
   {
@@ -352,6 +353,23 @@ export const FocusesTheMoreTabsWhenPressingLeftArrowKeyOnFirstTab: MtTabsStory =
   },
 };
 
+export const FocusesTheMoreTabsButtonWhenPressingRightArrowKeyOnLastTab: MtTabsStory = {
+  args: {
+    small: true,
+    defaultItem: "item7",
+    items: tabItems,
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+
+    await userEvent.tab();
+
+    await userEvent.keyboard("{arrowright}");
+
+    await expect(canvas.getByRole("tab", { name: "More tabs" })).toHaveFocus();
+  },
+};
+
 export const MovesFocusAwayFromTheMoreTabsButtonWhenPressingTheArrowKeys: MtTabsStory = {
   args: {
     small: true,
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index dd7a4b1e8..192896287 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -13,7 +13,7 @@
       role="tablist"
     >
       <li
-        v-for="item in vertical ? [...mainItems, ...moreItems] : mainItems"
+        v-for="(item, index) in vertical ? [...mainItems, ...moreItems] : mainItems"
         :key="item.name"
         :data-priority-plus="item.name"
       >
@@ -33,7 +33,13 @@
           :aria-selected="item.name === activeTab?.name"
           :aria-invalid="item.hasError"
           :tabindex="item.name === activeTab?.name ? 0 : -1"
-          @keydown.arrow-right="() => focusNextTab({ currentTab: item.name })"
+          @keydown.arrow-right="
+            () =>
+              focusNextTab({
+                currentTab: item.name,
+                isLastVisibleElement: index === mainItems.length - 1,
+              })
+          "
           @keydown.arrow-left="() => focusPreviousTab({ currentTab: item.name })"
           @blur="onBlur"
         >
@@ -73,7 +79,9 @@
                 moreItems.some((item) => item.name === activeTab?.name) ? 0 : -1
               "
               @blur="onBlur"
-              @keydown.arrow-right="() => focusNextTab({ currentTab: 'more-tabs' })"
+              @keydown.arrow-right="
+                () => focusNextTab({ currentTab: 'more-tabs', isLastVisibleElement: false })
+              "
               @keydown.arrow-left="() => focusPreviousTab({ currentTab: 'more-tabs' })"
             >
               <mt-icon
@@ -289,7 +297,18 @@ watch(
   },
 );
 
-function focusNextTab({ currentTab }: { currentTab: "more-tabs" | string }) {
+function focusNextTab({
+  currentTab,
+  isLastVisibleElement,
+}:
+  | {
+      currentTab: "more-tabs";
+      isLastVisibleElement: false;
+    }
+  | {
+      currentTab: string;
+      isLastVisibleElement: true;
+    }) {
   const indexOfFocusedTab = props.items.findIndex((item) => item.name === currentTab);
 
   const nextItem = props.items.at(indexOfFocusedTab + 1);
@@ -299,9 +318,12 @@ function focusNextTab({ currentTab }: { currentTab: "more-tabs" | string }) {
 
   if (!tabListRef.value || !nextItemToFocus || !activeTab.value) return;
 
-  const nextTabDOMElement = tabListRef.value.querySelector<HTMLButtonElement>(
-    `#mt-tabs__item--${nextItemToFocus.name}`,
-  );
+  const nextTabDOMElement =
+    isLastVisibleElement && moreTabsButton.value
+      ? moreTabsButton.value
+      : tabListRef.value.querySelector<HTMLButtonElement>(
+          `#mt-tabs__item--${nextItemToFocus.name}`,
+        );
 
   const currentFocusedTab =
     currentTab === "more-tabs"

From dec0b75a54da577f65a193abc5a0cc9ff8ba810d Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 10 Dec 2024 08:20:56 +0100
Subject: [PATCH 46/53] refactor(component-library): replace mt-proprity-plus
 with usePriorityPlusNav composable

---
 .../components/navigation/mt-tabs/mt-tabs.vue | 275 +++++++++---------
 .../_internal/usePriorityPlusNavigation.ts    |  11 +-
 2 files changed, 145 insertions(+), 141 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 192896287..91da54256 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -1,142 +1,137 @@
 <template>
-  <mt-priority-plus :list="items" #default="{ mainItems, moreItems }">
-    <ul
-      :class="[
-        'mt-tabs',
-        {
-          'mt-tabs--small': small,
-          'mt-tabs--vertical': vertical,
-          'mt-tabs--future-remove-default-margin': futureFlags.removeDefaultMargin,
-        },
-      ]"
-      ref="tabListRef"
-      role="tablist"
+  <ul
+    :class="[
+      'mt-tabs',
+      {
+        'mt-tabs--small': small,
+        'mt-tabs--vertical': vertical,
+        'mt-tabs--future-remove-default-margin': futureFlags.removeDefaultMargin,
+      },
+    ]"
+    ref="tabListRef"
+    role="tablist"
+  >
+    <li
+      v-for="(item, index) in vertical ? items : priorityItems"
+      :key="item.name"
+      :data-priority-plus="item.name"
     >
-      <li
-        v-for="(item, index) in vertical ? [...mainItems, ...moreItems] : mainItems"
-        :key="item.name"
-        :data-priority-plus="item.name"
-      >
-        <button
-          :id="`mt-tabs__item--${item.name}`"
-          :class="[
-            'mt-tabs__item',
-            {
-              'mt-tabs__item--active': item.name === activeTab?.name,
-              'mt-tabs__item--error': item.hasError,
-            },
-          ]"
-          role="tab"
-          :disabled="item.disabled"
-          @click="() => changeActiveTab(item)"
-          :data-text="item.label"
-          :aria-selected="item.name === activeTab?.name"
-          :aria-invalid="item.hasError"
-          :tabindex="item.name === activeTab?.name ? 0 : -1"
-          @keydown.arrow-right="
-            () =>
-              focusNextTab({
-                currentTab: item.name,
-                isLastVisibleElement: index === mainItems.length - 1,
-              })
-          "
-          @keydown.arrow-left="() => focusPreviousTab({ currentTab: item.name })"
-          @blur="onBlur"
-        >
-          <span>{{ item.label }}</span>
-
-          <mt-icon
-            v-if="item.hasError"
-            color="var(--color-text-critical-default)"
-            size="0.75rem"
-            name="solid-exclamation-circle"
-            :style="{ marginInlineStart: '0.5rem' }"
-          />
-
-          <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
-        </button>
-      </li>
-
-      <li v-if="moreItems.length && !vertical">
-        <mt-bare-popover>
-          <template #trigger="params">
-            <button
-              ref="moreTabsButton"
-              v-bind="params"
-              role="tab"
-              :class="[
-                'mt-tabs__item',
-                {
-                  // @ts-expect-error
-                  'mt-tabs__item--active': moreItems.some((item) => item.name === activeTab?.name),
-                  // @ts-expect-error
-                  'mt-tabs__item--error': moreItems.some((item) => item.hasError),
-                },
-              ]"
-              :aria-label="t('moreTabsAriaLabel')"
-              :tabindex="
-                // @ts-expect-error
-                moreItems.some((item) => item.name === activeTab?.name) ? 0 : -1
-              "
-              @blur="onBlur"
-              @keydown.arrow-right="
-                () => focusNextTab({ currentTab: 'more-tabs', isLastVisibleElement: false })
-              "
-              @keydown.arrow-left="() => focusPreviousTab({ currentTab: 'more-tabs' })"
-            >
-              <mt-icon
-                name="solid-ellipsis-h-s"
-                color="var(--color-text-primary-default)"
-                style="margin-inline-end: 0.5rem"
-              />
-
-              <span>{{ t("moreTabs") }}</span>
-            </button>
-          </template>
-
-          <template #default="{ closePopover }">
-            <mt-bare-popover-item
-              v-for="item in moreItems"
-              :key="item.name"
-              role="tab"
-              :aria-selected="item.name === activeTab?.name"
-              :style="{
-                textDecoration: item.name === activeTab?.name && 'underline',
-                fontWeight: item.name === activeTab?.name && 'var(--font-weight-semibold)',
-                color: item.hasError
-                  ? 'var(--color-text-critical-default)'
-                  : item.name === activeTab?.name
-                    ? 'var(--color-text-brand-default)'
-                    : 'var(--color-text-primary-default)',
-              }"
-              @click="
-                () => {
-                  changeActiveTab(item);
-                  closePopover();
-                }
-              "
-            >
-              <span>{{ item.label }}</span>
-
-              <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
-            </mt-bare-popover-item>
-          </template>
-        </mt-bare-popover>
-      </li>
-
-      <div
+      <button
+        :id="`mt-tabs__item--${item.name}`"
         :class="[
-          'mt-tabs__slider',
+          'mt-tabs__item',
           {
-            'mt-tabs__slider--animated': shouldAnimateSlider,
-            'mt-tabs__slider--error': activeTab?.hasError,
+            'mt-tabs__item--active': item.name === activeTab?.name,
+            'mt-tabs__item--error': item.hasError,
           },
         ]"
-        :style="sliderStyles"
-        data-testid="mt-tabs__slider"
-      />
-    </ul>
-  </mt-priority-plus>
+        role="tab"
+        :disabled="item.disabled"
+        @click="() => changeActiveTab(item)"
+        :data-text="item.label"
+        :aria-selected="item.name === activeTab?.name"
+        :aria-invalid="item.hasError"
+        :tabindex="item.name === activeTab?.name ? 0 : -1"
+        @keydown.arrow-right="
+          () =>
+            focusNextTab({
+              currentTab: item.name,
+              isLastVisibleElement: index === priorityItems.length - 1,
+            })
+        "
+        @keydown.arrow-left="() => focusPreviousTab({ currentTab: item.name })"
+        @blur="onBlur"
+      >
+        <span>{{ item.label }}</span>
+
+        <mt-icon
+          v-if="item.hasError"
+          color="var(--color-text-critical-default)"
+          size="0.75rem"
+          name="solid-exclamation-circle"
+          :style="{ marginInlineStart: '0.5rem' }"
+        />
+
+        <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
+      </button>
+    </li>
+
+    <li v-if="overflowItems.length && !vertical">
+      <mt-bare-popover>
+        <template #trigger="params">
+          <button
+            ref="moreTabsButton"
+            v-bind="params"
+            role="tab"
+            :class="[
+              'mt-tabs__item',
+              {
+                'mt-tabs__item--active': overflowItems.some(
+                  (item) => item.name === activeTab?.name,
+                ),
+                'mt-tabs__item--error': overflowItems.some((item) => item.hasError),
+              },
+            ]"
+            :aria-label="t('moreTabsAriaLabel')"
+            :tabindex="overflowItems.some((item) => item.name === activeTab?.name) ? 0 : -1"
+            @blur="onBlur"
+            @keydown.arrow-right="
+              () => focusNextTab({ currentTab: 'more-tabs', isLastVisibleElement: false })
+            "
+            @keydown.arrow-left="() => focusPreviousTab({ currentTab: 'more-tabs' })"
+          >
+            <mt-icon
+              name="solid-ellipsis-h-s"
+              color="var(--color-text-primary-default)"
+              style="margin-inline-end: 0.5rem"
+            />
+
+            <span>{{ t("moreTabs") }}</span>
+          </button>
+        </template>
+
+        <template #default="{ closePopover }">
+          <mt-bare-popover-item
+            v-for="item in overflowItems"
+            :key="item.name"
+            role="tab"
+            :aria-selected="item.name === activeTab?.name"
+            :style="{
+              textDecoration: item.name === activeTab?.name && 'underline',
+              fontWeight: item.name === activeTab?.name && 'var(--font-weight-semibold)',
+              color: item.hasError
+                ? 'var(--color-text-critical-default)'
+                : item.name === activeTab?.name
+                  ? 'var(--color-text-brand-default)'
+                  : 'var(--color-text-primary-default)',
+            }"
+            @click="
+              () => {
+                changeActiveTab(item);
+                closePopover();
+              }
+            "
+          >
+            <span>{{ item.label }}</span>
+
+            <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
+          </mt-bare-popover-item>
+        </template>
+      </mt-bare-popover>
+    </li>
+
+    <div
+      :class="[
+        'mt-tabs__slider',
+        {
+          'mt-tabs__slider--animated': shouldAnimateSlider,
+          'mt-tabs__slider--error': activeTab?.hasError,
+        },
+      ]"
+      :style="sliderStyles"
+      data-testid="mt-tabs__slider"
+    />
+  </ul>
 </template>
 
 <script setup lang="ts">
@@ -158,7 +153,7 @@ import MtBarePopoverItem from "@/components/overlay/mt-bare-popover/sub-componen
 import MtBarePopover from "@/components/overlay/mt-bare-popover/mt-bare-popover.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";
 import { useI18n } from "@/composables/useI18n";
-import { debug } from "console";
+import { usePriorityPlusNavigation } from "@/composables/_internal/usePriorityPlusNavigation";
 
 export interface TabItem {
   label: string;
@@ -193,11 +188,19 @@ const { t } = useI18n({
 });
 
 const tabListRef = ref<HTMLElement | null>(null);
+const moreTabsButton = ref<HTMLElement | null>(null);
+
+const items = computed(() => props.items.map((item) => ({ ...item, id: item.name })));
+
+const { showNavigation, overflowItems, priorityItems } = usePriorityPlusNavigation(items, {
+  container: tabListRef,
+  overflowButton: moreTabsButton,
+});
+
 const showSlider = ref(false);
 const shouldAnimateSlider = ref(false);
 const activeTab = ref<TabItem | null>(null);
 const sliderStyles = ref<CSSProperties | undefined>(undefined);
-const moreTabsButton = ref<HTMLElement | null>(null);
 
 const calculateSliderDimensions = () => {
   if (!tabListRef.value || !activeTab.value || !showSlider.value) return undefined;
@@ -307,7 +310,7 @@ function focusNextTab({
     }
   | {
       currentTab: string;
-      isLastVisibleElement: true;
+      isLastVisibleElement: boolean;
     }) {
   const indexOfFocusedTab = props.items.findIndex((item) => item.name === currentTab);
 
diff --git a/packages/component-library/src/composables/_internal/usePriorityPlusNavigation.ts b/packages/component-library/src/composables/_internal/usePriorityPlusNavigation.ts
index 5d5ad57c3..351826b0f 100644
--- a/packages/component-library/src/composables/_internal/usePriorityPlusNavigation.ts
+++ b/packages/component-library/src/composables/_internal/usePriorityPlusNavigation.ts
@@ -1,12 +1,12 @@
 import { reactiveComputed, unrefElement, useElementSize, type MaybeElementRef } from "@vueuse/core";
-import { computed, onMounted, ref, toRefs, watch } from "vue";
+import { computed, onMounted, ref, toRefs, unref, watch, type MaybeRef } from "vue";
 
 export function usePriorityPlusNavigation<
   T extends {
     id: string;
   },
 >(
-  items: T[],
+  items: MaybeRef<T[]>,
   { container, overflowButton }: { container: MaybeElementRef; overflowButton: MaybeElementRef },
 ) {
   const containerSize = useElementSize(container);
@@ -48,21 +48,22 @@ export function usePriorityPlusNavigation<
     overflowItems: T[];
   }>(() => {
     const hasOverflow = widthsOfItems.value.some((width) => width > containerSize.width.value);
+    const rawItems = unref(items);
     if (!hasOverflow) {
       return {
-        priorityItems: items,
+        priorityItems: rawItems,
         overflowItems: [],
       };
     }
 
-    const priorityItems = items.filter((_, index) => {
+    const priorityItems = rawItems.filter((_, index) => {
       const overflows =
         widthsOfItems.value[index] > containerSize.width.value - overflowButtonSize.width.value;
 
       return !overflows;
     });
 
-    const overflowItems = items.filter((_, index) => {
+    const overflowItems = rawItems.filter((_, index) => {
       const overflows =
         widthsOfItems.value[index] > containerSize.width.value - overflowButtonSize.width.value;
 

From 714f740643c90cdb6c92f0089b1690daf2c6c5b9 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 10 Dec 2024 08:24:35 +0100
Subject: [PATCH 47/53] chore(component-library): only show slider after
 calculation

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue              | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 91da54256..e1aef29b5 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -8,6 +8,9 @@
         'mt-tabs--future-remove-default-margin': futureFlags.removeDefaultMargin,
       },
     ]"
+    :style="{
+      opacity: showNavigation ? 1 : 0,
+    }"
     ref="tabListRef"
     role="tablist"
   >

From 08fa5cc040e688a12914457cc6d2cc3780b29b8d Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 10 Dec 2024 08:27:08 +0100
Subject: [PATCH 48/53] fix(component-library): re-calculate the slider when
 resizing and items get hidden

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index e1aef29b5..a3cc74bb9 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -259,7 +259,7 @@ const calculateSliderDimensions = () => {
 };
 
 watch(
-  () => [activeTab.value, props.items],
+  () => [activeTab.value, priorityItems.value],
   async () => {
     await nextTick();
     sliderStyles.value = calculateSliderDimensions();

From 0b9b123007daec90b4019aba12b367a8b7951271 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 10 Dec 2024 09:18:05 +0100
Subject: [PATCH 49/53] fix

---
 .../components/navigation/mt-tabs/mt-tabs.vue |  6 ++-
 .../_internal/usePriorityPlusNavigation.ts    | 38 ++++++-------------
 2 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index a3cc74bb9..7829a38b5 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -193,9 +193,11 @@ const { t } = useI18n({
 const tabListRef = ref<HTMLElement | null>(null);
 const moreTabsButton = ref<HTMLElement | null>(null);
 
-const items = computed(() => props.items.map((item) => ({ ...item, id: item.name })));
+const updatedItems = computed(() => {
+  return props.items.map((item) => ({ ...item, id: item.name }));
+});
 
-const { showNavigation, overflowItems, priorityItems } = usePriorityPlusNavigation(items, {
+const { showNavigation, overflowItems, priorityItems } = usePriorityPlusNavigation(updatedItems, {
   container: tabListRef,
   overflowButton: moreTabsButton,
 });
diff --git a/packages/component-library/src/composables/_internal/usePriorityPlusNavigation.ts b/packages/component-library/src/composables/_internal/usePriorityPlusNavigation.ts
index 351826b0f..b72e373e8 100644
--- a/packages/component-library/src/composables/_internal/usePriorityPlusNavigation.ts
+++ b/packages/component-library/src/composables/_internal/usePriorityPlusNavigation.ts
@@ -1,5 +1,5 @@
-import { reactiveComputed, unrefElement, useElementSize, type MaybeElementRef } from "@vueuse/core";
-import { computed, onMounted, ref, toRefs, unref, watch, type MaybeRef } from "vue";
+import { unrefElement, useElementSize, type MaybeElementRef } from "@vueuse/core";
+import { computed, onMounted, ref, unref, watch, type MaybeRef } from "vue";
 
 export function usePriorityPlusNavigation<
   T extends {
@@ -43,40 +43,25 @@ export function usePriorityPlusNavigation<
     return result.widthsOfItems;
   });
 
-  const prioritizedItems = reactiveComputed<{
-    priorityItems: T[];
-    overflowItems: T[];
-  }>(() => {
-    const hasOverflow = widthsOfItems.value.some((width) => width > containerSize.width.value);
-    const rawItems = unref(items);
-    if (!hasOverflow) {
-      return {
-        priorityItems: rawItems,
-        overflowItems: [],
-      };
-    }
-
-    const priorityItems = rawItems.filter((_, index) => {
+  const overflowItems = computed(() => {
+    return unref(items).filter((_, index) => {
       const overflows =
         widthsOfItems.value[index] > containerSize.width.value - overflowButtonSize.width.value;
 
-      return !overflows;
+      return overflows;
     });
+  });
 
-    const overflowItems = rawItems.filter((_, index) => {
+  const priorityItems = computed(() => {
+    return unref(items).filter((_, index) => {
       const overflows =
         widthsOfItems.value[index] > containerSize.width.value - overflowButtonSize.width.value;
 
-      return overflows;
+      return !overflows;
     });
-
-    return {
-      priorityItems,
-      overflowItems,
-    };
   });
 
-  const hasOverflow = computed(() => prioritizedItems.overflowItems.length > 0);
+  const hasOverflow = computed(() => overflowItems.value.length > 0);
   watch(hasOverflow, () => {
     const overflowButtonElement = unrefElement(overflowButton);
     if (!overflowButtonElement) return;
@@ -90,6 +75,7 @@ export function usePriorityPlusNavigation<
 
   return {
     showNavigation,
-    ...toRefs(prioritizedItems),
+    overflowItems,
+    priorityItems,
   };
 }

From c366da1e93bc8c860d0801cc4b1d84856993c663 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 10 Dec 2024 09:33:53 +0100
Subject: [PATCH 50/53] refactor(component-library): remove unused code

---
 .../src/components/navigation/mt-tabs/mt-tabs.vue   | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index 7829a38b5..fa7389d0c 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -138,20 +138,9 @@
 </template>
 
 <script setup lang="ts">
-import {
-  defineComponent,
-  computed,
-  ref,
-  onMounted,
-  watch,
-  onBeforeUpdate,
-  onUpdated,
-  nextTick,
-  type CSSProperties,
-} from "vue";
+import { computed, ref, onMounted, watch, nextTick, type CSSProperties } from "vue";
 import MtColorBadge from "../../feedback-indicator/mt-color-badge/mt-color-badge.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-import MtPriorityPlus from "../../_internal/mt-priority-plus-navigation.vue";
 import MtBarePopoverItem from "@/components/overlay/mt-bare-popover/sub-components/mt-bare-popover-item.vue";
 import MtBarePopover from "@/components/overlay/mt-bare-popover/mt-bare-popover.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";

From 59b08861f5fef50fb058cef686e47a4824613ae3 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 10 Dec 2024 09:34:22 +0100
Subject: [PATCH 51/53] refactor(component-library): delete
 mt-priority-plus-navigation

---
 .../_internal/mt-priority-plus-navigation.vue | 251 ------------------
 1 file changed, 251 deletions(-)
 delete mode 100644 packages/component-library/src/components/_internal/mt-priority-plus-navigation.vue

diff --git a/packages/component-library/src/components/_internal/mt-priority-plus-navigation.vue b/packages/component-library/src/components/_internal/mt-priority-plus-navigation.vue
deleted file mode 100644
index 9d8f09bee..000000000
--- a/packages/component-library/src/components/_internal/mt-priority-plus-navigation.vue
+++ /dev/null
@@ -1,251 +0,0 @@
-<template>
-  <slot :mainItems="mainItems" :moreItems="moreItems" />
-</template>
-
-<script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
-
-interface ItemBase {
-  hidden?: boolean;
-  [key: string]: any;
-}
-
-function getWidth(el: HTMLElement | null) {
-  if (!el) return 0;
-
-  const styles = window.getComputedStyle(el);
-  const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
-
-  return Math.ceil(el.offsetWidth + margin);
-}
-
-/**
- * A flexible priority plus navigation component.
- * For reference see: https://css-tricks.com/the-priority-navigation-pattern/
- *
- * @example
- * <mt-priority-plus-navigation
- *  :list="[
- *     { name: 'Home', url: '/' },
- *     { name: 'About', url: '/about' },
- *   ]"
- *   identifier="name"
- *   #default="{ mainItems, moreItems }"
- * >
- *   <template v-for="item in mainItems">
- *      <a
- *        :href="item.url"
- *        :data-priority-plus="item.name"
- *      >
- *        {{ item.name }}
- *      </a>
- *   </template>
- *
- *   <mt-context-button
- *     v-if="moreItems.length"
- *     ref="more-items-button"
- *     :has-error="moreItems.some(i => i.hasError)"
- *   >
- *     <template #button-text>More</template>
- *
- *     <mt-context-menu-item
- *      v-for="item in moreItems"
- *     >
- *     </mt-context-menu-item>
- *   </mt-context-button>
- * </mt-priority-plus-navigation>
- */
-export default defineComponent({
-  name: "PriorityPlusMenu",
-
-  props: {
-    /**
-     * The list of navigation items to display.
-     */
-    list: {
-      type: Array as PropType<ItemBase[]>,
-      required: true,
-      default() {
-        return [];
-      },
-    },
-    /**
-     * The offset factor is used to multiply the width of the last visible item for the more button offset.
-     */
-    offsetFactor: {
-      type: Number,
-      default: 1.5,
-    },
-    /**
-     * The property used to identify the items in the list.
-     */
-    identifier: {
-      type: String,
-      required: false,
-      default: "name",
-    },
-  },
-
-  data(): {
-    accumItemWidths: any[];
-    hiddenItemIdentifiers: string[];
-  } {
-    return {
-      /**
-       * The accumulated widths of the items in the list.
-       * For example take this list for items with a widht of 100px each:
-       * [100, 200, 300, 400, 500]
-       *
-       * This list is used to search the last item index which fits into the container width.
-       */
-      accumItemWidths: [],
-      /**
-       * This list contains the identifiers of the items which are hidden.
-       * The values respect the prop `identifier`.
-       */
-      hiddenItemIdentifiers: [],
-    };
-  },
-
-  computed: {
-    /**
-     * The items which are currently displayed.
-     */
-    mainItems(): ItemBase[] {
-      return this.list.filter((item) => !this.hiddenItemIdentifiers.includes(item.name));
-    },
-
-    /**
-     * The items which are currently hidden.
-     */
-    moreItems(): ItemBase[] {
-      return this.list.filter((item) => this.hiddenItemIdentifiers.includes(item.name));
-    },
-
-    hasHiddenItems(): boolean {
-      return !!this.moreItems.length;
-    },
-
-    /**
-     * The HTML elements of the visible items.
-     */
-    visibleElements(): { [key: string]: HTMLElement } {
-      const els = {} as { [key: string]: HTMLElement };
-      this.list.forEach((item) => {
-        if (this.hiddenItemIdentifiers.includes(item[this.identifier])) {
-          return;
-        }
-
-        const el = this.$el.parentElement.querySelector(
-          `[data-priority-plus="${item[this.identifier]}"]`,
-        );
-        if (!el) {
-          return;
-        }
-
-        els[item[this.identifier]] = el;
-      });
-
-      return els;
-    },
-
-    /**
-     * The last visible HTML element.
-     */
-    lastVisibleElement(): Element {
-      // get the last element of this.visibleElements
-      const keys = Object.keys(this.visibleElements);
-      const lastKey = keys[keys.length - 1];
-      return this.visibleElements[lastKey];
-    },
-  },
-
-  async mounted() {
-    await this.$nextTick();
-
-    this.storeItemWidths();
-
-    // First iteration marks the correct items as hidden
-    this.handleResize();
-    // Second iteration fixes the width of the container including the more button offset
-    this.handleResize();
-
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    window.addEventListener("resize", this.handleResize);
-  },
-
-  watch: {
-    /**
-     * Watch the list for changes and recalculate the item widths.
-     * This is necessary if the list changes after the component is mounted.
-     */
-    list: {
-      handler() {
-        this.handleResize();
-      },
-      deep: true,
-    },
-  },
-
-  beforeUnmount() {
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    window.removeEventListener("resize", this.handleResize);
-  },
-
-  methods: {
-    storeItemWidths() {
-      let sum = 0;
-
-      this.list.forEach((item, index) => {
-        sum += getWidth(this.visibleElements[item[this.identifier]]);
-        this.accumItemWidths[index] = sum;
-      });
-    },
-
-    getContainerWidth() {
-      let offset = 0;
-
-      if (this.hasHiddenItems) {
-        const firstVisibleElement = Object.values(this.visibleElements)[0];
-        offset = getWidth(firstVisibleElement) * this.offsetFactor;
-      }
-
-      return this.$el?.nextSibling?.offsetWidth - offset;
-    },
-
-    getLastVisibleItemIndex() {
-      let index = 0;
-      const containerWidth = this.getContainerWidth();
-
-      while (index < this.accumItemWidths.length) {
-        if (this.accumItemWidths[index] > containerWidth) {
-          index--;
-          break;
-        }
-        index++;
-      }
-
-      return index;
-    },
-
-    async handleResize() {
-      await this.$nextTick();
-
-      const lastVisibleItemIndex = this.getLastVisibleItemIndex();
-
-      this.hiddenItemIdentifiers = [];
-
-      this.list.forEach((item, index) => {
-        const hidden = index > lastVisibleItemIndex;
-        if (!hidden) {
-          this.hiddenItemIdentifiers = this.hiddenItemIdentifiers.filter((id) => id !== item.name);
-          return;
-        }
-
-        this.hiddenItemIdentifiers.push(item.name);
-      });
-    },
-  },
-});
-</script>

From d5145462dea052a851a2e209714bcbf0b8a6fc8e Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 10 Dec 2024 09:42:19 +0100
Subject: [PATCH 52/53] fix(component-library): fix type error for popover
 placement

---
 .../overlay/mt-bare-popover/mt-bare-popover.vue          | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
index 11ee9eaab..d7e197ef1 100644
--- a/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
+++ b/packages/component-library/src/components/overlay/mt-bare-popover/mt-bare-popover.vue
@@ -29,19 +29,16 @@
 </template>
 
 <script setup lang="ts">
-import { AriaAttributes, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { type AriaAttributes, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
-import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
+import { autoUpdate, flip, offset, shift, useFloating, type Placement } from "@floating-ui/vue";
 import { createId } from "@/utils/id";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 import * as focusTrap from "focus-trap";
 
-type A = "bottom" | "top" | "left" | "right";
-type B = "start" | "end" | "center";
-
 const props = withDefaults(
   defineProps<{
-    placement?: `${A}-${B}`;
+    placement?: Placement;
     width?: "auto" | "large" | "medium" | "small";
     title?: string;
   }>(),

From a706bdcdd09adac50ddc66b2bd34c69ba0e3b0f3 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 10 Dec 2024 09:56:58 +0100
Subject: [PATCH 53/53] fix(component-library): fix a11y issues of mt-tabs
 component

---
 .../components/navigation/mt-tabs/mt-tabs.vue | 205 +++++++++---------
 1 file changed, 99 insertions(+), 106 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
index fa7389d0c..d9f2a0dc5 100644
--- a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
+++ b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul
+  <div
     :class="[
       'mt-tabs',
       {
@@ -14,114 +14,107 @@
     ref="tabListRef"
     role="tablist"
   >
-    <li
+    <button
       v-for="(item, index) in vertical ? items : priorityItems"
       :key="item.name"
       :data-priority-plus="item.name"
+      :id="`mt-tabs__item--${item.name}`"
+      :class="[
+        'mt-tabs__item',
+        {
+          'mt-tabs__item--active': item.name === activeTab?.name,
+          'mt-tabs__item--error': item.hasError,
+        },
+      ]"
+      role="tab"
+      :disabled="item.disabled"
+      @click="() => changeActiveTab(item)"
+      :data-text="item.label"
+      :aria-selected="item.name === activeTab?.name"
+      :aria-invalid="item.hasError"
+      :tabindex="item.name === activeTab?.name ? 0 : -1"
+      @keydown.arrow-right="
+        () =>
+          focusNextTab({
+            currentTab: item.name,
+            isLastVisibleElement: index === priorityItems.length - 1,
+          })
+      "
+      @keydown.arrow-left="() => focusPreviousTab({ currentTab: item.name })"
+      @blur="onBlur"
     >
-      <button
-        :id="`mt-tabs__item--${item.name}`"
-        :class="[
-          'mt-tabs__item',
-          {
-            'mt-tabs__item--active': item.name === activeTab?.name,
-            'mt-tabs__item--error': item.hasError,
-          },
-        ]"
-        role="tab"
-        :disabled="item.disabled"
-        @click="() => changeActiveTab(item)"
-        :data-text="item.label"
-        :aria-selected="item.name === activeTab?.name"
-        :aria-invalid="item.hasError"
-        :tabindex="item.name === activeTab?.name ? 0 : -1"
-        @keydown.arrow-right="
-          () =>
-            focusNextTab({
-              currentTab: item.name,
-              isLastVisibleElement: index === priorityItems.length - 1,
-            })
-        "
-        @keydown.arrow-left="() => focusPreviousTab({ currentTab: item.name })"
-        @blur="onBlur"
-      >
-        <span>{{ item.label }}</span>
-
-        <mt-icon
-          v-if="item.hasError"
-          color="var(--color-text-critical-default)"
-          size="0.75rem"
-          name="solid-exclamation-circle"
-          :style="{ marginInlineStart: '0.5rem' }"
-        />
-
-        <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
-      </button>
-    </li>
-
-    <li v-if="overflowItems.length && !vertical">
-      <mt-bare-popover>
-        <template #trigger="params">
-          <button
-            ref="moreTabsButton"
-            v-bind="params"
-            role="tab"
-            :class="[
-              'mt-tabs__item',
-              {
-                'mt-tabs__item--active': overflowItems.some(
-                  (item) => item.name === activeTab?.name,
-                ),
-                'mt-tabs__item--error': overflowItems.some((item) => item.hasError),
-              },
-            ]"
-            :aria-label="t('moreTabsAriaLabel')"
-            :tabindex="overflowItems.some((item) => item.name === activeTab?.name) ? 0 : -1"
-            @blur="onBlur"
-            @keydown.arrow-right="
-              () => focusNextTab({ currentTab: 'more-tabs', isLastVisibleElement: false })
-            "
-            @keydown.arrow-left="() => focusPreviousTab({ currentTab: 'more-tabs' })"
-          >
-            <mt-icon
-              name="solid-ellipsis-h-s"
-              color="var(--color-text-primary-default)"
-              style="margin-inline-end: 0.5rem"
-            />
-
-            <span>{{ t("moreTabs") }}</span>
-          </button>
-        </template>
-
-        <template #default="{ closePopover }">
-          <mt-bare-popover-item
-            v-for="item in overflowItems"
-            :key="item.name"
-            role="tab"
-            :aria-selected="item.name === activeTab?.name"
-            :style="{
-              textDecoration: item.name === activeTab?.name && 'underline',
-              fontWeight: item.name === activeTab?.name && 'var(--font-weight-semibold)',
-              color: item.hasError
-                ? 'var(--color-text-critical-default)'
-                : item.name === activeTab?.name
-                  ? 'var(--color-text-brand-default)'
-                  : 'var(--color-text-primary-default)',
-            }"
-            @click="
-              () => {
-                changeActiveTab(item);
-                closePopover();
-              }
-            "
-          >
-            <span>{{ item.label }}</span>
-
-            <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
-          </mt-bare-popover-item>
-        </template>
-      </mt-bare-popover>
-    </li>
+      <span>{{ item.label }}</span>
+
+      <mt-icon
+        v-if="item.hasError"
+        color="var(--color-text-critical-default)"
+        size="0.75rem"
+        name="solid-exclamation-circle"
+        :style="{ marginInlineStart: '0.5rem' }"
+      />
+
+      <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
+    </button>
+
+    <mt-bare-popover v-if="overflowItems.length && !vertical">
+      <template #trigger="params">
+        <button
+          ref="moreTabsButton"
+          v-bind="params"
+          role="tab"
+          :class="[
+            'mt-tabs__item',
+            {
+              'mt-tabs__item--active': overflowItems.some((item) => item.name === activeTab?.name),
+              'mt-tabs__item--error': overflowItems.some((item) => item.hasError),
+            },
+          ]"
+          :aria-label="t('moreTabsAriaLabel')"
+          :tabindex="overflowItems.some((item) => item.name === activeTab?.name) ? 0 : -1"
+          @blur="onBlur"
+          @keydown.arrow-right="
+            () => focusNextTab({ currentTab: 'more-tabs', isLastVisibleElement: false })
+          "
+          @keydown.arrow-left="() => focusPreviousTab({ currentTab: 'more-tabs' })"
+        >
+          <mt-icon
+            name="solid-ellipsis-h-s"
+            color="var(--color-text-primary-default)"
+            style="margin-inline-end: 0.5rem"
+          />
+
+          <span>{{ t("moreTabs") }}</span>
+        </button>
+      </template>
+
+      <template #default="{ closePopover }">
+        <mt-bare-popover-item
+          v-for="item in overflowItems"
+          :key="item.name"
+          role="tab"
+          :aria-selected="item.name === activeTab?.name"
+          :style="{
+            textDecoration: item.name === activeTab?.name && 'underline',
+            fontWeight: item.name === activeTab?.name && 'var(--font-weight-semibold)',
+            color: item.hasError
+              ? 'var(--color-text-critical-default)'
+              : item.name === activeTab?.name
+                ? 'var(--color-text-brand-default)'
+                : 'var(--color-text-primary-default)',
+          }"
+          @click="
+            () => {
+              changeActiveTab(item);
+              closePopover();
+            }
+          "
+        >
+          <span>{{ item.label }}</span>
+
+          <mt-color-badge v-if="item.badge" :variant="item.badge" rounded />
+        </mt-bare-popover-item>
+      </template>
+    </mt-bare-popover>
 
     <div
       :class="[
@@ -134,7 +127,7 @@
       :style="sliderStyles"
       data-testid="mt-tabs__slider"
     />
-  </ul>
+  </div>
 </template>
 
 <script setup lang="ts">