From d943b940c800c2d25d8b210a7ae0d5341eda1d84 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Tue, 4 Feb 2025 10:12:36 +0200
Subject: [PATCH 1/8] feat(ui5-link): introduce reactive area size property

---
 packages/main/src/Link.ts                   | 19 ++++++++++++++++++
 packages/main/src/themes/Link.css           |  9 +++++++++
 packages/main/src/types/ReactiveAreaMode.ts | 22 +++++++++++++++++++++
 packages/main/test/pages/Link.html          |  8 ++++----
 4 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 packages/main/src/types/ReactiveAreaMode.ts

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index bbc25c9079f5..731b88e65354 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -14,8 +14,10 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseEnumValue.js";
 import { getLocationHostname, getLocationPort, getLocationProtocol } from "@ui5/webcomponents-base/dist/Location.js";
 import LinkDesign from "./types/LinkDesign.js";
+import type ReactiveAreaMode from "./types/ReactiveAreaMode.js";
 import type WrappingType from "./types/WrappingType.js";
 import type LinkAccessibleRole from "./types/LinkAccessibleRole.js";
+
 // Template
 import LinkTemplate from "./LinkTemplate.js";
 
@@ -154,6 +156,23 @@ class Link extends UI5Element implements ITabbable {
 	@property()
 	design: `${LinkDesign}` = "Default";
 
+	/**
+	 * Defines the size of the reactive area of the link:
+	 * - **ReactiveAreaMode.Inline**: The link is displayed as part of a sentence.
+	 * - **ReactiveAreaMode.Overlay**: The link is displayed as an overlay on top of other interactive parts of the page.
+	 *
+	 * **Note:**It is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.
+	 * **Note:**The Reactive area size is sufficiently large to help users avoid accidentally selecting (clicking or tapping) on unintented UI elements.
+	 * UI elements positioned over other parts of the page may need an invisible active touch area.
+	 * This will ensure that no elements beneath are activated accidentally when the user tries to interact with the overlay element.
+	 *
+	 * @public
+	 * @since 2.6.0
+	 * @default "Inline"
+	 */
+	@property()
+	reactiveAreaMode: `${ReactiveAreaMode}` = "Inline";
+
 	/**
 	 * Defines how the text of a component will be displayed when there is not enough space.
 	 *
diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css
index b8cf6c8bdc0e..731d0478594e 100644
--- a/packages/main/src/themes/Link.css
+++ b/packages/main/src/themes/Link.css
@@ -124,4 +124,13 @@
 :host([design="Subtle"][desktop]:hover:not(:active):focus-within) {
 	color: var(--_ui5_link_focused_hover_text_color);
 	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
+}
+
+:host([reactive-area-mode="Overlay"]) .ui5-link-root {
+	line-height: 1.5rem;
+}
+
+:host([reactive-area-mode="Overlay"])::part(icon), 
+:host([reactive-area-mode="Overlay"])::part(endIcon) {
+	height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/types/ReactiveAreaMode.ts b/packages/main/src/types/ReactiveAreaMode.ts
new file mode 100644
index 000000000000..62accb314573
--- /dev/null
+++ b/packages/main/src/types/ReactiveAreaMode.ts
@@ -0,0 +1,22 @@
+/**
+ * Reactive area modes of interactable elements.
+ *
+ * @public
+ * @since 2.6.0
+ */
+enum ReactiveAreaMode {
+
+	/**
+	 * The target element is displayed as part of a sentence.
+	 * @public
+	 */
+	Inline = "Inline",
+
+	/**
+	 * The target element is displayed as on overlay on top of other interactive parts of the page.
+	 * @public
+	 */
+	Overlay = "Overlay",
+}
+
+export default ReactiveAreaMode;
diff --git a/packages/main/test/pages/Link.html b/packages/main/test/pages/Link.html
index 2f4444204131..1d19f7fdf879 100644
--- a/packages/main/test/pages/Link.html
+++ b/packages/main/test/pages/Link.html
@@ -65,10 +65,10 @@ <h2>Wrapping link</h2>
 
 	<section class="group">
 		<h2>Links with icon and end-icon</h2>
-		<ui5-link id="wrapping-link" wrapping-type="Normal" icon="employee">View employee profile</ui5-link> <br>
-		<ui5-link id="linkWithIcon" design="Subtle" icon="employee">View employee profile</ui5-link> <br> <br>
-		<ui5-link id="non-wrapping-link" end-icon="cloud">Weather today</ui5-link> <br>
-		<ui5-link class="link2auto" id="linkWithEndIcon" end-icon="cloud" wrapping-type="None">Weather today</ui5-link>
+		<ui5-link id="wrapping-link" wrapping-type="Normal" icon="employee" reactive-area-mode="Overlay">View employee profile</ui5-link> <br>
+		<ui5-link id="linkWithIcon" design="Subtle" icon="employee" reactive-area-mode="Overlay">View employee profile</ui5-link> <br> <br>
+		<ui5-link id="non-wrapping-link" end-icon="cloud" reactive-area-mode="Overlay">Weather today</ui5-link> <br>
+		<ui5-link class="link2auto" id="linkWithEndIcon" end-icon="cloud" wrapping-type="None" reactive-area-mode="Overlay">Weather today</ui5-link>
 
 		<h2>Wrapping link with end-icon</h2>
 		<ui5-link class="link2auto" end-icon="cloud" id="wrapping-link">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit adipisicing.</ui5-link>

From b046d91cd979d98b3da8ebcd79638ecdb62049a3 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Tue, 4 Feb 2025 10:15:52 +0200
Subject: [PATCH 2/8] fix: undo empty row addition

---
 packages/main/src/Link.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index 731b88e65354..2399636bdc58 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -14,10 +14,9 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseEnumValue.js";
 import { getLocationHostname, getLocationPort, getLocationProtocol } from "@ui5/webcomponents-base/dist/Location.js";
 import LinkDesign from "./types/LinkDesign.js";
-import type ReactiveAreaMode from "./types/ReactiveAreaMode.js";
 import type WrappingType from "./types/WrappingType.js";
 import type LinkAccessibleRole from "./types/LinkAccessibleRole.js";
-
+import type ReactiveAreaMode from "./types/ReactiveAreaMode.js";
 // Template
 import LinkTemplate from "./LinkTemplate.js";
 

From 315753cb99b47ee2d0f37f98ee562183d1f44805 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Tue, 4 Feb 2025 10:27:34 +0200
Subject: [PATCH 3/8] fix: apply the new styles only for the horizon theme

---
 packages/main/src/Link.ts                                     | 2 +-
 packages/main/src/themes/Link.css                             | 4 ++--
 packages/main/src/themes/base/Link-parameters.css             | 2 +-
 packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css  | 1 +
 packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css  | 1 +
 packages/main/src/themes/sap_horizon/Link-parameters.css      | 1 +
 packages/main/src/themes/sap_horizon_dark/Link-parameters.css | 1 +
 7 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index 2399636bdc58..421855970db6 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -166,7 +166,7 @@ class Link extends UI5Element implements ITabbable {
 	 * This will ensure that no elements beneath are activated accidentally when the user tries to interact with the overlay element.
 	 *
 	 * @public
-	 * @since 2.6.0
+	 * @since 2.7.0
 	 * @default "Inline"
 	 */
 	@property()
diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css
index 731d0478594e..56b06509e27e 100644
--- a/packages/main/src/themes/Link.css
+++ b/packages/main/src/themes/Link.css
@@ -127,10 +127,10 @@
 }
 
 :host([reactive-area-mode="Overlay"]) .ui5-link-root {
-	line-height: 1.5rem;
+	line-height: var(--_ui5_link_large_reactive_area_height);
 }
 
 :host([reactive-area-mode="Overlay"])::part(icon), 
 :host([reactive-area-mode="Overlay"])::part(endIcon) {
-	height: 1.5rem;
+	height: var(--_ui5_link_large_reactive_area_height);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Link-parameters.css b/packages/main/src/themes/base/Link-parameters.css
index 46fdaf4d3fbe..97466e03ed9e 100644
--- a/packages/main/src/themes/base/Link-parameters.css
+++ b/packages/main/src/themes/base/Link-parameters.css
@@ -11,5 +11,5 @@
 	--_ui5_link_focus_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration: none;
 	--_ui5_link_subtle_text_decoration_hover: underline;
-
+	--_ui5_link_large_reactive_area_height: unset;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css
index f25cb9076a97..2a2693be17bd 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css
@@ -9,4 +9,5 @@
 	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
+	--_ui5_link_large_reactive_area_height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css
index f25cb9076a97..2a2693be17bd 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css
@@ -9,4 +9,5 @@
 	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
+	--_ui5_link_large_reactive_area_height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/Link-parameters.css b/packages/main/src/themes/sap_horizon/Link-parameters.css
index 29e6a4ea2b76..d2ef1d63934e 100644
--- a/packages/main/src/themes/sap_horizon/Link-parameters.css
+++ b/packages/main/src/themes/sap_horizon/Link-parameters.css
@@ -12,4 +12,5 @@
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
+	--_ui5_link_large_reactive_area_height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_dark/Link-parameters.css b/packages/main/src/themes/sap_horizon_dark/Link-parameters.css
index 29e6a4ea2b76..d2ef1d63934e 100644
--- a/packages/main/src/themes/sap_horizon_dark/Link-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/Link-parameters.css
@@ -12,4 +12,5 @@
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
+	--_ui5_link_large_reactive_area_height: 1.5rem;
 }
\ No newline at end of file

From 1d689be340346cadd0fb33ae4543f5d56f05a157 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Thu, 6 Feb 2025 12:34:27 +0200
Subject: [PATCH 4/8] fix: rename the property to interactiveAreaSize

---
 packages/main/src/Link.ts                     | 14 ++++++------
 packages/main/src/themes/Link.css             | 10 ++++-----
 .../main/src/themes/base/Link-parameters.css  |  2 +-
 .../sap_fiori_3_hcb/Link-parameters.css       |  1 -
 .../sap_fiori_3_hcw/Link-parameters.css       |  1 -
 .../themes/sap_horizon/Link-parameters.css    |  2 +-
 .../sap_horizon_dark/Link-parameters.css      |  2 +-
 .../sap_horizon_hcb/Link-parameters.css       |  1 +
 .../sap_horizon_hcw/Link-parameters.css       |  1 +
 .../main/src/types/InteractiveAreaSize.ts     | 22 +++++++++++++++++++
 packages/main/src/types/ReactiveAreaMode.ts   | 22 -------------------
 packages/main/test/pages/Link.html            |  8 +++----
 12 files changed, 43 insertions(+), 43 deletions(-)
 create mode 100644 packages/main/src/types/InteractiveAreaSize.ts
 delete mode 100644 packages/main/src/types/ReactiveAreaMode.ts

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index 421855970db6..b2d3d75ef1a6 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -16,7 +16,7 @@ import { getLocationHostname, getLocationPort, getLocationProtocol } from "@ui5/
 import LinkDesign from "./types/LinkDesign.js";
 import type WrappingType from "./types/WrappingType.js";
 import type LinkAccessibleRole from "./types/LinkAccessibleRole.js";
-import type ReactiveAreaMode from "./types/ReactiveAreaMode.js";
+import type InteractiveAreaSize from "./types/InteractiveAreaSize.js";
 // Template
 import LinkTemplate from "./LinkTemplate.js";
 
@@ -156,21 +156,21 @@ class Link extends UI5Element implements ITabbable {
 	design: `${LinkDesign}` = "Default";
 
 	/**
-	 * Defines the size of the reactive area of the link:
-	 * - **ReactiveAreaMode.Inline**: The link is displayed as part of a sentence.
-	 * - **ReactiveAreaMode.Overlay**: The link is displayed as an overlay on top of other interactive parts of the page.
+	 * Defines the target area size the link:
+	 * - **InteractiveAreaSize.Normal**: The target area size corresponds to it's default size.
+	 * - **InteractiveAreaSize.Large**: The target area size is enlared up to 24px in height.
 	 *
 	 * **Note:**It is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.
-	 * **Note:**The Reactive area size is sufficiently large to help users avoid accidentally selecting (clicking or tapping) on unintented UI elements.
+	 * **Note:**The interactive area is sufficiently large to help users avoid accidentally selecting (clicking or tapping) on unintented UI elements.
 	 * UI elements positioned over other parts of the page may need an invisible active touch area.
 	 * This will ensure that no elements beneath are activated accidentally when the user tries to interact with the overlay element.
 	 *
 	 * @public
 	 * @since 2.7.0
-	 * @default "Inline"
+	 * @default "Normal"
 	 */
 	@property()
-	reactiveAreaMode: `${ReactiveAreaMode}` = "Inline";
+	interactiveAreaSize: `${InteractiveAreaSize}` = "Normal";
 
 	/**
 	 * Defines how the text of a component will be displayed when there is not enough space.
diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css
index 56b06509e27e..88d05fde9f8e 100644
--- a/packages/main/src/themes/Link.css
+++ b/packages/main/src/themes/Link.css
@@ -126,11 +126,11 @@
 	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
 }
 
-:host([reactive-area-mode="Overlay"]) .ui5-link-root {
-	line-height: var(--_ui5_link_large_reactive_area_height);
+:host([interactive-area-size="Large"]) .ui5-link-root {
+	line-height: var(--_ui5_link_large_interactive_area_height);
 }
 
-:host([reactive-area-mode="Overlay"])::part(icon), 
-:host([reactive-area-mode="Overlay"])::part(endIcon) {
-	height: var(--_ui5_link_large_reactive_area_height);
+:host([interactive-area-size="Large"])::part(icon), 
+:host([interactive-area-size="Large"])::part(endIcon) {
+	height: var(--_ui5_link_large_interactive_area_height);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Link-parameters.css b/packages/main/src/themes/base/Link-parameters.css
index 97466e03ed9e..dfb8fcb613ad 100644
--- a/packages/main/src/themes/base/Link-parameters.css
+++ b/packages/main/src/themes/base/Link-parameters.css
@@ -11,5 +11,5 @@
 	--_ui5_link_focus_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration: none;
 	--_ui5_link_subtle_text_decoration_hover: underline;
-	--_ui5_link_large_reactive_area_height: unset;
+	--_ui5_link_large_interactive_area_height: unset;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css
index 2a2693be17bd..f25cb9076a97 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css
@@ -9,5 +9,4 @@
 	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_large_reactive_area_height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css
index 2a2693be17bd..f25cb9076a97 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css
@@ -9,5 +9,4 @@
 	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_large_reactive_area_height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/Link-parameters.css b/packages/main/src/themes/sap_horizon/Link-parameters.css
index d2ef1d63934e..6d5a428e6a1b 100644
--- a/packages/main/src/themes/sap_horizon/Link-parameters.css
+++ b/packages/main/src/themes/sap_horizon/Link-parameters.css
@@ -12,5 +12,5 @@
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_large_reactive_area_height: 1.5rem;
+	--_ui5_link_large_interactive_area_height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_dark/Link-parameters.css b/packages/main/src/themes/sap_horizon_dark/Link-parameters.css
index d2ef1d63934e..6d5a428e6a1b 100644
--- a/packages/main/src/themes/sap_horizon_dark/Link-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/Link-parameters.css
@@ -12,5 +12,5 @@
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_large_reactive_area_height: 1.5rem;
+	--_ui5_link_large_interactive_area_height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css
index beee8369cb7a..7c8dafe608d2 100644
--- a/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css
@@ -8,4 +8,5 @@
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
 	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_large_interactive_area_height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css
index beee8369cb7a..7c8dafe608d2 100644
--- a/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css
@@ -8,4 +8,5 @@
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
 	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_large_interactive_area_height: 1.5rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/types/InteractiveAreaSize.ts b/packages/main/src/types/InteractiveAreaSize.ts
new file mode 100644
index 000000000000..5532fcd06e01
--- /dev/null
+++ b/packages/main/src/types/InteractiveAreaSize.ts
@@ -0,0 +1,22 @@
+/**
+ * Interactive area size.
+ *
+ * @public
+ * @since 2.7.0
+ */
+enum InteractiveAreaSize {
+
+	/**
+	 * The target area size corresponds to it's default size.
+	 * @public
+	 */
+	Normal = "Normal",
+
+	/**
+	 * The target area size is enlared up to 24px in height.
+	 * @public
+	 */
+	Large = "Large",
+}
+
+export default InteractiveAreaSize;
diff --git a/packages/main/src/types/ReactiveAreaMode.ts b/packages/main/src/types/ReactiveAreaMode.ts
deleted file mode 100644
index 62accb314573..000000000000
--- a/packages/main/src/types/ReactiveAreaMode.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Reactive area modes of interactable elements.
- *
- * @public
- * @since 2.6.0
- */
-enum ReactiveAreaMode {
-
-	/**
-	 * The target element is displayed as part of a sentence.
-	 * @public
-	 */
-	Inline = "Inline",
-
-	/**
-	 * The target element is displayed as on overlay on top of other interactive parts of the page.
-	 * @public
-	 */
-	Overlay = "Overlay",
-}
-
-export default ReactiveAreaMode;
diff --git a/packages/main/test/pages/Link.html b/packages/main/test/pages/Link.html
index 1d19f7fdf879..b2bf638dd7af 100644
--- a/packages/main/test/pages/Link.html
+++ b/packages/main/test/pages/Link.html
@@ -65,10 +65,10 @@ <h2>Wrapping link</h2>
 
 	<section class="group">
 		<h2>Links with icon and end-icon</h2>
-		<ui5-link id="wrapping-link" wrapping-type="Normal" icon="employee" reactive-area-mode="Overlay">View employee profile</ui5-link> <br>
-		<ui5-link id="linkWithIcon" design="Subtle" icon="employee" reactive-area-mode="Overlay">View employee profile</ui5-link> <br> <br>
-		<ui5-link id="non-wrapping-link" end-icon="cloud" reactive-area-mode="Overlay">Weather today</ui5-link> <br>
-		<ui5-link class="link2auto" id="linkWithEndIcon" end-icon="cloud" wrapping-type="None" reactive-area-mode="Overlay">Weather today</ui5-link>
+		<ui5-link id="wrapping-link" wrapping-type="Normal" icon="employee" interactive-area-size="Large">View employee profile</ui5-link> <br>
+		<ui5-link id="linkWithIcon" design="Subtle" icon="employee" interactive-area-size="Large">View employee profile</ui5-link> <br> <br>
+		<ui5-link id="non-wrapping-link" end-icon="cloud" interactive-area-size="Large">Weather today</ui5-link> <br>
+		<ui5-link class="link2auto" id="linkWithEndIcon" end-icon="cloud" wrapping-type="None" interactive-area-size="Large">Weather today</ui5-link>
 
 		<h2>Wrapping link with end-icon</h2>
 		<ui5-link class="link2auto" end-icon="cloud" id="wrapping-link">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit adipisicing.</ui5-link>

From 970272ae7a25b7f54312ae155f818f6874955d74 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Thu, 6 Feb 2025 12:36:24 +0200
Subject: [PATCH 5/8] fix: adjust documentation

---
 packages/main/src/Link.ts                      | 2 +-
 packages/main/src/types/InteractiveAreaSize.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index b2d3d75ef1a6..163be546909b 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -157,7 +157,7 @@ class Link extends UI5Element implements ITabbable {
 
 	/**
 	 * Defines the target area size the link:
-	 * - **InteractiveAreaSize.Normal**: The target area size corresponds to it's default size.
+	 * - **InteractiveAreaSize.Normal**: The default target area size.
 	 * - **InteractiveAreaSize.Large**: The target area size is enlared up to 24px in height.
 	 *
 	 * **Note:**It is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.
diff --git a/packages/main/src/types/InteractiveAreaSize.ts b/packages/main/src/types/InteractiveAreaSize.ts
index 5532fcd06e01..dc889e9cd728 100644
--- a/packages/main/src/types/InteractiveAreaSize.ts
+++ b/packages/main/src/types/InteractiveAreaSize.ts
@@ -7,7 +7,7 @@
 enum InteractiveAreaSize {
 
 	/**
-	 * The target area size corresponds to it's default size.
+	 * The default target area size.
 	 * @public
 	 */
 	Normal = "Normal",

From 70ac1988c4947c060cc953a5aa9cd87664dae61f Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Thu, 6 Feb 2025 12:45:49 +0200
Subject: [PATCH 6/8] fix: adjust documentation

---
 packages/main/src/Link.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index 163be546909b..d17975c14718 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -156,11 +156,11 @@ class Link extends UI5Element implements ITabbable {
 	design: `${LinkDesign}` = "Default";
 
 	/**
-	 * Defines the target area size the link:
+	 * Defines the target area size of the link:
 	 * - **InteractiveAreaSize.Normal**: The default target area size.
-	 * - **InteractiveAreaSize.Large**: The target area size is enlared up to 24px in height.
+	 * - **InteractiveAreaSize.Large**: The target area size is enlared to 24px in height.
 	 *
-	 * **Note:**It is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.
+	 * **Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.
 	 * **Note:**The interactive area is sufficiently large to help users avoid accidentally selecting (clicking or tapping) on unintented UI elements.
 	 * UI elements positioned over other parts of the page may need an invisible active touch area.
 	 * This will ensure that no elements beneath are activated accidentally when the user tries to interact with the overlay element.

From e5d2beb9f9ac65ae8f9df6cde9e5175d1f1b2e87 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Fri, 7 Feb 2025 15:35:46 +0200
Subject: [PATCH 7/8] fix: adjust documentation

---
 packages/main/src/Link.ts                      | 9 ++++-----
 packages/main/src/types/InteractiveAreaSize.ts | 8 ++++----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index d17975c14718..10615c865224 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -158,15 +158,14 @@ class Link extends UI5Element implements ITabbable {
 	/**
 	 * Defines the target area size of the link:
 	 * - **InteractiveAreaSize.Normal**: The default target area size.
-	 * - **InteractiveAreaSize.Large**: The target area size is enlared to 24px in height.
+	 * - **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.
 	 *
 	 * **Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.
-	 * **Note:**The interactive area is sufficiently large to help users avoid accidentally selecting (clicking or tapping) on unintented UI elements.
-	 * UI elements positioned over other parts of the page may need an invisible active touch area.
-	 * This will ensure that no elements beneath are activated accidentally when the user tries to interact with the overlay element.
+	 * **Note:**It is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell, to improve <code>ui5-link</code>'s reliability and usability.
+	 * Setting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.
 	 *
 	 * @public
-	 * @since 2.7.0
+	 * @since 2.8.0
 	 * @default "Normal"
 	 */
 	@property()
diff --git a/packages/main/src/types/InteractiveAreaSize.ts b/packages/main/src/types/InteractiveAreaSize.ts
index dc889e9cd728..eb198172d890 100644
--- a/packages/main/src/types/InteractiveAreaSize.ts
+++ b/packages/main/src/types/InteractiveAreaSize.ts
@@ -1,19 +1,19 @@
 /**
- * Interactive area size.
+ * Defines the area size around the component that the user can select.
  *
  * @public
- * @since 2.7.0
+ * @since 2.8.0
  */
 enum InteractiveAreaSize {
 
 	/**
-	 * The default target area size.
+	 * The default target area size (the area taken by the component itself without any extra invisible touch area).
 	 * @public
 	 */
 	Normal = "Normal",
 
 	/**
-	 * The target area size is enlared up to 24px in height.
+	 * Enlarged target area size (up to 24px in height) provides users with an enhanced dedicated space to interact with the component.
 	 * @public
 	 */
 	Large = "Large",

From 000fb618bc0d7078a9563091f6d5650ffb1d6c11 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Fri, 7 Feb 2025 20:27:09 +0200
Subject: [PATCH 8/8] fix: adjust the documentation

---
 packages/main/src/Link.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index 10615c865224..88e1bf4c0363 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -161,7 +161,7 @@ class Link extends UI5Element implements ITabbable {
 	 * - **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.
 	 *
 	 * **Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.
-	 * **Note:**It is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell, to improve <code>ui5-link</code>'s reliability and usability.
+	 * **Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.
 	 * Setting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.
 	 *
 	 * @public