From 669d099e15e57a40a6e9457ab758770a1b183181 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Mon, 26 Aug 2024 16:14:47 +0300
Subject: [PATCH 01/21] Remove/rename click event on every component

---
 .../sit-onyx/src/components/OnyxButton/OnyxButton.vue  |  8 --------
 .../src/components/OnyxIconButton/OnyxIconButton.vue   |  6 ------
 packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue |  8 --------
 .../src/components/OnyxNavAppArea/OnyxNavAppArea.vue   | 10 +---------
 .../OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue   |  8 --------
 .../OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue |  6 +++---
 .../OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue     |  4 ++--
 .../sit-onyx/src/components/OnyxSelect/OnyxSelect.vue  |  2 +-
 .../src/components/OnyxSelectInput/OnyxSelectInput.vue |  4 ++--
 .../components/OnyxToastMessage/OnyxToastMessage.vue   |  4 ++--
 10 files changed, 11 insertions(+), 49 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
index 3dbce2883..43fdd0208 100644
--- a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
+++ b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
@@ -18,13 +18,6 @@ const props = withDefaults(defineProps<OnyxButtonProps>(), {
 
 const { densityClass } = useDensity(props);
 
-const emit = defineEmits<{
-  /**
-   * Emitted when the button is clicked (and is not disabled).
-   */
-  click: [];
-}>();
-
 const rippleRef = ref<ComponentInstance<typeof OnyxRipple>>();
 const rippleEvents = computed(() => rippleRef.value?.events ?? {});
 </script>
@@ -44,7 +37,6 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
     :type="props.type"
     :aria-label="props.loading ? props.label : undefined"
     :autofocus="props.autofocus"
-    @click="emit('click')"
     v-on="rippleEvents"
   >
     <OnyxRipple v-if="!props.disabled && !props.loading" ref="rippleRef" />
diff --git a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
index ca95d65ee..07a05950d 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
+++ b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
@@ -18,11 +18,6 @@ defineSlots<{
   /** Slot for an custom icon. Will have no effect if property `icon` is passed. */
   default(): unknown;
 }>();
-
-const emit = defineEmits<{
-  /** Emitted when the button is clicked (and is not disabled). */
-  click: [];
-}>();
 </script>
 
 <template>
@@ -41,7 +36,6 @@ const emit = defineEmits<{
     ]"
     :disabled="props.disabled || props.loading"
     :autofocus="props.autofocus"
-    @click="emit('click')"
   >
     <OnyxLoadingIndicator v-if="props.loading" type="circle" />
     <OnyxIcon v-else-if="props.icon" :icon="props.icon" />
diff --git a/packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue b/packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue
index cac75a1f7..22dbebb9c 100644
--- a/packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue
+++ b/packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue
@@ -9,13 +9,6 @@ const props = withDefaults(defineProps<OnyxLinkProps>(), {
   withExternalIcon: "auto",
 });
 
-const emit = defineEmits<{
-  /**
-   * Emitted when the link is opened (via click or keyboard).
-   */
-  click: [];
-}>();
-
 defineSlots<{
   /**
    * Link label.
@@ -32,7 +25,6 @@ const { t } = injectI18n();
     :href="props.href"
     :target="props.target"
     :rel="props.target === '_blank' ? 'noreferrer' : undefined"
-    @click="emit('click')"
   >
     <slot></slot>
 
diff --git a/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue b/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue
index 8713f62a6..14a69c536 100644
--- a/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue
+++ b/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue
@@ -5,14 +5,6 @@ import type { OnyxNavAppAreaProps } from "./types";
 
 const props = defineProps<OnyxNavAppAreaProps>();
 
-const emit = defineEmits<{
-  /**
-   * Emitted when the app area (where logo and app name are placed) is clicked.
-   * Usually the user is redirected to the home page.
-   */
-  click: [];
-}>();
-
 defineSlots<{
   /**
    * Optional slot to override the content.
@@ -26,7 +18,7 @@ const buttonLabel = computed(() => props.label ?? t.value("navigation.goToHome")
 </script>
 
 <template>
-  <button type="button" class="onyx-nav-app-area" :aria-label="buttonLabel" @click="emit('click')">
+  <button type="button" class="onyx-nav-app-area" :aria-label="buttonLabel">
     <slot>
       <!--
         the width/height here is only to prevent layout shifts on initial load.
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue
index 6f28cfa68..530ba74ad 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue
@@ -5,13 +5,6 @@ import { type OnyxMenuItemProps } from "./types";
 
 const props = defineProps<OnyxMenuItemProps>();
 
-const emit = defineEmits<{
-  /**
-   * Emitted when the menu item is clicked (via click or keyboard).
-   */
-  click: [];
-}>();
-
 const {
   elements: { listItem, menuItem },
 } = createMenuItems();
@@ -37,7 +30,6 @@ const {
           disabled: !props.href && props.disabled,
         })
       "
-      @click="emit('click')"
     >
       <slot></slot>
     </component>
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
index f7ee2ac80..a41ea9ef8 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
@@ -14,9 +14,9 @@ const props = withDefaults(defineProps<OnyxNavButtonProps>(), {
 
 const emit = defineEmits<{
   /**
-   * Emitted when the nav item is clicked (via click or keyboard).
+   * Emitted when the nav button is clicked (via click or keyboard).
    */
-  click: [href: string];
+  navButtonClick: [href: string];
 }>();
 
 const slots = defineSlots<{
@@ -38,7 +38,7 @@ const handleParentClick = () => {
   if (isMobile?.value && hasChildren.value && !isMobileChildrenOpen.value) {
     isMobileChildrenOpen.value = true;
   } else if (props.href) {
-    emit("click", props.href);
+    emit("navButtonClick", props.href);
   }
 };
 </script>
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue
index d63185a8e..a8eb93141 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue
@@ -11,7 +11,7 @@ const emit = defineEmits<{
   /**
    * Emitted when the nav item is clicked.
    */
-  click: [href: string];
+  navItemClick: [href: string];
 }>();
 
 defineSlots<{
@@ -27,7 +27,7 @@ defineSlots<{
     class="onyx-nav-item"
     :active="props.active"
     :href="props.href ?? 'javascript:void(0)'"
-    @click="props.href && emit('click', props.href)"
+    @click="props.href && emit('navItemClick', props.href)"
   >
     <slot>
       <span>{{ props.label }}</span>
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index a74257099..044e3d4fa 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -321,7 +321,7 @@ const selectInputProps = computed(() => {
       v-bind="selectInputProps"
       :show-focus="open"
       :autofocus="props.autofocus"
-      @click="onToggle"
+      @select-input-click="onToggle"
       @validity-change="emit('validityChange', $event)"
     />
 
diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
index 811d4faad..41964ba74 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
   /**
    * Emitted when the select input is clicked (and is not disabled).
    */
-  click: [];
+  selectInputClick: [];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -125,7 +125,7 @@ const blockTyping = (event: KeyboardEvent) => {
     <OnyxFormElement v-bind="props" :error-messages="errorMessages">
       <template #default="{ id }">
         <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- Disabled rules are needed here, because of the click event. Otherwise clicking on the padding or gap won't open the select -->
-        <div class="onyx-select-input__wrapper" @click="emit('click')">
+        <div class="onyx-select-input__wrapper" @click="emit('selectInputClick')">
           <OnyxLoadingIndicator
             v-if="props.loading"
             class="onyx-select-input__loading"
diff --git a/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue b/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue
index 7c3102e82..8c6995e1c 100644
--- a/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue
+++ b/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue
@@ -21,7 +21,7 @@ const emit = defineEmits<{
   /**
    * Emitted when the toast is clicked. Requires `clickable` property to be enabled.
    */
-  click: [];
+  toastMessageClick: [];
   /**
    * Emitted when the toast should be closed.
    */
@@ -53,7 +53,7 @@ const icon = computed(() => {
     :class="[`onyx-toast-message--${props.color}`, densityClass]"
     :role="props.color === 'danger' || props.color === 'warning' ? 'alert' : 'status'"
     :aria-label="props.clickable ? props.headline : undefined"
-    @click="props.clickable && emit('click')"
+    @click="props.clickable && emit('toastMessageClick')"
   >
     <div class="onyx-toast-message__wrapper">
       <OnyxIcon v-if="icon" :icon="icon" />

From 918a684290e44627312111b659293a1d25b474fe Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Mon, 26 Aug 2024 16:29:47 +0300
Subject: [PATCH 02/21] Update event names

---
 apps/demo-app/src/App.vue                                       | 2 +-
 .../modules/OnyxNavButton/MobileComponentTestWrapper.vue        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/demo-app/src/App.vue b/apps/demo-app/src/App.vue
index 0551bb25b..03e19f5fe 100644
--- a/apps/demo-app/src/App.vue
+++ b/apps/demo-app/src/App.vue
@@ -69,7 +69,7 @@ watch(
           :key="item.href"
           v-bind="item"
           :active="item.href === router.currentRoute.value.path"
-          @click="router.push"
+          @nav-button-click="router.push"
         />
 
         <template #contextArea>
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/MobileComponentTestWrapper.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/MobileComponentTestWrapper.vue
index a1ddad5bc..897483c55 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/MobileComponentTestWrapper.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/MobileComponentTestWrapper.vue
@@ -36,7 +36,7 @@ provide(
     :label="props.label"
     :href="props.href"
     :active="props.active"
-    @click="emit('click', $event)"
+    @nav-button-click="emit('click', $event)"
   >
     <slot></slot>
 

From fed93eebfd95614f07080a9ac5dda31268b76352 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Mon, 26 Aug 2024 16:35:47 +0300
Subject: [PATCH 03/21] Fix tests

---
 .../components/OnyxIconButton/OnyxIconButton.ct.tsx  | 12 ++----------
 .../src/components/OnyxNavBar/OnyxNavBar.ct.tsx      | 12 ++++++------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.ct.tsx b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.ct.tsx
index 9dd840a21..33a3db4fd 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.ct.tsx
@@ -10,25 +10,19 @@ import OnyxIconButton from "./OnyxIconButton.vue";
 import type { OnyxIconButtonProps } from "./types";
 
 test("should behave correctly", async ({ mount }) => {
-  let clicks = 0;
   const setup = {
     props: {
       label: "trigger something",
       icon: mockPlaywrightIcon,
     } satisfies OnyxIconButtonProps,
-    on: {
-      click: () => clicks++,
-    },
   };
 
   // ARRANGE
   const component = await mount(OnyxIconButton, setup);
 
   await test.step("clickable by default", async () => {
-    // ACT
-    await component.click();
     // ASSERT
-    expect(clicks).toBe(1);
+    await expect(component).toBeEnabled();
   });
 
   await test.step("not interactive when disabled ", async () => {
@@ -48,10 +42,8 @@ test("should behave correctly", async ({ mount }) => {
   await test.step("clickable again ", async () => {
     // ARRANGE
     await component.update({ ...setup, props: { disabled: false, loading: false } });
-    // ACT
-    await component.click();
     // ASSERT
-    expect(clicks).toBe(2);
+    await expect(component).toBeEnabled();
   });
 });
 
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
index cbe4dc495..b784bba7a 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
@@ -90,33 +90,33 @@ test("Screenshot tests (mobile)", async ({ mount, page }) => {
 
   const component = await mount(
     <OnyxNavBar appName="App name" logoUrl={MOCK_PLAYWRIGHT_LOGO_URL}>
-      <OnyxNavButton href="#1" label="Item 1" onClick={(href) => clickEvents.push(href)} />
-      <OnyxNavButton href="#2" label="Item 2" onClick={(href) => clickEvents.push(href)}>
+      <OnyxNavButton href="#1" label="Item 1" onNavButtonClick={(href) => clickEvents.push(href)} />
+      <OnyxNavButton href="#2" label="Item 2" onNavButtonClick={(href) => clickEvents.push(href)}>
         Item 2
         <OnyxBadge color="warning" dot />
         <template v-slot:children>
           <OnyxNavItem
             label="Nested item 1"
             href="#2-1"
-            onClick={(href) => clickEvents.push(href)}
+            onNavItemClick={(href) => clickEvents.push(href)}
           />
           <OnyxNavItem
             label="Nested item 2"
             href="#2-2"
             active
-            onClick={(href) => clickEvents.push(href)}
+            onNavItemClick={(href) => clickEvents.push(href)}
           />
           <OnyxNavItem
             label="Nested item 3"
             href="#2-3"
-            onClick={(href) => clickEvents.push(href)}
+            onNavItemClick={(href) => clickEvents.push(href)}
           />
         </template>
       </OnyxNavButton>
       <OnyxNavButton
         href="https://onyx.schwarz"
         label="Item 3"
-        onClick={(href) => clickEvents.push(href)}
+        onNavButtonClick={(href) => clickEvents.push(href)}
       />
 
       <template v-slot:mobileActivePage>Nested item 2</template>

From 4f7c44a27ef25263a02a61510ecb794f44f53b01 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Tue, 27 Aug 2024 11:49:25 +0300
Subject: [PATCH 04/21] Remove change events

---
 .../sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx |  4 ----
 .../sit-onyx/src/components/OnyxInput/OnyxInput.vue    | 10 ----------
 .../src/components/OnyxRadioButton/OnyxRadioButton.vue |  8 --------
 .../src/components/OnyxTextarea/OnyxTextarea.ct.tsx    |  5 -----
 .../src/components/OnyxTextarea/OnyxTextarea.vue       | 10 ----------
 5 files changed, 37 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
index c6f131787..6baeae7ef 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
@@ -246,7 +246,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
     <OnyxInput
       label="Label"
       onUpdate:modelValue={(value) => events.updateModelValue.push(value)}
-      onChange={(value) => events.change.push(value)}
       onFocus={() => events.focusCount++}
       onBlur={() => events.blurCount++}
     />,
@@ -255,7 +254,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   // should not emit initial events
   expect(events).toMatchObject({
     updateModelValue: [],
-    change: [],
     focusCount: 0,
     blurCount: 0,
   });
@@ -275,7 +273,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   await expect(inputElement).toHaveValue("Test");
   expect(events).toMatchObject({
     updateModelValue: ["T", "Te", "Tes", "Test"],
-    change: [],
     focusCount: 1,
     blurCount: 0,
   });
@@ -285,7 +282,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   // ASSERT
   expect(events).toMatchObject({
     updateModelValue: ["T", "Te", "Tes", "Test"],
-    change: ["Test"],
     focusCount: 1,
     blurCount: 1,
   });
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index 6baa65f09..4056df84c 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -23,10 +23,6 @@ const emit = defineEmits<{
    * Emitted when the current value changes.
    */
   "update:modelValue": [value: string];
-  /**
-   * Emitted when the current value changes but only when the input is blurred.
-   */
-  change: [value: string];
   /**
    * Emitted when the input is focussed.
    */
@@ -53,11 +49,6 @@ const value = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const handleChange = (event: Event) => {
-  const inputValue = (event.target as HTMLInputElement).value;
-  emit("change", inputValue);
-};
-
 const patternSource = computed(() => {
   if (props.pattern instanceof RegExp) return props.pattern.source;
   return props.pattern;
@@ -94,7 +85,6 @@ const patternSource = computed(() => {
             :maxlength="props.maxlength"
             :aria-label="props.hideLabel ? props.label : undefined"
             :title="props.hideLabel ? props.label : undefined"
-            @change="handleChange"
             @focus="emit('focus')"
             @blur="emit('blur')"
           />
diff --git a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
index fcced2ec0..f9d80f7a0 100644
--- a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
@@ -16,8 +16,6 @@ const props = withDefaults(defineProps<OnyxRadioButtonProps<TValue>>(), {
 });
 
 const emit = defineEmits<{
-  /** Emitted when the value changes. */
-  change: [value: boolean];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -26,11 +24,6 @@ const emit = defineEmits<{
 
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
 const { densityClass } = useDensity(props);
-
-const handleChange = (event: Event) => {
-  const checked = (event.target as HTMLInputElement).checked;
-  emit("change", checked);
-};
 </script>
 
 <template>
@@ -54,7 +47,6 @@ const handleChange = (event: Event) => {
         :checked="props.checked"
         :disabled="props.disabled"
         :autofocus="props.autofocus"
-        @change="handleChange"
       />
       <span class="onyx-radio-button__label" :class="[`onyx-truncation-${props.truncation}`]">
         {{ props.label }}
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
index 91ac612c6..5c5fc8325 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
@@ -275,7 +275,6 @@ test.describe("Screenshot tests", () => {
 test("should emit events", async ({ mount, makeAxeBuilder }) => {
   const events = {
     updateModelValue: [] as string[],
-    change: [] as string[],
     focusCount: 0,
     blurCount: 0,
   };
@@ -285,7 +284,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
     <OnyxTextarea
       label="Label"
       onUpdate:modelValue={(value) => events.updateModelValue.push(value)}
-      onChange={(value) => events.change.push(value)}
       onFocus={() => events.focusCount++}
       onBlur={() => events.blurCount++}
     />,
@@ -294,7 +292,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   // should not emit initial events
   expect(events).toMatchObject({
     updateModelValue: [],
-    change: [],
     focusCount: 0,
     blurCount: 0,
   });
@@ -314,7 +311,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   await expect(inputElement).toHaveValue("Test");
   expect(events).toMatchObject({
     updateModelValue: ["T", "Te", "Tes", "Test"],
-    change: [],
     focusCount: 1,
     blurCount: 0,
   });
@@ -323,7 +319,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   await inputElement.blur();
   expect(events).toMatchObject({
     updateModelValue: ["T", "Te", "Tes", "Test"],
-    change: ["Test"],
     focusCount: 1,
     blurCount: 1,
   });
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index d2ff6e2f8..dc855646b 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -21,10 +21,6 @@ const emit = defineEmits<{
    * Emitted when the current value changes.
    */
   "update:modelValue": [value: string];
-  /**
-   * Emitted when the current value changes but only when the input is blurred.
-   */
-  change: [value: string];
   /**
    * Emitted when the input is focussed.
    */
@@ -51,11 +47,6 @@ const value = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const handleChange = (event: Event) => {
-  const inputValue = (event.target as HTMLInputElement).value;
-  emit("change", inputValue);
-};
-
 /**
  * Current CSS variables for the autosize min/max height.
  */
@@ -112,7 +103,6 @@ const handleInput = (event: Event) => {
             :aria-label="props.hideLabel ? props.label : undefined"
             :title="props.hideLabel ? props.label : undefined"
             @input="handleInput"
-            @change="handleChange"
             @focus="emit('focus')"
             @blur="emit('blur')"
           ></textarea>

From 85e4fe27f1d023edab64f5c953346ed0bef68732 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Tue, 27 Aug 2024 13:52:05 +0300
Subject: [PATCH 05/21] Rename focus and blur events

---
 .../src/components/OnyxInput/OnyxInput.stories.ts         | 2 +-
 packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue  | 8 ++++----
 .../src/components/OnyxStepper/OnyxStepper.stories.ts     | 2 +-
 .../sit-onyx/src/components/OnyxStepper/OnyxStepper.vue   | 8 ++++----
 .../src/components/OnyxTextarea/OnyxTextarea.stories.ts   | 2 +-
 .../sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue | 8 ++++----
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
index ccdacac36..a1d798642 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
@@ -10,7 +10,7 @@ const meta: Meta<typeof OnyxInput> = {
   title: "Form/Input",
   ...defineStorybookActionsAndVModels({
     component: OnyxInput,
-    events: ["update:modelValue", "change", "focus", "blur", "validityChange"],
+    events: ["update:modelValue", "change", "inputFocus", "inputBlur", "validityChange"],
     decorators: [
       (story) => ({
         components: { story },
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index 4056df84c..5d2ccd26b 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -26,11 +26,11 @@ const emit = defineEmits<{
   /**
    * Emitted when the input is focussed.
    */
-  focus: [];
+  inputFocus: [];
   /**
    * Emitted when the input is blurred.
    */
-  blur: [];
+  inputBlur: [];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -85,8 +85,8 @@ const patternSource = computed(() => {
             :maxlength="props.maxlength"
             :aria-label="props.hideLabel ? props.label : undefined"
             :title="props.hideLabel ? props.label : undefined"
-            @focus="emit('focus')"
-            @blur="emit('blur')"
+            @focus="emit('inputFocus')"
+            @blur="emit('inputBlur')"
           />
           <!-- eslint-enable vuejs-accessibility/no-autofocus -->
         </div>
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.stories.ts b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.stories.ts
index 5e7161111..f201a3947 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.stories.ts
@@ -6,7 +6,7 @@ const meta: Meta<typeof OnyxStepper> = {
   title: "Form/Stepper",
   ...defineStorybookActionsAndVModels({
     component: OnyxStepper,
-    events: ["update:modelValue", "validityChange"],
+    events: ["update:modelValue", "validityChange", "inputBlur", "inputFocus"],
     decorators: [
       (story) => ({
         components: { story },
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 5650e3538..26f99f2b3 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -29,11 +29,11 @@ const emit = defineEmits<{
   /**
    * Emitted when the input is focussed.
    */
-  focus: [];
+  inputFocus: [];
   /**
    * Emitted when the input is blurred.
    */
-  blur: [];
+  inputBlur: [];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -110,8 +110,8 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           :step="props.step"
           :title="props.hideLabel ? props.label : undefined"
           @change="wasTouched = true"
-          @focus="emit('focus')"
-          @blur="emit('blur')"
+          @focus="emit('inputFocus')"
+          @blur="emit('inputBlur')"
         />
         <button
           type="button"
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts
index 894390c7e..75dc007d3 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts
@@ -6,7 +6,7 @@ const meta: Meta<typeof OnyxTextarea> = {
   title: "Form/Textarea",
   ...defineStorybookActionsAndVModels({
     component: OnyxTextarea,
-    events: ["update:modelValue", "change", "focus", "blur", "validityChange"],
+    events: ["update:modelValue", "change", "textareaFocus", "textareaBlur", "validityChange"],
     decorators: [
       (story) => ({
         components: { story },
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index dc855646b..c8ac6e862 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -24,11 +24,11 @@ const emit = defineEmits<{
   /**
    * Emitted when the input is focussed.
    */
-  focus: [];
+  textareaFocus: [];
   /**
    * Emitted when the input is blurred.
    */
-  blur: [];
+  textareaBlur: [];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -103,8 +103,8 @@ const handleInput = (event: Event) => {
             :aria-label="props.hideLabel ? props.label : undefined"
             :title="props.hideLabel ? props.label : undefined"
             @input="handleInput"
-            @focus="emit('focus')"
-            @blur="emit('blur')"
+            @focus="emit('textareaFocus')"
+            @blur="emit('textareaBlur')"
           ></textarea>
           <!-- eslint-enable vuejs-accessibility/no-autofocus -->
         </div>

From 437e40fde097b983af14a3f47012c2e4017864a2 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Tue, 27 Aug 2024 14:09:56 +0300
Subject: [PATCH 06/21] Adjust tests

---
 packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx | 4 ++--
 .../sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx  | 6 ++----
 .../src/components/OnyxTextarea/OnyxTextarea.ct.tsx         | 4 ++--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
index 6baeae7ef..b3966dd11 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
@@ -246,8 +246,8 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
     <OnyxInput
       label="Label"
       onUpdate:modelValue={(value) => events.updateModelValue.push(value)}
-      onFocus={() => events.focusCount++}
-      onBlur={() => events.blurCount++}
+      onInputFocus={() => events.focusCount++}
+      onInputBlur={() => events.blurCount++}
     />,
   );
 
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx
index 23257e23a..4c19c9d09 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx
@@ -240,7 +240,6 @@ test.describe("Screenshot tests", () => {
 test("should emit events", async ({ mount, makeAxeBuilder }) => {
   const events = {
     updateModelValue: [] as string[],
-    change: [] as string[],
     focusCount: 0,
     blurCount: 0,
   };
@@ -250,9 +249,8 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
     <OnyxStepper
       label="Label"
       onUpdate:modelValue={(value) => events.updateModelValue.push(value)}
-      onChange={(value) => events.change.push(value)}
-      onFocus={() => events.focusCount++}
-      onBlur={() => events.blurCount++}
+      onInputFocus={() => events.focusCount++}
+      onInputBlur={() => events.blurCount++}
     />,
   );
 
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
index 5c5fc8325..de69c14ec 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
@@ -284,8 +284,8 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
     <OnyxTextarea
       label="Label"
       onUpdate:modelValue={(value) => events.updateModelValue.push(value)}
-      onFocus={() => events.focusCount++}
-      onBlur={() => events.blurCount++}
+      onTextareaFocus={() => events.focusCount++}
+      onTextareaBlur={() => events.blurCount++}
     />,
   );
 

From 8b68b567f753a3e9267c1e501f5366adb328448b Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Wed, 28 Aug 2024 10:28:05 +0300
Subject: [PATCH 07/21] Add type events

---
 packages/storybook-utils/src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/storybook-utils/src/types.ts b/packages/storybook-utils/src/types.ts
index ad754a46d..48af6bc44 100644
--- a/packages/storybook-utils/src/types.ts
+++ b/packages/storybook-utils/src/types.ts
@@ -44,7 +44,7 @@ export type ExtractKeysByValueType<T, U> = { [P in keyof T]: T[P] extends U ? P
  */
 export type DefineStorybookActionsAndVModelsOptions<T> = Meta<T> & {
   component: NonNullable<T>;
-  events: ExtractVueEventNames<T>[];
+  events: (ExtractVueEventNames<T> | "click" | "change")[];
 };
 
 export type StorybookGlobalType<TValue> = {

From 151588395967807e7ebe80159cad4be5aba92c99 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Thu, 29 Aug 2024 15:54:42 +0300
Subject: [PATCH 08/21] Rename click event on OnyxSelectInput

---
 packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue    | 2 +-
 .../src/components/OnyxSelectInput/OnyxSelectInput.vue        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index 044e3d4fa..43674a562 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -321,7 +321,7 @@ const selectInputProps = computed(() => {
       v-bind="selectInputProps"
       :show-focus="open"
       :autofocus="props.autofocus"
-      @select-input-click="onToggle"
+      @input-click="onToggle"
       @validity-change="emit('validityChange', $event)"
     />
 
diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
index 41964ba74..90b491663 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
   /**
    * Emitted when the select input is clicked (and is not disabled).
    */
-  selectInputClick: [];
+  inputClick: [];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -125,7 +125,7 @@ const blockTyping = (event: KeyboardEvent) => {
     <OnyxFormElement v-bind="props" :error-messages="errorMessages">
       <template #default="{ id }">
         <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- Disabled rules are needed here, because of the click event. Otherwise clicking on the padding or gap won't open the select -->
-        <div class="onyx-select-input__wrapper" @click="emit('selectInputClick')">
+        <div class="onyx-select-input__wrapper" @click="emit('inputClick')">
           <OnyxLoadingIndicator
             v-if="props.loading"
             class="onyx-select-input__loading"

From 6dd88a774107f813ed9ce69669e2c5b11594875e Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Thu, 5 Sep 2024 15:07:30 +0300
Subject: [PATCH 09/21] Remove focus and blur events from OnyxInput

---
 .../sit-onyx/src/components/OnyxInput/OnyxInput.vue    | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index 5d2ccd26b..f90034fc9 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -23,14 +23,6 @@ const emit = defineEmits<{
    * Emitted when the current value changes.
    */
   "update:modelValue": [value: string];
-  /**
-   * Emitted when the input is focussed.
-   */
-  inputFocus: [];
-  /**
-   * Emitted when the input is blurred.
-   */
-  inputBlur: [];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -85,8 +77,6 @@ const patternSource = computed(() => {
             :maxlength="props.maxlength"
             :aria-label="props.hideLabel ? props.label : undefined"
             :title="props.hideLabel ? props.label : undefined"
-            @focus="emit('inputFocus')"
-            @blur="emit('inputBlur')"
           />
           <!-- eslint-enable vuejs-accessibility/no-autofocus -->
         </div>

From 60f9e3829de896207384c63bcdbf6203d05281c3 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Thu, 5 Sep 2024 15:16:12 +0300
Subject: [PATCH 10/21] Remove focus and blur event from OnyxStepper

---
 .../src/components/OnyxInput/OnyxInput.ct.tsx   | 17 -----------------
 .../components/OnyxStepper/OnyxStepper.ct.tsx   |  8 --------
 .../src/components/OnyxStepper/OnyxStepper.vue  | 10 ----------
 3 files changed, 35 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
index e35e198bd..14e720caf 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
@@ -260,8 +260,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   const events = {
     updateModelValue: [] as string[],
     change: [] as string[],
-    focusCount: 0,
-    blurCount: 0,
   };
 
   // ARRANGE
@@ -269,16 +267,12 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
     <OnyxInput
       label="Label"
       onUpdate:modelValue={(value) => events.updateModelValue.push(value)}
-      onInputFocus={() => events.focusCount++}
-      onInputBlur={() => events.blurCount++}
     />,
   );
 
   // should not emit initial events
   expect(events).toMatchObject({
     updateModelValue: [],
-    focusCount: 0,
-    blurCount: 0,
   });
 
   // ACT
@@ -296,17 +290,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   await expect(inputElement).toHaveValue("Test");
   expect(events).toMatchObject({
     updateModelValue: ["T", "Te", "Tes", "Test"],
-    focusCount: 1,
-    blurCount: 0,
-  });
-
-  // ACT
-  await inputElement.blur();
-  // ASSERT
-  expect(events).toMatchObject({
-    updateModelValue: ["T", "Te", "Tes", "Test"],
-    focusCount: 1,
-    blurCount: 1,
   });
 });
 
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx
index 4c19c9d09..c61f5b3e6 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx
@@ -240,8 +240,6 @@ test.describe("Screenshot tests", () => {
 test("should emit events", async ({ mount, makeAxeBuilder }) => {
   const events = {
     updateModelValue: [] as string[],
-    focusCount: 0,
-    blurCount: 0,
   };
 
   // ARRANGE
@@ -249,16 +247,12 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
     <OnyxStepper
       label="Label"
       onUpdate:modelValue={(value) => events.updateModelValue.push(value)}
-      onInputFocus={() => events.focusCount++}
-      onInputBlur={() => events.blurCount++}
     />,
   );
 
   // should not emit initial events
   expect(events).toMatchObject({
     updateModelValue: [],
-    focusCount: 0,
-    blurCount: 0,
   });
 
   // ACT
@@ -281,8 +275,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   // ASSERT
   expect(events).toMatchObject({
     updateModelValue: [1, 10],
-    focusCount: 1,
-    blurCount: 1,
   });
 });
 
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 26f99f2b3..2db8345f8 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -26,14 +26,6 @@ const inputRef = ref<HTMLInputElement>();
 const emit = defineEmits<{
   /** Emitted when the input value changes. */
   "update:modelValue": [value?: number];
-  /**
-   * Emitted when the input is focussed.
-   */
-  inputFocus: [];
-  /**
-   * Emitted when the input is blurred.
-   */
-  inputBlur: [];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -110,8 +102,6 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           :step="props.step"
           :title="props.hideLabel ? props.label : undefined"
           @change="wasTouched = true"
-          @focus="emit('inputFocus')"
-          @blur="emit('inputBlur')"
         />
         <button
           type="button"

From b9483a6313c9db4212d137c76ab8c23ccca14bc4 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Thu, 5 Sep 2024 15:40:40 +0300
Subject: [PATCH 11/21] Remove focus and blur event from OnyxTextarea

---
 .../components/OnyxTextarea/OnyxTextarea.ct.tsx  | 16 ----------------
 .../src/components/OnyxTextarea/OnyxTextarea.vue | 10 ----------
 2 files changed, 26 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
index de69c14ec..9d308a351 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
@@ -275,8 +275,6 @@ test.describe("Screenshot tests", () => {
 test("should emit events", async ({ mount, makeAxeBuilder }) => {
   const events = {
     updateModelValue: [] as string[],
-    focusCount: 0,
-    blurCount: 0,
   };
 
   // ARRANGE
@@ -284,16 +282,12 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
     <OnyxTextarea
       label="Label"
       onUpdate:modelValue={(value) => events.updateModelValue.push(value)}
-      onTextareaFocus={() => events.focusCount++}
-      onTextareaBlur={() => events.blurCount++}
     />,
   );
 
   // should not emit initial events
   expect(events).toMatchObject({
     updateModelValue: [],
-    focusCount: 0,
-    blurCount: 0,
   });
 
   // ACT
@@ -311,16 +305,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   await expect(inputElement).toHaveValue("Test");
   expect(events).toMatchObject({
     updateModelValue: ["T", "Te", "Tes", "Test"],
-    focusCount: 1,
-    blurCount: 0,
-  });
-
-  // ACT
-  await inputElement.blur();
-  expect(events).toMatchObject({
-    updateModelValue: ["T", "Te", "Tes", "Test"],
-    focusCount: 1,
-    blurCount: 1,
   });
 });
 
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index c8ac6e862..882940812 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -21,14 +21,6 @@ const emit = defineEmits<{
    * Emitted when the current value changes.
    */
   "update:modelValue": [value: string];
-  /**
-   * Emitted when the input is focussed.
-   */
-  textareaFocus: [];
-  /**
-   * Emitted when the input is blurred.
-   */
-  textareaBlur: [];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -103,8 +95,6 @@ const handleInput = (event: Event) => {
             :aria-label="props.hideLabel ? props.label : undefined"
             :title="props.hideLabel ? props.label : undefined"
             @input="handleInput"
-            @focus="emit('textareaFocus')"
-            @blur="emit('textareaBlur')"
           ></textarea>
           <!-- eslint-enable vuejs-accessibility/no-autofocus -->
         </div>

From d9a7fe19e5ac7129dee1a3505ad2fa1053ece46e Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Thu, 5 Sep 2024 15:58:20 +0300
Subject: [PATCH 12/21] Remove click event from OnyxToastMessage

---
 .../src/components/OnyxToastMessage/OnyxToastMessage.vue     | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue b/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue
index 8c6995e1c..a8aaf907e 100644
--- a/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue
+++ b/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue
@@ -18,10 +18,6 @@ const props = withDefaults(defineProps<OnyxToastMessageProps>(), {
 });
 
 const emit = defineEmits<{
-  /**
-   * Emitted when the toast is clicked. Requires `clickable` property to be enabled.
-   */
-  toastMessageClick: [];
   /**
    * Emitted when the toast should be closed.
    */
@@ -53,7 +49,6 @@ const icon = computed(() => {
     :class="[`onyx-toast-message--${props.color}`, densityClass]"
     :role="props.color === 'danger' || props.color === 'warning' ? 'alert' : 'status'"
     :aria-label="props.clickable ? props.headline : undefined"
-    @click="props.clickable && emit('toastMessageClick')"
   >
     <div class="onyx-toast-message__wrapper">
       <OnyxIcon v-if="icon" :icon="icon" />

From c1172da1321019e08a7273976e92e726e5a1c928 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Thu, 5 Sep 2024 16:08:09 +0300
Subject: [PATCH 13/21] Rename navItemClick and navButtonClick events to
 navigate

---
 .../src/components/OnyxNavBar/OnyxNavBar.ct.tsx      | 12 ++++++------
 .../modules/OnyxNavButton/OnyxNavButton.vue          |  4 ++--
 .../OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue   |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
index b784bba7a..e7cba629f 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
@@ -90,33 +90,33 @@ test("Screenshot tests (mobile)", async ({ mount, page }) => {
 
   const component = await mount(
     <OnyxNavBar appName="App name" logoUrl={MOCK_PLAYWRIGHT_LOGO_URL}>
-      <OnyxNavButton href="#1" label="Item 1" onNavButtonClick={(href) => clickEvents.push(href)} />
-      <OnyxNavButton href="#2" label="Item 2" onNavButtonClick={(href) => clickEvents.push(href)}>
+      <OnyxNavButton href="#1" label="Item 1" onNavigate={(href) => clickEvents.push(href)} />
+      <OnyxNavButton href="#2" label="Item 2" onNavigate={(href) => clickEvents.push(href)}>
         Item 2
         <OnyxBadge color="warning" dot />
         <template v-slot:children>
           <OnyxNavItem
             label="Nested item 1"
             href="#2-1"
-            onNavItemClick={(href) => clickEvents.push(href)}
+            onNavigate={(href) => clickEvents.push(href)}
           />
           <OnyxNavItem
             label="Nested item 2"
             href="#2-2"
             active
-            onNavItemClick={(href) => clickEvents.push(href)}
+            onNavigate={(href) => clickEvents.push(href)}
           />
           <OnyxNavItem
             label="Nested item 3"
             href="#2-3"
-            onNavItemClick={(href) => clickEvents.push(href)}
+            onNavigate={(href) => clickEvents.push(href)}
           />
         </template>
       </OnyxNavButton>
       <OnyxNavButton
         href="https://onyx.schwarz"
         label="Item 3"
-        onNavButtonClick={(href) => clickEvents.push(href)}
+        onNavigate={(href) => clickEvents.push(href)}
       />
 
       <template v-slot:mobileActivePage>Nested item 2</template>
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
index a41ea9ef8..8f03dd8ca 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
   /**
    * Emitted when the nav button is clicked (via click or keyboard).
    */
-  navButtonClick: [href: string];
+  navigate: [href: string];
 }>();
 
 const slots = defineSlots<{
@@ -38,7 +38,7 @@ const handleParentClick = () => {
   if (isMobile?.value && hasChildren.value && !isMobileChildrenOpen.value) {
     isMobileChildrenOpen.value = true;
   } else if (props.href) {
-    emit("navButtonClick", props.href);
+    emit("navigate", props.href);
   }
 };
 </script>
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue
index a8eb93141..c8d645765 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue
@@ -11,7 +11,7 @@ const emit = defineEmits<{
   /**
    * Emitted when the nav item is clicked.
    */
-  navItemClick: [href: string];
+  navigate: [href: string];
 }>();
 
 defineSlots<{
@@ -27,7 +27,7 @@ defineSlots<{
     class="onyx-nav-item"
     :active="props.active"
     :href="props.href ?? 'javascript:void(0)'"
-    @click="props.href && emit('navItemClick', props.href)"
+    @click="props.href && emit('navigate', props.href)"
   >
     <slot>
       <span>{{ props.label }}</span>

From 7fa466b3d257a425a0cb451bbb9e7be4ef77ddb1 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Wed, 11 Sep 2024 16:42:32 +0200
Subject: [PATCH 14/21] review: rename events

---
 apps/demo-app/src/App.vue                                 | 2 +-
 .../sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue     | 8 ++++----
 .../modules/OnyxNavButton/MobileComponentTestWrapper.vue  | 2 +-
 .../OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue    | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/demo-app/src/App.vue b/apps/demo-app/src/App.vue
index 03e19f5fe..2e7373bbc 100644
--- a/apps/demo-app/src/App.vue
+++ b/apps/demo-app/src/App.vue
@@ -69,7 +69,7 @@ watch(
           :key="item.href"
           v-bind="item"
           :active="item.href === router.currentRoute.value.path"
-          @nav-button-click="router.push"
+          @navigate="router.push"
         />
 
         <template #contextArea>
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
index b69ef3ca9..40aa7bda7 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
@@ -21,11 +21,11 @@ const emit = defineEmits<{
    * Emitted when the app area (where logo and app name are placed) is clicked.
    * Usually the user should be redirected to the home page then.
    */
-  appAreaClick: [];
+  navigateToStart: [event: MouseEvent];
   /**
    * Emitted when the back button is clicked.
    */
-  backButtonClick: [];
+  navigateBack: [event: MouseEvent];
 }>();
 
 const slots = defineSlots<{
@@ -114,7 +114,7 @@ defineExpose({
         :logo-url="props.logoUrl"
         :label="props.appAreaLabel"
         @click="
-          emit('appAreaClick');
+          emit('navigateToStart', $event);
           isBurgerOpen = false;
         "
       >
@@ -127,7 +127,7 @@ defineExpose({
         :label="t('navigation.goBack')"
         :icon="chevronLeftSmall"
         color="neutral"
-        @click="emit('backButtonClick')"
+        @click="emit('navigateBack', $event)"
       />
 
       <template v-if="slots.default">
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/MobileComponentTestWrapper.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/MobileComponentTestWrapper.vue
index 897483c55..d77a362c9 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/MobileComponentTestWrapper.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/MobileComponentTestWrapper.vue
@@ -36,7 +36,7 @@ provide(
     :label="props.label"
     :href="props.href"
     :active="props.active"
-    @nav-button-click="emit('click', $event)"
+    @navigate="emit('click', $event)"
   >
     <slot></slot>
 
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
index 8f03dd8ca..10995f849 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
   /**
    * Emitted when the nav button is clicked (via click or keyboard).
    */
-  navigate: [href: string];
+  navigate: [href: string, event: MouseEvent];
 }>();
 
 const slots = defineSlots<{
@@ -34,11 +34,11 @@ const isMobile = inject(MOBILE_NAV_BAR_INJECTION_KEY);
 const isMobileChildrenOpen = ref(false);
 const hasChildren = computed(() => !!slots.children);
 
-const handleParentClick = () => {
+const handleParentClick = (event: MouseEvent) => {
   if (isMobile?.value && hasChildren.value && !isMobileChildrenOpen.value) {
     isMobileChildrenOpen.value = true;
   } else if (props.href) {
-    emit("navigate", props.href);
+    emit("navigate", props.href, event);
   }
 };
 </script>

From df40d773b4662babc2dd77f1fe499b4512243416 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 12 Sep 2024 11:25:45 +0200
Subject: [PATCH 15/21] fix test

---
 packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
index e7cba629f..e092d0009 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
@@ -241,8 +241,8 @@ test("should behave correctly", async ({ mount }) => {
       appName="App name"
       logoUrl={MOCK_PLAYWRIGHT_LOGO_URL}
       withBackButton
-      onAppAreaClick={() => appAreaClickEvents++}
-      onBackButtonClick={() => backButtonClickEvents++}
+      onNavigateToStart={() => appAreaClickEvents++}
+      onNavigateBack={() => backButtonClickEvents++}
     />,
   );
 

From 93033605e53d08e6e8d2a57ec005238c82325991 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 12 Sep 2024 15:07:18 +0200
Subject: [PATCH 16/21] review: update clickable description

---
 packages/sit-onyx/src/components/OnyxToastMessage/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxToastMessage/types.ts b/packages/sit-onyx/src/components/OnyxToastMessage/types.ts
index aa3ca9b95..dcd7b21dd 100644
--- a/packages/sit-onyx/src/components/OnyxToastMessage/types.ts
+++ b/packages/sit-onyx/src/components/OnyxToastMessage/types.ts
@@ -22,8 +22,8 @@ export type OnyxToastMessageProps = DensityProp & {
    */
   duration?: number;
   /**
-   * Whether the toast is clickable (will emit the `click` event).
-   * Will also hide the manual close button.
+   * Whether the toast is clickable.
+   * Enabling this will present the whole toast message element as a button element, but also hide the close button.
    */
   clickable?: boolean;
   /**

From 706dd3eaba63f3f7f8d48a3bb6bc5555f347db62 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan_leo.carle@mail.schwarz>
Date: Thu, 12 Sep 2024 15:22:27 +0200
Subject: [PATCH 17/21] Update
 packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue

Co-authored-by: Lars Rickert <lars.rickert@mail.schwarz>
---
 .../sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
index 90b491663..d07b1edcd 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
@@ -125,7 +125,7 @@ const blockTyping = (event: KeyboardEvent) => {
     <OnyxFormElement v-bind="props" :error-messages="errorMessages">
       <template #default="{ id }">
         <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- Disabled rules are needed here, because of the click event. Otherwise clicking on the padding or gap won't open the select -->
-        <div class="onyx-select-input__wrapper" @click="emit('inputClick')">
+        <div class="onyx-select-input__wrapper" @click="!props.disabled && !props.loading && emit('inputClick')">
           <OnyxLoadingIndicator
             v-if="props.loading"
             class="onyx-select-input__loading"

From 816e836d137872ade5469b26a0850eace069ee2b Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Fri, 13 Sep 2024 14:07:56 +0200
Subject: [PATCH 18/21] fix prettier issue

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

diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
index d07b1edcd..18aca5879 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
@@ -125,7 +125,10 @@ const blockTyping = (event: KeyboardEvent) => {
     <OnyxFormElement v-bind="props" :error-messages="errorMessages">
       <template #default="{ id }">
         <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- Disabled rules are needed here, because of the click event. Otherwise clicking on the padding or gap won't open the select -->
-        <div class="onyx-select-input__wrapper" @click="!props.disabled && !props.loading && emit('inputClick')">
+        <div
+          class="onyx-select-input__wrapper"
+          @click="!props.disabled && !props.loading && emit('inputClick')"
+        >
           <OnyxLoadingIndicator
             v-if="props.loading"
             class="onyx-select-input__loading"

From 606186f9cffd9e0e29a5f5cb341dc58d17d0b4d1 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Fri, 13 Sep 2024 14:26:50 +0200
Subject: [PATCH 19/21] review: update icon button test

---
 .../OnyxIconButton/OnyxIconButton.ct.tsx      | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.ct.tsx b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.ct.tsx
index 33a3db4fd..3d1475fac 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.ct.tsx
@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 import { DENSITIES } from "../../composables/density";
 import { expect, test } from "../../playwright/a11y";
 import {
@@ -9,41 +10,53 @@ import { BUTTON_COLORS } from "../OnyxButton/types";
 import OnyxIconButton from "./OnyxIconButton.vue";
 import type { OnyxIconButtonProps } from "./types";
 
-test("should behave correctly", async ({ mount }) => {
+test("should behave correctly", async ({ page, mount }) => {
+  const clickSpy: MouseEvent[] = [];
   const setup = {
     props: {
       label: "trigger something",
       icon: mockPlaywrightIcon,
-    } satisfies OnyxIconButtonProps,
+      onClick: (e) => clickSpy.push(e),
+    } satisfies OnyxIconButtonProps & HTMLAttributes,
   };
 
   // ARRANGE
   const component = await mount(OnyxIconButton, setup);
+  const buttonElement = page.getByRole("button");
 
   await test.step("clickable by default", async () => {
+    // ACT
+    await buttonElement.click();
     // ASSERT
-    await expect(component).toBeEnabled();
+    await expect(buttonElement).toBeEnabled();
+    expect(clickSpy).toHaveLength(1);
   });
 
   await test.step("not interactive when disabled ", async () => {
     // ARRANGE
-    await component.update({ ...setup, props: { disabled: true } });
+    await component.update({ ...setup, props: { disabled: true } }); // ACT
+    // ACT
+    await buttonElement.click({ force: true });
     // ASSERT
-    await expect(component).toBeDisabled();
+    await expect(buttonElement).toBeDisabled();
+    expect(clickSpy).toHaveLength(1);
   });
 
   await test.step("not interactive when loading ", async () => {
     // ARRANGE
     await component.update({ ...setup, props: { disabled: false, loading: true } });
     // ASSERT
-    await expect(component).toBeDisabled();
+    await expect(buttonElement).toBeDisabled();
   });
 
   await test.step("clickable again ", async () => {
     // ARRANGE
     await component.update({ ...setup, props: { disabled: false, loading: false } });
+    // ACT
+    await buttonElement.click();
     // ASSERT
-    await expect(component).toBeEnabled();
+    await expect(buttonElement).toBeEnabled();
+    expect(clickSpy).toHaveLength(2);
   });
 });
 

From 69da60f31ba9cfddcdc669308f508273e1dd83bf Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 16 Sep 2024 09:33:32 +0200
Subject: [PATCH 20/21] docs(changeset): feat: Remove/Rename emits that collide
 with native event names

---
 .changeset/hip-kids-decide.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hip-kids-decide.md

diff --git a/.changeset/hip-kids-decide.md b/.changeset/hip-kids-decide.md
new file mode 100644
index 000000000..6306e70bf
--- /dev/null
+++ b/.changeset/hip-kids-decide.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": major
+---
+
+feat: Remove/Rename emits that collide with native event names

From 4542e4b71bbe4cb7122d8c470f64a3dbe042ba99 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan_leo.carle@mail.schwarz>
Date: Tue, 17 Sep 2024 08:23:57 +0200
Subject: [PATCH 21/21] Update .changeset/hip-kids-decide.md

Co-authored-by: Lars Rickert <lars.rickert@mail.schwarz>
---
 .changeset/hip-kids-decide.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/.changeset/hip-kids-decide.md b/.changeset/hip-kids-decide.md
index 6306e70bf..8b0d5c5ae 100644
--- a/.changeset/hip-kids-decide.md
+++ b/.changeset/hip-kids-decide.md
@@ -3,3 +3,12 @@
 ---
 
 feat: Remove/Rename emits that collide with native event names
+
+- OnyxInput, OnyxTextarea and OnyxStepper: Remove `focus` and `blur` event - Use `focusin`/`focusout` or `@focus.capture`/`@focus.blur` instead
+- OnyxInput and OnyxTextarea: Remove Vue `change` emit - You will now receive the native `@change` event, but the value must now retrieved with with `$event.target.value` or use `@update:modelvalue`
+- OnyxNavBar: Rename `appAreaClick` to `navigateToStart` and `backButtonClick` to `navigateBack`
+- OnyxNavButton: Rename `click` to `navigate`, also the native MouseEvent is now passed as second parameter
+- OnyxNavItem: Rename `click` to `navigate`
+- OnyxRadioButton: Remove Vue `change` emit - You will now receive the native `@change` event, but the value must now retrieved with with `$event.target.value` or use `@update:modelvalue`
+- OnyxSelectInput: Rename `click` to `inputClick`
+- OnyxToastMessage: Remove Vue `click` emit - You will now always receive the native `@click` event, even when `clickable` prop is false/not set.