@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-btp.md ADDED
@@ -0,0 +1,198 @@
1
+ ---
2
+ component: fd-avatar
3
+ title: BTP/Avatar
4
+ category: BTP
5
+ selector: fd-avatar
6
+ cssFile: avatar.css
7
+ sourcePath: packages/styles/stories/BTP/avatar/avatar.stories.js
8
+ tags: ["btp","horizon-only"]
9
+ dependencies: ["btp/avatar","icon"]
10
+ relatedComponents: ["icon"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.655Z
13
+ ---
14
+
15
+ # BTP/Avatar
16
+
17
+ This is an extension to the <a href="https://fundamental-styles.netlify.app/?path=/docs/components-avatar--icon">Avatar</a> which introduces additional avatar sizes that are consumed by components and patterns in the BTP area.
18
+
19
+ ## Sizes
20
+
21
+ | **Size** | **rem** | **Modifier class** |
22
+ | :---------: | :----------: | :---------------: |
23
+ | 40 | &nbsp;&nbsp; &nbsp;&nbsp;2.5 rem&nbsp;&nbsp; &nbsp;&nbsp; | &nbsp;&nbsp; &nbsp;&nbsp; \
24
+
25
+ ## Dependencies
26
+
27
+ This component depends on the following CSS files:
28
+
29
+ - `btp/avatar.css`
30
+ - `icon.css`
31
+
32
+ ## Installation
33
+
34
+ ```bash
35
+ npm install fundamental-styles
36
+ ```
37
+
38
+ ```html
39
+ <!-- Include theme -->
40
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
41
+
42
+ <!-- Include component CSS -->
43
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
44
+
45
+ <!-- Include dependencies -->
46
+ <link href="node_modules/fundamental-styles/dist/btp/avatar.css" rel="stylesheet">
47
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
48
+ ```
49
+
50
+ ## Basic Usage
51
+
52
+ ```html
53
+ <span class="fd-avatar fd-avatar--40" role="presentation">
54
+ <i role="presentation" class="fd-avatar__icon sap-icon--washing-machine"></i>
55
+ </span>
56
+ <span class="fd-avatar fd-avatar--96" role="presentation">
57
+ <i role="presentation" class="fd-avatar__icon sap-icon--washing-machine"></i>
58
+ </span>
59
+ ```
60
+
61
+ ## Modifiers
62
+
63
+ | Class | Description |
64
+ |-------|-------------|
65
+ | `fd-avatar--accent-color-` | Style variant |
66
+ | `fd-avatar--circle` | Style variant |
67
+ | `fd-avatar--thumbnail` | Style variant |
68
+ | `fd-avatar--transparent` | Style variant |
69
+
70
+ ## BEM Elements
71
+
72
+ This component uses the following BEM elements:
73
+
74
+ - `fd-avatar__icon`
75
+
76
+ ## Related Components
77
+
78
+ This component works with or depends on:
79
+
80
+ - `icon`
81
+
82
+ ## Design Tokens
83
+
84
+ Key CSS variables used by this component:
85
+
86
+ - `--accent-color-`
87
+ - `--background-contain`
88
+ - `--border`
89
+ - `--circle`
90
+ - `--fdAvatarActiveColor`
91
+ - `--fdAvatarActiveHoverColor`
92
+ - `--fdAvatarBackgroundActiveColor`
93
+ - `--fdAvatarBackgroundActiveHoverColor`
94
+ - `--fdAvatarBackgroundColor`
95
+ - `--fdAvatarBackgroundSize`
96
+ - `--fdAvatarBorderActiveColor`
97
+ - `--fdAvatarBorderActiveHoverColor`
98
+ - `--fdAvatarBorderColor`
99
+ - `--fdAvatarBorderHoverColor`
100
+ - `--fdAvatarBorderRadius`
101
+
102
+ *...and 5 more*
103
+
104
+ ## Examples
105
+
106
+ ### Icon
107
+
108
+ ```html
109
+ <span class="fd-avatar fd-avatar--40" role="presentation">
110
+ <i role="presentation" class="fd-avatar__icon sap-icon--washing-machine"></i>
111
+ </span>
112
+ <span class="fd-avatar fd-avatar--96" role="presentation">
113
+ <i role="presentation" class="fd-avatar__icon sap-icon--washing-machine"></i>
114
+ </span>
115
+ ```
116
+
117
+ ### Initials
118
+
119
+ ```html
120
+ <span class="fd-avatar fd-avatar--40 fd-avatar--accent-color-1" aria-label="Wendy Wallace">AlK</span>
121
+ <span class="fd-avatar fd-avatar--96 fd-avatar--accent-color-2" aria-label="Wendy Wallace">AlK</span>
122
+ ```
123
+
124
+ ### Circle
125
+
126
+ ```html
127
+ <span class="fd-avatar fd-avatar--40 fd-avatar--circle" aria-label="Avatar">
128
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
129
+ </span>
130
+
131
+ <span class="fd-avatar fd-avatar--96 fd-avatar--circle" aria-label="Wendy Wallace">AlK</span>
132
+ ```
133
+
134
+ ### BackgroundImage
135
+
136
+ ```html
137
+ <span class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail" role="img" aria-label="John Doe"></span>
138
+
139
+ <span class="fd-avatar fd-avatar--96 fd-avatar--circle fd-avatar--thumbnail" role="img" aria-label="John Doe"></span>
140
+ ```
141
+
142
+ ### Transparent
143
+
144
+ ```html
145
+ <span class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--transparent" aria-label="Avatar">
146
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
147
+ </span>
148
+
149
+ <span class="fd-avatar fd-avatar--96 fd-avatar--circle fd-avatar--transparent" aria-label="Wendy Wallace">WW</span>
150
+ ```
151
+
152
+ ### AccentColors
153
+
154
+ ```html
155
+ <span class="fd-avatar fd-avatar--accent-color-1 fd-avatar--40" aria-label="Avatar">
156
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
157
+ </span>
158
+ <span class="fd-avatar fd-avatar--accent-color-2 fd-avatar--40" aria-label="Avatar">
159
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
160
+ </span>
161
+ <span class="fd-avatar fd-avatar--accent-color-3 fd-avatar--40" aria-label="Avatar">
162
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
163
+ </span>
164
+ <span class="fd-avatar fd-avatar--accent-color-4 fd-avatar--40" aria-label="Avatar">
165
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
166
+ </span>
167
+ <span class="fd-avatar fd-avatar--accent-color-5 fd-avatar--40" aria-label="Avatar">
168
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
169
+ </span>
170
+ <span class="fd-avatar fd-avatar--accent-color-6 fd-avatar--96" aria-label="Avatar">
171
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
172
+ </span>
173
+ <span class="fd-avatar fd-avatar--accent-color-7 fd-avatar--96" aria-label="Avatar">
174
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
175
+ </span>
176
+ <span class="fd-avatar fd-avatar--accent-color-8 fd-avatar--96" aria-label="Avatar">
177
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
178
+ </span>
179
+ <span class="fd-avatar fd-avatar--accent-color-9 fd-avatar--96" aria-label="Avatar">
180
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
181
+ </span>
182
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--96" aria-label="Avatar">
183
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
184
+ </span>
185
+ ```
186
+
187
+ ## Accessibility
188
+
189
+ - Use semantic HTML elements where appropriate
190
+ - Include proper ARIA attributes for interactive elements
191
+ - Ensure keyboard navigation support
192
+ - Provide adequate color contrast
193
+
194
+ ## Source
195
+
196
+ This documentation was automatically generated from: `packages/styles/stories/BTP/avatar/avatar.stories.js`
197
+
198
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).