@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

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 (215) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +53 -3
  3. package/data/component-catalog.json +62 -209
  4. package/data/components/README.md +281 -0
  5. package/data/components/action-bar.md +443 -0
  6. package/data/components/ai-busy-indicator.md +79 -0
  7. package/data/components/ai-loading-bar.md +66 -0
  8. package/data/components/avatar-btp.md +198 -0
  9. package/data/components/avatar-group.md +2660 -0
  10. package/data/components/avatar-product-switch.md +476 -0
  11. package/data/components/avatar.md +993 -0
  12. package/data/components/bar.md +574 -0
  13. package/data/components/border-radius.md +148 -0
  14. package/data/components/border.md +412 -0
  15. package/data/components/breadcrumb.md +546 -0
  16. package/data/components/button-2.md +440 -0
  17. package/data/components/button-action-sheet.md +292 -0
  18. package/data/components/button-ai.md +730 -0
  19. package/data/components/button-btp.md +223 -0
  20. package/data/components/button-button.md +233 -0
  21. package/data/components/button-counter.md +176 -0
  22. package/data/components/button-patterns.md +731 -0
  23. package/data/components/button-split.md +459 -0
  24. package/data/components/button.md +469 -0
  25. package/data/components/calendar.md +5784 -0
  26. package/data/components/card-card-media.md +707 -0
  27. package/data/components/card-card.md +2426 -0
  28. package/data/components/card-layouts.md +1201 -0
  29. package/data/components/card.md +2404 -0
  30. package/data/components/carousel.md +1506 -0
  31. package/data/components/code.md +139 -0
  32. package/data/components/component-reset.md +272 -0
  33. package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
  34. package/data/components/components-icons-sap-icons.md +147 -0
  35. package/data/components/components-icons-tnt-icons.md +85 -0
  36. package/data/components/container-queries.md +221 -0
  37. package/data/components/container.md +227 -0
  38. package/data/components/dialog-docs-static-busy-indicator.md +165 -0
  39. package/data/components/dialog-docs-static-dialog.md +949 -0
  40. package/data/components/dialog-docs-static-patterns.md +147 -0
  41. package/data/components/dialog-docs-static-settings.md +528 -0
  42. package/data/components/dialog-docs-static.md +982 -0
  43. package/data/components/dialog.md +606 -0
  44. package/data/components/dynamic-page-dynamic-page.md +1914 -0
  45. package/data/components/dynamic-page.md +973 -0
  46. package/data/components/dynamic-side.md +197 -0
  47. package/data/components/elevation.md +110 -0
  48. package/data/components/feed-input.md +346 -0
  49. package/data/components/feed-list.md +580 -0
  50. package/data/components/fieldset-2.md +292 -0
  51. package/data/components/fieldset-forms.md +169 -0
  52. package/data/components/fieldset.md +381 -0
  53. package/data/components/flexible-column-layout.md +205 -0
  54. package/data/components/form-group.md +287 -0
  55. package/data/components/form-header.md +71 -0
  56. package/data/components/form-item-2.md +98 -0
  57. package/data/components/form-item-3.md +134 -0
  58. package/data/components/form-item-4.md +556 -0
  59. package/data/components/form-item-5.md +182 -0
  60. package/data/components/form-item-6.md +539 -0
  61. package/data/components/form-item-7.md +239 -0
  62. package/data/components/form-item-ai.md +158 -0
  63. package/data/components/form-item-file-uploader.md +445 -0
  64. package/data/components/form-item-forms.md +234 -0
  65. package/data/components/form-item-patterns.md +426 -0
  66. package/data/components/form-item.md +464 -0
  67. package/data/components/form-label-ai.md +126 -0
  68. package/data/components/form-label-layouts.md +306 -0
  69. package/data/components/form-label-patterns.md +1175 -0
  70. package/data/components/form-label-status-indicator.md +1083 -0
  71. package/data/components/form-label-step-input.md +620 -0
  72. package/data/components/form-label.md +2876 -0
  73. package/data/components/generic-tag.md +747 -0
  74. package/data/components/grid-list-grid-list.md +1185 -0
  75. package/data/components/grid-list.md +1449 -0
  76. package/data/components/heading.md +66 -0
  77. package/data/components/horizontal-navigation.md +568 -0
  78. package/data/components/icon-tab-bar-dev.md +190 -0
  79. package/data/components/icon-tab-bar.md +2620 -0
  80. package/data/components/icon.md +171 -0
  81. package/data/components/iconBusinessSuite.md +92 -0
  82. package/data/components/iconTnt.md +92 -0
  83. package/data/components/illustrated-message.md +439 -0
  84. package/data/components/info-label.md +348 -0
  85. package/data/components/input-group.md +2068 -0
  86. package/data/components/label.md +66 -0
  87. package/data/components/layout-grid.md +447 -0
  88. package/data/components/layout-panel.md +261 -0
  89. package/data/components/layouts-layout-grid.md +608 -0
  90. package/data/components/layouts-paddings.md +133 -0
  91. package/data/components/layouts-section.md +287 -0
  92. package/data/components/list-2.md +148 -0
  93. package/data/components/list-3.md +735 -0
  94. package/data/components/list-list.md +790 -0
  95. package/data/components/list-object-list.md +1225 -0
  96. package/data/components/list.md +1286 -0
  97. package/data/components/media-queries.md +168 -0
  98. package/data/components/menu.md +946 -0
  99. package/data/components/message-box-docs-static-ai.md +149 -0
  100. package/data/components/message-box-docs-static.md +527 -0
  101. package/data/components/message-page-upload-collection.md +678 -0
  102. package/data/components/message-page.md +256 -0
  103. package/data/components/message-strip.md +977 -0
  104. package/data/components/message-toast.md +119 -0
  105. package/data/components/micro-process-flow.md +991 -0
  106. package/data/components/navigation-menu.md +366 -0
  107. package/data/components/navigation-navigation.md +1245 -0
  108. package/data/components/navigation.md +2604 -0
  109. package/data/components/numeric-content.md +317 -0
  110. package/data/components/object-attribute.md +96 -0
  111. package/data/components/object-identifier.md +227 -0
  112. package/data/components/object-marker.md +202 -0
  113. package/data/components/object-number.md +327 -0
  114. package/data/components/object-status.md +1538 -0
  115. package/data/components/off-screen.md +87 -0
  116. package/data/components/overflow.md +97 -0
  117. package/data/components/padding.md +122 -0
  118. package/data/components/paddings.md +130 -0
  119. package/data/components/page.md +300 -0
  120. package/data/components/pagination.md +672 -0
  121. package/data/components/panel-layouts.md +345 -0
  122. package/data/components/panel.md +514 -0
  123. package/data/components/patterns-label.md +74 -0
  124. package/data/components/popover-2.md +906 -0
  125. package/data/components/popover-ai.md +466 -0
  126. package/data/components/popover-btp.md +886 -0
  127. package/data/components/popover-deprecated.md +308 -0
  128. package/data/components/popover-message-popover.md +683 -0
  129. package/data/components/popover-notification.md +1511 -0
  130. package/data/components/popover-patterns.md +1100 -0
  131. package/data/components/popover-popover.md +1862 -0
  132. package/data/components/popover-quick-view.md +385 -0
  133. package/data/components/popover-timepicker.md +1836 -0
  134. package/data/components/popover-user-menu.md +1303 -0
  135. package/data/components/popover.md +1938 -0
  136. package/data/components/progress-indicator.md +351 -0
  137. package/data/components/prompt-input-ai.md +226 -0
  138. package/data/components/prompt-input.md +226 -0
  139. package/data/components/rating-indicator.md +1469 -0
  140. package/data/components/resizable-card-layout.md +951 -0
  141. package/data/components/scrollbar.md +86 -0
  142. package/data/components/search-field.md +287 -0
  143. package/data/components/section.md +250 -0
  144. package/data/components/segmented-button.md +324 -0
  145. package/data/components/shellbar.md +2183 -0
  146. package/data/components/side-nav.md +1562 -0
  147. package/data/components/skeleton.md +243 -0
  148. package/data/components/slider.md +395 -0
  149. package/data/components/splitter.md +353 -0
  150. package/data/components/table.md +2749 -0
  151. package/data/components/tabs.md +658 -0
  152. package/data/components/text-text.md +380 -0
  153. package/data/components/text.md +253 -0
  154. package/data/components/tile.md +1132 -0
  155. package/data/components/time.md +818 -0
  156. package/data/components/title.md +153 -0
  157. package/data/components/titles.md +83 -0
  158. package/data/components/token.md +311 -0
  159. package/data/components/tokenizer.md +398 -0
  160. package/data/components/tool-header.md +1352 -0
  161. package/data/components/tool-layout.md +199 -0
  162. package/data/components/toolbar-ai.md +174 -0
  163. package/data/components/toolbar-btp.md +526 -0
  164. package/data/components/toolbar-title-bar.md +473 -0
  165. package/data/components/toolbar.md +432 -0
  166. package/data/components/tree.md +1031 -0
  167. package/data/components/typography.md +435 -0
  168. package/data/components/variant-management.md +360 -0
  169. package/data/components/vertical-nav.md +589 -0
  170. package/data/components/wizard.md +1429 -0
  171. package/data/examples/Components/dialog/device-specifications.example.html +39 -30
  172. package/data/examples/Components/shellbar/optional-items.example.html +210 -157
  173. package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
  174. package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
  175. package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
  176. package/data/examples/Components/user-menu/default.example.html +241 -83
  177. package/data/schemas/badge.schema.json +1 -1
  178. package/data/schemas/button-split.schema.json +1 -1
  179. package/data/schemas/component-frontmatter.schema.json +123 -0
  180. package/data/schemas/component-markdown.schema.json +81 -0
  181. package/data/schemas/counter.schema.json +1 -1
  182. package/data/schemas/dynamic-page.schema.json +1 -1
  183. package/data/schemas/dynamic-side-content.schema.json +1 -1
  184. package/data/schemas/facet.schema.json +1 -1
  185. package/data/schemas/fieldset.schema.json +1 -1
  186. package/data/schemas/flexible-column-layout.schema.json +1 -1
  187. package/data/schemas/form-group.schema.json +3 -2
  188. package/data/schemas/form-header.schema.json +1 -1
  189. package/data/schemas/form-label.schema.json +1 -0
  190. package/data/schemas/form-message.schema.json +1 -1
  191. package/data/schemas/grid-list.schema.json +1 -1
  192. package/data/schemas/input-group.schema.json +1 -1
  193. package/data/schemas/layout-panel.schema.json +1 -1
  194. package/data/schemas/page.schema.json +1 -1
  195. package/data/schemas/quick-view.schema.json +2 -1
  196. package/data/schemas/section.schema.json +1 -1
  197. package/data/schemas/side-nav.schema.json +1 -1
  198. package/data/schemas/splitter.schema.json +1 -1
  199. package/data/schemas/tabs.schema.json +1 -1
  200. package/data/schemas/tile.schema.json +1 -1
  201. package/data/schemas/tool-layout.schema.json +1 -1
  202. package/data/schemas/user-menu.schema.json +10 -0
  203. package/data/schemas/wizard.schema.json +1 -1
  204. package/package.json +1 -1
  205. package/src/data/load-catalog.d.ts +2 -0
  206. package/src/data/load-catalog.js +5 -1
  207. package/src/data/load-catalog.js.map +1 -1
  208. package/src/data/load-markdown-docs.d.ts +44 -0
  209. package/src/data/load-markdown-docs.js +179 -0
  210. package/src/data/load-markdown-docs.js.map +1 -0
  211. package/src/data/markdown-cache.d.ts +60 -0
  212. package/src/data/markdown-cache.js +218 -0
  213. package/src/data/markdown-cache.js.map +1 -0
  214. package/src/server.js +72 -1
  215. package/src/server.js.map +1 -1
package/data/components/message-page-upload-collection.md ADDED
@@ -0,0 +1,678 @@
1
+ ---
2
+ component: fd-message-page
3
+ title: Components/Upload Collection
4
+ category: Components
5
+ selector: fd-message-page
6
+ cssFile: message-page.css
7
+ sourcePath: packages/styles/stories/Components/upload-collection/upload-collection.stories.js
8
+ tags: []
9
+ dependencies: ["button","form-group","icon","input","link","list","message-page","object-marker","object-status","upload-collection"]
10
+ relatedComponents: ["button","form-group","icon","input","link","list","message-page","object-marker","object-status","upload-collection"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.626Z
13
+ ---
14
+
15
+ # Components/Upload Collection
16
+
17
+ The upload collection control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to the SAP app. Typically, uploaded files appear in an Attachments tab. However, files can also be displayed elsewhere.
18
+
19
+ ##Usage
20
+
21
+ **Use the upload collection if:**
22
+
23
+ - You want to show a list of uploaded files that can be modified.
24
+ - You want to allow users to add or remove files, and to change the file names.
25
+ - You are still using the old sap.ca.ui.FileUpload control.
26
+
27
+ **Do not use the byline list if:**
28
+
29
+ - The user can upload only one file to the app. In this case, use the File Uploader control instead.
30
+
31
+ ##Elements
32
+ The upload collection is essentially a byline list with a few additional elements
33
+
34
+ | Modifier/Class | Description |
35
+ | :--------------- | :--------------- |
36
+ | \
37
+
38
+ ## Usage Guidelines
39
+
40
+ **Use the upload collection if:**
41
+
42
+ - You want to show a list of uploaded files that can be modified.
43
+ - You want to allow users to add or remove files, and to change the file names.
44
+ - You are still using the old sap.ca.ui.FileUpload control.
45
+
46
+ ## When Not To Use
47
+
48
+ - The user can upload only one file to the app. In this case, use the File Uploader control instead.
49
+
50
+ ## Dependencies
51
+
52
+ This component depends on the following CSS files:
53
+
54
+ - `button.css`
55
+ - `form-group.css`
56
+ - `icon.css`
57
+ - `input.css`
58
+ - `link.css`
59
+ - `list.css`
60
+ - `message-page.css`
61
+ - `object-marker.css`
62
+ - `object-status.css`
63
+ - `upload-collection.css`
64
+
65
+ ## Installation
66
+
67
+ ```bash
68
+ npm install fundamental-styles
69
+ ```
70
+
71
+ ```html
72
+ <!-- Include theme -->
73
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
74
+
75
+ <!-- Include component CSS -->
76
+ <link href="node_modules/fundamental-styles/dist/message-page.css" rel="stylesheet">
77
+
78
+ <!-- Include dependencies -->
79
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
80
+ <link href="node_modules/fundamental-styles/dist/form-group.css" rel="stylesheet">
81
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
82
+ <link href="node_modules/fundamental-styles/dist/input.css" rel="stylesheet">
83
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
84
+ <link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
85
+ <link href="node_modules/fundamental-styles/dist/message-page.css" rel="stylesheet">
86
+ <link href="node_modules/fundamental-styles/dist/object-marker.css" rel="stylesheet">
87
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
88
+ <link href="node_modules/fundamental-styles/dist/upload-collection.css" rel="stylesheet">
89
+ ```
90
+
91
+ ## Basic Usage
92
+
93
+ ```html
94
+ <ul class="fd-list fd-list--byline fd-upload-collection" role="list">
95
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
96
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
97
+ <div class="fd-list__content">
98
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
99
+ <div class="fd-upload-collection__description">
100
+ This is the file description
101
+ <span class="fd-upload-collection__text-separator"> </span>
102
+ This is an additional description
103
+ </div>
104
+ <div class="fd-upload-collection__status-group">
105
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
106
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
107
+ </span>
108
+ <span class="fd-upload-collection__text-separator"> </span>
109
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
110
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
111
+ </span>
112
+ </div>
113
+ </div>
114
+ <div class="fd-upload-collection__button-group">
115
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
116
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
117
+ </div>
118
+ </li>
119
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interactive fd-upload-collection__item--interactive fd-upload-collection__item">
120
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
121
+ <div class="fd-list__content">
122
+ <div class="fd-upload-collection__title-container">
123
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
124
+ <div class="fd-object-marker">
125
+ <i class="fd-object-marker__icon sap-icon--request" aria-label="icon for request" role="img"></i>
126
+ </div>
127
+ <div class="fd-object-marker">
128
+ <i class="fd-object-marker__icon sap-icon--favorite" aria-label="icon for favourite" role="img"></i>
129
+ </div>
130
+ </div>
131
+ <div class="fd-upload-collection__description">
132
+ This is the file description
133
+ <span class="fd-upload-collection__text-separator"> </span>
134
+ This is an additional description
135
+ </div>
136
+ <div class="fd-upload-collection__status-group">
137
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
138
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
139
+ </span>
140
+ <span class="fd-upload-collection__text-separator"> </span>
141
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
142
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
143
+ </span>
144
+ </div>
145
+ </div>
146
+ <div class="fd-upload-collection__button-group">
147
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
148
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
149
+ </div>
150
+ </li>
151
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
152
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
153
+ <div class="fd-list__content">
154
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
155
+ <div class="fd-upload-collection__description">
156
+ This is the file description
157
+ <span class="fd-upload-collection__text-separator"> </span>
158
+ This is an additional description
159
+ </div>
160
+ <div class="fd-upload-collection__status-group">
161
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
162
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
163
+ </span>
164
+ <span class="fd-upload-collection__text-separator"> </span>
165
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
166
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
167
+ </span>
168
+ </div>
169
+ </div>
170
+ <div class="fd-upload-collection__button-group">
171
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
172
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
173
+ </div>
174
+ </li>
175
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
176
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
177
+ <div class="fd-list__content">
178
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">
179
+ Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_File_Name.extension
180
+ </a>
181
+ <div class="fd-upload-collection__description">
182
+ This is the long long long long long long long long long long long long long long long long long long long file description
183
+ <span class="fd-upload-collection__text-separator"> </span>
184
+ This is an long long long long long long long long long long long long long long long long long long long additional description
185
+ </div>
186
+ <div class="fd-upload-collection__status-group">
187
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
188
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">
189
+ This is a long long long long long long long long long long long negative status
190
+ </span>
191
+ </span>
192
+ <span class="fd-upload-collection__text-separator"> </span>
193
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
194
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">
195
+ This is a long long long long long long long long long long long positive status
196
+ </span>
197
+ </span>
198
+ </div>
199
+ </div>
200
+ <div class="fd-upload-collection__button-group">
201
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
202
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
203
+ </div>
204
+ </li>
205
+ </ul>
206
+
207
+ <ul class="fd-list fd-list--byline fd-upload-collection fd-upload-collection--sm" role="list">
208
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
209
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
210
+ <div class="fd-list__content">
211
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
212
+ <div class="fd-upload-collection__description">
213
+ This is the file description
214
+ <span class="fd-upload-collection__text-separator"> </span>
215
+ This is an additional description
216
+ </div>
217
+ <div class="fd-upload-collection__status-group">
218
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
219
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
220
+ </span>
221
+ <span class="fd-upload-collection__text-separator"> </span>
222
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
223
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
224
+ </span>
225
+ </div>
226
+ </div>
227
+ <div class="fd-upload-collection__button-group">
228
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
229
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
230
+ </div>
231
+ </li>
232
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
233
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
234
+ <div class="fd-list__content">
235
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
236
+ <div class="fd-upload-collection__description">
237
+ This is the file description
238
+ <span class="fd-upload-collection__text-separator"> </span>
239
+ This is an additional description
240
+ </div>
241
+ <div class="fd-upload-collection__status-group">
242
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
243
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
244
+ </span>
245
+ <span class="fd-upload-collection__text-separator"> </span>
246
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
247
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
248
+ </span>
249
+ </div>
250
+ </div>
251
+ <div class="fd-upload-collection__button-group">
252
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
253
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
254
+ </div>
255
+ </li>
256
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
257
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
258
+ <div class="fd-list__content">
259
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
260
+ <div class="fd-upload-collection__description">
261
+ This is the file description
262
+ <span class="fd-upload-collection__text-separator"> </span>
263
+ This is an additional description
264
+ </div>
265
+ <div class="fd-upload-collection__status-group">
266
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
267
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
268
+ </span>
269
+ <span class="fd-upload-collection__text-separator"> </span>
270
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
271
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
272
+ </span>
273
+ </div>
274
+ </div>
275
+ <div class="fd-upload-collection__button-group">
276
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
277
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
278
+ </div>
279
+ </li>
280
+ </ul>
281
+ ```
282
+
283
+ ## BEM Elements
284
+
285
+ This component uses the following BEM elements:
286
+
287
+ - `fd-message-page__container`
288
+ - `fd-message-page__content`
289
+ - `fd-message-page__icon`
290
+ - `fd-message-page__icon-container`
291
+ - `fd-message-page__subtitle`
292
+ - `fd-message-page__title`
293
+
294
+ ## Related Components
295
+
296
+ This component works with or depends on:
297
+
298
+ - `button`
299
+ - `form-group`
300
+ - `icon`
301
+ - `input`
302
+ - `link`
303
+ - `list`
304
+ - `message-page`
305
+ - `object-marker`
306
+ - `object-status`
307
+ - `upload-collection`
308
+
309
+ ## Design Tokens
310
+
311
+ Key CSS variables used by this component:
312
+
313
+ - `--center`
314
+ - `--fdMessage_Page_Container_Background`
315
+ - `--fdMessage_Page_Container_Corner_Radius`
316
+ - `--fdMessage_Page_Title_Margin_Bottom`
317
+ - `--fdMessage_Page_Title_Margin_Top`
318
+ - `--sapBackgroundColor`
319
+ - `--sapContent_LabelColor`
320
+ - `--sapContent_NonInteractiveIconColor`
321
+ - `--sapFontHeader2Size`
322
+ - `--sapFontHeader5Size`
323
+ - `--sapGroup_TitleTextColor`
324
+
325
+ ## Examples
326
+
327
+ ### Default
328
+
329
+ The default upload collection.
330
+
331
+ ```html
332
+ <ul class="fd-list fd-list--byline fd-upload-collection" role="list">
333
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
334
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
335
+ <div class="fd-list__content">
336
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
337
+ <div class="fd-upload-collection__description">
338
+ This is the file description
339
+ <span class="fd-upload-collection__text-separator"> </span>
340
+ This is an additional description
341
+ </div>
342
+ <div class="fd-upload-collection__status-group">
343
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
344
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
345
+ </span>
346
+ <span class="fd-upload-collection__text-separator"> </span>
347
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
348
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
349
+ </span>
350
+ </div>
351
+ </div>
352
+ <div class="fd-upload-collection__button-group">
353
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
354
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
355
+ </div>
356
+ </li>
357
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interactive fd-upload-collection__item--interactive fd-upload-collection__item">
358
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
359
+ <div class="fd-list__content">
360
+ <div class="fd-upload-collection__title-container">
361
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
362
+ <div class="fd-object-marker">
363
+ <i class="fd-object-marker__icon sap-icon--request" aria-label="icon for request" role="img"></i>
364
+ </div>
365
+ <div class="fd-object-marker">
366
+ <i class="fd-object-marker__icon sap-icon--favorite" aria-label="icon for favourite" role="img"></i>
367
+ </div>
368
+ </div>
369
+ <div class="fd-upload-collection__description">
370
+ This is the file description
371
+ <span class="fd-upload-collection__text-separator"> </span>
372
+ This is an additional description
373
+ </div>
374
+ <div class="fd-upload-collection__status-group">
375
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
376
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
377
+ </span>
378
+ <span class="fd-upload-collection__text-separator"> </span>
379
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
380
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
381
+ </span>
382
+ </div>
383
+ </div>
384
+ <div class="fd-upload-collection__button-group">
385
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
386
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
387
+ </div>
388
+ </li>
389
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
390
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
391
+ <div class="fd-list__content">
392
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
393
+ <div class="fd-upload-collection__description">
394
+ This is the file description
395
+ <span class="fd-upload-collection__text-separator"> </span>
396
+ This is an additional description
397
+ </div>
398
+ <div class="fd-upload-collection__status-group">
399
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
400
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
401
+ </span>
402
+ <span class="fd-upload-collection__text-separator"> </span>
403
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
404
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
405
+ </span>
406
+ </div>
407
+ </div>
408
+ <div class="fd-upload-collection__button-group">
409
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
410
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
411
+ </div>
412
+ </li>
413
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
414
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
415
+ <div class="fd-list__content">
416
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">
417
+ Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_Long_File_Name.extension
418
+ </a>
419
+ <div class="fd-upload-collection__description">
420
+ This is the long long long long long long long long long long long long long long long long long long long file description
421
+ <span class="fd-upload-collection__text-separator"> </span>
422
+ This is an long long long long long long long long long long long long long long long long long long long additional description
423
+ </div>
424
+ <div class="fd-upload-collection__status-group">
425
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
426
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">
427
+ This is a long long long long long long long long long long long negative status
428
+ </span>
429
+ </span>
430
+ <span class="fd-upload-collection__text-separator"> </span>
431
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
432
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">
433
+ This is a long long long long long long long long long long long positive status
434
+ </span>
435
+ </span>
436
+ </div>
437
+ </div>
438
+ <div class="fd-upload-collection__button-group">
439
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
440
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
441
+ </div>
442
+ </li>
443
+ </ul>
444
+
445
+ <ul class="fd-list fd-list--byline fd-upload-collection fd-upload-collection--sm" role="list">
446
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
447
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
448
+ <div class="fd-list__content">
449
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
450
+ <div class="fd-upload-collection__description">
451
+ This is the file description
452
+ <span class="fd-upload-collection__text-separator"> </span>
453
+ This is an additional description
454
+ </div>
455
+ <div class="fd-upload-collection__status-group">
456
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
457
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
458
+ </span>
459
+ <span class="fd-upload-collection__text-separator"> </span>
460
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
461
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
462
+ </span>
463
+ </div>
464
+ </div>
465
+ <div class="fd-upload-collection__button-group">
466
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
467
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
468
+ </div>
469
+ </li>
470
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
471
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
472
+ <div class="fd-list__content">
473
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
474
+ <div class="fd-upload-collection__description">
475
+ This is the file description
476
+ <span class="fd-upload-collection__text-separator"> </span>
477
+ This is an additional description
478
+ </div>
479
+ <div class="fd-upload-collection__status-group">
480
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
481
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
482
+ </span>
483
+ <span class="fd-upload-collection__text-separator"> </span>
484
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
485
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
486
+ </span>
487
+ </div>
488
+ </div>
489
+ <div class="fd-upload-collection__button-group">
490
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
491
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
492
+ </div>
493
+ </li>
494
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
495
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
496
+ <div class="fd-list__content">
497
+ <a href="#" class="fd-list__title fd-link fd-upload-collection__title">File_Name.extension</a>
498
+ <div class="fd-upload-collection__description">
499
+ This is the file description
500
+ <span class="fd-upload-collection__text-separator"> </span>
501
+ This is an additional description
502
+ </div>
503
+ <div class="fd-upload-collection__status-group">
504
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
505
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
506
+ </span>
507
+ <span class="fd-upload-collection__text-separator"> </span>
508
+ <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
509
+ <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a positive status</span>
510
+ </span>
511
+ </div>
512
+ </div>
513
+ <div class="fd-upload-collection__button-group">
514
+ <button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
515
+ <button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
516
+ </div>
517
+ </li>
518
+ </ul>
519
+ ```
520
+
521
+ ### Edit
522
+
523
+ Users can activate edit mode where the file name can be changed.
524
+
525
+ ```html
526
+ <h4>Edit Mode</h4>
527
+
528
+ <ul class="fd-list fd-list--byline fd-upload-collection" role="list">
529
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
530
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
531
+ <div class="fd-list__content">
532
+ <div class="fd-upload-collection__form-item">
533
+ <input class="fd-input" type="text" placeholder="Filename">
534
+ <span class="fd-upload-collection__extension">.jpg</span>
535
+ </div>
536
+ <div class="fd-upload-collection__description">
537
+ This is the file description
538
+ <span class="fd-upload-collection__text-separator"> </span>
539
+ This is an additional description
540
+ </div>
541
+ </div>
542
+ <div class="fd-upload-collection__button-group">
543
+ <button aria-label="Edit" class="fd-button fd-button--transparent">Ok</button>
544
+ <button aria-label="Delete" class="fd-button fd-button--transparent">Cancel</button>
545
+ </div>
546
+ </li>
547
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
548
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
549
+ <div class="fd-list__content">
550
+ <div class="fd-upload-collection__form-item">
551
+ <input class="fd-input" type="text" placeholder="Filename">
552
+ <span class="fd-upload-collection__extension">.jpg</span>
553
+ </div>
554
+ <div class="fd-upload-collection__description">
555
+ This is the file description
556
+ <span class="fd-upload-collection__text-separator"> </span>
557
+ This is an additional description
558
+ </div>
559
+ </div>
560
+ <div class="fd-upload-collection__button-group">
561
+ <button aria-label="Edit" class="fd-button fd-button--transparent">Ok</button>
562
+ <button aria-label="Delete" class="fd-button fd-button--transparent">Cancel</button>
563
+ </div>
564
+ </li>
565
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
566
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
567
+ <div class="fd-list__content">
568
+ <div class="fd-upload-collection__form-item">
569
+ <input class="fd-input" type="text" placeholder="Filename">
570
+ <span class="fd-upload-collection__extension">.jpg</span>
571
+ </div>
572
+ <div class="fd-upload-collection__description">
573
+ This is the file description
574
+ <span class="fd-upload-collection__text-separator"> </span>
575
+ This is an additional description
576
+ </div>
577
+ </div>
578
+ <div class="fd-upload-collection__button-group">
579
+ <button aria-label="Edit" class="fd-button fd-button--transparent">Ok</button>
580
+ <button aria-label="Delete" class="fd-button fd-button--transparent">Cancel</button>
581
+ </div>
582
+ </li>
583
+ </ul>
584
+
585
+ <h4>Edit Mode - small</h4>
586
+
587
+ <ul class="fd-list fd-list--byline fd-upload-collection fd-upload-collection--sm" role="list">
588
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
589
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
590
+ <div class="fd-list__content">
591
+ <div class="fd-upload-collection__form-item">
592
+ <input class="fd-input" type="text" placeholder="Filename">
593
+ <span class="fd-upload-collection__extension">.jpg</span>
594
+ </div>
595
+ <div class="fd-upload-collection__description">
596
+ This is the file description
597
+ <span class="fd-upload-collection__text-separator"> </span>
598
+ This is an additional description
599
+ </div>
600
+ </div>
601
+ <div class="fd-upload-collection__button-group">
602
+ <button aria-label="Edit" class="fd-button">Ok</button>
603
+ <button aria-label="Delete" class="fd-button">Cancel</button>
604
+ </div>
605
+ </li>
606
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
607
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
608
+ <div class="fd-list__content">
609
+ <div class="fd-upload-collection__form-item">
610
+ <input class="fd-input" type="text" placeholder="Filename">
611
+ <span class="fd-upload-collection__extension">.jpg</span>
612
+ </div>
613
+ <div class="fd-upload-collection__description">
614
+ This is the file description
615
+ <span class="fd-upload-collection__text-separator"> </span>
616
+ This is an additional description
617
+ </div>
618
+ </div>
619
+ <div class="fd-upload-collection__button-group">
620
+ <button aria-label="Edit" class="fd-button">Ok</button>
621
+ <button aria-label="Delete" class="fd-button">Cancel</button>
622
+ </div>
623
+ </li>
624
+ <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
625
+ <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
626
+ <div class="fd-list__content">
627
+ <div class="fd-upload-collection__form-item">
628
+ <input class="fd-input" type="text" placeholder="Filename">
629
+ <span class="fd-upload-collection__extension">.jpg</span>
630
+ </div>
631
+ <div class="fd-upload-collection__description">
632
+ This is the file description
633
+ <span class="fd-upload-collection__text-separator"> </span>
634
+ This is an additional description
635
+ </div>
636
+ </div>
637
+ <div class="fd-upload-collection__button-group">
638
+ <button aria-label="Edit" class="fd-button">Ok</button>
639
+ <button aria-label="Delete" class="fd-button">Cancel</button>
640
+ </div>
641
+ </li>
642
+ </ul>
643
+ ```
644
+
645
+ ### NoData
646
+
647
+ Use a message page component when the user has yet to upload any files.
648
+
649
+ ```html
650
+ <div class="fd-message-page">
651
+ <div class="fd-message-page__container">
652
+ <div class="fd-message-page__icon-container">
653
+ <i role="presentation" class="sap-icon--attachment fd-message-page__icon"></i>
654
+ <div role="status" aria-live="polite" class="fd-message-page__content">
655
+ <div class="fd-message-page__title">
656
+ No files found.
657
+ </div>
658
+ <div class="fd-message-page__subtitle">
659
+ Drop files to upload, or use the "+" button.
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ ```
666
+
667
+ ## Accessibility
668
+
669
+ - Use semantic HTML elements where appropriate
670
+ - Include proper ARIA attributes for interactive elements
671
+ - Ensure keyboard navigation support
672
+ - Provide adequate color contrast
673
+
674
+ ## Source
675
+
676
+ This documentation was automatically generated from: `packages/styles/stories/Components/upload-collection/upload-collection.stories.js`
677
+
678
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).