@fundamental-styles/mcp 0.41.7-rc.9 → 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 (214) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +44 -0
  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/schemas/badge.schema.json +1 -1
  177. package/data/schemas/button-split.schema.json +1 -1
  178. package/data/schemas/component-frontmatter.schema.json +123 -0
  179. package/data/schemas/component-markdown.schema.json +81 -0
  180. package/data/schemas/counter.schema.json +1 -1
  181. package/data/schemas/dynamic-page.schema.json +1 -1
  182. package/data/schemas/dynamic-side-content.schema.json +1 -1
  183. package/data/schemas/facet.schema.json +1 -1
  184. package/data/schemas/fieldset.schema.json +1 -1
  185. package/data/schemas/flexible-column-layout.schema.json +1 -1
  186. package/data/schemas/form-group.schema.json +3 -2
  187. package/data/schemas/form-header.schema.json +1 -1
  188. package/data/schemas/form-label.schema.json +1 -0
  189. package/data/schemas/form-message.schema.json +1 -1
  190. package/data/schemas/grid-list.schema.json +1 -1
  191. package/data/schemas/input-group.schema.json +1 -1
  192. package/data/schemas/layout-panel.schema.json +1 -1
  193. package/data/schemas/page.schema.json +1 -1
  194. package/data/schemas/quick-view.schema.json +2 -1
  195. package/data/schemas/section.schema.json +1 -1
  196. package/data/schemas/side-nav.schema.json +1 -1
  197. package/data/schemas/splitter.schema.json +1 -1
  198. package/data/schemas/tabs.schema.json +1 -1
  199. package/data/schemas/tile.schema.json +1 -1
  200. package/data/schemas/tool-layout.schema.json +1 -1
  201. package/data/schemas/user-menu.schema.json +10 -0
  202. package/data/schemas/wizard.schema.json +1 -1
  203. package/package.json +1 -1
  204. package/src/data/load-catalog.d.ts +2 -0
  205. package/src/data/load-catalog.js +5 -1
  206. package/src/data/load-catalog.js.map +1 -1
  207. package/src/data/load-markdown-docs.d.ts +44 -0
  208. package/src/data/load-markdown-docs.js +179 -0
  209. package/src/data/load-markdown-docs.js.map +1 -0
  210. package/src/data/markdown-cache.d.ts +60 -0
  211. package/src/data/markdown-cache.js +218 -0
  212. package/src/data/markdown-cache.js.map +1 -0
  213. package/src/server.js +72 -1
  214. package/src/server.js.map +1 -1
package/data/components/prompt-input.md ADDED
@@ -0,0 +1,226 @@
1
+ ---
2
+ component: fd-prompt-input
3
+ title: Components/Forms/Prompt Input
4
+ category: Components
5
+ selector: fd-prompt-input
6
+ cssFile: prompt-input.css
7
+ sourcePath: packages/styles/stories/Components/Forms/prompt-input/prompt-input.stories.js
8
+ tags: ["ai","experimental"]
9
+ dependencies: []
10
+ relatedComponents: []
11
+ stability: experimental
12
+ generatedAt: 2026-06-09T18:29:01.590Z
13
+ ---
14
+
15
+ # Components/Forms/Prompt Input
16
+
17
+ > **🧪 EXPERIMENTAL**: This component is experimental and its API may change.
18
+
19
+ The Prompt Input component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.
20
+ <br><b>Note: The component is in an experimental state.</b>
21
+
22
+ ## Installation
23
+
24
+ ```bash
25
+ npm install fundamental-styles
26
+ ```
27
+
28
+ ```html
29
+ <!-- Include theme -->
30
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
31
+
32
+ <!-- Include component CSS -->
33
+ <link href="node_modules/fundamental-styles/dist/prompt-input.css" rel="stylesheet">
34
+
35
+ ```
36
+
37
+ ## Basic Usage
38
+
39
+ ```html
40
+ <h4>User prompt with no input</h4>
41
+ <div>
42
+ <div class="fd-prompt-input">
43
+ <label class="fd-form-label" for="input-1">User prompt:</label>
44
+ <div class="fd-prompt-input__wrapper">
45
+ <div class="fd-prompt-input__inner-wrapper">
46
+ <div class="fd-input-group">
47
+ <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Ask me anything..." id="input-1">
48
+ <span class="fd-input-group__addon fd-input-group__addon--button">
49
+ <button class="fd-input-group__button fd-button fd-button--transparent fd-button" aria-label="Clear">
50
+ <i class="sap-icon--decline"></i>
51
+ </button>
52
+ </span>
53
+ </div>
54
+ <span class="fd-prompt-input__counter">10 characters remaining</span>
55
+ </div>
56
+ <button aria-label="Add to cart" class="fd-button fd-button--emphasized" disabled>
57
+ <i class="sap-icon--paper-plane"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ <h4>User prompt with input</h4>
64
+ <div>
65
+ <div class="fd-prompt-input">
66
+ <label class="fd-form-label" for="input-1">User prompt:</label>
67
+ <div class="fd-prompt-input__wrapper">
68
+ <div class="fd-prompt-input__inner-wrapper">
69
+ <div class="fd-input-group">
70
+ <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Ask me anything..." value="input">
71
+ <span class="fd-input-group__addon fd-input-group__addon--button">
72
+ <button class="fd-input-group__button fd-button fd-button--transparent fd-button" aria-label="Clear">
73
+ <i class="sap-icon--decline"></i>
74
+ </button>
75
+ </span>
76
+ </div>
77
+ <span class="fd-prompt-input__counter">5 characters remaining</span>
78
+ </div>
79
+ <button aria-label="Add to cart" class="fd-button fd-button--emphasized">
80
+ <i class="sap-icon--paper-plane"></i>
81
+ </button>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <h4>User prompt with input and error</h4>
87
+ <div>
88
+ <div class="fd-prompt-input">
89
+ <label class="fd-form-label" for="input-1">User prompt:</label>
90
+ <div class="fd-prompt-input__wrapper">
91
+ <div class="fd-prompt-input__inner-wrapper">
92
+ <div class="fd-form-input-message-group fd-popover">
93
+ <div class="fd-popover__control" aria-controls="popoverError" aria-expanded="true" aria-haspopup="true">
94
+ <div class="fd-input-group is-error">
95
+ <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Ask me anything..." value="exceeding characters">
96
+ <span class="fd-input-group__addon fd-input-group__addon--button">
97
+ <button class="fd-input-group__button fd-button fd-button--transparent fd-button" aria-label="Clear">
98
+ <i class="sap-icon--decline"></i>
99
+ </button>
100
+ </span>
101
+ </div>
102
+ </div>
103
+ <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false" id="popoverError">
104
+ <div class="fd-form-message fd-form-message--error" >Error message</div>
105
+ </div>
106
+ </div>
107
+ <span class="fd-prompt-input__counter">10 characters over the limit</span>
108
+ </div>
109
+ <button aria-label="Add to cart" class="fd-button fd-button--emphasized">
110
+ <i class="sap-icon--paper-plane"></i>
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ ```
116
+
117
+ ## States
118
+
119
+ | Class | Description |
120
+ |-------|-------------|
121
+ | `is-error` | Error state |
122
+
123
+ ## BEM Elements
124
+
125
+ This component uses the following BEM elements:
126
+
127
+ - `fd-prompt-input__counter`
128
+ - `fd-prompt-input__inner-wrapper`
129
+ - `fd-prompt-input__wrapper`
130
+
131
+ ## Examples
132
+
133
+ ### Basic Sample
134
+
135
+ The Prompt Input is built on top of [Input Group](https://fundamental-styles.netlify.app/?path=/docs/sap-fiori-components-forms-input-group--docs) and inherits its states (disabled, read-only, information, etc.).
136
+
137
+ ```html
138
+ <h4>User prompt with no input</h4>
139
+ <div>
140
+ <div class="fd-prompt-input">
141
+ <label class="fd-form-label" for="input-1">User prompt:</label>
142
+ <div class="fd-prompt-input__wrapper">
143
+ <div class="fd-prompt-input__inner-wrapper">
144
+ <div class="fd-input-group">
145
+ <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Ask me anything..." id="input-1">
146
+ <span class="fd-input-group__addon fd-input-group__addon--button">
147
+ <button class="fd-input-group__button fd-button fd-button--transparent fd-button" aria-label="Clear">
148
+ <i class="sap-icon--decline"></i>
149
+ </button>
150
+ </span>
151
+ </div>
152
+ <span class="fd-prompt-input__counter">10 characters remaining</span>
153
+ </div>
154
+ <button aria-label="Add to cart" class="fd-button fd-button--emphasized" disabled>
155
+ <i class="sap-icon--paper-plane"></i>
156
+ </button>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <h4>User prompt with input</h4>
162
+ <div>
163
+ <div class="fd-prompt-input">
164
+ <label class="fd-form-label" for="input-1">User prompt:</label>
165
+ <div class="fd-prompt-input__wrapper">
166
+ <div class="fd-prompt-input__inner-wrapper">
167
+ <div class="fd-input-group">
168
+ <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Ask me anything..." value="input">
169
+ <span class="fd-input-group__addon fd-input-group__addon--button">
170
+ <button class="fd-input-group__button fd-button fd-button--transparent fd-button" aria-label="Clear">
171
+ <i class="sap-icon--decline"></i>
172
+ </button>
173
+ </span>
174
+ </div>
175
+ <span class="fd-prompt-input__counter">5 characters remaining</span>
176
+ </div>
177
+ <button aria-label="Add to cart" class="fd-button fd-button--emphasized">
178
+ <i class="sap-icon--paper-plane"></i>
179
+ </button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <h4>User prompt with input and error</h4>
185
+ <div>
186
+ <div class="fd-prompt-input">
187
+ <label class="fd-form-label" for="input-1">User prompt:</label>
188
+ <div class="fd-prompt-input__wrapper">
189
+ <div class="fd-prompt-input__inner-wrapper">
190
+ <div class="fd-form-input-message-group fd-popover">
191
+ <div class="fd-popover__control" aria-controls="popoverError" aria-expanded="true" aria-haspopup="true">
192
+ <div class="fd-input-group is-error">
193
+ <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Ask me anything..." value="exceeding characters">
194
+ <span class="fd-input-group__addon fd-input-group__addon--button">
195
+ <button class="fd-input-group__button fd-button fd-button--transparent fd-button" aria-label="Clear">
196
+ <i class="sap-icon--decline"></i>
197
+ </button>
198
+ </span>
199
+ </div>
200
+ </div>
201
+ <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false" id="popoverError">
202
+ <div class="fd-form-message fd-form-message--error" >Error message</div>
203
+ </div>
204
+ </div>
205
+ <span class="fd-prompt-input__counter">10 characters over the limit</span>
206
+ </div>
207
+ <button aria-label="Add to cart" class="fd-button fd-button--emphasized">
208
+ <i class="sap-icon--paper-plane"></i>
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ ```
214
+
215
+ ## Accessibility
216
+
217
+ - Use semantic HTML elements where appropriate
218
+ - Include proper ARIA attributes for interactive elements
219
+ - Ensure keyboard navigation support
220
+ - Provide adequate color contrast
221
+
222
+ ## Source
223
+
224
+ This documentation was automatically generated from: `packages/styles/stories/Components/Forms/prompt-input/prompt-input.stories.js`
225
+
226
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).