feat(ui5-li): add text wrapping support with expandable text

The standard list item now supports content wrapping through a new "wrapping"
property. When enabled, long text content (title and description) will wrap to
multiple lines instead of truncating with an ellipsis.

Key features:
- Responsive behavior based on screen size:
  - On mobile (size S): Text truncates after 100 characters
  - On tablets/desktop (size M/L): Text truncates after 300 characters
- "Show More/Less" functionality for very long content using ui5-expandable-text
- Works for both title and description fields
- CSS styling to ensure proper layout in different states

Implementation details:
- Added "wrapping" boolean property to ListItemStandard component
- Conditionally render content using ExpandableText component when wrapping is enabled
- Added _maxCharacters getter to determine truncation point based on media range
- Updated ListItemStandardTemplate to handle wrapped content rendering
- Added CSS styles to support proper wrapping behavior
- Updated HTML test page with examples

Documentation:
- Added new section in List.mdx explaining the wrapping behavior
- Created detailed sample in WrappingBehavior folder
- Added JSDoc descriptions for the new property
- Added note about deprecated usage of default slot in favor of text property

Tests:
- Added desktop test for 300 character limit
- Added mobile-specific test for 100 character limit
- Added test for toggling wrapping property

NOTE: This change also promotes the use of the "text" property (added in v2.9.0)
instead of the default slot content for setting list item text. The default slot
usage is now deprecated and will be removed in a future version.

Author: kgogov

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

@@ -20,7 +20,7 @@ describe("List Tests", () => {
 
 		cy.get<List>("@list")
 			.then(list => {
-				list.get(0).addEventListener("ui5-load-more", cy.stub().as("loadMore"));
+				list.get(0)?.addEventListener("ui5-load-more", cy.stub().as("loadMore"));
 			})
 			.shadow()
 			.find(".ui5-list-scroll-container")
@@ -177,3 +177,93 @@ describe("List - Accessibility", () => {
 		});
 	});
 });
+
+describe("List - Wrapping Behavior", () => {
+	it("renders list items with wrapping functionality", () => {
+		const longText = "This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components";
+		const longDescription = "This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well";
+		
+		cy.mount(
+			<List>
+				<ListItemStandard id="wrapping-item" wrapping text={longText} description={longDescription}></ListItemStandard>
+			</List>
+		);
+
+		// Check wrapping attributes are set correctly
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping");
+
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping-type", "Normal");
+		
+		// Check that ExpandableText components are present in the wrapping item
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("exist")
+			.and("have.length", 2);
+	});
+
+	it("uses maxCharacters of 300 on desktop viewport for wrapping list items", () => {
+		const longText = "This is a very long text that exceeds 100 characters but is less than 300 characters. This sentence is just to add more text to ensure we pass the 100 character threshold. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly.";
+		
+		cy.mount(
+			<List>
+				<ListItemStandard id="wrapping-item" wrapping text={longText}></ListItemStandard>
+			</List>
+		);
+
+		// Check that ExpandableText is created with maxCharacters prop of 300
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.first()
+			.invoke('prop', 'maxCharacters')
+			.should('eq', 300);
+	});
+
+	it("should switch wrapping type when wrapping prop is toggled", () => {
+		const longText = "This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly.";
+		
+		// First render with wrapping enabled
+		cy.mount(
+			<List>
+				<ListItemStandard id="wrapping-item" wrapping text={longText}></ListItemStandard>
+			</List>
+		);
+
+		// Check that wrapping attribute is set
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping");
+
+		// Check that wrapping-type attribute is set to Normal
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping-type", "Normal");
+
+		// Should have expandable text component when wrapping is enabled
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("exist");
+
+		// Remove the wrapping attribute from the existing component
+		cy.get("#wrapping-item")
+			.then($el => {
+				$el[0].removeAttribute("wrapping");
+			});
+
+		// Check that wrapping attribute is removed
+		cy.get("#wrapping-item")
+			.should("not.have.attr", "wrapping");
+
+		// Now check the wrapping-type attribute in a separate command
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping-type", "None");
+
+		// Should not have expandable text component when wrapping is disabled
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("not.exist");
+	});
+});

packages/main/cypress/specs/List.mobile.cy.tsx

@@ -0,0 +1,31 @@
+import List from "../../src/List.js";
+import ListItemStandard from "../../src/ListItemStandard.js";
+
+describe("List Mobile Tests", () => {
+    before(() => {
+        cy.ui5SimulateDevice("phone");
+    });
+
+    it("adjusts maxCharacters based on viewport size for wrapping list items", () => {
+        const longText = "This is a very long text that exceeds 100 characters but is less than 300 characters. This sentence is just to add more text to ensure we pass the 100 character threshold. And now we're adding even more text to be extra certain.";
+
+        cy.mount(
+            <List>
+                <ListItemStandard id="wrapping-item" wrapping text={longText}></ListItemStandard>
+            </List>
+        );
+
+        // Get the list item and check its media range
+        cy.get("#wrapping-item")
+            .invoke('prop', 'mediaRange')
+            .should('eq', 'S');
+
+        // Check that ExpandableText is created with maxCharacters prop of 100
+        cy.get("#wrapping-item")
+            .shadow()
+            .find("ui5-expandable-text")
+            .first()
+            .invoke('prop', 'maxCharacters')
+            .should('eq', 100);
+    });
+});

packages/main/src/List.ts

@@ -55,6 +55,7 @@ import type {
 	SelectionRequestEventDetail,
 } from "./ListItem.js";
 import ListSeparator from "./types/ListSeparator.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 
 // Template
 import ListTemplate from "./ListTemplate.js";
@@ -464,6 +465,13 @@ class List extends UI5Element {
 	@property({ type: Boolean })
 	_loadMoreActive = false;
 
+	/**
+	 * Defines the current media query size.
+	 * @private
+	 */
+	@property({ type: String })
+	mediaRange!: string;
+
 	/**
 	 * Defines the items of the component.
 	 *
@@ -494,6 +502,7 @@ class List extends UI5Element {
 	resizeListenerAttached: boolean;
 	listEndObserved: boolean;
 	_handleResize: ResizeObserverCallback;
+	_handleMediaRangeUpdateBound: ResizeObserverCallback;
 	initialIntersection: boolean;
 	_selectionRequested?: boolean;
 	_groupCount: number;
@@ -530,7 +539,7 @@ class List extends UI5Element {
 
 		this._handleResize = this.checkListInViewport.bind(this);
 
-		this._handleResize = this.checkListInViewport.bind(this);
+		this._handleMediaRangeUpdateBound = this._handleMediaRangeUpdate.bind(this);
 
 		// Indicates the List bottom most part has been detected by the IntersectionObserver
 		// for the first time.
@@ -562,13 +571,15 @@ class List extends UI5Element {
 	onEnterDOM() {
 		registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
 		DragRegistry.subscribe(this);
+		ResizeHandler.register(this.getDomRef()!, this._handleMediaRangeUpdateBound);
 	}
 
 	onExitDOM() {
 		deregisterUI5Element(this);
 		this.unobserveListEnd();
 		this.resizeListenerAttached = false;
 		ResizeHandler.deregister(this.getDomRef()!, this._handleResize);
+		ResizeHandler.deregister(this.getDomRef()!, this._handleMediaRangeUpdateBound);
 		DragRegistry.unsubscribe(this);
 	}
 
@@ -776,6 +787,8 @@ class List extends UI5Element {
 				(item as ListItem)._selectionMode = this.selectionMode;
 			}
 			item.hasBorder = showBottomBorder;
+
+			(item as ListItem).mediaRange = this.mediaRange;
 		});
 	}
 
@@ -1065,6 +1078,11 @@ class List extends UI5Element {
 		}
 	}
 
+	_handleMediaRangeUpdate() {
+		const width = this.getBoundingClientRect().width;
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, width);
+	}
+
 	/*
 	* KEYBOARD SUPPORT
 	*/

packages/main/src/ListItem.ts

@@ -191,6 +191,13 @@ abstract class ListItem extends ListItemBase {
 	@property()
 	_selectionMode: `${ListSelectionMode}` = "None";
 
+	/**
+	 * Defines the current media query size.
+	 * @private
+	 */
+	@property({ type: String })
+	mediaRange!: string;
+
 	/**
 	 * Defines the delete button, displayed in "Delete" mode.
 	 * **Note:** While the slot allows custom buttons, to match

packages/main/src/ListItemStandard.ts

@@ -28,7 +28,8 @@ import ListItemStandardTemplate from "./ListItemStandardTemplate.js";
  * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode
  * @slot {Node[]} default - Defines the text of the component.
  *
- * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+ * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. <br/>
+ * **Note:** Deprecated since version `2.9.0`. Use the `text` property instead.
  * @constructor
  * @extends ListItem
  * @public
@@ -40,37 +41,26 @@ import ListItemStandardTemplate from "./ListItemStandardTemplate.js";
 })
 class ListItemStandard extends ListItem implements IAccessibleListItem {
 	/**
-	 * Defines the description displayed right under the item text, if such is present.
+	 * Defines the text of the component.
+	 *
 	 * @default undefined
 	 * @public
-	 * @since 0.8.0
+	 * @since 2.9.0
 	 */
 	@property()
-	description?: string;
+	text?: string;
 
 	/**
-	 * Defines the `icon` source URI.
-	 *
-	 * **Note:**
-	 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-	 * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+	 * Defines the description displayed right under the item text, if such is present.
 	 * @default undefined
 	 * @public
+	 * @since 0.8.0
 	 */
 	@property()
-	icon?: string;
-
-	/**
-	 * Defines whether the `icon` should be displayed in the beginning of the list item or in the end.
-	 *
-	 * @default false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	iconEnd = false;
+	description?: string;
 
 	/**
-	 * Defines the `additionalText`, displayed in the end of the list item.
+	 * Defines the additional text, displayed in the end of the list item.
 	 * @default undefined
 	 * @public
 	 * @since 1.0.0-rc.15
@@ -89,6 +79,27 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 	@property()
 	additionalTextState: `${ValueState}` = "None";
 
+	/**
+	 * Defines the `icon` source URI.
+	 *
+	 * **Note:**
+	 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
+	 * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	icon?: string;
+
+	/**
+	 * Defines whether the `icon` should be displayed in the beginning of the list item or in the end.
+	 *
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	iconEnd = false;
+
 	/**
 	 * Defines whether the item is movable.
 	 * @default false
@@ -99,14 +110,20 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 	movable = false;
 
 	/**
-	 * Defines the text alternative of the component.
-	 * Note: If not provided a default text alternative will be set, if present.
-	 * @default undefined
+	 * Defines whether the content of the list item should wrap when it's too long.
+	 * When set to true, the content (title, description) will be wrapped
+	 * using the `ui5-expandable-text` component.<br/>
+	 *
+	 * The text can wrap up to 100 characters on small screens (size S) and
+	 * up to 300 characters on larger screens (size M and above). When text exceeds
+	 * these limits, it truncates with an ellipsis followed by a text expansion trigger.
+	 *
+	 * @default false
 	 * @public
-	 * @since 1.0.0-rc.15
+	 * @since 2.9.0
 	 */
-	@property()
-	declare accessibleName?: string;
+	@property({ type: Boolean })
+	wrapping = false;
 
 	/**
 	 * Defines if the text of the component should wrap, they truncate by default.
@@ -119,6 +136,16 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 	@property()
 	wrappingType: `${WrappingType}` = "None";
 
+	/**
+	 * Defines the text alternative of the component.
+	 * **Note:** If not provided a default text alternative will be set, if present.
+	 * @default undefined
+	 * @public
+	 * @since 1.0.0-rc.15
+	 */
+	@property()
+	accessibleName?: string;
+
 	/**
 	 * Indicates if the list item has text content.
 	 * @private
@@ -143,8 +170,27 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 
 	onBeforeRendering() {
 		super.onBeforeRendering();
-		this.hasTitle = !!this.textContent;
+		this.hasTitle = !!(this.text || this.textContent);
 		this._hasImage = this.hasImage;
+		this.wrappingType = this.wrapping ? "Normal" : "None";
+	}
+
+	/**
+	 * Returns the content text, either from text property or from the default slot
+	 * @private
+	 */
+	get _textContent(): string {
+		return this.text || this.textContent || "";
+	}
+
+	/**
+	 * Determines the maximum characters to display based on the current media range.
+	 * - Size S: 100 characters
+	 * - Size M and larger: 300 characters
+	 * @private
+	 */
+	get _maxCharacters(): number {
+		return this.mediaRange === "S" ? 100 : 300;
 	}
 
 	get displayIconBegin(): boolean {