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