@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/button-ai.md ADDED
@@ -0,0 +1,730 @@
1
+ ---
2
+ component: fd-button
3
+ title: AI/Patterns/Quick Prompt
4
+ category: AI
5
+ selector: fd-button
6
+ cssFile: button.css
7
+ sourcePath: packages/styles/stories/AI/Patterns/ai-quick-prompt/ai-quick-prompt.stories.js
8
+ tags: ["ai","experimental"]
9
+ dependencies: []
10
+ relatedComponents: []
11
+ stability: experimental
12
+ generatedAt: 2026-06-09T18:29:01.755Z
13
+ ---
14
+
15
+ # AI/Patterns/Quick Prompt
16
+
17
+ > **🧪 EXPERIMENTAL**: This component is experimental and its API may change.
18
+
19
+ In generative AI, prompts direct the AI to produce outputs that meet users' needs with high-quality instructions.<br>Quick prompts, integrated into workflows, enable users to execute predefined actions effortlessly. These prompts are designed by prompt engineers who prioritize AI efficiency. <br>
20
+
21
+ <b>Use Quick Prompt: </b>
22
+ <ul>
23
+ <li>for repetitive tasks or common actions within a workflow</li>
24
+ <li>when input options are limited, especially in mobile scenarios</li>
25
+ <li>when the system can only assist with specific actions</li>
26
+ <li>when users lack expertise in the subject matter</li>
27
+ <li>to minimize bias introduced by users' writing prompts</li>
28
+ <li>when consistent and predictable outcomes are essential</li>
29
+ </ul>
30
+
31
+ <b>Do not use Quick Prompt: </b>
32
+
33
+ <ul>
34
+ <li>when a user's intent is unpredictable</li>
35
+ <li>when users need flexibility in directing the AI model's output</li>
36
+ <li>for non-AI-related actions, use a dedicated menu button for those items</li>
37
+ </ul>
38
+
39
+ <b>Note: The component is in an experimental state.</b>
40
+
41
+ ## Installation
42
+
43
+ ```bash
44
+ npm install fundamental-styles
45
+ ```
46
+
47
+ ```html
48
+ <!-- Include theme -->
49
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
50
+
51
+ <!-- Include component CSS -->
52
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
53
+
54
+ ```
55
+
56
+ ## Basic Usage
57
+
58
+ ```html
59
+ <h4>AI Button with Menu in one of the states</h4>
60
+ <button class="fd-button" aria-description="Uses Artificial Intelligence">
61
+ <i class="sap-icon--ai"></i>
62
+ <span class="fd-button__text">Generate</span>
63
+ </button>
64
+
65
+ <button class="fd-button" aria-description="Uses Artificial Intelligence">
66
+ <i class="sap-icon--stop"></i>
67
+ <span class="fd-button__text">Stop Generating</span>
68
+ </button>
69
+
70
+ <button class="fd-button" aria-description="Uses Artificial Intelligence">
71
+ <i class="sap-icon--ai"></i>
72
+ <span class="fd-button__text">Revise</span>
73
+ <i class="sap-icon--slim-arrow-down"></i>
74
+ </button>
75
+
76
+ <div class="fd-popover">
77
+ <div class="fd-popover__control">
78
+ <button class="fd-button" aria-description="Uses Artificial Intelligence">
79
+ <i class="sap-icon--ai"></i>
80
+ <span class="fd-button__text">Revise</span>
81
+ <i class="sap-icon--slim-arrow-down"></i>
82
+ </button>
83
+ </div>
84
+ <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false">
85
+ <nav class="fd-menu">
86
+ <ul class="fd-menu__list" role="menu">
87
+ <li class="fd-menu__item has-separator" role="presentation">
88
+ <a class="fd-menu__link" href="#" role="menuitem">
89
+ <span class="fd-menu__title">Regenerate</span>
90
+ </a>
91
+ </li>
92
+ <li class="fd-menu__item" role="presentation">
93
+ <a class="fd-menu__link" href="#" role="menuitem">
94
+ <span class="fd-menu__title">Fix Spelling & Grammar</span>
95
+ </a>
96
+ </li>
97
+ <li class="fd-menu__item" role="presentation">
98
+ <span
99
+ class="fd-menu__link has-child"
100
+ aria-controls="EX_AI_1"
101
+ aria-expanded="false"
102
+ aria-haspopup="true"
103
+ role="menuitem"
104
+ onclick="onPopoverClick('EX_AI_1')">
105
+ <span class="fd-menu__title">Change Tone</span>
106
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
107
+ </span>
108
+ <ul class="fd-menu__sublist" id="EX_AI_1" aria-hidden="true" role="menu">
109
+ <li class="fd-menu__item" role="presentation">
110
+ <a class="fd-menu__link" href="#" role="menuitem">
111
+ <span class="fd-menu__title">Option 1</span>
112
+ </a>
113
+ </li>
114
+ <li class="fd-menu__item" role="presentation">
115
+ <a class="fd-menu__link" href="#" role="menuitem">
116
+ <span class="fd-menu__title">Option 2</span>
117
+ </a>
118
+ </li>
119
+ <li class="fd-menu__item" role="presentation">
120
+ <a class="fd-menu__link" href="#" role="menuitem">
121
+ <span class="fd-menu__title">Option 3</span>
122
+ </a>
123
+ </li>
124
+ </ul>
125
+ </li>
126
+ <li class="fd-menu__item" role="presentation">
127
+ <span
128
+ class="fd-menu__link has-child"
129
+ aria-controls="EX_AI_2"
130
+ aria-expanded="false"
131
+ aria-haspopup="true"
132
+ role="menuitem"
133
+ onclick="onPopoverClick('EX_AI_2')">
134
+ <span class="fd-menu__title">Text Length</span>
135
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
136
+ </span>
137
+ <ul class="fd-menu__sublist" id="EX_AI_2" aria-hidden="true" role="menu">
138
+ <li class="fd-menu__item" role="presentation">
139
+ <a class="fd-menu__link" href="#" role="menuitem">
140
+ <span class="fd-menu__title">Short</span>
141
+ </a>
142
+ </li>
143
+ <li class="fd-menu__item" role="presentation">
144
+ <a class="fd-menu__link" href="#" role="menuitem">
145
+ <span class="fd-menu__title">Medium</span>
146
+ </a>
147
+ </li>
148
+ <li class="fd-menu__item" role="presentation">
149
+ <a class="fd-menu__link" href="#" role="menuitem">
150
+ <span class="fd-menu__title">Long</span>
151
+ </a>
152
+ </li>
153
+ </ul>
154
+ </li>
155
+ <li class="fd-menu__item" role="presentation">
156
+ <a class="fd-menu__link" href="#" role="menuitem">
157
+ <span class="fd-menu__title">Bulleted List</span>
158
+ </a>
159
+ </li>
160
+ <li class="fd-menu__item" role="presentation">
161
+ <span
162
+ class="fd-menu__link has-child"
163
+ aria-controls="EX_AI_3a"
164
+ aria-expanded="true"
165
+ aria-haspopup="true"
166
+ role="menuitem"
167
+ onclick="onPopoverClick('EX_AI_3a')">
168
+ <span class="fd-menu__title">Translate</span>
169
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
170
+ </span>
171
+ <ul class="fd-menu__sublist" id="EX_AI_3a" aria-hidden="false" role="menu">
172
+ <li class="fd-menu__item" role="presentation">
173
+ <div class="fd-menu__link" role="presentation">
174
+ <div class="fd-input-group">
175
+ <input class="fd-input fd-input-group__input fd-menu__input" type="text" placeholder="Enter a language" id="aqwsde121efaerf" name="">
176
+ <span class="fd-input-group__addon fd-input-group__addon--button">
177
+ <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Navigation">
178
+ <i class="sap-icon--search"></i>
179
+ </button>
180
+ </span>
181
+ </div>
182
+ </div>
183
+ </li>
184
+ <li class="fd-menu__item" role="presentation">
185
+ <a class="fd-menu__link" href="#" role="menuitem">
186
+ <span class="fd-menu__title">English</span>
187
+ </a>
188
+ </li>
189
+ <li class="fd-menu__item" role="presentation">
190
+ <a class="fd-menu__link" href="#" role="menuitem">
191
+ <span class="fd-menu__title">German</span>
192
+ </a>
193
+ </li>
194
+ <li class="fd-menu__item" role="presentation">
195
+ <a class="fd-menu__link" href="#" role="menuitem">
196
+ <span class="fd-menu__title">Spanish</span>
197
+ </a>
198
+ </li>
199
+ <li class="fd-menu__item" role="presentation">
200
+ <a class="fd-menu__link" href="#" role="menuitem">
201
+ <span class="fd-menu__title">Bulgarian</span>
202
+ </a>
203
+ </li>
204
+ <li class="fd-menu__item" role="presentation">
205
+ <a class="fd-menu__link" href="#" role="menuitem">
206
+ <span class="fd-menu__title">Filipino</span>
207
+ </a>
208
+ </li>
209
+ <li class="fd-menu__item" role="presentation">
210
+ <a class="fd-menu__link" href="#" role="menuitem">
211
+ <span class="fd-menu__title">Italian</span>
212
+ </a>
213
+ </li>
214
+ </ul>
215
+ </li>
216
+ </ul>
217
+ </nav>
218
+ </div>
219
+ </div>
220
+
221
+ <h4>Icon-only AI Button with Menu in one of the states</h4>
222
+ <button class="fd-button" aria-label="Generate" aria-description="Uses Artificial Intelligence">
223
+ <i class="sap-icon--ai"></i>
224
+ </button>
225
+
226
+ <button class="fd-button" aria-label="Stop Generating" aria-description="Uses Artificial Intelligence">
227
+ <i class="sap-icon--stop"></i>
228
+ </button>
229
+
230
+ <button class="fd-button" aria-label="Revise" aria-description="Uses Artificial Intelligence">
231
+ <i class="sap-icon--ai"></i>
232
+ <i class="sap-icon--slim-arrow-down"></i>
233
+ </button>
234
+
235
+ <div class="fd-popover">
236
+ <div class="fd-popover__control">
237
+ <button class="fd-button" aria-label="Revise" aria-description="Uses Artificial Intelligence">
238
+ <i class="sap-icon--ai"></i>
239
+ <i class="sap-icon--slim-arrow-down"></i>
240
+ </button>
241
+ </div>
242
+ <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false">
243
+ <nav class="fd-menu">
244
+ <ul class="fd-menu__list" role="menu">
245
+ <li class="fd-menu__item has-separator" role="presentation">
246
+ <a class="fd-menu__link" href="#" role="menuitem">
247
+ <span class="fd-menu__title">Regenerate</span>
248
+ </a>
249
+ </li>
250
+ <li class="fd-menu__item" role="presentation">
251
+ <a class="fd-menu__link" href="#" role="menuitem">
252
+ <span class="fd-menu__title">Fix Spelling & Grammar</span>
253
+ </a>
254
+ </li>
255
+ <li class="fd-menu__item" role="presentation">
256
+ <span
257
+ class="fd-menu__link has-child"
258
+ aria-controls="EX_AI_1b"
259
+ aria-expanded="false"
260
+ aria-haspopup="true"
261
+ role="menuitem"
262
+ onclick="onPopoverClick('EX_AI_1b')">
263
+ <span class="fd-menu__title">Change Tone</span>
264
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
265
+ </span>
266
+ <ul class="fd-menu__sublist" id="EX_AI_1b" aria-hidden="true" role="menu">
267
+ <li class="fd-menu__item" role="presentation">
268
+ <a class="fd-menu__link" href="#" role="menuitem">
269
+ <span class="fd-menu__title">Option 1</span>
270
+ </a>
271
+ </li>
272
+ <li class="fd-menu__item" role="presentation">
273
+ <a class="fd-menu__link" href="#" role="menuitem">
274
+ <span class="fd-menu__title">Option 2</span>
275
+ </a>
276
+ </li>
277
+ <li class="fd-menu__item" role="presentation">
278
+ <a class="fd-menu__link" href="#" role="menuitem">
279
+ <span class="fd-menu__title">Option 3</span>
280
+ </a>
281
+ </li>
282
+ </ul>
283
+ </li>
284
+ <li class="fd-menu__item" role="presentation">
285
+ <span
286
+ class="fd-menu__link has-child"
287
+ aria-controls="EX_AI_2b"
288
+ aria-expanded="false"
289
+ aria-haspopup="true"
290
+ role="menuitem"
291
+ onclick="onPopoverClick('EX_AI_2b')">
292
+ <span class="fd-menu__title">Text Length</span>
293
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
294
+ </span>
295
+ <ul class="fd-menu__sublist" id="EX_AI_2b" aria-hidden="true" role="menu">
296
+ <li class="fd-menu__item" role="presentation">
297
+ <a class="fd-menu__link" href="#" role="menuitem">
298
+ <span class="fd-menu__title">Short</span>
299
+ </a>
300
+ </li>
301
+ <li class="fd-menu__item" role="presentation">
302
+ <a class="fd-menu__link" href="#" role="menuitem">
303
+ <span class="fd-menu__title">Medium</span>
304
+ </a>
305
+ </li>
306
+ <li class="fd-menu__item" role="presentation">
307
+ <a class="fd-menu__link" href="#" role="menuitem">
308
+ <span class="fd-menu__title">Long</span>
309
+ </a>
310
+ </li>
311
+ </ul>
312
+ </li>
313
+ <li class="fd-menu__item" role="presentation">
314
+ <a class="fd-menu__link" href="#" role="menuitem">
315
+ <span class="fd-menu__title">Bulleted List</span>
316
+ </a>
317
+ </li>
318
+ <li class="fd-menu__item" role="presentation">
319
+ <span
320
+ class="fd-menu__link has-child"
321
+ aria-controls="EX_AI_3b"
322
+ aria-expanded="false"
323
+ aria-haspopup="true"
324
+ role="menuitem"
325
+ onclick="onPopoverClick('EX_AI_3b')">
326
+ <span class="fd-menu__title">Translate</span>
327
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
328
+ </span>
329
+ <ul class="fd-menu__sublist" id="EX_AI_3b" aria-hidden="true" role="menu">
330
+ <li class="fd-menu__item" role="presentation">
331
+ <div class="fd-menu__link" role="presentation">
332
+ <div class="fd-input-group">
333
+ <input class="fd-input fd-input-group__input fd-menu__input" type="text" placeholder="Enter a language" id="aqwsde121efaerf" name="">
334
+ <span class="fd-input-group__addon fd-input-group__addon--button">
335
+ <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Navigation">
336
+ <i class="sap-icon--search"></i>
337
+ </button>
338
+ </span>
339
+ </div>
340
+ </div>
341
+ </li>
342
+ <li class="fd-menu__item" role="presentation">
343
+ <a class="fd-menu__link" href="#" role="menuitem">
344
+ <span class="fd-menu__title">English</span>
345
+ </a>
346
+ </li>
347
+ <li class="fd-menu__item" role="presentation">
348
+ <a class="fd-menu__link" href="#" role="menuitem">
349
+ <span class="fd-menu__title">German</span>
350
+ </a>
351
+ </li>
352
+ <li class="fd-menu__item" role="presentation">
353
+ <a class="fd-menu__link" href="#" role="menuitem">
354
+ <span class="fd-menu__title">Spanish</span>
355
+ </a>
356
+ </li>
357
+ <li class="fd-menu__item" role="presentation">
358
+ <a class="fd-menu__link" href="#" role="menuitem">
359
+ <span class="fd-menu__title">Bulgarian</span>
360
+ </a>
361
+ </li>
362
+ <li class="fd-menu__item" role="presentation">
363
+ <a class="fd-menu__link" href="#" role="menuitem">
364
+ <span class="fd-menu__title">Filipino</span>
365
+ </a>
366
+ </li>
367
+ <li class="fd-menu__item" role="presentation">
368
+ <a class="fd-menu__link" href="#" role="menuitem">
369
+ <span class="fd-menu__title">Italian</span>
370
+ </a>
371
+ </li>
372
+ </ul>
373
+ </li>
374
+ </ul>
375
+ </nav>
376
+ </div>
377
+ </div>
378
+ ```
379
+
380
+ ## Modifiers
381
+
382
+ | Class | Description |
383
+ |-------|-------------|
384
+ | `fd-button--icon` | Style variant |
385
+ | `fd-button--transparent` | Style variant |
386
+
387
+ ## BEM Elements
388
+
389
+ This component uses the following BEM elements:
390
+
391
+ - `fd-button__text`
392
+
393
+ ## Examples
394
+
395
+ ### AIQuickPrompt
396
+
397
+ ```html
398
+ <h4>AI Button with Menu in one of the states</h4>
399
+ <button class="fd-button" aria-description="Uses Artificial Intelligence">
400
+ <i class="sap-icon--ai"></i>
401
+ <span class="fd-button__text">Generate</span>
402
+ </button>
403
+
404
+ <button class="fd-button" aria-description="Uses Artificial Intelligence">
405
+ <i class="sap-icon--stop"></i>
406
+ <span class="fd-button__text">Stop Generating</span>
407
+ </button>
408
+
409
+ <button class="fd-button" aria-description="Uses Artificial Intelligence">
410
+ <i class="sap-icon--ai"></i>
411
+ <span class="fd-button__text">Revise</span>
412
+ <i class="sap-icon--slim-arrow-down"></i>
413
+ </button>
414
+
415
+ <div class="fd-popover">
416
+ <div class="fd-popover__control">
417
+ <button class="fd-button" aria-description="Uses Artificial Intelligence">
418
+ <i class="sap-icon--ai"></i>
419
+ <span class="fd-button__text">Revise</span>
420
+ <i class="sap-icon--slim-arrow-down"></i>
421
+ </button>
422
+ </div>
423
+ <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false">
424
+ <nav class="fd-menu">
425
+ <ul class="fd-menu__list" role="menu">
426
+ <li class="fd-menu__item has-separator" role="presentation">
427
+ <a class="fd-menu__link" href="#" role="menuitem">
428
+ <span class="fd-menu__title">Regenerate</span>
429
+ </a>
430
+ </li>
431
+ <li class="fd-menu__item" role="presentation">
432
+ <a class="fd-menu__link" href="#" role="menuitem">
433
+ <span class="fd-menu__title">Fix Spelling & Grammar</span>
434
+ </a>
435
+ </li>
436
+ <li class="fd-menu__item" role="presentation">
437
+ <span
438
+ class="fd-menu__link has-child"
439
+ aria-controls="EX_AI_1"
440
+ aria-expanded="false"
441
+ aria-haspopup="true"
442
+ role="menuitem"
443
+ onclick="onPopoverClick('EX_AI_1')">
444
+ <span class="fd-menu__title">Change Tone</span>
445
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
446
+ </span>
447
+ <ul class="fd-menu__sublist" id="EX_AI_1" aria-hidden="true" role="menu">
448
+ <li class="fd-menu__item" role="presentation">
449
+ <a class="fd-menu__link" href="#" role="menuitem">
450
+ <span class="fd-menu__title">Option 1</span>
451
+ </a>
452
+ </li>
453
+ <li class="fd-menu__item" role="presentation">
454
+ <a class="fd-menu__link" href="#" role="menuitem">
455
+ <span class="fd-menu__title">Option 2</span>
456
+ </a>
457
+ </li>
458
+ <li class="fd-menu__item" role="presentation">
459
+ <a class="fd-menu__link" href="#" role="menuitem">
460
+ <span class="fd-menu__title">Option 3</span>
461
+ </a>
462
+ </li>
463
+ </ul>
464
+ </li>
465
+ <li class="fd-menu__item" role="presentation">
466
+ <span
467
+ class="fd-menu__link has-child"
468
+ aria-controls="EX_AI_2"
469
+ aria-expanded="false"
470
+ aria-haspopup="true"
471
+ role="menuitem"
472
+ onclick="onPopoverClick('EX_AI_2')">
473
+ <span class="fd-menu__title">Text Length</span>
474
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
475
+ </span>
476
+ <ul class="fd-menu__sublist" id="EX_AI_2" aria-hidden="true" role="menu">
477
+ <li class="fd-menu__item" role="presentation">
478
+ <a class="fd-menu__link" href="#" role="menuitem">
479
+ <span class="fd-menu__title">Short</span>
480
+ </a>
481
+ </li>
482
+ <li class="fd-menu__item" role="presentation">
483
+ <a class="fd-menu__link" href="#" role="menuitem">
484
+ <span class="fd-menu__title">Medium</span>
485
+ </a>
486
+ </li>
487
+ <li class="fd-menu__item" role="presentation">
488
+ <a class="fd-menu__link" href="#" role="menuitem">
489
+ <span class="fd-menu__title">Long</span>
490
+ </a>
491
+ </li>
492
+ </ul>
493
+ </li>
494
+ <li class="fd-menu__item" role="presentation">
495
+ <a class="fd-menu__link" href="#" role="menuitem">
496
+ <span class="fd-menu__title">Bulleted List</span>
497
+ </a>
498
+ </li>
499
+ <li class="fd-menu__item" role="presentation">
500
+ <span
501
+ class="fd-menu__link has-child"
502
+ aria-controls="EX_AI_3a"
503
+ aria-expanded="true"
504
+ aria-haspopup="true"
505
+ role="menuitem"
506
+ onclick="onPopoverClick('EX_AI_3a')">
507
+ <span class="fd-menu__title">Translate</span>
508
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
509
+ </span>
510
+ <ul class="fd-menu__sublist" id="EX_AI_3a" aria-hidden="false" role="menu">
511
+ <li class="fd-menu__item" role="presentation">
512
+ <div class="fd-menu__link" role="presentation">
513
+ <div class="fd-input-group">
514
+ <input class="fd-input fd-input-group__input fd-menu__input" type="text" placeholder="Enter a language" id="aqwsde121efaerf" name="">
515
+ <span class="fd-input-group__addon fd-input-group__addon--button">
516
+ <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Navigation">
517
+ <i class="sap-icon--search"></i>
518
+ </button>
519
+ </span>
520
+ </div>
521
+ </div>
522
+ </li>
523
+ <li class="fd-menu__item" role="presentation">
524
+ <a class="fd-menu__link" href="#" role="menuitem">
525
+ <span class="fd-menu__title">English</span>
526
+ </a>
527
+ </li>
528
+ <li class="fd-menu__item" role="presentation">
529
+ <a class="fd-menu__link" href="#" role="menuitem">
530
+ <span class="fd-menu__title">German</span>
531
+ </a>
532
+ </li>
533
+ <li class="fd-menu__item" role="presentation">
534
+ <a class="fd-menu__link" href="#" role="menuitem">
535
+ <span class="fd-menu__title">Spanish</span>
536
+ </a>
537
+ </li>
538
+ <li class="fd-menu__item" role="presentation">
539
+ <a class="fd-menu__link" href="#" role="menuitem">
540
+ <span class="fd-menu__title">Bulgarian</span>
541
+ </a>
542
+ </li>
543
+ <li class="fd-menu__item" role="presentation">
544
+ <a class="fd-menu__link" href="#" role="menuitem">
545
+ <span class="fd-menu__title">Filipino</span>
546
+ </a>
547
+ </li>
548
+ <li class="fd-menu__item" role="presentation">
549
+ <a class="fd-menu__link" href="#" role="menuitem">
550
+ <span class="fd-menu__title">Italian</span>
551
+ </a>
552
+ </li>
553
+ </ul>
554
+ </li>
555
+ </ul>
556
+ </nav>
557
+ </div>
558
+ </div>
559
+
560
+ <h4>Icon-only AI Button with Menu in one of the states</h4>
561
+ <button class="fd-button" aria-label="Generate" aria-description="Uses Artificial Intelligence">
562
+ <i class="sap-icon--ai"></i>
563
+ </button>
564
+
565
+ <button class="fd-button" aria-label="Stop Generating" aria-description="Uses Artificial Intelligence">
566
+ <i class="sap-icon--stop"></i>
567
+ </button>
568
+
569
+ <button class="fd-button" aria-label="Revise" aria-description="Uses Artificial Intelligence">
570
+ <i class="sap-icon--ai"></i>
571
+ <i class="sap-icon--slim-arrow-down"></i>
572
+ </button>
573
+
574
+ <div class="fd-popover">
575
+ <div class="fd-popover__control">
576
+ <button class="fd-button" aria-label="Revise" aria-description="Uses Artificial Intelligence">
577
+ <i class="sap-icon--ai"></i>
578
+ <i class="sap-icon--slim-arrow-down"></i>
579
+ </button>
580
+ </div>
581
+ <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false">
582
+ <nav class="fd-menu">
583
+ <ul class="fd-menu__list" role="menu">
584
+ <li class="fd-menu__item has-separator" role="presentation">
585
+ <a class="fd-menu__link" href="#" role="menuitem">
586
+ <span class="fd-menu__title">Regenerate</span>
587
+ </a>
588
+ </li>
589
+ <li class="fd-menu__item" role="presentation">
590
+ <a class="fd-menu__link" href="#" role="menuitem">
591
+ <span class="fd-menu__title">Fix Spelling & Grammar</span>
592
+ </a>
593
+ </li>
594
+ <li class="fd-menu__item" role="presentation">
595
+ <span
596
+ class="fd-menu__link has-child"
597
+ aria-controls="EX_AI_1b"
598
+ aria-expanded="false"
599
+ aria-haspopup="true"
600
+ role="menuitem"
601
+ onclick="onPopoverClick('EX_AI_1b')">
602
+ <span class="fd-menu__title">Change Tone</span>
603
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
604
+ </span>
605
+ <ul class="fd-menu__sublist" id="EX_AI_1b" aria-hidden="true" role="menu">
606
+ <li class="fd-menu__item" role="presentation">
607
+ <a class="fd-menu__link" href="#" role="menuitem">
608
+ <span class="fd-menu__title">Option 1</span>
609
+ </a>
610
+ </li>
611
+ <li class="fd-menu__item" role="presentation">
612
+ <a class="fd-menu__link" href="#" role="menuitem">
613
+ <span class="fd-menu__title">Option 2</span>
614
+ </a>
615
+ </li>
616
+ <li class="fd-menu__item" role="presentation">
617
+ <a class="fd-menu__link" href="#" role="menuitem">
618
+ <span class="fd-menu__title">Option 3</span>
619
+ </a>
620
+ </li>
621
+ </ul>
622
+ </li>
623
+ <li class="fd-menu__item" role="presentation">
624
+ <span
625
+ class="fd-menu__link has-child"
626
+ aria-controls="EX_AI_2b"
627
+ aria-expanded="false"
628
+ aria-haspopup="true"
629
+ role="menuitem"
630
+ onclick="onPopoverClick('EX_AI_2b')">
631
+ <span class="fd-menu__title">Text Length</span>
632
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
633
+ </span>
634
+ <ul class="fd-menu__sublist" id="EX_AI_2b" aria-hidden="true" role="menu">
635
+ <li class="fd-menu__item" role="presentation">
636
+ <a class="fd-menu__link" href="#" role="menuitem">
637
+ <span class="fd-menu__title">Short</span>
638
+ </a>
639
+ </li>
640
+ <li class="fd-menu__item" role="presentation">
641
+ <a class="fd-menu__link" href="#" role="menuitem">
642
+ <span class="fd-menu__title">Medium</span>
643
+ </a>
644
+ </li>
645
+ <li class="fd-menu__item" role="presentation">
646
+ <a class="fd-menu__link" href="#" role="menuitem">
647
+ <span class="fd-menu__title">Long</span>
648
+ </a>
649
+ </li>
650
+ </ul>
651
+ </li>
652
+ <li class="fd-menu__item" role="presentation">
653
+ <a class="fd-menu__link" href="#" role="menuitem">
654
+ <span class="fd-menu__title">Bulleted List</span>
655
+ </a>
656
+ </li>
657
+ <li class="fd-menu__item" role="presentation">
658
+ <span
659
+ class="fd-menu__link has-child"
660
+ aria-controls="EX_AI_3b"
661
+ aria-expanded="false"
662
+ aria-haspopup="true"
663
+ role="menuitem"
664
+ onclick="onPopoverClick('EX_AI_3b')">
665
+ <span class="fd-menu__title">Translate</span>
666
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
667
+ </span>
668
+ <ul class="fd-menu__sublist" id="EX_AI_3b" aria-hidden="true" role="menu">
669
+ <li class="fd-menu__item" role="presentation">
670
+ <div class="fd-menu__link" role="presentation">
671
+ <div class="fd-input-group">
672
+ <input class="fd-input fd-input-group__input fd-menu__input" type="text" placeholder="Enter a language" id="aqwsde121efaerf" name="">
673
+ <span class="fd-input-group__addon fd-input-group__addon--button">
674
+ <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Navigation">
675
+ <i class="sap-icon--search"></i>
676
+ </button>
677
+ </span>
678
+ </div>
679
+ </div>
680
+ </li>
681
+ <li class="fd-menu__item" role="presentation">
682
+ <a class="fd-menu__link" href="#" role="menuitem">
683
+ <span class="fd-menu__title">English</span>
684
+ </a>
685
+ </li>
686
+ <li class="fd-menu__item" role="presentation">
687
+ <a class="fd-menu__link" href="#" role="menuitem">
688
+ <span class="fd-menu__title">German</span>
689
+ </a>
690
+ </li>
691
+ <li class="fd-menu__item" role="presentation">
692
+ <a class="fd-menu__link" href="#" role="menuitem">
693
+ <span class="fd-menu__title">Spanish</span>
694
+ </a>
695
+ </li>
696
+ <li class="fd-menu__item" role="presentation">
697
+ <a class="fd-menu__link" href="#" role="menuitem">
698
+ <span class="fd-menu__title">Bulgarian</span>
699
+ </a>
700
+ </li>
701
+ <li class="fd-menu__item" role="presentation">
702
+ <a class="fd-menu__link" href="#" role="menuitem">
703
+ <span class="fd-menu__title">Filipino</span>
704
+ </a>
705
+ </li>
706
+ <li class="fd-menu__item" role="presentation">
707
+ <a class="fd-menu__link" href="#" role="menuitem">
708
+ <span class="fd-menu__title">Italian</span>
709
+ </a>
710
+ </li>
711
+ </ul>
712
+ </li>
713
+ </ul>
714
+ </nav>
715
+ </div>
716
+ </div>
717
+ ```
718
+
719
+ ## Accessibility
720
+
721
+ - Use semantic HTML elements where appropriate
722
+ - Include proper ARIA attributes for interactive elements
723
+ - Ensure keyboard navigation support
724
+ - Provide adequate color contrast
725
+
726
+ ## Source
727
+
728
+ This documentation was automatically generated from: `packages/styles/stories/AI/Patterns/ai-quick-prompt/ai-quick-prompt.stories.js`
729
+
730
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).