@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/page.md ADDED
@@ -0,0 +1,300 @@
1
+ ---
2
+ component: fd-page
3
+ title: Layouts/Page
4
+ category: Layouts
5
+ selector: fd-page
6
+ cssFile: page.css
7
+ sourcePath: packages/styles/stories/Layouts/page/page.stories.js
8
+ tags: []
9
+ dependencies: ["bar","button","form-item","form-label","icon","input","page"]
10
+ relatedComponents: ["bar","button","form-item","form-label","icon","input","page"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.662Z
13
+ ---
14
+
15
+ # Layouts/Page
16
+
17
+ - \
18
+
19
+ ## Dependencies
20
+
21
+ This component depends on the following CSS files:
22
+
23
+ - `bar.css`
24
+ - `button.css`
25
+ - `form-item.css`
26
+ - `form-label.css`
27
+ - `icon.css`
28
+ - `input.css`
29
+ - `page.css`
30
+
31
+ ## Installation
32
+
33
+ ```bash
34
+ npm install fundamental-styles
35
+ ```
36
+
37
+ ```html
38
+ <!-- Include theme -->
39
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
40
+
41
+ <!-- Include component CSS -->
42
+ <link href="node_modules/fundamental-styles/dist/page.css" rel="stylesheet">
43
+
44
+ <!-- Include dependencies -->
45
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
46
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
47
+ <link href="node_modules/fundamental-styles/dist/form-item.css" rel="stylesheet">
48
+ <link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
49
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
50
+ <link href="node_modules/fundamental-styles/dist/input.css" rel="stylesheet">
51
+ <link href="node_modules/fundamental-styles/dist/page.css" rel="stylesheet">
52
+ ```
53
+
54
+ ## Basic Usage
55
+
56
+ ```html
57
+ <main class="fd-page">
58
+ <header>
59
+ <div class="fd-bar fd-bar--page fd-bar--header">
60
+ <div class="fd-bar__left">
61
+ <div class="fd-bar__element">
62
+ <button class="fd-button fd-button--transparent" aria-label="Go back">
63
+ <i class="sap-icon--navigation-left-arrow"></i>
64
+ </button>
65
+ </div>
66
+ <div class="fd-bar__element">
67
+ Header Title
68
+ </div>
69
+ </div>
70
+ <div class="fd-bar__right">
71
+ <div class="fd-bar__element">
72
+ <button class="fd-button fd-button--transparent" aria-label="See more">
73
+ <i class="sap-icon--grid"></i>
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </header>
79
+ <div class="fd-page__content" role="region">
80
+ Page Content
81
+ </div>
82
+ <footer>
83
+ <div class="fd-bar fd-bar--page fd-bar--footer">
84
+ <div class="fd-bar__right">
85
+ <div class="fd-bar__element">
86
+ <button class="fd-button fd-button--emphasized">Save</button>
87
+ </div>
88
+ <div class="fd-bar__element">
89
+ <button class="fd-button fd-button--transparent">Cancel</button>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </footer>
94
+ </main>
95
+ ```
96
+
97
+ ## Modifiers
98
+
99
+ | Class | Description |
100
+ |-------|-------------|
101
+ | `fd-page--home` | Home page with List Background Design, Floating Footer and Responsive Behaviour - XL |
102
+ | `fd-page--list` | Home page with List Background Design, Floating Footer and Responsive Behaviour - XL |
103
+ | `fd-page--transparent` | Page with Transparent Background Design, Header with SubHeader, and Responsive Behaviour - M_L |
104
+
105
+ ## BEM Elements
106
+
107
+ This component uses the following BEM elements:
108
+
109
+ - `fd-page__content`
110
+ - `fd-page__content--m`
111
+ - `fd-page__content--xl`
112
+
113
+ ## Related Components
114
+
115
+ This component works with or depends on:
116
+
117
+ - `bar`
118
+ - `button`
119
+ - `form-item`
120
+ - `form-label`
121
+ - `icon`
122
+ - `input`
123
+ - `page`
124
+
125
+ ## Design Tokens
126
+
127
+ Key CSS variables used by this component:
128
+
129
+ - `--S`
130
+ - `--fdPage_Background`
131
+ - `--fdPage_List_Background`
132
+ - `--fdPage_Transparent_Background`
133
+ - `--home`
134
+ - `--list`
135
+ - `--m_l`
136
+ - `--s`
137
+ - `--sapBackgroundColor`
138
+ - `--solid`
139
+ - `--transparent`
140
+ - `--xl`
141
+
142
+ ## Examples
143
+
144
+ ### BasicPage
145
+
146
+ ```html
147
+ <main class="fd-page">
148
+ <header>
149
+ <div class="fd-bar fd-bar--page fd-bar--header">
150
+ <div class="fd-bar__left">
151
+ <div class="fd-bar__element">
152
+ <button class="fd-button fd-button--transparent" aria-label="Go back">
153
+ <i class="sap-icon--navigation-left-arrow"></i>
154
+ </button>
155
+ </div>
156
+ <div class="fd-bar__element">
157
+ Header Title
158
+ </div>
159
+ </div>
160
+ <div class="fd-bar__right">
161
+ <div class="fd-bar__element">
162
+ <button class="fd-button fd-button--transparent" aria-label="See more">
163
+ <i class="sap-icon--grid"></i>
164
+ </button>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </header>
169
+ <div class="fd-page__content" role="region">
170
+ Page Content
171
+ </div>
172
+ <footer>
173
+ <div class="fd-bar fd-bar--page fd-bar--footer">
174
+ <div class="fd-bar__right">
175
+ <div class="fd-bar__element">
176
+ <button class="fd-button fd-button--emphasized">Save</button>
177
+ </div>
178
+ <div class="fd-bar__element">
179
+ <button class="fd-button fd-button--transparent">Cancel</button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </footer>
184
+ </main>
185
+ ```
186
+
187
+ ### TransparentPage
188
+
189
+ Page with Transparent Background Design, Header with SubHeader, and Responsive Behaviour - M_L
190
+
191
+ ```html
192
+ <main class="fd-page fd-page--transparent">
193
+ <header>
194
+ <div class="fd-bar fd-bar--page-m_l fd-bar--header-with-subheader">
195
+ <div class="fd-bar__left">
196
+ <div class="fd-bar__element">
197
+ <button class="fd-button fd-button--transparent" aria-label="Go back">
198
+ <i class="sap-icon--navigation-left-arrow"></i>
199
+ </button>
200
+ </div>
201
+ <div class="fd-bar__element">
202
+ Header Title
203
+ </div>
204
+ </div>
205
+ <div class="fd-bar__right">
206
+ <div class="fd-bar__element">
207
+ <button class="fd-button fd-button--transparent" aria-label="See more">
208
+ <i class="sap-icon--overflow"></i>
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </header>
214
+ <div class="fd-bar fd-bar--page-m_l fd-bar--subheader">
215
+ <div class="fd-bar__middle">
216
+ <div class="fd-bar__element fd-bar__element--full-width">
217
+ <div class="fd-form-item fd-form-item--horizontal">
218
+ <label class="fd-form-label" for="input-1">
219
+ Field Text:
220
+ </label>
221
+ <input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text">
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ <div class="fd-page__content--m_l" role="region">
227
+ Page Content
228
+ </div>
229
+ <footer>
230
+ <div class="fd-bar fd-bar--page-m_l fd-bar--footer">
231
+ <div class="fd-bar__right">
232
+ <div class="fd-bar__element">
233
+ <button class="fd-button fd-button--emphasized">Save</button>
234
+ </div>
235
+ <div class="fd-bar__element">
236
+ <button class="fd-button fd-button--transparent">Cancel</button>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </footer>
241
+ </main>
242
+ ```
243
+
244
+ ### ResponsivePage
245
+
246
+ Home page with List Background Design, Floating Footer and Responsive Behaviour - XL
247
+
248
+ ```html
249
+ <main class="fd-page fd-page--home fd-page--list">
250
+ <header>
251
+ <div class="fd-bar fd-bar--home-page-xl fd-bar--header">
252
+ <div class="fd-bar__left">
253
+ <div class="fd-bar__element">
254
+ <button class="fd-button fd-button--transparent" aria-label="Go back">
255
+ <i class="sap-icon--navigation-left-arrow"></i>
256
+ </button>
257
+ </div>
258
+ <div class="fd-bar__element">
259
+ Header Title
260
+ </div>
261
+ </div>
262
+ <div class="fd-bar__right">
263
+ <div class="fd-bar__element">
264
+ <button class="fd-button fd-button--transparent" aria-label="See more">
265
+ <i class="sap-icon--overflow"></i>
266
+ </button>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </header>
271
+ <div class="fd-page__content--xl" role="region">
272
+ Page Content
273
+ </div>
274
+ <footer>
275
+ <div class="fd-bar fd-bar--home-page-xl fd-bar--floating-footer">
276
+ <div class="fd-bar__right">
277
+ <div class="fd-bar__element">
278
+ <button class="fd-button fd-button--emphasized">Save</button>
279
+ </div>
280
+ <div class="fd-bar__element">
281
+ <button class="fd-button fd-button--transparent">Cancel</button>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </footer>
286
+ </main>
287
+ ```
288
+
289
+ ## Accessibility
290
+
291
+ - Use semantic HTML elements where appropriate
292
+ - Include proper ARIA attributes for interactive elements
293
+ - Ensure keyboard navigation support
294
+ - Provide adequate color contrast
295
+
296
+ ## Source
297
+
298
+ This documentation was automatically generated from: `packages/styles/stories/Layouts/page/page.stories.js`
299
+
300
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).