@fundamental-styles/mcp 0.41.9 → 0.41.10-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/data/CHANGELOG.md +9 -3
  2. package/data/components/list-2.md +92 -18
  3. package/data/components/list-3.md +90 -22
  4. package/data/components/list-list.md +88 -38
  5. package/data/components/popover-user-menu.md +16 -16
  6. package/data/examples/Components/List/list/byline/borderless.example.html +1 -1
  7. package/data/examples/Components/List/list/byline/buttons.example.html +25 -4
  8. package/data/examples/Components/List/list/byline/counter.example.html +2 -2
  9. package/data/examples/Components/List/list/byline/long-text.example.html +64 -33
  10. package/data/examples/Components/List/list/byline/navigation-indicator.example.html +3 -3
  11. package/data/examples/Components/List/list/byline/selection.example.html +6 -6
  12. package/data/examples/Components/List/list/standard/buttons.example.html +4 -4
  13. package/data/examples/Components/List/list/standard/icons.example.html +3 -3
  14. package/data/examples/Components/List/list/standard/item-counter.example.html +4 -4
  15. package/data/examples/Components/List/list/standard/long-text.example.html +59 -0
  16. package/data/examples/Components/List/list/standard/navigation-indicator.example.html +4 -4
  17. package/data/examples/Components/List/list/standard/secondary-data.example.html +3 -3
  18. package/data/examples/Components/List/list/standard/selection.example.html +4 -4
  19. package/data/examples/Components/List/list/subline/long-text.example.html +68 -0
  20. package/data/examples/Components/List/list/subline/standard.example.html +7 -7
  21. package/data/examples/Components/user-menu/default.example.html +6 -6
  22. package/package.json +1 -1
package/data/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.41.10-rc.0](https://github.com/SAP/fundamental-styles/compare/v0.41.9...v0.41.10-rc.0) (2026-09-11)
7
+
8
+ ### Features
9
+
10
+ - **styles:** new truncation rules for standard and byline lists ([#6371](https://github.com/SAP/fundamental-styles/issues/6371)) ([828530d](https://github.com/SAP/fundamental-styles/commit/828530dbe41e4b0d5bde819e23d921ab2b93920c))
11
+
6
12
  ## [0.41.9](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.22...v0.41.9) (2026-09-09)
7
13
 
8
14
  **Note:** Version bump only for package fundamental-styles
@@ -7125,9 +7131,9 @@ Co-authored-by: droshev <mladen.droshev@sap.com>
7125
7131
 
7126
7132
  - added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.
7127
7133
  Before:
7128
- <div class="fd-row">
7129
- After:
7130
- <div class="fd-row fd-row--top">
7134
+ <div class="fd-row">
7135
+ After:
7136
+ <div class="fd-row fd-row--top">
7131
7137
 
7132
7138
  ### Bug Fixes
7133
7139
 
package/data/components/list-2.md CHANGED
@@ -52,19 +52,19 @@ npm install fundamental-styles
52
52
  <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
53
53
  </li>
54
54
  <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
55
- <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" aria-role="img" aria-label="John Doe">JD</span>
55
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" role="img" aria-label="John Doe">JD</span>
56
56
  <div class="fd-list__content">
57
- <div class="fd-list__title">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo!</div>
58
- <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis. Necessitatibus reiciendis voluptatum id nesciunt earum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
59
- <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda. Ab, dolores ea dignissimos, aliquid beatae magnam commodi, tenetur facere harum ex nemo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
57
+ <div class="fd-list__title">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo?</div>
58
+ <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis.</div>
59
+ <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda.</div>
60
60
  </div>
61
61
  </li>
62
62
  <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
63
63
  <span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="John Doe"></span>
64
64
  <div class="fd-list__content">
65
- <div class="fd-list__title fd-list__title--truncate">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo!</div>
66
- <div class="fd-list__subline fd-list__subline--truncate">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis. Necessitatibus reiciendis voluptatum id nesciunt earum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
67
- <div class="fd-list__subline fd-list__subline--truncate">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda. Ab, dolores ea dignissimos, aliquid beatae magnam commodi, tenetur facere harum ex nemo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
65
+ <div class="fd-list__title fd-list__title--wrap">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo?</div>
66
+ <div class="fd-list__subline fd-list__subline--wrap">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis.</div>
67
+ <div class="fd-list__subline fd-list__subline--wrap">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda.</div>
68
68
  </div>
69
69
  </li>
70
70
  </ul>
@@ -74,7 +74,8 @@ npm install fundamental-styles
74
74
 
75
75
  | Class | Description |
76
76
  |-------|-------------|
77
- | `fd-list--subline` | This is structure of the custom list item is being used to display the accounts in USer Menu. |
77
+ | `fd-list--subline` | This list item structure is used to display accounts in the User Menu |
78
+ | `fd-list--wrap` | This list item structure is used to display accounts in the User Menu |
78
79
 
79
80
  ## BEM Elements
80
81
 
@@ -84,16 +85,18 @@ This component uses the following BEM elements:
84
85
  - `fd-list__content`
85
86
  - `fd-list__item`
86
87
  - `fd-list__item--interractive`
88
+ - `fd-list__item--wrap`
89
+ - `fd-list__link--more`
87
90
  - `fd-list__subline`
88
- - `fd-list__subline--truncate`
91
+ - `fd-list__subline--wrap`
89
92
  - `fd-list__title`
90
- - `fd-list__title--truncate`
93
+ - `fd-list__title--wrap`
91
94
 
92
95
  ## Examples
93
96
 
94
97
  ### Custom List Item with Subline
95
98
 
96
- This is structure of the custom list item is being used to display the accounts in USer Menu.
99
+ This list item structure is used to display accounts in the User Menu. By default, long title and subline text is truncated with an ellipsis. To allow the text to wrap across multiple lines, add the \
97
100
 
98
101
  ```html
99
102
  <ul class="fd-list fd-list--subline" role="list">
@@ -115,24 +118,95 @@ This is structure of the custom list item is being used to display the accounts
115
118
  <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
116
119
  </li>
117
120
  <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
118
- <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" aria-role="img" aria-label="John Doe">JD</span>
121
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" role="img" aria-label="John Doe">JD</span>
119
122
  <div class="fd-list__content">
120
- <div class="fd-list__title">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo!</div>
121
- <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis. Necessitatibus reiciendis voluptatum id nesciunt earum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
122
- <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda. Ab, dolores ea dignissimos, aliquid beatae magnam commodi, tenetur facere harum ex nemo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
123
+ <div class="fd-list__title">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo?</div>
124
+ <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis.</div>
125
+ <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda.</div>
123
126
  </div>
124
127
  </li>
125
128
  <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
126
129
  <span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="John Doe"></span>
127
130
  <div class="fd-list__content">
128
- <div class="fd-list__title fd-list__title--truncate">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo!</div>
129
- <div class="fd-list__subline fd-list__subline--truncate">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis. Necessitatibus reiciendis voluptatum id nesciunt earum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
130
- <div class="fd-list__subline fd-list__subline--truncate">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda. Ab, dolores ea dignissimos, aliquid beatae magnam commodi, tenetur facere harum ex nemo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
131
+ <div class="fd-list__title fd-list__title--wrap">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo?</div>
132
+ <div class="fd-list__subline fd-list__subline--wrap">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis.</div>
133
+ <div class="fd-list__subline fd-list__subline--wrap">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda.</div>
131
134
  </div>
132
135
  </li>
133
136
  </ul>
134
137
  ```
135
138
 
139
+ ### Subline List with Wrapping Text
140
+
141
+ By default, long title and subline text is truncated with an ellipsis. Wrapping can be enabled at three levels:
142
+
143
+ **List level** — add \
144
+
145
+ ```html
146
+ <p class="fd-form-label">Default — truncation</p>
147
+ <ul class="fd-list fd-list--subline" role="list">
148
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
149
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" role="img" aria-label="Michael Thompson">MT</span>
150
+ <div class="fd-list__content">
151
+ <div class="fd-list__title">Annual Budget Review for Q3 and Q4 — please review the attached documents and provide your feedback before the end of the fiscal quarter to ensure timely processing.</div>
152
+ <div class="fd-list__subline">Finance · Updated 2 hours ago by Michael Thompson, Senior Analyst, Global Finance Division · Reviewed by Anna Schmidt · Pending CFO approval</div>
153
+ </li>
154
+ </ul>
155
+ </div>
156
+
157
+ <p class="fd-form-label">List level — <code>fd-list--wrap</code></p>
158
+ <ul class="fd-list fd-list--subline fd-list--wrap" role="list">
159
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
160
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" role="img" aria-label="John Doe">JD</span>
161
+ <div class="fd-list__content">
162
+ <div class="fd-list__title">All titles wrap at list level, Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo?</div>
163
+ <div class="fd-list__subline">All sublines wrap too, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis.</div>
164
+ </li>
165
+ </ul>
166
+ </div>
167
+
168
+ <p class="fd-form-label">Item level — <code>fd-list__item--wrap</code> (collapsed and expanded states)</p>
169
+ <!-- The fd-list__link--more element is placed outside fd-list__title so it stays
170
+ visible even when the title truncates. -->
171
+ <ul class="fd-list fd-list--subline" role="list">
172
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
173
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" role="img" aria-label="John Doe">JD</span>
174
+ <div class="fd-list__content">
175
+ <div class="fd-list__title">Collapsed — title truncated, Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo?</div>
176
+ <a href="#" class="fd-link fd-list__link--more" aria-expanded="false" tabindex="0"><span class="fd-link__content">More</span></a>
177
+ <div class="fd-list__subline">Subline truncated, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque.</div>
178
+ </li>
179
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive fd-list__item--wrap">
180
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" role="img" aria-label="John Doe">JD</span>
181
+ <div class="fd-list__content">
182
+ <div class="fd-list__title">Expanded — fd-list__item--wrap applied, Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo? <a href="#" class="fd-link fd-list__link--more" aria-expanded="true" tabindex="0"><span class="fd-link__content">Less</span></a></div>
183
+ <div class="fd-list__subline">Subline wraps too, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis.</div>
184
+ </div>
185
+ </li>
186
+ </ul>
187
+ </div>
188
+
189
+ <div>
190
+ <p class="fd-form-label">Element level — <code>fd-list__title--wrap</code> / <code>fd-list__subline--wrap</code></p>
191
+ <ul class="fd-list fd-list--subline" role="list">
192
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
193
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" role="img" aria-label="John Doe">JD</span>
194
+ <div class="fd-list__content">
195
+ <div class="fd-list__title fd-list__title--wrap">Only the title wraps here, Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo?</div>
196
+ <div class="fd-list__subline">Subline still truncates, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque.</div>
197
+ </div>
198
+ </li>
199
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
200
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-6" role="img" aria-label="Jane Doe">JD</span>
201
+ <div class="fd-list__content">
202
+ <div class="fd-list__title">Title still truncates, Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita.</div>
203
+ <div class="fd-list__subline fd-list__subline--wrap">Only the subline wraps here, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis.</div>
204
+ </div>
205
+ </li>
206
+ </ul>
207
+ </div>
208
+ ```
209
+
136
210
  ## Accessibility
137
211
 
138
212
  - Use semantic HTML elements where appropriate
package/data/components/list-3.md CHANGED
@@ -84,6 +84,7 @@ npm install fundamental-styles
84
84
  | `fd-list--no-border` | Style variant |
85
85
  | `fd-list--search-results` | To be used in a popover containing sophisticated search results. |
86
86
  | `fd-list--selection` | Standard list items can display checkboxes that users can select from |
87
+ | `fd-list--wrap` | By default, long title and secondary text is truncated with an ellipsis |
87
88
 
88
89
  ## States
89
90
 
@@ -116,18 +117,23 @@ This component uses the following BEM elements:
116
117
  - `fd-list__item--link`
117
118
  - `fd-list__item--suggestion`
118
119
  - `fd-list__item--unread`
120
+ - `fd-list__item--wrap`
121
+ - `fd-list__item--wrap-top-aligned`
119
122
  - `fd-list__item-counter`
120
123
  - `fd-list__link`
124
+ - `fd-list__link--more`
121
125
  - `fd-list__link--navigation-indicator`
122
126
  - `fd-list__secondary`
123
127
  - `fd-list__secondary--critical`
124
128
  - `fd-list__secondary--informative`
125
129
  - `fd-list__secondary--negative`
126
130
  - `fd-list__secondary--positive`
131
+ - `fd-list__secondary--wrap`
127
132
  - `fd-list__subline`
128
133
  - `fd-list__thumbnail`
129
134
  - `fd-list__title`
130
135
  - `fd-list__title--scope`
136
+ - `fd-list__title--wrap`
131
137
  - `fd-list__title-text`
132
138
 
133
139
  ## Examples
@@ -236,20 +242,20 @@ Standard list items can contain navigation links. To add navigation, add the \
236
242
 
237
243
  ```html
238
244
  <ul class="fd-list" role="list">
239
- <li tabindex="-1" role="listitem" class="fd-list__item">
240
- <span class="fd-list__title">List item 1</span>
245
+ <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--wrap">
246
+ <span class="fd-list__title">List item 1 that wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, excepteur sint occaecat cupidatat non proident</span>
241
247
  <button class="fd-button fd-button--transparent fd-list__button">
242
248
  <i class="sap-icon--edit"></i>
243
249
  </button>
244
250
  </li>
245
251
  <li tabindex="-1" role="listitem" class="fd-list__item">
246
- <span class="fd-list__title">List item 1</span>
252
+ <span class="fd-list__title fd-list__title--wrap">List item 2 that wraps. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
247
253
  <button class="fd-button fd-button--transparent fd-list__button">
248
254
  <i class="sap-icon--decline"></i>
249
255
  </button>
250
256
  </li>
251
257
  <li tabindex="-1" role="listitem" class="fd-list__item">
252
- <span class="fd-list__title">List item 2</span>
258
+ <span class="fd-list__title">List item 3</span>
253
259
  <button class="fd-button fd-button--transparent fd-list__button">
254
260
  <i class="sap-icon--edit"></i>
255
261
  </button>
@@ -266,15 +272,15 @@ If only a subset of the list items is navigable you should indicate them with an
266
272
 
267
273
  ```html
268
274
  <ul class="fd-list fd-list--navigation fd-list--navigation-indication" role="list">
269
- <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
275
+ <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--wrap fd-list__item--link">
270
276
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
271
- <span class="fd-list__title">List item 1</span>
277
+ <span class="fd-list__title">List item 1 that wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, excepteur sint occaecat cupidatat non proident</span>
272
278
  </a>
273
279
  </li>
274
280
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
275
281
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator is-selected" href="#">
276
282
  <i role="presentation" class="fd-list__icon sap-icon--history"></i>
277
- <span class="fd-list__title">List item 2</span>
283
+ <span class="fd-list__title fd-list__title--wrap">List item 2 that wraps. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, excepteur sint occaecat cupidatat non proident. Sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
278
284
  </a>
279
285
  </li>
280
286
  <li tabindex="0" role="listitem" class="fd-list__item">
@@ -287,7 +293,7 @@ If only a subset of the list items is navigable you should indicate them with an
287
293
  </li>
288
294
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
289
295
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator is-navigated" href="#">
290
- <span class="fd-list__title">List item 5</span>
296
+ <span class="fd-list__title">List item 4</span>
291
297
  <i role="presentation" class="fd-list__icon sap-icon--map"></i>
292
298
  </a>
293
299
  </li>
@@ -364,12 +370,12 @@ To display secondary data in standard list items, add a span element with \
364
370
 
365
371
  ```html
366
372
  <ul class="fd-list" role="list">
367
- <li role="listitem" tabindex="0" class="fd-list__item">
368
- <span class="fd-list__title">List item 1</span>
373
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--wrap">
374
+ <span class="fd-list__title">List item 1 that wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</span>
369
375
  <span class="fd-list__secondary">Neutral Status</span>
370
376
  </li>
371
377
  <li role="listitem" tabindex="0" class="fd-list__item">
372
- <span class="fd-list__title">List item 2</span>
378
+ <span class="fd-list__title fd-list__title--wrap">List item 2 that wraps. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
373
379
  <span class="fd-list__secondary fd-list__secondary--positive">Positive Status</span>
374
380
  </li>
375
381
  <li role="listitem" tabindex="0" class="fd-list__item">
@@ -393,17 +399,17 @@ The item counter is vertically aligned within the list item, to the right. The m
393
399
 
394
400
  ```html
395
401
  <ul class="fd-list" role="list">
396
- <li role="listitem" tabindex="0" class="fd-list__item">
397
- <span class="fd-list__title">List item 1</span>
402
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--wrap">
403
+ <span class="fd-list__title">List item 1 that wraps. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
398
404
  <span class="fd-list__item-counter">12345</span>
399
405
  </li>
400
406
  <li role="listitem" tabindex="0" class="fd-list__item">
401
- <span class="fd-list__title">List item 2</span>
407
+ <span class="fd-list__title fd-list__title--wrap">List item 2</span>
402
408
  <span class="fd-list__item-counter">12345</span>
403
409
  </li>
404
410
  <li role="listitem" tabindex="0" class="fd-list__item">
405
411
  <i role="presentation" class="fd-list__icon sap-icon--lightbulb"></i>
406
- <span class="fd-list__title">List item 3</span>
412
+ <span class="fd-list__title fd-list__title--wrap">List item 3 that wraps. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
407
413
  <span class="fd-list__item-counter">12345</span>
408
414
  </li>
409
415
  <li role="listitem" tabindex="0" class="fd-list__item">
@@ -424,16 +430,16 @@ To display an icon inside standard list items, add the \
424
430
  <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
425
431
  <span class="fd-list__title">List item 1</span>
426
432
  </li>
427
- <li role="listitem" tabindex="0" class="fd-list__item">
433
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--wrap">
428
434
  <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
429
- <span class="fd-list__title">List item 2</span>
435
+ <span class="fd-list__title">List item 2 that wraps. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
430
436
  </li>
431
437
  <li role="listitem" tabindex="0" class="fd-list__item">
432
438
  <span class="fd-list__title">List item 3</span>
433
439
  <i role="presentation" class="fd-list__icon sap-icon--lightbulb"></i>
434
440
  </li>
435
441
  <li role="listitem" tabindex="0" class="fd-list__item">
436
- <span class="fd-list__title">List item 4</span>
442
+ <span class="fd-list__title fd-list__title--wrap">List item 4 that wraps. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
437
443
  <i role="presentation" class="fd-list__icon sap-icon--history"></i>
438
444
  </li>
439
445
  </ul>
@@ -523,23 +529,23 @@ Standard list items can display checkboxes that users can select from. To displa
523
529
 
524
530
  ```html
525
531
  <ul class="fd-list fd-list--selection" role="listbox" aria-labelledby="XezW11">
526
- <li role="option" tabindex="0" class="fd-list__item">
532
+ <li role="option" tabindex="0" class="fd-list__item fd-list__item--wrap">
527
533
  <div class="fd-form-item fd-list__form-item">
528
534
  <input type="checkbox" class="fd-checkbox" id="Ai4ez1" aria-labelledby="Az0bg1">
529
535
  <label tabindex="-1" class="fd-checkbox__label" for="Ai4ez1">
530
536
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
531
537
  </label>
532
538
  </div>
533
- <span class="fd-list__title" id="Az0bg1">List item 1</span>
539
+ <span class="fd-list__title" id="Az0bg1">List item 1 that wraps with a centered checkbox. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</span>
534
540
  </li>
535
- <li role="option" tabindex="0" class="fd-list__item is-selected" aria-selected="true">
541
+ <li role="option" tabindex="0" class="fd-list__item is-selected fd-list__item--wrap fd-list__item--wrap-top-aligned" aria-selected="true">
536
542
  <div class="fd-form-item fd-list__form-item">
537
543
  <input type="checkbox" class="fd-checkbox" id="Ai4ez2" checked aria-labelledby="Az0bg2">
538
544
  <label tabindex="-1" class="fd-checkbox__label" for="Ai4ez2">
539
545
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
540
546
  </label>
541
547
  </div>
542
- <span class="fd-list__title" id="Az0bg2">List item 2</span>
548
+ <span class="fd-list__title fd-list__title--wrap" id="Az0bg2">List item 2 that wraps with a top-aligned checkbox. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span>
543
549
  </li>
544
550
  <li role="option" tabindex="0" class="fd-list__item">
545
551
  <div class="fd-form-item fd-list__form-item">
@@ -720,6 +726,68 @@ To be used in a popover containing sophisticated search results.
720
726
  </div>
721
727
  ```
722
728
 
729
+ ### List with long Title and Secondary Text
730
+
731
+ By default, long title and secondary text is truncated with an ellipsis. Wrapping can be enabled at three levels:
732
+
733
+ **List level** — add \
734
+
735
+ ```html
736
+ <p class="fd-form-label">Default — truncation</p>
737
+ <ul class="fd-list" role="list">
738
+ <li role="listitem" tabindex="0" class="fd-list__item">
739
+ <span class="fd-list__title">Annual Budget Review for Q3 and Q4 — please review the attached documents and provide your feedback before the end of the fiscal quarter to ensure timely processing.</span>
740
+ <span class="fd-list__secondary">Finance · Updated 2 hours ago by Michael Thompson, Senior Analyst, Global Finance Division</span>
741
+ </li>
742
+ </ul>
743
+
744
+ <p class="fd-form-label">List level — <code>fd-list--wrap</code></p>
745
+ <ul class="fd-list fd-list--wrap" role="list">
746
+ <li role="listitem" tabindex="0" class="fd-list__item">
747
+ <span class="fd-list__title">All titles wrap at list level, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</span>
748
+ <span class="fd-list__secondary">Secondary text wraps too, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam.</span>
749
+ </li>
750
+ <li role="listitem" tabindex="0" class="fd-list__item">
751
+ <span class="fd-list__title">Second item also wraps, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
752
+ </li>
753
+ </ul>
754
+
755
+ <p class="fd-form-label">Item level — <code>fd-list__item--wrap</code> (collapsed and expanded states)</p>
756
+ <!-- In the collapsed state fd-list__link--more is a right-aligned sibling so it
757
+ stays visible when the title truncates. In the expanded state (fd-list__item--wrap
758
+ applied) the title is fully visible so the Less link can sit inline at the end. -->
759
+ <ul class="fd-list" role="list">
760
+ <li role="listitem" tabindex="0" class="fd-list__item">
761
+ <span class="fd-list__title">This item truncates normally, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</span>
762
+ </li>
763
+ <li role="listitem" tabindex="0" class="fd-list__item">
764
+ <span class="fd-list__title">Collapsed — title truncated, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</span>
765
+ <a href="#" class="fd-link fd-list__link--more" aria-expanded="false" tabindex="0"><span class="fd-link__content">More</span></a>
766
+ </li>
767
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--wrap">
768
+ <span class="fd-list__title">Expanded — fd-list__item--wrap applied, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. <a href="#" class="fd-link fd-list__link--more" aria-expanded="true" tabindex="0"><span class="fd-link__content">Less</span></a></span>
769
+ <span class="fd-list__secondary">Secondary text wraps too, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid.</span>
770
+ </li>
771
+ <li role="listitem" tabindex="0" class="fd-list__item">
772
+ <span class="fd-list__title">This item truncates normally again, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</span>
773
+ </li>
774
+ </ul>
775
+
776
+ <div>
777
+ <p class="fd-form-label">Element level — <code>fd-list__title--wrap</code> / <code>fd-list__secondary--wrap</code></p>
778
+ <ul class="fd-list" role="list">
779
+ <li role="listitem" tabindex="0" class="fd-list__item">
780
+ <span class="fd-list__title fd-list__title--wrap">Only the title wraps here, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</span>
781
+ <span class="fd-list__secondary">Secondary still truncates, Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
782
+ </li>
783
+ <li role="listitem" tabindex="0" class="fd-list__item">
784
+ <span class="fd-list__title">Title still truncates, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
785
+ <span class="fd-list__secondary fd-list__secondary--wrap">Only the secondary wraps here, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span>
786
+ </li>
787
+ </ul>
788
+ </div>
789
+ ```
790
+
723
791
  ## Accessibility
724
792
 
725
793
  - Use semantic HTML elements where appropriate