@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/layout-panel.md ADDED
@@ -0,0 +1,261 @@
1
+ ---
2
+ component: fd-layout-panel
3
+ title: Layouts/Layout Panel
4
+ category: Layouts
5
+ selector: fd-layout-panel
6
+ cssFile: layout-panel.css
7
+ sourcePath: packages/styles/stories/Layouts/layout-panel/layout-panel.stories.js
8
+ tags: []
9
+ dependencies: ["button","layout-panel","title"]
10
+ relatedComponents: ["button","layout-panel","title"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.723Z
13
+ ---
14
+
15
+ # Layouts/Layout Panel
16
+
17
+ Layout Panels are used to encapsulate part of the content, form elements, lists, collections, etc., on a page.
18
+
19
+ Place patterns and interactions within panels on your pages to achieve focus and separation for the tasks at-hand with the information displayed inside the panel.
20
+
21
+ ## Elements
22
+ - \
23
+
24
+ ## Dependencies
25
+
26
+ This component depends on the following CSS files:
27
+
28
+ - `button.css`
29
+ - `layout-panel.css`
30
+ - `title.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/layout-panel.css" rel="stylesheet">
44
+
45
+ <!-- Include dependencies -->
46
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
47
+ <link href="node_modules/fundamental-styles/dist/layout-panel.css" rel="stylesheet">
48
+ <link href="node_modules/fundamental-styles/dist/title.css" rel="stylesheet">
49
+ ```
50
+
51
+ ## Basic Usage
52
+
53
+ ```html
54
+ <div class="fd-layout-panel">
55
+ <div class="fd-layout-panel__header">
56
+ <div class="fd-layout-panel__head">
57
+ <div class="fd-layout-panel__title">
58
+ <h5 class="fd-title fd-title--h5">
59
+ .fd-layout-panel__title
60
+ </h5>
61
+ </div>
62
+ <p class="fd-layout-panel__description">
63
+ .fd-layout-panel__description
64
+ </p>
65
+ </div>
66
+ <div class="fd-layout-panel__actions">
67
+ .fd-layout-panel__actions
68
+ </div>
69
+ </div>
70
+ <div class="fd-layout-panel__filters" id="">
71
+ .fd-layout-panel__filters
72
+ </div>
73
+ <div class="fd-layout-panel__body">
74
+ .fd-layout-panel__body
75
+ </div>
76
+ <div class="fd-layout-panel__footer">
77
+ .fd-layout-panel__footer
78
+ </div>
79
+ </div>
80
+ ```
81
+
82
+ ## Modifiers
83
+
84
+ | Class | Description |
85
+ |-------|-------------|
86
+ | `fd-layout-panel--transparent` | Style variant |
87
+
88
+ ## BEM Elements
89
+
90
+ This component uses the following BEM elements:
91
+
92
+ - `fd-layout-panel__actions`
93
+ - `fd-layout-panel__body`
94
+ - `fd-layout-panel__description`
95
+ - `fd-layout-panel__filters`
96
+ - `fd-layout-panel__footer`
97
+ - `fd-layout-panel__footer--end`
98
+ - `fd-layout-panel__footer--start`
99
+ - `fd-layout-panel__head`
100
+ - `fd-layout-panel__header`
101
+ - `fd-layout-panel__title`
102
+
103
+ ## Related Components
104
+
105
+ This component works with or depends on:
106
+
107
+ - `button`
108
+ - `layout-panel`
109
+ - `title`
110
+
111
+ ## Design Tokens
112
+
113
+ Key CSS variables used by this component:
114
+
115
+ - `--bleed`
116
+ - `--end`
117
+ - `--full-bleed`
118
+ - `--sapContent_LabelColor`
119
+ - `--sapFontSmallSize`
120
+ - `--sapGroup_ContentBackground`
121
+ - `--sapGroup_TitleBorderColor`
122
+ - `--sapGroup_TitleFontSize`
123
+ - `--sapGroup_TitleTextColor`
124
+ - `--sapGroup_Title_FontSize`
125
+ - `--sapNeutralTextColor`
126
+ - `--start`
127
+ - `--transparent`
128
+
129
+ ## Examples
130
+
131
+ ### Primary
132
+
133
+ ```html
134
+ <div class="fd-layout-panel">
135
+ <div class="fd-layout-panel__header">
136
+ <div class="fd-layout-panel__head">
137
+ <div class="fd-layout-panel__title">
138
+ <h5 class="fd-title fd-title--h5">
139
+ .fd-layout-panel__title
140
+ </h5>
141
+ </div>
142
+ <p class="fd-layout-panel__description">
143
+ .fd-layout-panel__description
144
+ </p>
145
+ </div>
146
+ <div class="fd-layout-panel__actions">
147
+ .fd-layout-panel__actions
148
+ </div>
149
+ </div>
150
+ <div class="fd-layout-panel__filters" id="">
151
+ .fd-layout-panel__filters
152
+ </div>
153
+ <div class="fd-layout-panel__body">
154
+ .fd-layout-panel__body
155
+ </div>
156
+ <div class="fd-layout-panel__footer">
157
+ .fd-layout-panel__footer
158
+ </div>
159
+ </div>
160
+ ```
161
+
162
+ ### TransparentBackground
163
+
164
+ ```html
165
+ <div class="fd-layout-panel fd-layout-panel--transparent">
166
+ <div class="fd-layout-panel__header">
167
+ <div class="fd-layout-panel__head">
168
+ <div class="fd-layout-panel__title">
169
+ <h5 class="fd-title fd-title--h5">
170
+ .fd-layout-panel__title
171
+ </h5>
172
+ </div>
173
+ <p class="fd-layout-panel__description">
174
+ .fd-layout-panel__description
175
+ </p>
176
+ </div>
177
+ <div class="fd-layout-panel__actions">
178
+ <button class="fd-button fd-button--emphasized">Action</button>
179
+ </div>
180
+ </div>
181
+ <div class="fd-layout-panel__filters" id="">
182
+ .fd-layout-panel__filters
183
+ </div>
184
+ <div class="fd-layout-panel__body">
185
+ .fd-layout-panel__body
186
+ </div>
187
+ <div class="fd-layout-panel__footer">
188
+ .fd-layout-panel__footer
189
+ </div>
190
+ </div>
191
+ ```
192
+
193
+ ### FooterVariations
194
+
195
+ ```html
196
+ <div class="fd-layout-panel">
197
+ <div class="fd-layout-panel__header">
198
+ <div class="fd-layout-panel__head">
199
+ <div class="fd-layout-panel__title">
200
+ <h5 class="fd-title fd-title--h5">
201
+ .fd-layout-panel__title
202
+ </h5>
203
+ </div>
204
+ <p class="fd-layout-panel__description">
205
+ .fd-layout-panel__description
206
+ </p>
207
+ </div>
208
+ <div class="fd-layout-panel__actions">
209
+ .fd-layout-panel__actions
210
+ </div>
211
+ </div>
212
+ <div class="fd-layout-panel__filters" id="">
213
+ .fd-layout-panel__filters
214
+ </div>
215
+ <div class="fd-layout-panel__body">
216
+ .fd-layout-panel__body
217
+ </div>
218
+ <div class="fd-layout-panel__footer fd-layout-panel__footer--end">
219
+ .fd-layout-panel__footer.fd-layout-panel__footer--end
220
+ </div>
221
+ </div>
222
+ <div class="fd-layout-panel">
223
+ <div class="fd-layout-panel__header">
224
+ <div class="fd-layout-panel__head">
225
+ <div class="fd-layout-panel__title">
226
+ <h5 class="fd-title fd-title--h5">
227
+ .fd-layout-panel__title
228
+ </h5>
229
+ </div>
230
+ <p class="fd-layout-panel__description">
231
+ .fd-layout-panel__description
232
+ </p>
233
+ </div>
234
+ <div class="fd-layout-panel__actions">
235
+ .fd-layout-panel__actions
236
+ </div>
237
+ </div>
238
+ <div class="fd-layout-panel__filters" id="">
239
+ .fd-layout-panel__filters
240
+ </div>
241
+ <div class="fd-layout-panel__body">
242
+ .fd-layout-panel__body
243
+ </div>
244
+ <div class="fd-layout-panel__footer fd-layout-panel__footer--start">
245
+ .fd-layout-panel__footer.fd-layout-panel__footer--start
246
+ </div>
247
+ </div>
248
+ ```
249
+
250
+ ## Accessibility
251
+
252
+ - Use semantic HTML elements where appropriate
253
+ - Include proper ARIA attributes for interactive elements
254
+ - Ensure keyboard navigation support
255
+ - Provide adequate color contrast
256
+
257
+ ## Source
258
+
259
+ This documentation was automatically generated from: `packages/styles/stories/Layouts/layout-panel/layout-panel.stories.js`
260
+
261
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).