@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/avatar-product-switch.md ADDED
@@ -0,0 +1,476 @@
1
+ ---
2
+ component: fd-avatar
3
+ title: Components/Product Switch
4
+ category: Components
5
+ selector: fd-avatar
6
+ cssFile: avatar.css
7
+ sourcePath: packages/styles/stories/Components/product-switch/product-switch.stories.js
8
+ tags: []
9
+ dependencies: ["avatar","button","icon","popover","product-switch","shellbar"]
10
+ relatedComponents: ["avatar","button","icon","popover","product-switch","shellbar"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.588Z
13
+ ---
14
+
15
+ # Components/Product Switch
16
+
17
+ The product switch provides users with role-based access to several products or lines of businesses (LoBs). The product switch displays an icon button that triggers a **Popover** with the products or LoBs. Because it is designed to be as simple as possible, the product switch only has one level of navigation.
18
+
19
+ ##Usage
20
+ **Use the product switch if:**
21
+
22
+ - You want give your users access to several different products or LoBs within the same UI.
23
+
24
+
25
+ **Do not use the product switch if:**
26
+
27
+ - You want your users to navigate within the current product. In this case, use a product menu (see **Shellbar**).
28
+
29
+ ## Usage Guidelines
30
+
31
+ **Use the product switch if:**
32
+
33
+ - You want give your users access to several different products or LoBs within the same UI.
34
+
35
+ ## When Not To Use
36
+
37
+ - You want your users to navigate within the current product. In this case, use a product menu (see **Shellbar**).
38
+
39
+ ## Dependencies
40
+
41
+ This component depends on the following CSS files:
42
+
43
+ - `avatar.css`
44
+ - `button.css`
45
+ - `icon.css`
46
+ - `popover.css`
47
+ - `product-switch.css`
48
+ - `shellbar.css`
49
+
50
+ ## Installation
51
+
52
+ ```bash
53
+ npm install fundamental-styles
54
+ ```
55
+
56
+ ```html
57
+ <!-- Include theme -->
58
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
59
+
60
+ <!-- Include component CSS -->
61
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
62
+
63
+ <!-- Include dependencies -->
64
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
65
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
66
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
67
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
68
+ <link href="node_modules/fundamental-styles/dist/product-switch.css" rel="stylesheet">
69
+ <link href="node_modules/fundamental-styles/dist/shellbar.css" rel="stylesheet">
70
+ ```
71
+
72
+ ## Basic Usage
73
+
74
+ ```html
75
+ <div class="fd-product-switch__body">
76
+ <ul class="fd-product-switch__list">
77
+ <li class="fd-product-switch__item" tabindex="0">
78
+ <i role="presentation" class="fd-product-switch__icon sap-icon--home"></i>
79
+ <div class="fd-product-switch__text">
80
+ <div class="fd-product-switch__title">Home</div>
81
+ <div class="fd-product-switch__subtitle">Central Home</div>
82
+ </div>
83
+ </li>
84
+ <li class="fd-product-switch__item selected" tabindex="0">
85
+ <span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Avatar landscape"></span>
86
+ <div class="fd-product-switch__text">
87
+ <div class="fd-product-switch__title">Analytics Cloud Analytics CloudAnalytics CloudAnalytics Cloud</div>
88
+ <div class="fd-product-switch__subtitle">Analytics Cloud</div>
89
+ </div>
90
+ </li>
91
+ <li class="fd-product-switch__item" tabindex="0">
92
+ <i role="presentation" class="fd-product-switch__icon sap-icon--contacts"></i>
93
+ <div class="fd-product-switch__text">
94
+ <div class="fd-product-switch__title">Catalog</div>
95
+ <div class="fd-product-switch__subtitle">Ariba</div>
96
+ </div>
97
+ </li>
98
+ <li class="fd-product-switch__item" tabindex="0">
99
+ <i role="presentation" class="fd-product-switch__icon sap-icon--credit-card"></i>
100
+ <div class="fd-product-switch__text">
101
+ <div class="fd-product-switch__title">Guided Buying</div>
102
+ </div>
103
+ </li>
104
+ <li class="fd-product-switch__item" tabindex="0">
105
+ <i role="presentation" class="fd-product-switch__icon sap-icon--cart-3"></i>
106
+ <div class="fd-product-switch__text">
107
+ <div class="fd-product-switch__title">Strategic Procurement</div>
108
+ </div>
109
+ </li>
110
+ <li class="fd-product-switch__item" tabindex="0">
111
+ <i role="presentation" class="fd-product-switch__icon sap-icon--flight"></i>
112
+ <div class="fd-product-switch__text">
113
+ <div class="fd-product-switch__title">Travel & Expense</div>
114
+ <div class="fd-product-switch__subtitle">Concur</div>
115
+ </div>
116
+ </li>
117
+ <li class="fd-product-switch__item" tabindex="0">
118
+ <i role="presentation" class="fd-product-switch__icon sap-icon--shipping-status"></i>
119
+ <div class="fd-product-switch__text">
120
+ <div class="fd-product-switch__title">Vendor Management</div>
121
+ <div class="fd-product-switch__subtitle">Fieldglass</div>
122
+ </div>
123
+ </li>
124
+ <li class="fd-product-switch__item" tabindex="0">
125
+ <i role="presentation" class="fd-product-switch__icon sap-icon--customer"></i>
126
+ <div class="fd-product-switch__text">
127
+ <div class="fd-product-switch__title">Human Capital Management Human Capital Management</div>
128
+ </div>
129
+ </li>
130
+ <li class="fd-product-switch__item" tabindex="0">
131
+ <i role="presentation" class="fd-product-switch__icon sap-icon--sales-notification"></i>
132
+ <div class="fd-product-switch__text">
133
+ <div class="fd-product-switch__title">Sales Cloud</div>
134
+ <div class="fd-product-switch__subtitle">Sales Cloud</div>
135
+ </div>
136
+ </li>
137
+ <li class="fd-product-switch__item" tabindex="0">
138
+ <i role="presentation" class="fd-product-switch__icon sap-icon--retail-store"></i>
139
+ <div class="fd-product-switch__text">
140
+ <div class="fd-product-switch__title">Commerce Cloud</div>
141
+ <div class="fd-product-switch__subtitle">Commerce Cloud</div>
142
+ </div>
143
+ </li>
144
+ <li class="fd-product-switch__item" tabindex="0">
145
+ <i role="presentation" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
146
+ <div class="fd-product-switch__text">
147
+ <div class="fd-product-switch__title">Marketing Cloud</div>
148
+ <div class="fd-product-switch__subtitle">Marketing Cloud</div>
149
+ </div>
150
+ </li>
151
+ <li class="fd-product-switch__item" tabindex="0">
152
+ <i role="presentation" class="fd-product-switch__icon sap-icon--family-care"></i>
153
+ <div class="fd-product-switch__text">
154
+ <div class="fd-product-switch__title">Service Cloud</div>
155
+ </div>
156
+ </li>
157
+ <li class="fd-product-switch__item" tabindex="0">
158
+ <i role="presentation" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
159
+ <div class="fd-product-switch__text">
160
+ <div class="fd-product-switch__title">Customer Data Cloud</div>
161
+ </div>
162
+ </li>
163
+ <li class="fd-product-switch__item" tabindex="0">
164
+ <i role="presentation" class="fd-product-switch__icon sap-icon--batch-payments"></i>
165
+ <div class="fd-product-switch__text">
166
+ <div class="fd-product-switch__title">S/4HANA</div>
167
+ </div>
168
+ </li>
169
+ </ul>
170
+ </div>
171
+ ```
172
+
173
+ ## Modifiers
174
+
175
+ | Class | Description |
176
+ |-------|-------------|
177
+ | `fd-avatar--sm` | For smaller screens (mobile), the product switch is displayed in list format |
178
+ | `fd-avatar--thumbnail` | Style variant |
179
+
180
+ ## Related Components
181
+
182
+ This component works with or depends on:
183
+
184
+ - `avatar`
185
+ - `button`
186
+ - `icon`
187
+ - `popover`
188
+ - `product-switch`
189
+ - `shellbar`
190
+
191
+ ## Design Tokens
192
+
193
+ Key CSS variables used by this component:
194
+
195
+ - `--accent-color-`
196
+ - `--background-contain`
197
+ - `--border`
198
+ - `--circle`
199
+ - `--fdAvatarActiveColor`
200
+ - `--fdAvatarActiveHoverColor`
201
+ - `--fdAvatarBackgroundActiveColor`
202
+ - `--fdAvatarBackgroundActiveHoverColor`
203
+ - `--fdAvatarBackgroundColor`
204
+ - `--fdAvatarBackgroundSize`
205
+ - `--fdAvatarBorderActiveColor`
206
+ - `--fdAvatarBorderActiveHoverColor`
207
+ - `--fdAvatarBorderColor`
208
+ - `--fdAvatarBorderHoverColor`
209
+ - `--fdAvatarBorderRadius`
210
+
211
+ *...and 5 more*
212
+
213
+ ## Examples
214
+
215
+ ### Large
216
+
217
+ Product switch is displayed with a maximum of 4 columns on large desktop screens. When the popover contains too many items, it will grow until the maximum is reached. Once the maximum is reached, the popover can be scrolled vertically.
218
+
219
+ ```html
220
+ <div class="fd-product-switch__body">
221
+ <ul class="fd-product-switch__list">
222
+ <li class="fd-product-switch__item" tabindex="0">
223
+ <i role="presentation" class="fd-product-switch__icon sap-icon--home"></i>
224
+ <div class="fd-product-switch__text">
225
+ <div class="fd-product-switch__title">Home</div>
226
+ <div class="fd-product-switch__subtitle">Central Home</div>
227
+ </div>
228
+ </li>
229
+ <li class="fd-product-switch__item selected" tabindex="0">
230
+ <span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Avatar landscape"></span>
231
+ <div class="fd-product-switch__text">
232
+ <div class="fd-product-switch__title">Analytics Cloud Analytics CloudAnalytics CloudAnalytics Cloud</div>
233
+ <div class="fd-product-switch__subtitle">Analytics Cloud</div>
234
+ </div>
235
+ </li>
236
+ <li class="fd-product-switch__item" tabindex="0">
237
+ <i role="presentation" class="fd-product-switch__icon sap-icon--contacts"></i>
238
+ <div class="fd-product-switch__text">
239
+ <div class="fd-product-switch__title">Catalog</div>
240
+ <div class="fd-product-switch__subtitle">Ariba</div>
241
+ </div>
242
+ </li>
243
+ <li class="fd-product-switch__item" tabindex="0">
244
+ <i role="presentation" class="fd-product-switch__icon sap-icon--credit-card"></i>
245
+ <div class="fd-product-switch__text">
246
+ <div class="fd-product-switch__title">Guided Buying</div>
247
+ </div>
248
+ </li>
249
+ <li class="fd-product-switch__item" tabindex="0">
250
+ <i role="presentation" class="fd-product-switch__icon sap-icon--cart-3"></i>
251
+ <div class="fd-product-switch__text">
252
+ <div class="fd-product-switch__title">Strategic Procurement</div>
253
+ </div>
254
+ </li>
255
+ <li class="fd-product-switch__item" tabindex="0">
256
+ <i role="presentation" class="fd-product-switch__icon sap-icon--flight"></i>
257
+ <div class="fd-product-switch__text">
258
+ <div class="fd-product-switch__title">Travel & Expense</div>
259
+ <div class="fd-product-switch__subtitle">Concur</div>
260
+ </div>
261
+ </li>
262
+ <li class="fd-product-switch__item" tabindex="0">
263
+ <i role="presentation" class="fd-product-switch__icon sap-icon--shipping-status"></i>
264
+ <div class="fd-product-switch__text">
265
+ <div class="fd-product-switch__title">Vendor Management</div>
266
+ <div class="fd-product-switch__subtitle">Fieldglass</div>
267
+ </div>
268
+ </li>
269
+ <li class="fd-product-switch__item" tabindex="0">
270
+ <i role="presentation" class="fd-product-switch__icon sap-icon--customer"></i>
271
+ <div class="fd-product-switch__text">
272
+ <div class="fd-product-switch__title">Human Capital Management Human Capital Management</div>
273
+ </div>
274
+ </li>
275
+ <li class="fd-product-switch__item" tabindex="0">
276
+ <i role="presentation" class="fd-product-switch__icon sap-icon--sales-notification"></i>
277
+ <div class="fd-product-switch__text">
278
+ <div class="fd-product-switch__title">Sales Cloud</div>
279
+ <div class="fd-product-switch__subtitle">Sales Cloud</div>
280
+ </div>
281
+ </li>
282
+ <li class="fd-product-switch__item" tabindex="0">
283
+ <i role="presentation" class="fd-product-switch__icon sap-icon--retail-store"></i>
284
+ <div class="fd-product-switch__text">
285
+ <div class="fd-product-switch__title">Commerce Cloud</div>
286
+ <div class="fd-product-switch__subtitle">Commerce Cloud</div>
287
+ </div>
288
+ </li>
289
+ <li class="fd-product-switch__item" tabindex="0">
290
+ <i role="presentation" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
291
+ <div class="fd-product-switch__text">
292
+ <div class="fd-product-switch__title">Marketing Cloud</div>
293
+ <div class="fd-product-switch__subtitle">Marketing Cloud</div>
294
+ </div>
295
+ </li>
296
+ <li class="fd-product-switch__item" tabindex="0">
297
+ <i role="presentation" class="fd-product-switch__icon sap-icon--family-care"></i>
298
+ <div class="fd-product-switch__text">
299
+ <div class="fd-product-switch__title">Service Cloud</div>
300
+ </div>
301
+ </li>
302
+ <li class="fd-product-switch__item" tabindex="0">
303
+ <i role="presentation" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
304
+ <div class="fd-product-switch__text">
305
+ <div class="fd-product-switch__title">Customer Data Cloud</div>
306
+ </div>
307
+ </li>
308
+ <li class="fd-product-switch__item" tabindex="0">
309
+ <i role="presentation" class="fd-product-switch__icon sap-icon--batch-payments"></i>
310
+ <div class="fd-product-switch__text">
311
+ <div class="fd-product-switch__title">S/4HANA</div>
312
+ </div>
313
+ </li>
314
+ </ul>
315
+ </div>
316
+ ```
317
+
318
+ ### Medium
319
+
320
+ If there are 6 (or less) items to display, it is recommended to use the 3-column layout (medium). To display a medium-sized product switch, add the \
321
+
322
+ ```html
323
+ <div class="fd-product-switch__body fd-product-switch__body--col-3">
324
+ <ul class="fd-product-switch__list">
325
+ <li class="fd-product-switch__item" tabindex="0">
326
+ <i role="presentation" class="fd-product-switch__icon sap-icon--home"></i>
327
+ <div class="fd-product-switch__text">
328
+ <div class="fd-product-switch__title">Home</div>
329
+ <div class="fd-product-switch__subtitle">Central Home</div>
330
+ </div>
331
+ </li>
332
+ <li class="fd-product-switch__item selected" tabindex="0">
333
+ <span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Avatar landscape"></span>
334
+ <div class="fd-product-switch__text">
335
+ <div class="fd-product-switch__title">Analytics Cloud</div>
336
+ <div class="fd-product-switch__subtitle">Analytics Cloud</div>
337
+ </div>
338
+ </li>
339
+ <li class="fd-product-switch__item" tabindex="0">
340
+ <i role="presentation" class="fd-product-switch__icon sap-icon--contacts"></i>
341
+ <div class="fd-product-switch__text">
342
+ <div class="fd-product-switch__title">Catalog</div>
343
+ <div class="fd-product-switch__subtitle">Ariba</div>
344
+ </div>
345
+ </li>
346
+ <li class="fd-product-switch__item" tabindex="0">
347
+ <i role="presentation" class="fd-product-switch__icon sap-icon--credit-card"></i>
348
+ <div class="fd-product-switch__text">
349
+ <div class="fd-product-switch__title">Guided Buying</div>
350
+ </div>
351
+ </li>
352
+ <li class="fd-product-switch__item" tabindex="0">
353
+ <i role="presentation" class="fd-product-switch__icon sap-icon--cart-3"></i>
354
+ <div class="fd-product-switch__text">
355
+ <div class="fd-product-switch__title">Strategic Procurement</div>
356
+ </div>
357
+ </li>
358
+ </ul>
359
+ </div>
360
+ ```
361
+
362
+ ### Small
363
+
364
+ For smaller screens (mobile), the product switch is displayed in list format. To achieve this style, add the \
365
+
366
+ ```html
367
+ <div class="fd-product-switch__body fd-product-switch__body--mobile">
368
+ <ul class="fd-product-switch__list">
369
+ <li class="fd-product-switch__item" tabindex="0">
370
+ <i role="presentation" class="fd-product-switch__icon sap-icon--home"></i>
371
+ <div class="fd-product-switch__text">
372
+ <div class="fd-product-switch__title">Home</div>
373
+ <div class="fd-product-switch__subtitle">Central Home</div>
374
+ </li>
375
+ <li class="fd-product-switch__item selected" tabindex="0">
376
+ <i role="presentation" class="fd-product-switch__icon sap-icon--business-objects-experience"></i>
377
+ <div class="fd-product-switch__text">
378
+ <div class="fd-product-switch__title">Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud</div>
379
+ <div class="fd-product-switch__subtitle">Analytics Cloud</div>
380
+ </div>
381
+ </li>
382
+ <li class="fd-product-switch__item" tabindex="0">
383
+ <span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Avatar landscape"></span>
384
+ <div class="fd-product-switch__text">
385
+ <div class="fd-product-switch__title">Catalog</div>
386
+ <div class="fd-product-switch__subtitle">Ariba</div>
387
+ </div>
388
+ </li>
389
+ <li class="fd-product-switch__item" tabindex="0">
390
+ <span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Product logo"></span>
391
+ <div class="fd-product-switch__text">
392
+ <div class="fd-product-switch__title">Guided Buying</div>
393
+ </div>
394
+ </li>
395
+ <li class="fd-product-switch__item" tabindex="0">
396
+ <i role="presentation" class="fd-product-switch__icon sap-icon--cart-3"></i>
397
+ <div class="fd-product-switch__text">
398
+ <div class="fd-product-switch__title">Strategic Procurement</div>
399
+ </div>
400
+ </li>
401
+ <li class="fd-product-switch__item" tabindex="0">
402
+ <i role="presentation" class="fd-product-switch__icon sap-icon--flight"></i>
403
+ <div class="fd-product-switch__text">
404
+ <div class="fd-product-switch__title">Travel & Expense</div>
405
+ <div class="fd-product-switch__subtitle">Concur</div>
406
+ </div>
407
+ </li>
408
+ <li class="fd-product-switch__item" tabindex="0">
409
+ <i role="presentation" class="fd-product-switch__icon sap-icon--shipping-status"></i>
410
+ <div class="fd-product-switch__text">
411
+ <div class="fd-product-switch__title">Vendor Management</div>
412
+ <div class="fd-product-switch__subtitle">Fieldglass</div>
413
+ </div>
414
+ </li>
415
+ <li class="fd-product-switch__item" tabindex="0">
416
+ <i role="presentation" class="fd-product-switch__icon sap-icon--customer"></i>
417
+ <div class="fd-product-switch__text">
418
+ <div class="fd-product-switch__title">Product Management (very long text) ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lacus rhoncus, tempus diam non, mattis tellus. Praesent ut odio ac lorem mollis dapibus. Maecenas turpis libero, placerat et dui ut, sagittis aliquam augue. Etiam et ex tempus, lobortis velit eget, laoreet nibh. Aliquam molestie sem at lectus ullamcorper eleifend. </div>
419
+ </div>
420
+ </li>
421
+ <li class="fd-product-switch__item" tabindex="0">
422
+ <i role="presentation" class="fd-product-switch__icon sap-icon--sales-notification"></i>
423
+ <div class="fd-product-switch__text">
424
+ <div class="fd-product-switch__title">Sales Cloud</div>
425
+ <div class="fd-product-switch__subtitle">Sales Cloud</div>
426
+ </div>
427
+ </li>
428
+ <li class="fd-product-switch__item" tabindex="0">
429
+ <i role="presentation" class="fd-product-switch__icon sap-icon--retail-store"></i>
430
+ <div class="fd-product-switch__text">
431
+ <div class="fd-product-switch__title">Commerce Cloud</div>
432
+ <div class="fd-product-switch__subtitle">Commerce Cloud</div>
433
+ </div>
434
+ </li>
435
+ <li class="fd-product-switch__item" tabindex="0">
436
+ <i role="presentation" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
437
+ <div class="fd-product-switch__text">
438
+ <div class="fd-product-switch__title">Marketing Cloud</div>
439
+ <div class="fd-product-switch__subtitle">Marketing Cloud</div>
440
+ </div>
441
+ </li>
442
+ <li class="fd-product-switch__item" tabindex="0">
443
+ <i role="presentation" class="fd-product-switch__icon sap-icon--family-care"></i>
444
+ <div class="fd-product-switch__text">
445
+ <div class="fd-product-switch__title">Service Cloud</div>
446
+ </div>
447
+ </li>
448
+ <li class="fd-product-switch__item" tabindex="0">
449
+ <i role="presentation" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
450
+ <div class="fd-product-switch__text">
451
+ <div class="fd-product-switch__title">Customer Data Cloud</div>
452
+ </div>
453
+ </li>
454
+ <li class="fd-product-switch__item" tabindex="0">
455
+ <i role="presentation" class="fd-product-switch__icon sap-icon--batch-payments"></i>
456
+ <div class="fd-product-switch__text">
457
+ <div class="fd-product-switch__title">S/4HANA</div>
458
+ </div>
459
+ </li>
460
+ </ul>
461
+ </div>
462
+ </div>
463
+ ```
464
+
465
+ ## Accessibility
466
+
467
+ - Use semantic HTML elements where appropriate
468
+ - Include proper ARIA attributes for interactive elements
469
+ - Ensure keyboard navigation support
470
+ - Provide adequate color contrast
471
+
472
+ ## Source
473
+
474
+ This documentation was automatically generated from: `packages/styles/stories/Components/product-switch/product-switch.stories.js`
475
+
476
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).