From 4cf884a0d12355a30480c49ce00236bd200e366b Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 14 Apr 2025 11:49:47 +0300
Subject: [PATCH 1/3] feat(ui5-button): make click button preventable

---
 packages/fiori/src/ShellBar.ts                | 11 ++++---
 packages/fiori/src/ShellBarItem.ts            |  9 ++---
 packages/fiori/src/UploadCollectionItem.ts    |  3 +-
 packages/fiori/src/Wizard.ts                  |  4 ++-
 .../main/cypress/specs/FormSupport.cy.tsx     | 33 +++++++++++++++++++
 packages/main/src/AvatarGroup.ts              |  7 ++--
 packages/main/src/AvatarGroupTemplate.tsx     |  1 +
 packages/main/src/Button.ts                   | 26 ++++++++++++++-
 packages/main/src/Carousel.ts                 |  3 +-
 packages/main/src/ExpandableText.ts           |  4 ++-
 packages/main/src/MultiComboBox.ts            |  3 +-
 packages/main/src/Panel.ts                    |  6 ++--
 packages/main/src/SplitButton.ts              |  6 ++--
 .../main/src/TableHeaderCellActionBase.ts     |  4 ++-
 packages/main/src/TableRow.ts                 | 12 ++++---
 packages/main/src/TableRowActionBase.ts       |  5 ++-
 packages/main/src/Tokenizer.ts                |  4 ++-
 .../cem/custom-elements-manifest.config.mjs   | 17 ----------
 18 files changed, 110 insertions(+), 48 deletions(-)

diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index b5eb271f9e80..e84cd2f5638b 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -35,6 +35,7 @@ import type {
 	ClassMap,
 	AccessibilityAttributes,
 	AriaRole,
+	UI5CustomEvent,
 } from "@ui5/webcomponents-base";
 import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import type PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
@@ -127,7 +128,7 @@ interface IShelBarItemInfo extends IShellBarHidableItem {
 	title?: string,
 	stableDomRef?: string,
 	refItemid?: string,
-	press: (e: MouseEvent) => void,
+	press: (e: UI5CustomEvent<Button, "click">) => void,
 	order?: number,
 	profile?: boolean,
 	tooltip?: string,
@@ -897,7 +898,7 @@ class ShellBar extends UI5Element {
 		this._defaultItemPressPrevented = false;
 	}
 
-	_handleCustomActionPress(e: MouseEvent) {
+	_handleCustomActionPress(e: UI5CustomEvent<Button, "click">) {
 		const target = e.target as HTMLElement;
 		const refItemId = target.getAttribute("data-ui5-external-action-item-id");
 
@@ -916,7 +917,7 @@ class ShellBar extends UI5Element {
 		this._toggleActionPopover();
 	}
 
-	_handleNotificationsPress(e: MouseEvent) {
+	_handleNotificationsPress(e: UI5CustomEvent<Button, "click">) {
 		const notificationIconRef = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-bell-button")!,
 			target = e.target as HTMLElement;
 
@@ -935,7 +936,7 @@ class ShellBar extends UI5Element {
 		this.showSearchField = false;
 	}
 
-	_handleProductSwitchPress(e: MouseEvent) {
+	_handleProductSwitchPress(e: UI5CustomEvent<Button, "click">) {
 		const buttonRef = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-button-product-switch")!,
 			target = e.target as HTMLElement;
 
@@ -1426,7 +1427,7 @@ class ShellBar extends UI5Element {
 		return this.contentItems.length > 0;
 	}
 
-	get hidableDomElements(): HTMLElement [] {
+	get hidableDomElements(): HTMLElement[] {
 		const items = Array.from(this.shadowRoot!.querySelectorAll<HTMLElement>(".ui5-shellbar-button:not(.ui5-shellbar-search-button):not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-cancel-button):not(.ui5-shellbar-no-overflow-button)"));
 		const assistant = this.shadowRoot!.querySelector<HTMLElement>(".ui5-shellbar-assistant-button");
 		const searchButton = this.shadowRoot!.querySelector<HTMLElement>(".ui5-shellbar-search-button");
diff --git a/packages/fiori/src/ShellBarItem.ts b/packages/fiori/src/ShellBarItem.ts
index a27091929427..991df20370a1 100644
--- a/packages/fiori/src/ShellBarItem.ts
+++ b/packages/fiori/src/ShellBarItem.ts
@@ -2,7 +2,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import type { AccessibilityAttributes } from "@ui5/webcomponents-base";
+import type { AccessibilityAttributes, UI5CustomEvent } from "@ui5/webcomponents-base";
+import type Button from "@ui5/webcomponents/dist/Button.js";
 
 type ShellBarItemClickEventDetail = {
 	targetRef: HTMLElement,
@@ -52,8 +53,8 @@ class ShellBarItem extends UI5Element {
 
 	/**
 	 * Defines the item text.
-     *
-     * **Note:** The text is only displayed inside the overflow popover list view.
+	 *
+	 * **Note:** The text is only displayed inside the overflow popover list view.
 	 * @default undefined
 	 * @public
 	 */
@@ -97,7 +98,7 @@ class ShellBarItem extends UI5Element {
 		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 
-	fireClickEvent(e: MouseEvent) {
+	fireClickEvent(e: UI5CustomEvent<Button, "click">) {
 		return this.fireDecoratorEvent("click", {
 			targetRef: (e.target as HTMLElement),
 		});
diff --git a/packages/fiori/src/UploadCollectionItem.ts b/packages/fiori/src/UploadCollectionItem.ts
index c2880e6b4103..db1bb3d54de3 100644
--- a/packages/fiori/src/UploadCollectionItem.ts
+++ b/packages/fiori/src/UploadCollectionItem.ts
@@ -12,6 +12,7 @@ import type Input from "@ui5/webcomponents/dist/Input.js";
 import ListItem from "@ui5/webcomponents/dist/ListItem.js";
 import getFileExtension from "@ui5/webcomponents-base/dist/util/getFileExtension.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import {
 	isDelete,
 	isEnter,
@@ -303,7 +304,7 @@ class UploadCollectionItem extends ListItem {
 		}
 	}
 
-	async _onRenameCancel(e: KeyboardEvent | MouseEvent) {
+	async _onRenameCancel(e: KeyboardEvent | UI5CustomEvent<Button, "click">) {
 		this._editing = false;
 
 		if (isEscape(e as KeyboardEvent)) {
diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts
index bde17115f802..672b559bc717 100644
--- a/packages/fiori/src/Wizard.ts
+++ b/packages/fiori/src/Wizard.ts
@@ -11,10 +11,12 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import type Button from "@ui5/webcomponents/dist/Button.js";
 import type WizardContentLayout from "./types/WizardContentLayout.js";
 import "./WizardStep.js";
 
@@ -602,7 +604,7 @@ class Wizard extends UI5Element {
 		}
 	}
 
-	_onOverflowStepButtonClick(e: MouseEvent) {
+	_onOverflowStepButtonClick(e: UI5CustomEvent<Button, "click">) {
 		const tabs = Array.from(this.stepsInHeaderDOM);
 		const eTarget = e.target as HTMLElement;
 		const stepRefId = eTarget.getAttribute("data-ui5-header-tab-ref-id");
diff --git a/packages/main/cypress/specs/FormSupport.cy.tsx b/packages/main/cypress/specs/FormSupport.cy.tsx
index 47f68d85fe9c..eb63b91d7a93 100644
--- a/packages/main/cypress/specs/FormSupport.cy.tsx
+++ b/packages/main/cypress/specs/FormSupport.cy.tsx
@@ -875,6 +875,39 @@ describe("Form support", () => {
 			.should("be.equal", "time_picker3=ok&time_picker4=1:10:10 PM");
 	});
 
+	it("Button's click doesn't submit form on prevent default", () => {
+		cy.mount(<form method="get">
+			<Button id="b1" type="Submit">Preventable button</Button>
+		</form>);
+
+		cy.get("#b1")
+			.then($item => {
+				$item.get(0).addEventListener("ui5-click", e => e.preventDefault());
+				$item.get(0).addEventListener("ui5-click", cy.stub().as("click"));
+			});
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("#b1")
+			.realClick();
+
+		cy.get("#b1")
+			.realPress("Enter");
+
+		cy.get("#b1")
+			.realPress("Space");
+
+		cy.get("@click")
+			.should("have.been.calledThrice");
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+	});
+
 	it("Normal button does not submit forms", () => {
 		cy.mount(<form method="get">
 			<Button id="b1">Does not submit forms</Button>
diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts
index ada81165d1f4..e46f545aec70 100644
--- a/packages/main/src/AvatarGroup.ts
+++ b/packages/main/src/AvatarGroup.ts
@@ -3,6 +3,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
@@ -190,8 +191,8 @@ class AvatarGroup extends UI5Element {
 	 * @since 2.0.0
 	 * @default {}
 	 */
-	 @property({ type: Object })
-	 accessibilityAttributes: AvatarGroupAccessibilityAttributes = {};
+	@property({ type: Object })
+	accessibilityAttributes: AvatarGroupAccessibilityAttributes = {};
 
 	/**
 	 * @private
@@ -433,7 +434,7 @@ class AvatarGroup extends UI5Element {
 		e.stopPropagation();
 	}
 
-	onOverflowButtonClick(e: MouseEvent) {
+	onOverflowButtonClick(e: UI5CustomEvent<Button, "click">) {
 		e.stopPropagation();
 
 		this.fireDecoratorEvent("click", {
diff --git a/packages/main/src/AvatarGroupTemplate.tsx b/packages/main/src/AvatarGroupTemplate.tsx
index 7dcd62f22e1d..ca8bd06a1ad0 100644
--- a/packages/main/src/AvatarGroupTemplate.tsx
+++ b/packages/main/src/AvatarGroupTemplate.tsx
@@ -19,6 +19,7 @@ export default function AvatarGroupTemplate(this: AvatarGroup) {
 				<slot onClick={this.onAvatarClick} onui5-click={this.onAvatarUI5Click}></slot>
 
 				{this._customOverflowButton ?
+					// @ts-expect-error
 					<slot onClick={this.onOverflowButtonClick} name="overflowButton"></slot>
 					:
 					<Button
diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
index c3299c75f2fd..5551811e2bd5 100644
--- a/packages/main/src/Button.ts
+++ b/packages/main/src/Button.ts
@@ -50,6 +50,10 @@ let activeButton: Button | null = null;
 
 type ButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "expanded" | "hasPopup" | "controls">;
 
+type ButtonClickEventDetail = {
+	nativeEvent: MouseEvent,
+}
+
 /**
  * @class
  *
@@ -92,6 +96,18 @@ type ButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "expanded" |
 	styles: buttonCss,
 	shadowRootOptions: { delegatesFocus: true },
 })
+/**
+ * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+ *
+ * **Note:** The event will not be fired if the `disabled` property is set to `true`.
+ *
+ * @since 2.10.0
+ * @public
+ */
+@event("click", {
+	bubbles: true,
+	cancelable: true,
+})
 /**
  * Fired whenever the active state of the component changes.
  * @private
@@ -102,6 +118,7 @@ type ButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "expanded" |
 })
 class Button extends UI5Element implements IButton {
 	eventDetails!: {
+		"click": ButtonClickEventDetail,
 		"active-state-change": void,
 	};
 
@@ -380,11 +397,17 @@ class Button extends UI5Element implements IButton {
 		}
 	}
 
-	_onclick() {
+	_onclick(e: MouseEvent) {
+		e.stopImmediatePropagation();
+
 		if (this.nonInteractive) {
 			return;
 		}
 
+		if (!this.fireDecoratorEvent("click", { nativeEvent: e })) {
+			return;
+		}
+
 		if (this._isSubmit) {
 			submitForm(this);
 		}
@@ -548,5 +571,6 @@ Button.define();
 export default Button;
 export type {
 	ButtonAccessibilityAttributes,
+	ButtonClickEventDetail,
 	IButton,
 };
diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts
index 63006eed6966..99886d58bf44 100644
--- a/packages/main/src/Carousel.ts
+++ b/packages/main/src/Carousel.ts
@@ -11,6 +11,7 @@ import {
 	isUp,
 	isF7,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
@@ -496,7 +497,7 @@ class Carousel extends UI5Element {
 		}
 	}
 
-	_navButtonClick(e: MouseEvent) {
+	_navButtonClick(e: UI5CustomEvent<Button, "click">) {
 		const button = e.target as Button;
 		if (button.hasAttribute("data-ui5-arrow-forward")) {
 			this.navigateRight();
diff --git a/packages/main/src/ExpandableText.ts b/packages/main/src/ExpandableText.ts
index fb41f0dd6744..543b3cacf52e 100644
--- a/packages/main/src/ExpandableText.ts
+++ b/packages/main/src/ExpandableText.ts
@@ -5,8 +5,10 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type { LinkAccessibilityAttributes } from "./Link.js";
 import ExpandableTextOverflowMode from "./types/ExpandableTextOverflowMode.js";
+import type Button from "./Button.js";
 import type TextEmptyIndicatorMode from "./types/TextEmptyIndicatorMode.js";
 import {
 	EXPANDABLE_TEXT_SHOW_LESS,
@@ -168,7 +170,7 @@ class ExpandableText extends UI5Element {
 		this._expanded = !this._expanded;
 	}
 
-	_handleCloseButtonClick(e: MouseEvent) {
+	_handleCloseButtonClick(e: UI5CustomEvent<Button, "click">) {
 		this._expanded = false;
 		e.stopPropagation();
 	}
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index 77b2d04d3b42..c3dbb75a2e72 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -8,6 +8,7 @@ import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import {
 	isShow,
 	isDown,
@@ -638,7 +639,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		this._toggleTokenizerPopover();
 	}
 
-	filterSelectedItems(e: MouseEvent) {
+	filterSelectedItems(e: UI5CustomEvent<ToggleButton, "click">) {
 		this.filterSelected = (e.target as ToggleButton).pressed;
 		const selectedItems = this._filteredItems.filter(item => item.selected);
 
diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts
index 1f6f2a9e4e7d..f38b15535b13 100644
--- a/packages/main/src/Panel.ts
+++ b/packages/main/src/Panel.ts
@@ -11,7 +11,9 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type TitleLevel from "./types/TitleLevel.js";
+import type Button from "./Button.js";
 import type PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 import PanelTemplate from "./PanelTemplate.js";
 import { PANEL_ICON } from "./generated/i18n/i18n-defaults.js";
@@ -234,8 +236,8 @@ class Panel extends UI5Element {
 		this._toggleOpen();
 	}
 
-	_toggleButtonClick(e: MouseEvent) {
-		if (e.x === 0 && e.y === 0) {
+	_toggleButtonClick(e: UI5CustomEvent<Button, "click">) {
+		if (e.detail.nativeEvent.x === 0 && e.detail.nativeEvent.y === 0) {
 			e.stopImmediatePropagation();
 		}
 	}
diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts
index 713d4a823b2f..881b4e081579 100644
--- a/packages/main/src/SplitButton.ts
+++ b/packages/main/src/SplitButton.ts
@@ -16,7 +16,7 @@ import {
 	isTabNext,
 	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import type { AriaHasPopup } from "@ui5/webcomponents-base";
+import type { AriaHasPopup, UI5CustomEvent } from "@ui5/webcomponents-base";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -239,7 +239,7 @@ class SplitButton extends UI5Element {
 		}
 	}
 
-	_handleMouseClick(e: MouseEvent) {
+	_handleMouseClick(e: UI5CustomEvent<Button, "click">) {
 		this._fireClick(e);
 	}
 
@@ -397,7 +397,7 @@ class SplitButton extends UI5Element {
 	 * @param e - keyboard event
 	 * @private
 	 */
-	_handleArrowButtonAction(e: KeyboardEvent | MouseEvent) {
+	_handleArrowButtonAction(e: UI5CustomEvent<Button, "click"> | KeyboardEvent) {
 		e.preventDefault();
 
 		this._fireArrowClick(e);
diff --git a/packages/main/src/TableHeaderCellActionBase.ts b/packages/main/src/TableHeaderCellActionBase.ts
index f8e19b247ae8..41b6b428c3b3 100644
--- a/packages/main/src/TableHeaderCellActionBase.ts
+++ b/packages/main/src/TableHeaderCellActionBase.ts
@@ -1,9 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { customElement, eventStrict } from "@ui5/webcomponents-base/dist/decorators.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import TableHeaderCellActionBaseTemplate from "./TableHeaderCellActionBaseTemplate.js";
 import TableHeaderCellActionBaseStyles from "./generated/themes/TableHeaderCellActionBase.css.js";
 import type TableCell from "./TableCell.js";
+import type Button from "./Button.js";
 
 /**
  * Fired when a header cell action is clicked.
@@ -55,7 +57,7 @@ abstract class TableHeaderCellActionBase extends UI5Element {
 		this.toggleAttribute("_popin", !this.parentElement);
 	}
 
-	_onClick(e: MouseEvent) {
+	_onClick(e: UI5CustomEvent<Button, "click">) {
 		// Retrieve the real action (if parent is header cell this instance is fine, otherwise retrieve it from the header cell)
 		const action = this.parentElement?.hasAttribute("ui5-table-header-cell") ? this : ((this.getRootNode() as ShadowRoot).host as TableCell)._headerCell.action[0] as this;
 		action.fireDecoratorEvent("click", { targetRef: e.target as HTMLElement });
diff --git a/packages/main/src/TableRow.ts b/packages/main/src/TableRow.ts
index 5115f470291d..000c1906f8bd 100644
--- a/packages/main/src/TableRow.ts
+++ b/packages/main/src/TableRow.ts
@@ -1,12 +1,14 @@
 import { customElement, slot, property } from "@ui5/webcomponents-base/dist/decorators.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { toggleAttribute } from "./TableUtils.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import { toggleAttribute } from "./TableUtils.js";
 import TableRowTemplate from "./TableRowTemplate.js";
 import TableRowBase from "./TableRowBase.js";
 import TableRowCss from "./generated/themes/TableRow.css.js";
 import type TableCell from "./TableCell.js";
 import type TableRowActionBase from "./TableRowActionBase.js";
+import type Button from "./Button.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 
 /**
@@ -78,10 +80,10 @@ class TableRow extends TableRowBase {
 	/**
 	 * Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.
 	 *
-     * @default undefined
+	 * @default undefined
 	 * @since 2.5.0
-     * @public
-     */
+	 * @public
+	 */
 	@property({ type: Number })
 	position?: number;
 
@@ -153,7 +155,7 @@ class TableRow extends TableRowBase {
 		this.removeAttribute("_active");
 	}
 
-	_onOverflowButtonClick(e: MouseEvent) {
+	_onOverflowButtonClick(e: UI5CustomEvent<Button, "click">) {
 		const ctor = this.actions[0].constructor as typeof TableRowActionBase;
 		ctor.showMenu(this._overflowActions, e.target as HTMLElement);
 	}
diff --git a/packages/main/src/TableRowActionBase.ts b/packages/main/src/TableRowActionBase.ts
index c780c6fe17c2..1ea02986094a 100644
--- a/packages/main/src/TableRowActionBase.ts
+++ b/packages/main/src/TableRowActionBase.ts
@@ -1,6 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { customElement, property, eventStrict } from "@ui5/webcomponents-base/dist/decorators.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+
 import TableRowActionBaseTemplate from "./TableRowActionBaseTemplate.js";
 import TableRowActionBaseStyles from "./generated/themes/TableRowActionBase.css.js";
 import type Menu from "./Menu.js";
@@ -8,6 +10,7 @@ import type MenuItem from "./MenuItem.js";
 import type Table from "./Table.js";
 import type TableRow from "./TableRow.js";
 import type TableRowAction from "./TableRowAction.js";
+import type Button from "./Button.js";
 
 let MenuConstructor: new () => Menu;
 let MenuItemConstructor: new () => MenuItem;
@@ -108,7 +111,7 @@ abstract class TableRowActionBase extends UI5Element {
 		table._onRowActionClick(this);
 	}
 
-	_onActionClick(e: MouseEvent) {
+	_onActionClick(e: UI5CustomEvent<Button, "click">) {
 		this._fireClickEvent();
 		e.stopPropagation();
 	}
diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
index fc5d0137e730..cfe69cd2d8e1 100644
--- a/packages/main/src/Tokenizer.ts
+++ b/packages/main/src/Tokenizer.ts
@@ -17,6 +17,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import {
 	isSpace,
 	isSpaceCtrl,
@@ -56,6 +57,7 @@ import type Token from "./Token.js";
 import type { IToken } from "./MultiInput.js";
 import type { TokenDeleteEventDetail } from "./Token.js";
 import TokenizerTemplate from "./TokenizerTemplate.js";
+import type Button from "./Button.js";
 import {
 	MULTIINPUT_SHOW_MORE_TOKENS,
 	TOKENIZER_ARIA_LABEL,
@@ -612,7 +614,7 @@ class Tokenizer extends UI5Element {
 		this._focusedElementBeforeOpen = null;
 	}
 
-	handleDialogButtonPress(e: MouseEvent) {
+	handleDialogButtonPress(e: UI5CustomEvent<Button, "click">) {
 		const isOkButton = (e.target as HTMLElement).hasAttribute("data-ui5-tokenizer-dialog-ok-button");
 		const confirm = !!isOkButton;
 
diff --git a/packages/tools/lib/cem/custom-elements-manifest.config.mjs b/packages/tools/lib/cem/custom-elements-manifest.config.mjs
index bd70a7a547d6..a97d7bf1a2bb 100644
--- a/packages/tools/lib/cem/custom-elements-manifest.config.mjs
+++ b/packages/tools/lib/cem/custom-elements-manifest.config.mjs
@@ -131,23 +131,6 @@ function processClass(ts, classNode, moduleDoc) {
 	currClass.events = findAllDecorators(classNode, ["event", "eventStrict"])
 		?.map(event => processEvent(ts, event, classNode, moduleDoc));
 
-	// TODO: remove after changing Button's click to custom event.
-	// Currently, the Button emits a native click that doesn't need and doesn't have an event decorator,
-	// so we add it manually to the events array.
-	if (currClass.tagName === "ui5-button") {
-		currClass.events.push({
-			"name": "click",
-			"_ui5privacy": "public",
-			"type": {
-				"text": "Event"
-			},
-			"description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.",
-			"_ui5Cancelable": false,
-			"_ui5allowPreventDefault": false,
-			"_ui5Bubbles": true
-		});
-	}
-
 	const filename = classNode.getSourceFile().fileName;
 	const sourceFile = typeProgram.getSourceFile(filename);
 	const tsProgramClassNode = sourceFile.statements.find(statement => ts.isClassDeclaration(statement) && statement.name?.text === classNode.name?.text);

From e88fae986a71038eedd4ebbe8f9aa4a0eda1b446 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 14 Apr 2025 12:42:12 +0300
Subject: [PATCH 2/3] chore: fix card

---
 packages/main/cypress/specs/Card.cy.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/main/cypress/specs/Card.cy.tsx b/packages/main/cypress/specs/Card.cy.tsx
index 4522e0f550cb..59dd89f70add 100644
--- a/packages/main/cypress/specs/Card.cy.tsx
+++ b/packages/main/cypress/specs/Card.cy.tsx
@@ -110,6 +110,14 @@ describe("Card general interaction", () => {
 			</Card>
 		);
 
+		cy.get("#actionBtn").then($header => {
+			// Buttons have the same button which bubbles
+			$header.get(0).addEventListener("ui5-click", (e) => {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+			});
+		});
+
 		cy.get("#cardHeader").then($header => {
 			$header.get(0).addEventListener("ui5-click", cy.stub().as("headerClick"));
 		});

From aaf97d76438844d38cc713b2951ed7d8c532d8ab Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Tue, 15 Apr 2025 13:00:07 +0300
Subject: [PATCH 3/3] chore: rename parameter and add modifiers

---
 packages/main/src/Button.ts | 28 ++++++++++++++++++++++++++--
 packages/main/src/Panel.ts  |  2 +-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
index 5551811e2bd5..78c2e672f445 100644
--- a/packages/main/src/Button.ts
+++ b/packages/main/src/Button.ts
@@ -51,7 +51,11 @@ let activeButton: Button | null = null;
 type ButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "expanded" | "hasPopup" | "controls">;
 
 type ButtonClickEventDetail = {
-	nativeEvent: MouseEvent,
+	originalEvent: MouseEvent,
+	altKey: boolean;
+	ctrlKey: boolean;
+	metaKey: boolean;
+	shiftKey: boolean;
 }
 
 /**
@@ -103,6 +107,11 @@ type ButtonClickEventDetail = {
  *
  * @since 2.10.0
  * @public
+ * @param {Event} originalEvent Returns original event that comes from user's **click** interaction
+ * @param {boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+ * @param {boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+ * @param {boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+ * @param {boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
  */
 @event("click", {
 	bubbles: true,
@@ -404,7 +413,22 @@ class Button extends UI5Element implements IButton {
 			return;
 		}
 
-		if (!this.fireDecoratorEvent("click", { nativeEvent: e })) {
+		const {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		} = e;
+
+		const prevented = !this.fireDecoratorEvent("click", {
+			originalEvent: e,
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		});
+
+		if (prevented) {
 			return;
 		}
 
diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts
index f38b15535b13..c5dae53b7e82 100644
--- a/packages/main/src/Panel.ts
+++ b/packages/main/src/Panel.ts
@@ -237,7 +237,7 @@ class Panel extends UI5Element {
 	}
 
 	_toggleButtonClick(e: UI5CustomEvent<Button, "click">) {
-		if (e.detail.nativeEvent.x === 0 && e.detail.nativeEvent.y === 0) {
+		if (e.detail.originalEvent.x === 0 && e.detail.originalEvent.y === 0) {
 			e.stopImmediatePropagation();
 		}
 	}