diff --git a/.changeset/sweet-trains-talk.md b/.changeset/sweet-trains-talk.md
new file mode 100644
index 000000000..39a43ac5c
--- /dev/null
+++ b/.changeset/sweet-trains-talk.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Add focus state to banner close button
diff --git a/.changeset/wise-squids-brush.md b/.changeset/wise-squids-brush.md
new file mode 100644
index 000000000..c0ea228d9
--- /dev/null
+++ b/.changeset/wise-squids-brush.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Announce mt-search as a real search input
diff --git a/.changeset/yellow-melons-boil.md b/.changeset/yellow-melons-boil.md
new file mode 100644
index 000000000..9e5bc9816
--- /dev/null
+++ b/.changeset/yellow-melons-boil.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Remove link role from mt-link when using custom component
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 7bccc6782..06e9022ab 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -23,6 +23,11 @@ jobs:
         uses: actions/checkout@v4
         with:
           ref: ${{ github.head_ref }}
+        if: ${{ github.event.pull_request.head.repo.full_name == 'shopware/meteor' }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        if: ${{ github.event.pull_request.head.repo.full_name != 'shopware/meteor' }}
 
       - uses: pnpm/action-setup@v3
         with:
@@ -54,7 +59,7 @@ jobs:
         run: pnpx turbo run lint:types
 
       - name: Commit changes
-        if: always()
+        if: always() && ${{ github.event.pull_request.head.repo.full_name == 'shopware/meteor' }}
         uses: stefanzweifel/git-auto-commit-action@v5
         with:
           commit_message: "Apply code formatting and fixable ESLint issues"
@@ -160,12 +165,6 @@ jobs:
           name: nuxt-app--playwright-test-results
           path: examples/nuxt-app/test-results/
 
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: meteor-admin-sdk--playwright-test-results
-          path: packages/admin-sdk/playwright-report/
-
   tested-versions:
     name: tested-versions
     runs-on: ubuntu-latest
diff --git a/.github/workflows/visual-tests.yml b/.github/workflows/visual-tests.yml
index e6379a605..18885c39d 100644
--- a/.github/workflows/visual-tests.yml
+++ b/.github/workflows/visual-tests.yml
@@ -55,14 +55,14 @@ jobs:
         run: |
           npx concurrently --kill-others --success first --names "SB,TEST"  --hide "SB" --prefix-colors "magenta,blue" \
           "http-server ./packages/component-library/storybook-static -a 127.0.0.1 --port 6006" \
-          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --filter=@shopware-ag/meteor-component-library"
+          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --force --filter=@shopware-ag/meteor-component-library"
 
       - name: Run tests and update snapshots
         if: ${{ github.event_name == 'workflow_dispatch' }}
         run: |
           npx concurrently --kill-others --success first --names "SB,TEST"  --hide "SB" --prefix-colors "magenta,blue" \
           "http-server ./packages/component-library/storybook-static -a 127.0.0.1 --port 6006" \
-          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --filter=@shopware-ag/meteor-component-library -- -u"
+          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --force --filter=@shopware-ag/meteor-component-library -- -u"
 
       - name: Archive visual test diffs
         uses: actions/upload-artifact@v4
diff --git a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png
index dcad20f7e..9e0eebd09 100644
Binary files a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png and b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png differ
diff --git a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png
index 8fda603db..09252ee08 100644
Binary files a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png and b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png differ
diff --git a/packages/component-library/.storybook/test-runner.ts b/packages/component-library/.storybook/test-runner.ts
index 91b9d1ed1..00f5d94c8 100644
--- a/packages/component-library/.storybook/test-runner.ts
+++ b/packages/component-library/.storybook/test-runner.ts
@@ -1,3 +1,5 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+
 const path = require("path");
 const { toMatchImageSnapshot } = require("jest-image-snapshot");
 
@@ -51,4 +53,4 @@ module.exports = {
       customReceivedDir: customReceivedDir,
     });
   },
-};
+} satisfies TestRunnerConfig;
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-checkbox--visual-test-help-text-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-checkbox--visual-test-help-text-snap.png
index 7f1f06e6f..be7d22120 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-checkbox--visual-test-help-text-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-checkbox--visual-test-help-text-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png
index 9bdd0b218..648769239 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-switch--visual-test-help-text-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-switch--visual-test-help-text-snap.png
index 499a5d8fc..8ab1177cf 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-switch--visual-test-help-text-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-switch--visual-test-help-text-snap.png differ
diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.spec.ts b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.spec.ts
new file mode 100644
index 000000000..a6de3464d
--- /dev/null
+++ b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.spec.ts
@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/vue";
+import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+import MtBanner from "./mt-banner.vue";
+
+describe("mt-banner", () => {
+  it("emits a close event when clicking on the close button", async () => {
+    // ARRANGE
+    const closeHandler = vi.fn();
+
+    render(MtBanner, {
+      props: { onClose: closeHandler, closable: true },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: /close/i }));
+
+    // ASSERT
+    expect(closeHandler).toHaveBeenCalledOnce();
+    expect(closeHandler).toHaveBeenCalledWith(undefined);
+  });
+
+  it("emits a close event with the bannerIndex when clicking on the close button", async () => {
+    // ARRANGE
+    const closeHandler = vi.fn();
+
+    render(MtBanner, {
+      props: {
+        onClose: closeHandler,
+        closable: true,
+        bannerIndex: "some-banner-index",
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: /close/i }));
+
+    // ASSERT
+    expect(closeHandler).toHaveBeenCalledOnce();
+    expect(closeHandler).toHaveBeenCalledWith("some-banner-index");
+  });
+});
diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
index c93121fc5..14cccf354 100644
--- a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
+++ b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
@@ -3,7 +3,7 @@
     <slot name="customIcon">
       <mt-icon
         v-if="!hideIcon"
-        size="1.25rem"
+        size="var(--scale-size-20)"
         class="mt-banner__icon"
         :name="bannerIcon"
         decorative
@@ -65,6 +65,10 @@ const props = withDefaults(
   },
 );
 
+defineEmits<{
+  close: [bannerIndex?: string];
+}>();
+
 const bannerIcon = computed(() => {
   if (props.icon) return props.icon;
 
@@ -100,16 +104,19 @@ const bodyClasses = computed(() => ({
 
 <style scoped>
 .mt-banner {
-  --mt-banner-close-button-size: 2.5rem;
+  --mt-banner-close-button-size: var(--scale-size-40);
 
   border-width: 1px;
+  padding: var(--scale-size-24);
   border-style: solid;
   border-radius: var(--border-radius-xs);
-  position: relative;
-  margin: 0 auto 1.25rem;
+  margin: 0 auto var(--scale-size-20);
+  display: flex;
+  flex-direction: row;
+  gap: var(--scale-size-16);
 
   & ul {
-    padding: 0.5rem 0 0.5rem 1.25rem;
+    padding: var(--scale-size-8) 0 var(--scale-size-8) var(--scale-size-20);
   }
 }
 
@@ -122,48 +129,31 @@ const bodyClasses = computed(() => ({
 }
 
 .mt-banner__body {
-  padding: 1.5rem 3.75rem 1.5rem 1.5rem;
   font-family: var(--font-family-body);
   font-size: var(--font-size-xs);
   line-height: var(--font-line-height-xs);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 0.25rem;
-}
-
-.mt-banner__body--icon {
-  padding: 1.5rem 3.75rem;
-}
-
-.mt-banner__body--closable {
-  padding-right: var(--mt-banner-close-button-size);
+  flex: 1;
+  gap: var(--scale-size-4);
 }
 
 .mt-banner__icon {
-  position: absolute;
-  display: block;
-  left: 1.625rem;
-  top: 1.75rem;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--scale-size-20);
+  height: var(--scale-size-20);
 }
 
 .mt-banner__close {
   width: var(--mt-banner-close-button-size);
   height: var(--mt-banner-close-button-size);
-  line-height: var(--mt-banner-close-button-size);
-  position: absolute;
-  display: block;
-  top: 0.75rem;
-  right: 0.75rem;
-  padding: 0;
-  margin: 0;
-  text-align: center;
-  background: none;
-  border: 0 none;
-  outline: none;
-  cursor: pointer;
+  border-radius: var(--border-radius-xs);
+  margin-top: calc(var(--scale-size-8) * -1);
+  margin-right: calc(var(--scale-size-8) * -1);
+
+  &:focus-visible {
+    outline: 2px solid var(--color-border-brand-selected);
+  }
 }
 
 .mt-banner--info {
diff --git a/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue b/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
index 4954149a3..fff35ade4 100644
--- a/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
+++ b/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
@@ -25,7 +25,12 @@
         <slot name="label" />
       </label>
 
-      <mt-help-text v-if="helpText" class="mt-field__help-text" :text="helpText" />
+      <mt-help-text
+        v-if="helpText"
+        class="mt-field__help-text"
+        :text="helpText"
+        placement="right"
+      />
     </div>
 
     <div class="mt-block-field__block">
diff --git a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.interactive.stories.ts b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.interactive.stories.ts
index 9dfcb4b58..e6f6af553 100644
--- a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.interactive.stories.ts
+++ b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.interactive.stories.ts
@@ -94,12 +94,12 @@ export const VisualTestInherited: MtCheckboxStory = {
     inheritedValue: false,
     isInherited: true,
   },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
+  play: async ({ args }) => {
+    const canvas = within(document.body);
 
     await userEvent.click(canvas.getByTestId("mt-inheritance-switch-icon"));
 
-    await waitUntil(() => document.querySelector(".mt-tooltip"));
+    waitUntil(() => document.querySelector(".tooltip"));
 
     await expect(args.inheritanceRemove).toHaveBeenCalledWith(undefined);
   },
@@ -144,15 +144,12 @@ export const VisualTestHelpText: MtCheckboxStory = {
     label: "Help text label",
     helpText: "Help text message",
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect((canvas.getByRole("checkbox") as HTMLInputElement).checked).toBe(false);
-    expect(canvas.getByTestId("mt-help-text__icon")).toBeDefined();
-
-    await userEvent.click(canvas.getByTestId("mt-help-text__icon"));
+  play: async () => {
+    const canvas = within(document.body);
+    await userEvent.tab();
+    await userEvent.tab();
 
-    await waitUntil(() => document.querySelector(".mt-tooltip"));
+    expect(canvas.getByRole("tooltip")).toBeInTheDocument();
   },
 };
 
diff --git a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
index e7110d59e..f9b9f962f 100644
--- a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
+++ b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
@@ -285,6 +285,10 @@ export default defineComponent({
     & .mt-field__label {
       margin-bottom: 0;
       margin-left: var(--scale-size-4);
+
+      & .mt-help-text {
+        margin-left: var(--scale-size-8);
+      }
     }
 
     & .mt-field__checkbox {
diff --git a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts b/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts
index 13689e799..1c2c7537c 100644
--- a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts
+++ b/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts
@@ -600,45 +600,10 @@ export const VisualTestColorpickerWithHelpText: MtColorpickerStory = {
   args: {
     helpText: "Text for helping you",
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const tooltip = canvas.getByRole("tooltip");
-
-    await userEvent.hover(tooltip);
-
-    // wait until tooltip gets rendered
-    await (() => {
-      return new Promise((resolve, reject) => {
-        const waitUntilElementLoad = (retryTime = 0) => {
-          // do not wait longer than 2.5 seconds
-          if (retryTime > 100) {
-            reject();
-          }
-
-          // check for tooltip
-          const result = document.querySelector('[aria-label="currently-opened-tooltip"]');
-
-          // retry selection when not found otherwise resolve it
-          if (!result) {
-            window.setTimeout(() => waitUntilElementLoad(retryTime + 1), 25);
-          } else {
-            resolve(true);
-          }
-        };
-
-        waitUntilElementLoad();
-      });
-    })();
-
-    const tooltipElement = within(
-      document.querySelector('[aria-label="currently-opened-tooltip"]')
-        ?.parentElement as HTMLElement,
-    );
-
-    const openedTooltip = tooltipElement.getByLabelText("currently-opened-tooltip");
+  play: async () => {
+    const canvas = within(document.body);
+    await userEvent.tab();
 
-    expect(openedTooltip).not.toEqual(null);
-    expect(openedTooltip.innerText).toEqual("Text for helping you");
+    expect(canvas.getByRole("tooltip")).toBeInTheDocument();
   },
 };
diff --git a/packages/component-library/src/components/form/mt-help-text/mt-help-text.spec.ts b/packages/component-library/src/components/form/mt-help-text/mt-help-text.spec.ts
new file mode 100644
index 000000000..c342e71f1
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-help-text/mt-help-text.spec.ts
@@ -0,0 +1,51 @@
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/vue";
+import MtHelpText from "./mt-help-text.vue";
+import { flushPromises } from "@vue/test-utils";
+
+describe("mt-help-text", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it("opens a tooltip when focusing the help text", async () => {
+    // ARRANGE
+    render(MtHelpText, {
+      props: { text: "Some text" },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.tab();
+
+    // ASSERT
+    expect(screen.getByRole("tooltip")).toBeVisible();
+  });
+
+  it("opens a tooltip when hovering the help text", async () => {
+    // ARRANGE
+    render(MtHelpText, {
+      props: { text: "Some text" },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.hover(screen.getByRole("button"));
+
+    vi.advanceTimersByTime(550);
+    await flushPromises();
+
+    // ASSERT
+    expect(screen.getByRole("tooltip")).toBeVisible();
+  });
+});
diff --git a/packages/component-library/src/components/form/mt-help-text/mt-help-text.vue b/packages/component-library/src/components/form/mt-help-text/mt-help-text.vue
index 726ba49c2..6050ef10c 100644
--- a/packages/component-library/src/components/form/mt-help-text/mt-help-text.vue
+++ b/packages/component-library/src/components/form/mt-help-text/mt-help-text.vue
@@ -1,75 +1,35 @@
 <template>
-  <button
-    v-tooltip="{
-      message: text,
-      width: width,
-      showDelay: showDelay,
-      hideDelay: hideDelay,
-    }"
-    class="mt-help-text"
-    role="tooltip"
-    aria-label="help-text"
-  >
-    <mt-icon data-testid="mt-help-text__icon" name="solid-question-circle-s" />
-
-    <span class="mt-help-text__tooltip-text">{{ text }}</span>
-  </button>
+  <mt-tooltip :content="text" :placement="placement">
+    <template #default="props">
+      <button v-bind="props" class="mt-help-text">
+        <mt-icon
+          aria-hidden="true"
+          data-testid="mt-help-text__icon"
+          name="solid-question-circle-s"
+        />
+      </button>
+    </template>
+  </mt-tooltip>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-import MtTooltipDirective from "../../../directives/tooltip.directive";
-
-/**
- * @internal
- */
-export default defineComponent({
-  name: "MtHelpText",
-
-  components: {
-    "mt-icon": MtIcon,
-  },
-
-  directives: {
-    tooltip: MtTooltipDirective,
-  },
+import MtTooltip, { type Placement } from "@/components/overlay/mt-tooltip/mt-tooltip.vue";
 
-  props: {
-    /**
-     * The text which gets rendered in the tooltip
-     */
-    text: {
-      type: String,
-      required: true,
-      default: "",
-    },
-    /**
-     * The width of the tooltip
-     */
-    width: {
-      type: Number,
-      required: false,
-      default: 200,
-    },
-    /**
-     * Choose the delay until the tooltip gets rendered when it gets hovered
-     */
-    showDelay: {
-      type: Number,
-      required: false,
-      default: 100,
-    },
-    /**
-     * Choose the delay until the tooltip gets removed the cursor leaves
-     */
-    hideDelay: {
-      type: Number,
-      required: false,
-      default: 100,
-    },
+withDefaults(
+  defineProps<{
+    text: string;
+    width?: number;
+    showDelay?: number;
+    hideDelay?: number;
+    placement?: Placement;
+  }>(),
+  {
+    width: 200,
+    showDelay: 100,
+    hideDelay: 100,
   },
-});
+);
 </script>
 
 <style scoped>
@@ -77,6 +37,8 @@ export default defineComponent({
   color: var(--color-icon-brand-default);
   display: inline-flex;
   align-items: center;
+  height: var(--scale-size-16);
+  width: var(--scale-size-16);
   justify-content: center;
   position: relative;
   border-radius: var(--border-radius-round);
@@ -96,6 +58,7 @@ export default defineComponent({
   display: block;
   position: absolute;
   inset: 0;
+  scale: 0.9;
   background-color: var(--color-icon-static-default);
   z-index: -1;
   border-radius: var(--border-radius-round);
diff --git a/packages/component-library/src/components/form/mt-help-text/mt-helptext.stories.ts b/packages/component-library/src/components/form/mt-help-text/mt-helptext.stories.ts
new file mode 100644
index 000000000..e55c5303d
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-help-text/mt-helptext.stories.ts
@@ -0,0 +1,15 @@
+import { defineStory } from "@/_internal/story-helper";
+import MtHelpText from "./mt-help-text.vue";
+import type { Meta } from "@storybook/vue3";
+
+type MtHelpTextMeta = Meta<typeof MtHelpText>;
+
+export default {
+  title: "Components/Form/mt-help-text",
+  component: MtHelpText,
+  args: {
+    text: "Help text",
+  },
+} as MtHelpTextMeta;
+
+export const Default = defineStory({});
diff --git a/packages/component-library/src/components/form/mt-switch/mt-switch.interactive.stories.ts b/packages/component-library/src/components/form/mt-switch/mt-switch.interactive.stories.ts
index 260be9713..ab7380649 100644
--- a/packages/component-library/src/components/form/mt-switch/mt-switch.interactive.stories.ts
+++ b/packages/component-library/src/components/form/mt-switch/mt-switch.interactive.stories.ts
@@ -100,12 +100,12 @@ export const VisualTestInherited: MtSwitchStory = {
     label: "Inherited",
     inheritedValue: false,
   },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
+  play: async ({ args }) => {
+    const canvas = within(document.body);
 
     await userEvent.click(canvas.getByTestId("mt-inheritance-switch-icon"));
 
-    await waitUntil(() => document.querySelector(".mt-tooltip"));
+    waitUntil(() => document.querySelector(".tooltip"));
 
     expect(args.inheritanceRemove).toHaveBeenCalledWith(undefined);
   },
@@ -150,16 +150,12 @@ export const VisualTestHelpText: MtSwitchStory = {
     label: "Help text label",
     helpText: "Help text message",
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect((canvas.getByRole("checkbox") as HTMLInputElement).checked).toBe(false);
-    expect(canvas.getByTestId("mt-help-text__icon")).toBeDefined();
-
-    await userEvent.click(canvas.getByTestId("mt-help-text__icon"));
+  play: async () => {
+    const canvas = within(document.body);
 
-    await waitUntil(() => document.querySelector(".mt-tooltip"));
+    await userEvent.tab();
+    await userEvent.tab();
 
-    expect(document.querySelector(".mt-tooltip")).toBeDefined();
+    expect(canvas.getByRole("tooltip")).toBeInTheDocument();
   },
 };
diff --git a/packages/component-library/src/components/form/mt-switch/mt-switch.vue b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
index 1ac146ada..5e09ff41f 100644
--- a/packages/component-library/src/components/form/mt-switch/mt-switch.vue
+++ b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
@@ -250,12 +250,17 @@ export default defineComponent({
 
     .mt-field__label {
       margin-bottom: 0;
+      align-items: center;
 
       label {
         cursor: pointer;
         flex-grow: initial;
         padding: 15px 0 15px var(--scale-size-4);
       }
+
+      .mt-help-text {
+        margin-left: var(--scale-size-8);
+      }
     }
 
     .mt-field--switch__content {
@@ -371,7 +376,7 @@ export default defineComponent({
       }
     }
 
-    &:has(:focus-visible) {
+    &:has(input:focus-visible) {
       .mt-field__switch-state {
         outline: 2px solid var(--color-border-brand-selected);
         outline-offset: 2px;
diff --git a/packages/component-library/src/components/navigation/mt-link/mt-link.spec.ts b/packages/component-library/src/components/navigation/mt-link/mt-link.spec.ts
new file mode 100644
index 000000000..8e2bc6b48
--- /dev/null
+++ b/packages/component-library/src/components/navigation/mt-link/mt-link.spec.ts
@@ -0,0 +1,174 @@
+import { render, screen } from "@testing-library/vue";
+import MtLink from "./mt-link.vue";
+import { userEvent } from "@storybook/test";
+
+describe("mt-link", async () => {
+  it("renders a link", async () => {
+    // ARRANGE
+    render(MtLink, {
+      props: {
+        as: "a",
+        to: "https://www.shopware.com",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("link")).toBeVisible();
+    expect(screen.getByRole("link")).toHaveAttribute("href", "https://www.shopware.com");
+    expect(screen.getByRole("link")).toHaveRole("link");
+  });
+
+  it("renders the correct slot content", async () => {
+    // ARRANGE
+    render(MtLink, {
+      props: {
+        as: "a",
+        to: "https://www.shopware.com",
+      },
+      slots: {
+        default: "Shopware",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("link")).toHaveTextContent("Shopware");
+  });
+
+  it("does not redirect when clicking on a disabled link", async () => {
+    // ARRANGE
+    render(MtLink, {
+      props: {
+        as: "a",
+        to: "https://www.shopware.com",
+        disabled: true,
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("link")).not.toHaveAttribute("href", "https://www.shopware.com");
+  });
+
+  it("does not emit a click event when clicking on a disabled link", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtLink, {
+      props: {
+        as: "a",
+        to: "https://www.shopware.com",
+        disabled: true,
+        onClick: handler,
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("link"));
+
+    // ASSERT
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("announces the link as disabled when it is disabled", async () => {
+    // ARRANGE
+    render(MtLink, {
+      props: {
+        as: "a",
+        to: "https://www.shopware.com",
+        disabled: true,
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("link")).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("is not possible to focus a disabled link", async () => {
+    // ARRANGE
+    render(MtLink, {
+      props: {
+        as: "a",
+        to: "https://www.shopware.com",
+        disabled: true,
+      },
+    });
+
+    // ACT
+    await userEvent.tab();
+
+    // ASSERT
+    expect(screen.getByRole("link")).not.toHaveFocus();
+  });
+
+  it("renders as a custom component", async () => {
+    // ARRANGE
+    render(MtLink, {
+      props: {
+        as: "button",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("button")).toBeVisible();
+    expect(screen.getByRole("button")).toHaveRole("button");
+  });
+
+  it("emits a click event when clicking on the link", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtLink, {
+      props: {
+        as: "a",
+        to: "https://www.shopware.com",
+        onClick: handler,
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("link"));
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("emits a focus event when focusing the link", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtLink, {
+      props: {
+        as: "a",
+        to: "https://www.shopware.com",
+        // @ts-expect-error -- focus event gets added via prop fallthrough
+        onFocus: handler,
+      },
+    });
+
+    // ACT
+    await userEvent.tab();
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("emits a blur event when blurring the link", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtLink, {
+      props: {
+        as: "a",
+        to: "https://www.shopware.com",
+        // @ts-expect-error -- blur event gets added via prop fallthrough
+        onBlur: handler,
+      },
+    });
+
+    // ACT
+    await userEvent.tab();
+    await userEvent.tab();
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/component-library/src/components/navigation/mt-link/mt-link.vue b/packages/component-library/src/components/navigation/mt-link/mt-link.vue
index 6db047d63..c44b3969d 100644
--- a/packages/component-library/src/components/navigation/mt-link/mt-link.vue
+++ b/packages/component-library/src/components/navigation/mt-link/mt-link.vue
@@ -8,8 +8,9 @@
         'mt-link--disabled': disabled,
       },
     ]"
+    :href="disabled ? undefined : to"
+    :role="as === 'a' ? 'link' : undefined"
     :aria-disabled="disabled"
-    role="link"
     :tabindex="disabled ? -1 : 0"
     v-bind="to ? { ...$attrs, to } : $attrs"
     @click="disabled ? undefined : $emit('click', $event)"
@@ -50,7 +51,7 @@ defineEmits<{
 <style scoped>
 .mt-link {
   display: inline-flex;
-  column-gap: 0.25rem;
+  column-gap: var(--scale-size-4);
   align-items: center;
   cursor: pointer;
   margin: 0;
diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-search/mt-search.interactive.stories.ts
index fea600c5d..79adc21a2 100644
--- a/packages/component-library/src/components/navigation/mt-search/mt-search.interactive.stories.ts
+++ b/packages/component-library/src/components/navigation/mt-search/mt-search.interactive.stories.ts
@@ -1,8 +1,3 @@
-import { within, userEvent } from "@storybook/test";
-import { expect } from "@storybook/test";
-
-import * as test from "@storybook/test";
-
 import meta, { type MtSearchMeta, type MtSearchStory } from "./mt-search.stories";
 
 export default {
@@ -10,23 +5,6 @@ export default {
   title: "Interaction Tests/Navigation/mt-search",
 } as MtSearchMeta;
 
-export const TestInputValue: MtSearchStory = {
-  name: "Should keep input value",
-  args: {
-    change: test.fn(),
-  },
-  play: async ({ args, canvasElement }) => {
-    // we can't use canvasElement because it is not available anymore
-    const canvas = within(canvasElement);
-
-    await userEvent.type(canvas.getByRole("textbox"), "Shopware");
-    await userEvent.click(canvas.getByText("hidden"));
-
-    await expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("Shopware");
-    await expect(args.change).toHaveBeenCalledWith("Shopware");
-  },
-};
-
 export const VisualTestDefaultSize: MtSearchStory = {
   name: "Render the default sized search",
   args: {
diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts
new file mode 100644
index 000000000..ea2858fa4
--- /dev/null
+++ b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts
@@ -0,0 +1,117 @@
+import { render, screen } from "@testing-library/vue";
+import MtSearch from "./mt-search.vue";
+import { userEvent } from "@storybook/test";
+
+describe("mt-search", () => {
+  it("changes the value when typing in the search", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtSearch, {
+      props: {
+        modelValue: "",
+        "onUpdate:modelValue": handler,
+      },
+    });
+
+    // ACT
+    await userEvent.type(screen.getByRole("searchbox"), "Hello");
+
+    // ASSERT
+    expect(screen.getByRole("searchbox")).toHaveValue("Hello");
+    expect(handler).toHaveBeenCalledWith("Hello");
+  });
+
+  it("emits a change event when typing in the search and then removing the focus from the input", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtSearch, {
+      props: {
+        modelValue: "",
+        onChange: handler,
+      },
+    });
+
+    // ACT
+    await userEvent.type(screen.getByRole("searchbox"), "Hello");
+    await userEvent.tab();
+
+    // ASSERT
+    expect(screen.getByRole("searchbox")).toHaveValue("Hello");
+
+    expect(handler).toHaveBeenCalledWith("Hello");
+  });
+
+  it("emits an empty string when clearing the search and then removing focus from the input", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtSearch, {
+      props: {
+        modelValue: "Hello",
+        onChange: handler,
+      },
+    });
+
+    // ACT
+    await userEvent.clear(screen.getByRole("searchbox"));
+    await userEvent.tab();
+
+    // ASSERT
+    expect(screen.getByRole("searchbox")).toHaveValue("");
+    expect(handler).toHaveBeenCalledWith("");
+  });
+
+  it("has a default placeholder of search", async () => {
+    // ARRANGE
+    render(MtSearch);
+
+    // ASSERT
+    expect(screen.getByRole("searchbox")).toHaveAttribute("placeholder", "Search");
+  });
+
+  it("has the specified placeholder", async () => {
+    // ARRANGE
+    render(MtSearch, {
+      props: {
+        placeholder: "Find me",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("searchbox")).toHaveAttribute("placeholder", "Find me");
+  });
+
+  it("disables the search", async () => {
+    // ARRANGE
+    render(MtSearch, {
+      props: {
+        disabled: true,
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("searchbox")).toBeDisabled();
+  });
+
+  it("does not change the value when the search is disabled", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtSearch, {
+      props: {
+        modelValue: "Hello",
+        disabled: true,
+        "onUpdate:modelValue": handler,
+      },
+    });
+
+    // ACT
+    await userEvent.type(screen.getByRole("searchbox"), "World");
+
+    // ASSERT
+    expect(screen.getByRole("searchbox")).toHaveValue("Hello");
+    expect(handler).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.vue b/packages/component-library/src/components/navigation/mt-search/mt-search.vue
index 04b77ad32..3bbba0c3e 100644
--- a/packages/component-library/src/components/navigation/mt-search/mt-search.vue
+++ b/packages/component-library/src/components/navigation/mt-search/mt-search.vue
@@ -3,14 +3,18 @@
     <input
       :value="modelValue"
       @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-      @change="$emit('change', ($event.target as HTMLInputElement).value || '')"
+      @change="$emit('change', ($event.target as HTMLInputElement).value)"
       class="mt-search__input"
       :disabled="disabled"
-      type="text"
+      type="search"
       :placeholder="placeholder || t('placeholder')"
     />
 
-    <mt-icon name="regular-search-s" size="1rem" color="var(--color-icon-primary-default)" />
+    <mt-icon
+      name="regular-search-s"
+      size="var(--scale-size-16)"
+      color="var(--color-icon-primary-default)"
+    />
   </div>
 </template>
 
@@ -67,11 +71,11 @@ defineEmits<{
 }
 
 .mt-search--size-default {
-  padding: 0.75rem 1rem;
+  padding: var(--scale-size-12) var(--scale-size-16);
 }
 
 .mt-search--size-small {
-  padding: 0.25rem 1rem;
+  padding: var(--scale-size-4) var(--scale-size-16);
 }
 
 .mt-search__input {
@@ -84,9 +88,17 @@ defineEmits<{
   line-height: var(--font-line-height-xs);
   color: var(--color-text-primary-default);
   outline: none;
+  appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
 
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
+
   &::placeholder {
     color: var(--color-text-secondary-default);
   }
diff --git a/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.vue b/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.vue
index d4ad28dad..97e38741e 100644
--- a/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.vue
+++ b/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.vue
@@ -17,9 +17,9 @@
       onMouseleave,
       onMousedown,
       onMouseup: () => setState({ isPressingTrigger: false }),
-      'aria-describedby': isVisible ? `mt-tooltip--${id}__tooltip` : null,
+      'aria-describedby': isVisible ? `mt-tooltip--${id}__tooltip` : undefined,
     }"
-  ></slot>
+  />
 
   <Transition>
     <div v-show="isVisible" :data-placement="calculatedPlacement" style="position: absolute">
@@ -36,7 +36,6 @@
       >
         <span>{{ content }}</span>
 
-        <!-- @vue-ignore -->
         <svg
           ref="arrowRef"
           width="8"
@@ -82,6 +81,8 @@ import { useTooltipState } from "./composables/useTooltipState";
 import { useTimeout } from "@vueuse/core";
 import { TooltipContext } from "./composables/useIsInsideTooltip";
 
+export type { Placement } from "@floating-ui/vue";
+
 const props = withDefaults(
   defineProps<{
     content: string;
@@ -167,9 +168,7 @@ const {
   floatingStyles,
   middlewareData,
   placement: calculatedPlacement,
-  // @ts-ignore
 } = useFloating(triggerRef, tooltipRef, {
-  // @ts-ignore
   middleware: [offset(8), flip(), shift(), arrow({ element: arrowRef, padding: 8 })],
   whileElementsMounted: autoUpdate,
   placement: props.placement,
@@ -201,7 +200,7 @@ provide(TooltipContext, true);
   line-height: var(--line-height-2xs);
   background: var(--color-elevation-surface-floating);
   line-height: var(--font-family-line-height-2xs);
-  padding: 0.75rem;
+  padding: var(--scale-size-12);
   border-radius: var(--border-radius-overlay);
   width: max-content;
 }
@@ -227,21 +226,21 @@ provide(TooltipContext, true);
 
 .v-enter-from[data-placement="top"],
 .v-leave-to[data-placement="top"] {
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--scale-size-5);
 }
 
 .v-enter-from[data-placement="bottom"],
 .v-leave-to[data-placement="bottom"] {
-  margin-top: 0.25rem;
+  margin-top: var(--scale-size-5);
 }
 
 .v-enter-from[data-placement="left"],
 .v-leave-to[data-placement="left"] {
-  margin-right: 0.25rem;
+  margin-right: var(--scale-size-5);
 }
 
 .v-enter-from[data-placement="right"],
 .v-leave-to[data-placement="right"] {
-  margin-left: 0.25rem;
+  margin-left: var(--scale-size-5);
 }
 </style>