refactor(ui5-li): selected property changed to private (#9246)

The selected property of the ui5-li has been redefined within the class where it is actively utilized. Despite this change, it remains accessible to all components that rely on it.

Related to #8461, #7887

---------

Co-authored-by: Peter Skelin <[email protected]>
Co-authored-by: Dobrin Dimchev <[email protected]>

Author: 3 people

packages/main/src/ListItem.ts

@@ -164,6 +164,14 @@ abstract class ListItem extends ListItemBase {
 	@property()
 	highlight: `${Highlight}` = "None";
 
+	/**
+	 * Defines the selected state of the component.
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	declare selected: boolean;
+
 	/**
 	 * Used to define the role of the list item.
 	 * @private

packages/main/src/ListItemBase.ts

@@ -48,7 +48,7 @@ class ListItemBase extends UI5Element implements ITabbable {
 	/**
 	 * Defines the selected state of the component.
 	 * @default false
-	 * @public
+	 * @private
 	 */
 	@property({ type: Boolean })
 	selected = false;

packages/main/src/MenuSeparator.ts

@@ -1,5 +1,4 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import menuSeparatorTemplate from "./generated/templates/MenuSeparatorTemplate.lit.js";
@@ -27,14 +26,6 @@ import type { IMenuItem } from "./Menu.js";
 })
 
 class MenuSeparator extends ListItemBase implements IMenuItem {
-	/**
-	 * **Note:** This property is inherited and not supported. If set, it won't take any effect.
-	 * @default false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	declare selected: boolean;
-
 	get isSeparator() {
 		return true;
 	}

packages/main/src/Option.ts

@@ -90,6 +90,14 @@ class Option extends ListItemBase implements IOption {
 	@property()
 	tooltip?: string;
 
+	/**
+	 * Defines the selected state of the component.
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	declare selected: boolean;
+
 	get displayIconBegin(): boolean {
 		return !!this.icon;
 	}

packages/main/src/OptionCustom.ts

@@ -72,6 +72,14 @@ class OptionCustom extends ListItemBase implements IOption {
 	@property()
 	tooltip?: string;
 
+	/**
+	 * Defines the selected state of the component.
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	declare selected: boolean;
+
 	get effectiveDisplayText() {
 		return this.displayText || this.textContent || "";
 	}