fix(ui5-option): add down/active state on press (#13428)

Introduce visual active/pressed state for ui5-option and ui5-option-custom inside ui5-select. When the user presses and holds on an option in the dropdown, the item reflects the active state using sapList_Active_Background, matching the Fiori design spec for interactive list states.

- Add active boolean property and _onmousedown handler to Option and OptionCustom
- Register document-level mouseup/touchend listeners in onEnterDOM to deactivate
- Wire onMouseDown and onTouchStart via injectedProps in ListItemBaseTemplate
- Fix border-bottom-color in active state to match background (ListItemBase.css)
- Add JsxTemplate type for listItemContent hook in ListItemBaseTemplate
- Add Cypress tests for active state on mousedown/mouseup for both option types
Fixes: #13307

Author: NakataCode

packages/main/cypress/specs/Select.cy.tsx

@@ -1913,3 +1913,59 @@ describe("Select general interaction", () => {
 			.should("be.focused");
 	});
 });
+
+describe("Select - active/down state", () => {
+	it("applies active background on ui5-option while mouse is pressed", () => {
+		cy.mount(
+			<Select>
+				<Option>Option 1</Option>
+				<Option>Option 2</Option>
+			</Select>
+		);
+
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").should("have.attr", "opened");
+
+		cy.get("[ui5-select]")
+			.find("[ui5-option]")
+			.eq(0)
+			.realMouseDown()
+			.then($option => {
+				const bg = window.getComputedStyle($option[0]).backgroundColor;
+				expect(bg).not.to.equal("rgba(0, 0, 0, 0)");
+				expect(bg).not.to.equal("transparent");
+			});
+
+		cy.get("[ui5-select]")
+			.find("[ui5-option]")
+			.eq(0)
+			.realMouseUp();
+	});
+
+	it("applies active background on ui5-option-custom while mouse is pressed", () => {
+		cy.mount(
+			<Select>
+				<OptionCustom>Option 1</OptionCustom>
+				<OptionCustom>Option 2</OptionCustom>
+			</Select>
+		);
+
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").should("have.attr", "opened");
+
+		cy.get("[ui5-select]")
+			.find("[ui5-option-custom]")
+			.eq(0)
+			.realMouseDown()
+			.then($option => {
+				const bg = window.getComputedStyle($option[0]).backgroundColor;
+				expect(bg).not.to.equal("rgba(0, 0, 0, 0)");
+				expect(bg).not.to.equal("transparent");
+			});
+
+		cy.get("[ui5-select]")
+			.find("[ui5-option-custom]")
+			.eq(0)
+			.realMouseUp();
+	});
+});

packages/main/src/ListItemBaseTemplate.tsx

@@ -1,7 +1,7 @@
 import type ListItemBase from "./ListItemBase.js";
-import type { AriaRole } from "@ui5/webcomponents-base/";
+import type { AriaRole, JsxTemplate } from "@ui5/webcomponents-base/";
 
-export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: () => void }, injectedProps?: {
+export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: JsxTemplate }, injectedProps?: {
 	role?: AriaRole,
 	title?: string,
 }) {
@@ -21,7 +21,7 @@ export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listI
 			onKeyDown={this._onkeydown}
 			onClick={this._onclick}
 		>
-			{ listItemContent.call(this) }
+			{ listItemContent.call(this) as JSX.Element }
 		</li>
 	);
 }

packages/main/src/themes/ListItemBase.css

@@ -34,23 +34,24 @@
 }
 
 /* hovered */
-:host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) {
+:host([actionable]:not([active]):not(:active):not([selected]):not([ui5-li-group-header]):hover) {
     background-color: var(--sapList_Hover_Background);
 }
 
-:host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) .ui5-li-additional-text {
+:host([actionable]:not([active]):not(:active):not([selected]):not([ui5-li-group-header]):hover) .ui5-li-additional-text {
 	text-shadow: var(--sapContent_TextShadow);
 }
 
 /* selected and hovered */
-:host([actionable][selected]:not([active], [data-moving]):hover) {
+:host([actionable][selected]:not([active]):not(:active):not([data-moving]):hover) {
 	background-color: var(--sapList_Hover_SelectionBackground);
 }
 
 /* selected and active */
 :host([active][actionable]:not([data-moving])),
 :host([active][actionable][selected]:not([data-moving])) {
 	background-color: var(--sapList_Active_Background);
+	border-bottom-color: var(--sapList_Active_Background);
 }
 
 /* focused */

packages/main/src/themes/OptionBase.css

@@ -1,4 +1,10 @@
 :host {
 	height: var(--_ui5_list_item_dropdown_base_height);
 	--_ui5_list_item_title_size: var(--sapFontSize);
+}
+
+:host(:active[actionable]:not([data-moving])),
+:host(:active[actionable][selected]:not([data-moving])) {
+	background-color: var(--sapList_Active_Background);
+	border-bottom-color: var(--sapList_Active_Background);
 }