@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/popover-popover.md ADDED
@@ -0,0 +1,1862 @@
1
+ ---
2
+ component: fd-popover
3
+ title: Components/Popover
4
+ category: Components
5
+ selector: fd-popover
6
+ cssFile: popover.css
7
+ sourcePath: packages/styles/stories/Components/popover/popover.stories.js
8
+ generatedAt: 2026-05-28T16:01:41.741Z
9
+ ---
10
+
11
+ # Components/Popover
12
+
13
+ The popover displays additional information for an object in a compact way without leaving the page. The component contains two essential elements: the control (trigger) and body (content). It can also be paired with a **Menu**, whereas the menu button would trigger a dropdown (body).
14
+
15
+ ##Usage
16
+ **Use a popover if:**
17
+
18
+ - You need to define your own structure.
19
+ - You want to show UI elements that are not available with the quick view.
20
+
21
+ **Do not use a popover if:**
22
+
23
+ - The objects are in a master list (in this case, the details are shown in the details area).
24
+
25
+
26
+ ##Guidelines
27
+ - As a general rule, it is suggested that one popover be revealed on the page at any given time. Opening one popover should close all others to prevent multiple layers and collisions of several popovers.
28
+ - Show status information as text fields in a content group. You can use semantic text colors.
29
+ - You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.
30
+
31
+ ## Installation
32
+
33
+ ```bash
34
+ npm install fundamental-styles
35
+ ```
36
+
37
+ ```html
38
+ <!-- Include theme -->
39
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
40
+
41
+ <!-- Include component CSS -->
42
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
43
+ ```
44
+
45
+ ## Basic Usage
46
+
47
+ ```html
48
+ <div class="fddocs-container" style="margin-bottom: 400px">
49
+ <div class="fd-popover">
50
+ <div class="fd-popover__control">
51
+ <button
52
+ aria-controls="popoverHSF1"
53
+ aria-expanded="true"
54
+ aria-haspopup="true"
55
+ class="fd-button"
56
+ onclick="onPopoverClick('popoverHSF1');"
57
+ role="button">
58
+ <!- role is needed to override the combobox role due to aria-haspopup -->
59
+ Header
60
+ </button>
61
+ </div>
62
+ <div class="fd-popover__body" aria-hidden="false" id="popoverHSF1">
63
+ <div class="fd-popover__body-header">
64
+ <div class="fd-bar fd-bar--header">
65
+ <div class="fd-bar__left">
66
+ <div class="fd-bar__element">
67
+ <button aria-label="previous options" class="fd-button fd-button--transparent">
68
+ <i class="sap-icon--navigation-left-arrow"></i>
69
+ </button>
70
+ </div>
71
+ <div class="fd-bar__element">
72
+ Header
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ <nav class="fd-menu" aria-label="options with header">
78
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
79
+ <li class="fd-menu__item">
80
+ <a class="fd-menu__link" href="#">
81
+ <span class="fd-menu__title">Option 1</span>
82
+ </a>
83
+ </li>
84
+ <li class="fd-menu__item">
85
+ <a class="fd-menu__link" href="#">
86
+ <span class="fd-menu__title">Option 2</span>
87
+ </a>
88
+ </li>
89
+ <li class="fd-menu__item">
90
+ <a class="fd-menu__link" href="#">
91
+ <span class="fd-menu__title">Option 3</span>
92
+ </a>
93
+ </li>
94
+ </ul>
95
+ </nav>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="fd-popover">
100
+ <div class="fd-popover__control">
101
+ <button
102
+ aria-controls="popoverHSF2"
103
+ aria-expanded="true"
104
+ aria-haspopup="dialog"
105
+ class="fd-button"
106
+ onclick="onPopoverClick('popoverHSF2');"
107
+ role="button">
108
+ <!- role is needed to override the combobox role due to aria-haspopup -->
109
+ Footer
110
+ </button>
111
+ </div>
112
+ <div class="fd-popover__body" aria-hidden="false" id="popoverHSF2">
113
+ <nav class="fd-menu" aria-label="options with footer">
114
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
115
+ <li class="fd-menu__item">
116
+ <a class="fd-menu__link" href="#">
117
+ <span class="fd-menu__title">Option 1</span>
118
+ </a>
119
+ </li>
120
+ <li class="fd-menu__item">
121
+ <a class="fd-menu__link" href="#">
122
+ <span class="fd-menu__title">Option 2</span>
123
+ </a>
124
+ </li>
125
+ <li class="fd-menu__item">
126
+ <a class="fd-menu__link" href="#">
127
+ <span class="fd-menu__title">Option 3</span>
128
+ </a>
129
+ </li>
130
+ </ul>
131
+ </nav>
132
+ <div class="fd-popover__body-footer">
133
+ <div class="fd-bar is-compact fd-bar--footer">
134
+ <div class="fd-bar__right">
135
+ <div class="fd-bar__element">
136
+ <button class="fd-button fd-button--emphasized">Save</button>
137
+ </div>
138
+ <div class="fd-bar__element">
139
+ <button class="fd-button fd-button--transparent">Cancel</button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="fd-popover">
148
+ <div class="fd-popover__control">
149
+ <button
150
+ aria-controls="popoverHSF3"
151
+ aria-expanded="true"
152
+ aria-haspopup="dialog"
153
+ class="fd-button"
154
+ onclick="onPopoverClick('popoverHSF3');"
155
+ role="button">
156
+ Header, subheader and footer
157
+ </button>
158
+ </div>
159
+ <section
160
+ aria-hidden="false"
161
+ class="fd-popover__body"
162
+ id="popoverHSF3"
163
+ aria-label="Dialog Data 1"
164
+ role="dialog">
165
+ <header class="fd-popover__body-header">
166
+ <div class="fd-bar fd-bar--header-with-subheader">
167
+ <div class="fd-bar__left">
168
+ <div class="fd-bar__element">
169
+ <button
170
+ aria-label="back button"
171
+ class="fd-button fd-button--transparent">
172
+ <i class="sap-icon--navigation-left-arrow"></i>
173
+ </button>
174
+ </div>
175
+ <div id="popoverHeader" class="fd-bar__element">
176
+ Header
177
+ </div>
178
+ </div>
179
+ </div>
180
+ <div class="fd-bar is-compact fd-bar--subheader">
181
+ <div class="fd-bar__middle">
182
+ <div class="fd-bar__element">
183
+ <div class="fd-form-item">
184
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
185
+ <button aria-label="email" class="fd-button fd-button--toggled" aria-pressed="true">
186
+ <i class="sap-icon--email"></i>
187
+ </button>
188
+ <button aria-label="phone" class="fd-button" aria-pressed="false">
189
+ <i class="sap-icon--iphone"></i>
190
+ </button>
191
+ <button aria-label="notification" class="fd-button" aria-pressed="false">
192
+ <i class="sap-icon--notification-2"></i>
193
+ </button>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </header>
200
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
201
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
202
+ <li class="fd-menu__item">
203
+ <a class="fd-menu__link" href="#">
204
+ <span class="fd-menu__title">Option 1</span>
205
+ </a>
206
+ </li>
207
+ <li class="fd-menu__item">
208
+ <a class="fd-menu__link" href="#">
209
+ <span class="fd-menu__title">Option 2</span>
210
+ </a>
211
+ </li>
212
+ <li class="fd-menu__item">
213
+ <a class="fd-menu__link" href="#">
214
+ <span class="fd-menu__title">Option 3</span>
215
+ </a>
216
+ </li>
217
+ </ul>
218
+ </nav>
219
+ <footer class="fd-popover__body-footer">
220
+ <div class="fd-bar is-compact fd-bar--footer">
221
+ <div class="fd-bar__right">
222
+ <div class="fd-bar__element">
223
+ <button class="fd-button fd-button--emphasized">Save</button>
224
+ </div>
225
+ <div class="fd-bar__element">
226
+ <button class="fd-button fd-button--transparent">Cancel</button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </footer>
231
+ </section>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="fddocs-container" style="margin-bottom: 400px">
236
+ <div class="fd-popover">
237
+ <div class="fd-popover__control">
238
+ <button
239
+ aria-controls="popoverHSF3wee"
240
+ aria-expanded="true"
241
+ aria-haspopup="dialog"
242
+ class="fd-button"
243
+ onclick="onPopoverClick('popoverHSF3wee');"
244
+ role="button">
245
+ Long text (title)
246
+ </button>
247
+ </div>
248
+ <section
249
+ aria-hidden="false"
250
+ class="fd-popover__body"
251
+ id="popoverHSF3wee"
252
+ style="width: 300px;"
253
+ aria-label="Dialog Data 1"
254
+ role="dialog">
255
+ <header class="fd-popover__body-header">
256
+ <div class="fd-bar fd-bar--header-with-subheader">
257
+ <div class="fd-bar__left">
258
+ <div id="popoverHeaderHSF3wee" class="fd-bar__element">
259
+ <h5 class="fd-title fd-title--h5 fd-title--wrap" aria-label="text">Header Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi.</h5>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ <div class="fd-bar is-compact fd-bar--subheader">
264
+ <div class="fd-bar__middle">
265
+ <div class="fd-bar__element">
266
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi.
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </header>
271
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
272
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
273
+ <li class="fd-menu__item">
274
+ <a class="fd-menu__link" href="#">
275
+ <span class="fd-menu__title">Option 1</span>
276
+ </a>
277
+ </li>
278
+ <li class="fd-menu__item">
279
+ <a class="fd-menu__link" href="#">
280
+ <span class="fd-menu__title">Option 2</span>
281
+ </a>
282
+ </li>
283
+ <li class="fd-menu__item">
284
+ <a class="fd-menu__link" href="#">
285
+ <span class="fd-menu__title">Option 3</span>
286
+ </a>
287
+ </li>
288
+ </ul>
289
+ </nav>
290
+ <footer class="fd-popover__body-footer">
291
+ <div class="fd-bar is-compact fd-bar--footer">
292
+ <div class="fd-bar__right">
293
+ <div class="fd-bar__element">
294
+ <button class="fd-button fd-button--emphasized">Save</button>
295
+ </div>
296
+ <div class="fd-bar__element">
297
+ <button class="fd-button fd-button--transparent">Cancel</button>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </footer>
302
+ </section>
303
+ </div>
304
+
305
+ <div class="fd-popover">
306
+ <div class="fd-popover__control">
307
+ <button
308
+ aria-controls="popoverHSF3rq"
309
+ aria-expanded="true"
310
+ aria-haspopup="dialog"
311
+ class="fd-button"
312
+ onclick="onPopoverClick('popoverHSF3rq');"
313
+ role="button">
314
+ Long text
315
+ </button>
316
+ </div>
317
+ <section
318
+ aria-hidden="false"
319
+ class="fd-popover__body"
320
+ id="popoverHSF3rq"
321
+ style="width: 300px;"
322
+ aria-label="Dialog Data 1"
323
+ role="dialog">
324
+ <header class="fd-popover__body-header">
325
+ <div class="fd-bar fd-bar--header-with-subheader">
326
+ <div class="fd-bar__left">
327
+ <div class="fd-bar__element">
328
+ <button
329
+ aria-label="back button"
330
+ class="fd-button fd-button--transparent">
331
+ <i class="sap-icon--navigation-left-arrow"></i>
332
+ </button>
333
+ </div>
334
+ <div id="popoverHeaderHSF3rq" class="fd-bar__element">
335
+ <span>
336
+ Header Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi enim.
337
+ </span>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ <div class="fd-bar is-compact fd-bar--subheader">
342
+ <div class="fd-bar__middle">
343
+ <div class="fd-bar__element">
344
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi enim.
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </header>
349
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
350
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
351
+ <li class="fd-menu__item">
352
+ <a class="fd-menu__link" href="#">
353
+ <span class="fd-menu__title">Option 1</span>
354
+ </a>
355
+ </li>
356
+ <li class="fd-menu__item">
357
+ <a class="fd-menu__link" href="#">
358
+ <span class="fd-menu__title">Option 2</span>
359
+ </a>
360
+ </li>
361
+ <li class="fd-menu__item">
362
+ <a class="fd-menu__link" href="#">
363
+ <span class="fd-menu__title">Option 3</span>
364
+ </a>
365
+ </li>
366
+ </ul>
367
+ </nav>
368
+ <footer class="fd-popover__body-footer">
369
+ <div class="fd-bar is-compact fd-bar--footer">
370
+ <div class="fd-bar__right">
371
+ <div class="fd-bar__element">
372
+ <button class="fd-button fd-button--emphasized">Save</button>
373
+ </div>
374
+ <div class="fd-bar__element">
375
+ <button class="fd-button fd-button--transparent">Cancel</button>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </footer>
380
+ </section>
381
+ </div>
382
+ </div>
383
+ ```
384
+
385
+ ## Modifiers
386
+
387
+ | Class | Description |
388
+ |-------|-------------|
389
+ | `fd-popover--btp` | This extension of Popover is used by components and patterns in the BTP area. Apply the <code>.fd-popover--btp</code> modifier class to <code>.fd-popover</code> base class. <br>To add padding to the Popover body use the <code>.fd-popover__body--padding</code> modifier class together with <code>.fd-popover__body</code> base class. <br>The content of the footer can be centered by using the <code>.fd-popover__body-footer--center</code> modifier. |
390
+ | `fd-popover--right` | Style variant |
391
+
392
+ ## States
393
+
394
+ | Class | Description |
395
+ |-------|-------------|
396
+ | `is-compact` | Compact state |
397
+
398
+ ## Examples
399
+
400
+ ### Body variants
401
+
402
+ There are several variants of the popover body that can be displayed depending on the use case.
403
+
404
+ | Variant | Modifier class | Description
405
+ :------ | :------------- | :---------------
406
+ Header | \
407
+
408
+ ```html
409
+ <div class="fddocs-container" style="margin-bottom: 400px">
410
+ <div class="fd-popover">
411
+ <div class="fd-popover__control">
412
+ <button
413
+ aria-controls="popoverHSF1"
414
+ aria-expanded="true"
415
+ aria-haspopup="true"
416
+ class="fd-button"
417
+ onclick="onPopoverClick('popoverHSF1');"
418
+ role="button">
419
+ <!- role is needed to override the combobox role due to aria-haspopup -->
420
+ Header
421
+ </button>
422
+ </div>
423
+ <div class="fd-popover__body" aria-hidden="false" id="popoverHSF1">
424
+ <div class="fd-popover__body-header">
425
+ <div class="fd-bar fd-bar--header">
426
+ <div class="fd-bar__left">
427
+ <div class="fd-bar__element">
428
+ <button aria-label="previous options" class="fd-button fd-button--transparent">
429
+ <i class="sap-icon--navigation-left-arrow"></i>
430
+ </button>
431
+ </div>
432
+ <div class="fd-bar__element">
433
+ Header
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ <nav class="fd-menu" aria-label="options with header">
439
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
440
+ <li class="fd-menu__item">
441
+ <a class="fd-menu__link" href="#">
442
+ <span class="fd-menu__title">Option 1</span>
443
+ </a>
444
+ </li>
445
+ <li class="fd-menu__item">
446
+ <a class="fd-menu__link" href="#">
447
+ <span class="fd-menu__title">Option 2</span>
448
+ </a>
449
+ </li>
450
+ <li class="fd-menu__item">
451
+ <a class="fd-menu__link" href="#">
452
+ <span class="fd-menu__title">Option 3</span>
453
+ </a>
454
+ </li>
455
+ </ul>
456
+ </nav>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="fd-popover">
461
+ <div class="fd-popover__control">
462
+ <button
463
+ aria-controls="popoverHSF2"
464
+ aria-expanded="true"
465
+ aria-haspopup="dialog"
466
+ class="fd-button"
467
+ onclick="onPopoverClick('popoverHSF2');"
468
+ role="button">
469
+ <!- role is needed to override the combobox role due to aria-haspopup -->
470
+ Footer
471
+ </button>
472
+ </div>
473
+ <div class="fd-popover__body" aria-hidden="false" id="popoverHSF2">
474
+ <nav class="fd-menu" aria-label="options with footer">
475
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
476
+ <li class="fd-menu__item">
477
+ <a class="fd-menu__link" href="#">
478
+ <span class="fd-menu__title">Option 1</span>
479
+ </a>
480
+ </li>
481
+ <li class="fd-menu__item">
482
+ <a class="fd-menu__link" href="#">
483
+ <span class="fd-menu__title">Option 2</span>
484
+ </a>
485
+ </li>
486
+ <li class="fd-menu__item">
487
+ <a class="fd-menu__link" href="#">
488
+ <span class="fd-menu__title">Option 3</span>
489
+ </a>
490
+ </li>
491
+ </ul>
492
+ </nav>
493
+ <div class="fd-popover__body-footer">
494
+ <div class="fd-bar is-compact fd-bar--footer">
495
+ <div class="fd-bar__right">
496
+ <div class="fd-bar__element">
497
+ <button class="fd-button fd-button--emphasized">Save</button>
498
+ </div>
499
+ <div class="fd-bar__element">
500
+ <button class="fd-button fd-button--transparent">Cancel</button>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+
508
+ <div class="fd-popover">
509
+ <div class="fd-popover__control">
510
+ <button
511
+ aria-controls="popoverHSF3"
512
+ aria-expanded="true"
513
+ aria-haspopup="dialog"
514
+ class="fd-button"
515
+ onclick="onPopoverClick('popoverHSF3');"
516
+ role="button">
517
+ Header, subheader and footer
518
+ </button>
519
+ </div>
520
+ <section
521
+ aria-hidden="false"
522
+ class="fd-popover__body"
523
+ id="popoverHSF3"
524
+ aria-label="Dialog Data 1"
525
+ role="dialog">
526
+ <header class="fd-popover__body-header">
527
+ <div class="fd-bar fd-bar--header-with-subheader">
528
+ <div class="fd-bar__left">
529
+ <div class="fd-bar__element">
530
+ <button
531
+ aria-label="back button"
532
+ class="fd-button fd-button--transparent">
533
+ <i class="sap-icon--navigation-left-arrow"></i>
534
+ </button>
535
+ </div>
536
+ <div id="popoverHeader" class="fd-bar__element">
537
+ Header
538
+ </div>
539
+ </div>
540
+ </div>
541
+ <div class="fd-bar is-compact fd-bar--subheader">
542
+ <div class="fd-bar__middle">
543
+ <div class="fd-bar__element">
544
+ <div class="fd-form-item">
545
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
546
+ <button aria-label="email" class="fd-button fd-button--toggled" aria-pressed="true">
547
+ <i class="sap-icon--email"></i>
548
+ </button>
549
+ <button aria-label="phone" class="fd-button" aria-pressed="false">
550
+ <i class="sap-icon--iphone"></i>
551
+ </button>
552
+ <button aria-label="notification" class="fd-button" aria-pressed="false">
553
+ <i class="sap-icon--notification-2"></i>
554
+ </button>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </header>
561
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
562
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
563
+ <li class="fd-menu__item">
564
+ <a class="fd-menu__link" href="#">
565
+ <span class="fd-menu__title">Option 1</span>
566
+ </a>
567
+ </li>
568
+ <li class="fd-menu__item">
569
+ <a class="fd-menu__link" href="#">
570
+ <span class="fd-menu__title">Option 2</span>
571
+ </a>
572
+ </li>
573
+ <li class="fd-menu__item">
574
+ <a class="fd-menu__link" href="#">
575
+ <span class="fd-menu__title">Option 3</span>
576
+ </a>
577
+ </li>
578
+ </ul>
579
+ </nav>
580
+ <footer class="fd-popover__body-footer">
581
+ <div class="fd-bar is-compact fd-bar--footer">
582
+ <div class="fd-bar__right">
583
+ <div class="fd-bar__element">
584
+ <button class="fd-button fd-button--emphasized">Save</button>
585
+ </div>
586
+ <div class="fd-bar__element">
587
+ <button class="fd-button fd-button--transparent">Cancel</button>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </footer>
592
+ </section>
593
+ </div>
594
+ </div>
595
+
596
+ <div class="fddocs-container" style="margin-bottom: 400px">
597
+ <div class="fd-popover">
598
+ <div class="fd-popover__control">
599
+ <button
600
+ aria-controls="popoverHSF3wee"
601
+ aria-expanded="true"
602
+ aria-haspopup="dialog"
603
+ class="fd-button"
604
+ onclick="onPopoverClick('popoverHSF3wee');"
605
+ role="button">
606
+ Long text (title)
607
+ </button>
608
+ </div>
609
+ <section
610
+ aria-hidden="false"
611
+ class="fd-popover__body"
612
+ id="popoverHSF3wee"
613
+ style="width: 300px;"
614
+ aria-label="Dialog Data 1"
615
+ role="dialog">
616
+ <header class="fd-popover__body-header">
617
+ <div class="fd-bar fd-bar--header-with-subheader">
618
+ <div class="fd-bar__left">
619
+ <div id="popoverHeaderHSF3wee" class="fd-bar__element">
620
+ <h5 class="fd-title fd-title--h5 fd-title--wrap" aria-label="text">Header Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi.</h5>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ <div class="fd-bar is-compact fd-bar--subheader">
625
+ <div class="fd-bar__middle">
626
+ <div class="fd-bar__element">
627
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi.
628
+ </div>
629
+ </div>
630
+ </div>
631
+ </header>
632
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
633
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
634
+ <li class="fd-menu__item">
635
+ <a class="fd-menu__link" href="#">
636
+ <span class="fd-menu__title">Option 1</span>
637
+ </a>
638
+ </li>
639
+ <li class="fd-menu__item">
640
+ <a class="fd-menu__link" href="#">
641
+ <span class="fd-menu__title">Option 2</span>
642
+ </a>
643
+ </li>
644
+ <li class="fd-menu__item">
645
+ <a class="fd-menu__link" href="#">
646
+ <span class="fd-menu__title">Option 3</span>
647
+ </a>
648
+ </li>
649
+ </ul>
650
+ </nav>
651
+ <footer class="fd-popover__body-footer">
652
+ <div class="fd-bar is-compact fd-bar--footer">
653
+ <div class="fd-bar__right">
654
+ <div class="fd-bar__element">
655
+ <button class="fd-button fd-button--emphasized">Save</button>
656
+ </div>
657
+ <div class="fd-bar__element">
658
+ <button class="fd-button fd-button--transparent">Cancel</button>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </footer>
663
+ </section>
664
+ </div>
665
+
666
+ <div class="fd-popover">
667
+ <div class="fd-popover__control">
668
+ <button
669
+ aria-controls="popoverHSF3rq"
670
+ aria-expanded="true"
671
+ aria-haspopup="dialog"
672
+ class="fd-button"
673
+ onclick="onPopoverClick('popoverHSF3rq');"
674
+ role="button">
675
+ Long text
676
+ </button>
677
+ </div>
678
+ <section
679
+ aria-hidden="false"
680
+ class="fd-popover__body"
681
+ id="popoverHSF3rq"
682
+ style="width: 300px;"
683
+ aria-label="Dialog Data 1"
684
+ role="dialog">
685
+ <header class="fd-popover__body-header">
686
+ <div class="fd-bar fd-bar--header-with-subheader">
687
+ <div class="fd-bar__left">
688
+ <div class="fd-bar__element">
689
+ <button
690
+ aria-label="back button"
691
+ class="fd-button fd-button--transparent">
692
+ <i class="sap-icon--navigation-left-arrow"></i>
693
+ </button>
694
+ </div>
695
+ <div id="popoverHeaderHSF3rq" class="fd-bar__element">
696
+ <span>
697
+ Header Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi enim.
698
+ </span>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ <div class="fd-bar is-compact fd-bar--subheader">
703
+ <div class="fd-bar__middle">
704
+ <div class="fd-bar__element">
705
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi enim.
706
+ </div>
707
+ </div>
708
+ </div>
709
+ </header>
710
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
711
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
712
+ <li class="fd-menu__item">
713
+ <a class="fd-menu__link" href="#">
714
+ <span class="fd-menu__title">Option 1</span>
715
+ </a>
716
+ </li>
717
+ <li class="fd-menu__item">
718
+ <a class="fd-menu__link" href="#">
719
+ <span class="fd-menu__title">Option 2</span>
720
+ </a>
721
+ </li>
722
+ <li class="fd-menu__item">
723
+ <a class="fd-menu__link" href="#">
724
+ <span class="fd-menu__title">Option 3</span>
725
+ </a>
726
+ </li>
727
+ </ul>
728
+ </nav>
729
+ <footer class="fd-popover__body-footer">
730
+ <div class="fd-bar is-compact fd-bar--footer">
731
+ <div class="fd-bar__right">
732
+ <div class="fd-bar__element">
733
+ <button class="fd-button fd-button--emphasized">Save</button>
734
+ </div>
735
+ <div class="fd-bar__element">
736
+ <button class="fd-button fd-button--transparent">Cancel</button>
737
+ </div>
738
+ </div>
739
+ </div>
740
+ </footer>
741
+ </section>
742
+ </div>
743
+ </div>
744
+ ```
745
+
746
+ ### Control variants
747
+
748
+ As popover's triggers buttons, images, icons, and more can be used. In the example below, the **Avatar** and **Icon** act as triggers.
749
+
750
+ ```html
751
+ <div class="fd-container" style="margin-bottom: 200px">
752
+ <div class="fd-row">
753
+ <div class="fd-col--3 fd-col--offset-3">
754
+ <div class="fd-popover fd-popover--right">
755
+ <div class="fd-popover__control" style="width: 48px; height: 48px;">
756
+ <span
757
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail"
758
+ aria-controls="popoverB2"
759
+ aria-expanded="true"
760
+ aria-haspopup="true"
761
+ aria-label="Avatar"
762
+ style="background-image: url('assets/images/avatars/3.svg');"
763
+ onclick="onPopoverClick('popoverB2');"
764
+ role="button"
765
+ tabindex="0"></span>
766
+ </div>
767
+ <div class="fd-popover__body fd-popover__body--left" aria-hidden="false" id="popoverB2">
768
+ <nav class="fd-menu" aria-label="navigation items">
769
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
770
+ <li class="fd-menu__item">
771
+ <a class="fd-menu__link" href="#">
772
+ <span class="fd-menu__title">Option 1</span>
773
+ </a>
774
+ </li>
775
+ <li class="fd-menu__item">
776
+ <a class="fd-menu__link" href="#">
777
+ <span class="fd-menu__title">Option 2</span>
778
+ </a>
779
+ </li>
780
+ <li class="fd-menu__item">
781
+ <a class="fd-menu__link" href="#">
782
+ <span class="fd-menu__title">Option 3</span>
783
+ </a>
784
+ </li>
785
+ <li class="fd-menu__item">
786
+ <a class="fd-menu__link" href="#">
787
+ <span class="fd-menu__title">Option 4</span>
788
+ </a>
789
+ </li>
790
+ </ul>
791
+ </nav>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ <div class="fd-col--3 fd-col--offset-3">
796
+ <div class="fd-popover">
797
+ <div class="fd-popover__control">
798
+ <button
799
+ class="fd-button"
800
+ aria-label="Cart"
801
+ aria-controls="popoverB4"
802
+ aria-expanded="true"
803
+ aria-haspopup="true"
804
+ onclick="onPopoverClick('popoverB4');"
805
+ role="button">
806
+ <!- role is needed to override the combobox role due to aria-haspopup -->
807
+ <i class="sap-icon--cart" role="presentation"></i>
808
+ </button>
809
+ </div>
810
+ <div class="fd-popover__body" aria-hidden="false" id="popoverB4">
811
+ <nav class="fd-menu" aria-label="options triggered by icon button">
812
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
813
+ <li class="fd-menu__item">
814
+ <a class="fd-menu__link" href="#">
815
+ <span class="fd-menu__title">Option 1</span>
816
+ </a>
817
+ </li>
818
+ <li class="fd-menu__item">
819
+ <a class="fd-menu__link" href="#">
820
+ <span class="fd-menu__title">Option 2</span>
821
+ </a>
822
+ </li>
823
+ <li class="fd-menu__item">
824
+ <a class="fd-menu__link" href="#">
825
+ <span class="fd-menu__title">Option 3</span>
826
+ </a>
827
+ </li>
828
+ <li class="fd-menu__item">
829
+ <a class="fd-menu__link" href="#">
830
+ <span class="fd-menu__title">Option 4</span>
831
+ </a>
832
+ </li>
833
+ </ul>
834
+ </nav>
835
+ </div>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ </div>
840
+ ```
841
+
842
+ ### Scrollable
843
+
844
+ When the content overflows, the popover body can become scrollable. To achieve this, add element with class \
845
+
846
+ ```html
847
+ <div class="fd-popover" style="margin-bottom: 300px">
848
+ <div class="fd-popover__control">
849
+ <button
850
+ class="fd-button"
851
+ aria-controls="popoverF1"
852
+ aria-expanded="true"
853
+ aria-haspopup="true"
854
+ onclick="onPopoverClick('popoverF1');"
855
+ role="button">
856
+ <!- role is needed to override the combobox role due to aria-haspopup -->
857
+ Popover with overflow
858
+ </button>
859
+ </div>
860
+ <div class="fd-popover__body" aria-hidden="false" id="popoverF1">
861
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
862
+ <nav class="fd-menu" aria-label="big navigation menu">
863
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
864
+ <li class="fd-menu__item">
865
+ <a class="fd-menu__link" href="#">
866
+ <span class="fd-menu__title">Option 1</span>
867
+ </a>
868
+ </li>
869
+ <li class="fd-menu__item">
870
+ <a class="fd-menu__link" href="#">
871
+ <span class="fd-menu__title">Option 2</span>
872
+ </a>
873
+ </li>
874
+ <li class="fd-menu__item">
875
+ <a class="fd-menu__link" href="#">
876
+ <span class="fd-menu__title">Option 3</span>
877
+ </a>
878
+ </li>
879
+ <li class="fd-menu__item">
880
+ <a class="fd-menu__link" href="#">
881
+ <span class="fd-menu__title">Option 4</span>
882
+ </a>
883
+ </li>
884
+ <li class="fd-menu__item">
885
+ <a class="fd-menu__link" href="#">
886
+ <span class="fd-menu__title">Option 5</span>
887
+ </a>
888
+ </li>
889
+ <li class="fd-menu__item">
890
+ <a class="fd-menu__link" href="#">
891
+ <span class="fd-menu__title">Option 6</span>
892
+ </a>
893
+ </li>
894
+ <li class="fd-menu__item">
895
+ <a class="fd-menu__link" href="#">
896
+ <span class="fd-menu__title">Option 7</span>
897
+ </a>
898
+ </li>
899
+ <li class="fd-menu__item">
900
+ <a class="fd-menu__link" href="#">
901
+ <span class="fd-menu__title">Option 8</span>
902
+ </a>
903
+ </li>
904
+ </ul>
905
+ </nav>
906
+ </div>
907
+ </div>
908
+ </div>
909
+ ```
910
+
911
+ ### Placement
912
+
913
+ It's possible to show popover on different sides of the trigger. To do that apply the following modifier classes to the popover body element.
914
+
915
+ | Modifier | Description |
916
+ | :---- | :---------- |
917
+ | \
918
+
919
+ ```html
920
+ <div style="display: flex; justify-content: center; padding: 100px 0 25px;">
921
+ <div class="fd-popover">
922
+ <div class="fd-popover__control">
923
+ <button
924
+ class="fd-button"
925
+ aria-controls="popoverF1"
926
+ aria-expanded="true"
927
+ aria-haspopup="true"
928
+ onclick="onPopoverClick('popoverF1');"
929
+ role="button"
930
+ >
931
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
932
+ </button>
933
+ </div>
934
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--arrow-bottom" aria-hidden="false" id="popoverF1">
935
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
936
+ <nav class="fd-menu" aria-label="big navigation menu">
937
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
938
+ <li class="fd-menu__item">
939
+ <a class="fd-menu__link" href="#">
940
+ <span class="fd-menu__title">Option 1</span>
941
+ </a>
942
+ </li>
943
+ <li class="fd-menu__item">
944
+ <a class="fd-menu__link" href="#">
945
+ <span class="fd-menu__title">Option 2</span>
946
+ </a>
947
+ </li>
948
+ </ul>
949
+ </nav>
950
+ </div>
951
+ </div>
952
+ </div>
953
+
954
+ <div class="fd-popover" style="margin: 0 100px;">
955
+ <div class="fd-popover__control">
956
+ <button
957
+ class="fd-button"
958
+ aria-controls="popoverF1a"
959
+ aria-expanded="true"
960
+ aria-haspopup="true"
961
+ onclick="onPopoverClick('popoverF1a');"
962
+ role="button"
963
+ >
964
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
965
+ </button>
966
+ </div>
967
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--center fd-popover__body--arrow-bottom fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverF1a">
968
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
969
+ <nav class="fd-menu" aria-label="big navigation menu">
970
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
971
+ <li class="fd-menu__item">
972
+ <a class="fd-menu__link" href="#">
973
+ <span class="fd-menu__title">Option 1</span>
974
+ </a>
975
+ </li>
976
+ <li class="fd-menu__item">
977
+ <a class="fd-menu__link" href="#">
978
+ <span class="fd-menu__title">Option 2</span>
979
+ </a>
980
+ </li>
981
+ </ul>
982
+ </nav>
983
+ </div>
984
+ </div>
985
+ </div>
986
+
987
+ <div class="fd-popover">
988
+ <div class="fd-popover__control">
989
+ <button
990
+ class="fd-button"
991
+ aria-controls="popoverF1b"
992
+ aria-expanded="true"
993
+ aria-haspopup="true"
994
+ onclick="onPopoverClick('popoverF1b');"
995
+ role="button"
996
+ >
997
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
998
+ </button>
999
+ </div>
1000
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--right fd-popover__body--arrow-bottom fd-popover__body--arrow-x-end" aria-hidden="false" id="popoverF1b">
1001
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1002
+ <nav class="fd-menu" aria-label="big navigation menu">
1003
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1004
+ <li class="fd-menu__item">
1005
+ <a class="fd-menu__link" href="#">
1006
+ <span class="fd-menu__title">Option 1</span>
1007
+ </a>
1008
+ </li>
1009
+ <li class="fd-menu__item">
1010
+ <a class="fd-menu__link" href="#">
1011
+ <span class="fd-menu__title">Option 2</span>
1012
+ </a>
1013
+ </li>
1014
+ </ul>
1015
+ </nav>
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+
1021
+ <div style="display: flex; justify-content: space-between; padding: 0 100px 50px">
1022
+ <div class="fd-popover">
1023
+ <div class="fd-popover__control">
1024
+ <button
1025
+ class="fd-button"
1026
+ aria-controls="popoverF1c"
1027
+ aria-expanded="true"
1028
+ aria-haspopup="true"
1029
+ onclick="onPopoverClick('popoverF1c');"
1030
+ role="button"
1031
+ >
1032
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1033
+ </button>
1034
+ </div>
1035
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--arrow-right" aria-hidden="false" id="popoverF1c">
1036
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1037
+ <nav class="fd-menu" aria-label="big navigation menu">
1038
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1039
+ <li class="fd-menu__item">
1040
+ <a class="fd-menu__link" href="#">
1041
+ <span class="fd-menu__title">Option 1</span>
1042
+ </a>
1043
+ </li>
1044
+ <li class="fd-menu__item">
1045
+ <a class="fd-menu__link" href="#">
1046
+ <span class="fd-menu__title">Option 2</span>
1047
+ </a>
1048
+ </li>
1049
+ </ul>
1050
+ </nav>
1051
+ </div>
1052
+ </div>
1053
+ </div>
1054
+
1055
+ <div class="fd-popover">
1056
+ <div class="fd-popover__control">
1057
+ <button
1058
+ class="fd-button"
1059
+ aria-controls="popoverF1d"
1060
+ aria-expanded="true"
1061
+ aria-haspopup="true"
1062
+ onclick="onPopoverClick('popoverF1d');"
1063
+ role="button"
1064
+ >
1065
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1066
+ </button>
1067
+ </div>
1068
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="false" id="popoverF1d">
1069
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1070
+ <nav class="fd-menu" aria-label="big navigation menu">
1071
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1072
+ <li class="fd-menu__item">
1073
+ <a class="fd-menu__link" href="#">
1074
+ <span class="fd-menu__title">Option 1</span>
1075
+ </a>
1076
+ </li>
1077
+ <li class="fd-menu__item">
1078
+ <a class="fd-menu__link" href="#">
1079
+ <span class="fd-menu__title">Option 2</span>
1080
+ </a>
1081
+ </li>
1082
+ </ul>
1083
+ </nav>
1084
+ </div>
1085
+ </div>
1086
+ </div>
1087
+ </div>
1088
+
1089
+ <div style="display: flex; justify-content: space-between; padding: 50px 100px 50px">
1090
+ <div class="fd-popover">
1091
+ <div class="fd-popover__control">
1092
+ <button
1093
+ class="fd-button"
1094
+ aria-controls="popoverF1e"
1095
+ aria-expanded="true"
1096
+ aria-haspopup="true"
1097
+ onclick="onPopoverClick('popoverF1e');"
1098
+ role="button"
1099
+ >
1100
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1101
+ </button>
1102
+ </div>
1103
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--middle fd-popover__body--arrow-right fd-popover__body--arrow-y-center" aria-hidden="false" id="popoverF1e">
1104
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1105
+ <nav class="fd-menu" aria-label="big navigation menu">
1106
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1107
+ <li class="fd-menu__item">
1108
+ <a class="fd-menu__link" href="#">
1109
+ <span class="fd-menu__title">Option 1</span>
1110
+ </a>
1111
+ </li>
1112
+ <li class="fd-menu__item">
1113
+ <a class="fd-menu__link" href="#">
1114
+ <span class="fd-menu__title">Option 2</span>
1115
+ </a>
1116
+ </li>
1117
+ </ul>
1118
+ </nav>
1119
+ </div>
1120
+ </div>
1121
+ </div>
1122
+
1123
+ <div class="fd-popover">
1124
+ <div class="fd-popover__control">
1125
+ <button
1126
+ class="fd-button"
1127
+ aria-controls="popoverF1f"
1128
+ aria-expanded="true"
1129
+ aria-haspopup="true"
1130
+ onclick="onPopoverClick('popoverF1f');"
1131
+ role="button"
1132
+ >
1133
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1134
+ </button>
1135
+ </div>
1136
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--middle fd-popover__body--arrow-left fd-popover__body--arrow-y-center" aria-hidden="false" id="popoverF1f">
1137
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1138
+ <nav class="fd-menu" aria-label="big navigation menu">
1139
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1140
+ <li class="fd-menu__item">
1141
+ <a class="fd-menu__link" href="#">
1142
+ <span class="fd-menu__title">Option 1</span>
1143
+ </a>
1144
+ </li>
1145
+ <li class="fd-menu__item">
1146
+ <a class="fd-menu__link" href="#">
1147
+ <span class="fd-menu__title">Option 2</span>
1148
+ </a>
1149
+ </li>
1150
+ </ul>
1151
+ </nav>
1152
+ </div>
1153
+ </div>
1154
+ </div>
1155
+ </div>
1156
+
1157
+ <div style="display: flex; justify-content: space-between; padding: 50px 100px 25px">
1158
+ <div class="fd-popover">
1159
+ <div class="fd-popover__control">
1160
+ <button
1161
+ class="fd-button"
1162
+ aria-controls="popoverF1g"
1163
+ aria-expanded="true"
1164
+ aria-haspopup="true"
1165
+ onclick="onPopoverClick('popoverF1g');"
1166
+ role="button"
1167
+ >
1168
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1169
+ </button>
1170
+ </div>
1171
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--bottom fd-popover__body--arrow-right fd-popover__body--arrow-y-bottom" aria-hidden="false" id="popoverF1g">
1172
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1173
+ <nav class="fd-menu" aria-label="big navigation menu">
1174
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1175
+ <li class="fd-menu__item">
1176
+ <a class="fd-menu__link" href="#">
1177
+ <span class="fd-menu__title">Option 1</span>
1178
+ </a>
1179
+ </li>
1180
+ <li class="fd-menu__item">
1181
+ <a class="fd-menu__link" href="#">
1182
+ <span class="fd-menu__title">Option 2</span>
1183
+ </a>
1184
+ </li>
1185
+ </ul>
1186
+ </nav>
1187
+ </div>
1188
+ </div>
1189
+ </div>
1190
+
1191
+ <div class="fd-popover">
1192
+ <div class="fd-popover__control">
1193
+ <button
1194
+ class="fd-button"
1195
+ aria-controls="popoverF1h"
1196
+ aria-expanded="true"
1197
+ aria-haspopup="true"
1198
+ onclick="onPopoverClick('popoverF1h');"
1199
+ role="button"
1200
+ >
1201
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1202
+ </button>
1203
+ </div>
1204
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--bottom fd-popover__body--arrow-left fd-popover__body--arrow-y-bottom" aria-hidden="false" id="popoverF1h">
1205
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1206
+ <nav class="fd-menu" aria-label="big navigation menu">
1207
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1208
+ <li class="fd-menu__item">
1209
+ <a class="fd-menu__link" href="#">
1210
+ <span class="fd-menu__title">Option 1</span>
1211
+ </a>
1212
+ </li>
1213
+ <li class="fd-menu__item">
1214
+ <a class="fd-menu__link" href="#">
1215
+ <span class="fd-menu__title">Option 2</span>
1216
+ </a>
1217
+ </li>
1218
+ </ul>
1219
+ </nav>
1220
+ </div>
1221
+ </div>
1222
+ </div>
1223
+ </div>
1224
+
1225
+ <div style="display: flex; justify-content: center; padding-bottom: 100px;">
1226
+ <div class="fd-popover">
1227
+ <div class="fd-popover__control">
1228
+ <button
1229
+ class="fd-button"
1230
+ aria-controls="popoverF1i"
1231
+ aria-expanded="true"
1232
+ aria-haspopup="true"
1233
+ onclick="onPopoverClick('popoverF1i');"
1234
+ role="button"
1235
+ >
1236
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1237
+ </button>
1238
+ </div>
1239
+ <div class="fd-popover__body" aria-hidden="false" id="popoverF1i">
1240
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1241
+ <nav class="fd-menu" aria-label="big navigation menu">
1242
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1243
+ <li class="fd-menu__item">
1244
+ <a class="fd-menu__link" href="#">
1245
+ <span class="fd-menu__title">Option 1</span>
1246
+ </a>
1247
+ </li>
1248
+ <li class="fd-menu__item">
1249
+ <a class="fd-menu__link" href="#">
1250
+ <span class="fd-menu__title">Option 2</span>
1251
+ </a>
1252
+ </li>
1253
+ </ul>
1254
+ </nav>
1255
+ </div>
1256
+ </div>
1257
+ </div>
1258
+
1259
+ <div class="fd-popover" style="margin: 0 100px;">
1260
+ <div class="fd-popover__control">
1261
+ <button
1262
+ class="fd-button"
1263
+ aria-controls="popoverF1j"
1264
+ aria-expanded="true"
1265
+ aria-haspopup="true"
1266
+ onclick="onPopoverClick('popoverF1j');"
1267
+ role="button"
1268
+ >
1269
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1270
+ </button>
1271
+ </div>
1272
+ <div class="fd-popover__body fd-popover__body--center fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverF1j">
1273
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1274
+ <nav class="fd-menu" aria-label="big navigation menu">
1275
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1276
+ <li class="fd-menu__item">
1277
+ <a class="fd-menu__link" href="#">
1278
+ <span class="fd-menu__title">Option 1</span>
1279
+ </a>
1280
+ </li>
1281
+ <li class="fd-menu__item">
1282
+ <a class="fd-menu__link" href="#">
1283
+ <span class="fd-menu__title">Option 2</span>
1284
+ </a>
1285
+ </li>
1286
+ </ul>
1287
+ </nav>
1288
+ </div>
1289
+ </div>
1290
+ </div>
1291
+
1292
+ <div class="fd-popover">
1293
+ <div class="fd-popover__control">
1294
+ <button
1295
+ class="fd-button"
1296
+ aria-controls="popoverF1k"
1297
+ aria-expanded="true"
1298
+ aria-haspopup="true"
1299
+ onclick="onPopoverClick('popoverF1k');"
1300
+ role="button"
1301
+ >
1302
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1303
+ </button>
1304
+ </div>
1305
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--arrow-x-end" aria-hidden="false" id="popoverF1k">
1306
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1307
+ <nav class="fd-menu" aria-label="big navigation menu">
1308
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1309
+ <li class="fd-menu__item">
1310
+ <a class="fd-menu__link" href="#">
1311
+ <span class="fd-menu__title">Option 1</span>
1312
+ </a>
1313
+ </li>
1314
+ <li class="fd-menu__item">
1315
+ <a class="fd-menu__link" href="#">
1316
+ <span class="fd-menu__title">Option 2</span>
1317
+ </a>
1318
+ </li>
1319
+ </ul>
1320
+ </nav>
1321
+ </div>
1322
+ </div>
1323
+ </div>
1324
+ </div>
1325
+ ```
1326
+
1327
+ ### NoArrow
1328
+
1329
+ It's possible to hide popover's arrow.
1330
+ To achieve this apply the \
1331
+
1332
+ ```html
1333
+ <div class="fd-popover" style="margin-bottom: 100px">
1334
+ <div class="fd-popover__control">
1335
+ <button
1336
+ class="fd-button"
1337
+ aria-controls="popoverF1"
1338
+ aria-expanded="true"
1339
+ aria-haspopup="true"
1340
+ onClick="onPopoverClick('popoverF1');"
1341
+ role="button"
1342
+ >
1343
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1344
+ </button>
1345
+ </div>
1346
+ <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false" id="popoverF1">
1347
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1348
+ <nav class="fd-menu" aria-label="big navigation menu">
1349
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1350
+ <li class="fd-menu__item">
1351
+ <a class="fd-menu__link" href="#">
1352
+ <span class="fd-menu__title">Option 1</span>
1353
+ </a>
1354
+ </li>
1355
+ <li class="fd-menu__item">
1356
+ <a class="fd-menu__link" href="#">
1357
+ <span class="fd-menu__title">Option 2</span>
1358
+ </a>
1359
+ </li>
1360
+ </ul>
1361
+ </nav>
1362
+ </div>
1363
+ </div>
1364
+ </div>
1365
+ ```
1366
+
1367
+ ### Resizable
1368
+
1369
+ ```html
1370
+ <div style="display: flex; justify-content: center; padding: 100px 0 25px;">
1371
+ <div class="fd-popover">
1372
+ <div class="fd-popover__control">
1373
+ <button
1374
+ class="fd-button"
1375
+ aria-controls="popoverF1r"
1376
+ aria-expanded="true"
1377
+ aria-haspopup="true"
1378
+ onclick="onPopoverClick('popoverF1r');"
1379
+ role="button"
1380
+ >
1381
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1382
+ </button>
1383
+ </div>
1384
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--arrow-bottom fd-popover__body--resizable" aria-hidden="false" id="popoverF1r">
1385
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1386
+ <nav class="fd-menu" aria-label="big navigation menu">
1387
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1388
+ <li class="fd-menu__item">
1389
+ <a class="fd-menu__link" href="#">
1390
+ <span class="fd-menu__title">Option 1</span>
1391
+ </a>
1392
+ </li>
1393
+ <li class="fd-menu__item">
1394
+ <a class="fd-menu__link" href="#">
1395
+ <span class="fd-menu__title">Option 2</span>
1396
+ </a>
1397
+ </li>
1398
+ </ul>
1399
+ </nav>
1400
+
1401
+ </div>
1402
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1403
+ </div>
1404
+ </div>
1405
+
1406
+ <div class="fd-popover" style="margin: 0 100px;">
1407
+ <div class="fd-popover__control">
1408
+ <button
1409
+ class="fd-button"
1410
+ aria-controls="popoverF2r"
1411
+ aria-expanded="true"
1412
+ aria-haspopup="true"
1413
+ onclick="onPopoverClick('popoverF2r');"
1414
+ role="button"
1415
+ >
1416
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1417
+ </button>
1418
+ </div>
1419
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--center fd-popover__body--arrow-bottom fd-popover__body--arrow-x-center fd-popover__body--resizable" aria-hidden="false" id="popoverF2r">
1420
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1421
+ <nav class="fd-menu" aria-label="big navigation menu">
1422
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1423
+ <li class="fd-menu__item">
1424
+ <a class="fd-menu__link" href="#">
1425
+ <span class="fd-menu__title">Option 3</span>
1426
+ </a>
1427
+ </li>
1428
+ <li class="fd-menu__item">
1429
+ <a class="fd-menu__link" href="#">
1430
+ <span class="fd-menu__title">Option 4</span>
1431
+ </a>
1432
+ </li>
1433
+ </ul>
1434
+ </nav>
1435
+ </div>
1436
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1437
+ </div>
1438
+ </div>
1439
+
1440
+ <div class="fd-popover">
1441
+ <div class="fd-popover__control">
1442
+ <button
1443
+ class="fd-button"
1444
+ aria-controls="popoverF3r"
1445
+ aria-expanded="true"
1446
+ aria-haspopup="true"
1447
+ onclick="onPopoverClick('popoverF3r');"
1448
+ role="button"
1449
+ >
1450
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1451
+ </button>
1452
+ </div>
1453
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--right fd-popover__body--arrow-bottom fd-popover__body--arrow-x-end fd-popover__body--resizable" aria-hidden="false" id="popoverF3r">
1454
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1455
+ <nav class="fd-menu" aria-label="big navigation menu">
1456
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1457
+ <li class="fd-menu__item">
1458
+ <a class="fd-menu__link" href="#">
1459
+ <span class="fd-menu__title">Option 5</span>
1460
+ </a>
1461
+ </li>
1462
+ <li class="fd-menu__item">
1463
+ <a class="fd-menu__link" href="#">
1464
+ <span class="fd-menu__title">Option 6</span>
1465
+ </a>
1466
+ </li>
1467
+ </ul>
1468
+ </nav>
1469
+ </div>
1470
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1471
+ </div>
1472
+ </div>
1473
+ </div>
1474
+
1475
+ <div style="display: flex; justify-content: space-between; padding: 0 100px 50px">
1476
+ <div class="fd-popover">
1477
+ <div class="fd-popover__control">
1478
+ <button
1479
+ class="fd-button"
1480
+ aria-controls="popoverF4r"
1481
+ aria-expanded="true"
1482
+ aria-haspopup="true"
1483
+ onclick="onPopoverClick('popoverF4r');"
1484
+ role="button"
1485
+ >
1486
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1487
+ </button>
1488
+ </div>
1489
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--arrow-right fd-popover__body--resizable" aria-hidden="false" id="popoverF4r">
1490
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1491
+ <nav class="fd-menu" aria-label="big navigation menu">
1492
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1493
+ <li class="fd-menu__item">
1494
+ <a class="fd-menu__link" href="#">
1495
+ <span class="fd-menu__title">Option 7</span>
1496
+ </a>
1497
+ </li>
1498
+ <li class="fd-menu__item">
1499
+ <a class="fd-menu__link" href="#">
1500
+ <span class="fd-menu__title">Option 8</span>
1501
+ </a>
1502
+ </li>
1503
+ </ul>
1504
+ </nav>
1505
+ </div>
1506
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1507
+ </div>
1508
+ </div>
1509
+
1510
+ <div class="fd-popover">
1511
+ <div class="fd-popover__control">
1512
+ <button
1513
+ class="fd-button"
1514
+ aria-controls="popoverF5r"
1515
+ aria-expanded="true"
1516
+ aria-haspopup="true"
1517
+ onclick="onPopoverClick('popoverF5r');"
1518
+ role="button"
1519
+ >
1520
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1521
+ </button>
1522
+ </div>
1523
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left fd-popover__body--resizable" aria-hidden="false" id="popoverF5r">
1524
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1525
+ <nav class="fd-menu" aria-label="big navigation menu">
1526
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1527
+ <li class="fd-menu__item">
1528
+ <a class="fd-menu__link" href="#">
1529
+ <span class="fd-menu__title">Option 9</span>
1530
+ </a>
1531
+ </li>
1532
+ <li class="fd-menu__item">
1533
+ <a class="fd-menu__link" href="#">
1534
+ <span class="fd-menu__title">Option 10</span>
1535
+ </a>
1536
+ </li>
1537
+ </ul>
1538
+ </nav>
1539
+ </div>
1540
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1541
+ </div>
1542
+ </div>
1543
+ </div>
1544
+
1545
+ <div style="display: flex; justify-content: space-between; padding: 50px 100px 50px">
1546
+ <div class="fd-popover">
1547
+ <div class="fd-popover__control">
1548
+ <button
1549
+ class="fd-button"
1550
+ aria-controls="popoverF6r"
1551
+ aria-expanded="true"
1552
+ aria-haspopup="true"
1553
+ onclick="onPopoverClick('popoverF6r');"
1554
+ role="button"
1555
+ >
1556
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1557
+ </button>
1558
+ </div>
1559
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--middle fd-popover__body--arrow-right fd-popover__body--arrow-y-center fd-popover__body--resizable" aria-hidden="false" id="popoverF6r">
1560
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1561
+ <nav class="fd-menu" aria-label="big navigation menu">
1562
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1563
+ <li class="fd-menu__item">
1564
+ <a class="fd-menu__link" href="#">
1565
+ <span class="fd-menu__title">Option 11</span>
1566
+ </a>
1567
+ </li>
1568
+ <li class="fd-menu__item">
1569
+ <a class="fd-menu__link" href="#">
1570
+ <span class="fd-menu__title">Option 12</span>
1571
+ </a>
1572
+ </li>
1573
+ </ul>
1574
+ </nav>
1575
+ </div>
1576
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1577
+ </div>
1578
+ </div>
1579
+
1580
+ <div class="fd-popover">
1581
+ <div class="fd-popover__control">
1582
+ <button
1583
+ class="fd-button"
1584
+ aria-controls="popoverF7r"
1585
+ aria-expanded="true"
1586
+ aria-haspopup="true"
1587
+ onclick="onPopoverClick('popoverF7r');"
1588
+ role="button"
1589
+ >
1590
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1591
+ </button>
1592
+ </div>
1593
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--middle fd-popover__body--arrow-left fd-popover__body--arrow-y-center fd-popover__body--resizable" aria-hidden="false" id="popoverF7r">
1594
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1595
+ <nav class="fd-menu" aria-label="big navigation menu">
1596
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1597
+ <li class="fd-menu__item">
1598
+ <a class="fd-menu__link" href="#">
1599
+ <span class="fd-menu__title">Option 13</span>
1600
+ </a>
1601
+ </li>
1602
+ <li class="fd-menu__item">
1603
+ <a class="fd-menu__link" href="#">
1604
+ <span class="fd-menu__title">Option 14</span>
1605
+ </a>
1606
+ </li>
1607
+ </ul>
1608
+ </nav>
1609
+ </div>
1610
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1611
+ </div>
1612
+ </div>
1613
+ </div>
1614
+
1615
+ <div style="display: flex; justify-content: space-between; padding: 50px 100px 25px">
1616
+ <div class="fd-popover">
1617
+ <div class="fd-popover__control">
1618
+ <button
1619
+ class="fd-button"
1620
+ aria-controls="popoverF8r"
1621
+ aria-expanded="true"
1622
+ aria-haspopup="true"
1623
+ onclick="onPopoverClick('popoverF8r');"
1624
+ role="button"
1625
+ >
1626
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1627
+ </button>
1628
+ </div>
1629
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--bottom fd-popover__body--arrow-right fd-popover__body--arrow-y-bottom fd-popover__body--resizable" aria-hidden="false" id="popoverF8r">
1630
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1631
+ <nav class="fd-menu" aria-label="big navigation menu">
1632
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1633
+ <li class="fd-menu__item">
1634
+ <a class="fd-menu__link" href="#">
1635
+ <span class="fd-menu__title">Option 15</span>
1636
+ </a>
1637
+ </li>
1638
+ <li class="fd-menu__item">
1639
+ <a class="fd-menu__link" href="#">
1640
+ <span class="fd-menu__title">Option 16</span>
1641
+ </a>
1642
+ </li>
1643
+ </ul>
1644
+ </nav>
1645
+ </div>
1646
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1647
+ </div>
1648
+ </div>
1649
+
1650
+ <div class="fd-popover">
1651
+ <div class="fd-popover__control">
1652
+ <button
1653
+ class="fd-button"
1654
+ aria-controls="popoverF9r"
1655
+ aria-expanded="true"
1656
+ aria-haspopup="true"
1657
+ onclick="onPopoverClick('popoverF9r');"
1658
+ role="button"
1659
+ >
1660
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1661
+ </button>
1662
+ </div>
1663
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--bottom fd-popover__body--arrow-left fd-popover__body--arrow-y-bottom fd-popover__body--resizable" aria-hidden="false" id="popoverF9r">
1664
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1665
+ <nav class="fd-menu" aria-label="big navigation menu">
1666
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1667
+ <li class="fd-menu__item">
1668
+ <a class="fd-menu__link" href="#">
1669
+ <span class="fd-menu__title">Option 17</span>
1670
+ </a>
1671
+ </li>
1672
+ <li class="fd-menu__item">
1673
+ <a class="fd-menu__link" href="#">
1674
+ <span class="fd-menu__title">Option 18</span>
1675
+ </a>
1676
+ </li>
1677
+ </ul>
1678
+ </nav>
1679
+ </div>
1680
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1681
+ </div>
1682
+ </div>
1683
+ </div>
1684
+
1685
+ <div style="display: flex; justify-content: center; padding-bottom: 100px;">
1686
+ <div class="fd-popover">
1687
+ <div class="fd-popover__control">
1688
+ <button
1689
+ class="fd-button"
1690
+ aria-controls="popoverF10r"
1691
+ aria-expanded="true"
1692
+ aria-haspopup="true"
1693
+ onclick="onPopoverClick('popoverF10r');"
1694
+ role="button"
1695
+ >
1696
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1697
+ </button>
1698
+ </div>
1699
+ <div class="fd-popover__body fd-popover__body--resizable" aria-hidden="false" id="popoverF10r">
1700
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1701
+ <nav class="fd-menu" aria-label="big navigation menu">
1702
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1703
+ <li class="fd-menu__item">
1704
+ <a class="fd-menu__link" href="#">
1705
+ <span class="fd-menu__title">Option 19</span>
1706
+ </a>
1707
+ </li>
1708
+ <li class="fd-menu__item">
1709
+ <a class="fd-menu__link" href="#">
1710
+ <span class="fd-menu__title">Option 20</span>
1711
+ </a>
1712
+ </li>
1713
+ </ul>
1714
+ </nav>
1715
+ </div>
1716
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1717
+ </div>
1718
+ </div>
1719
+
1720
+ <div class="fd-popover" style="margin: 0 100px;">
1721
+ <div class="fd-popover__control">
1722
+ <button
1723
+ class="fd-button"
1724
+ aria-controls="popoverF11r"
1725
+ aria-expanded="true"
1726
+ aria-haspopup="true"
1727
+ onclick="onPopoverClick('popoverF11r');"
1728
+ role="button"
1729
+ >
1730
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1731
+ </button>
1732
+ </div>
1733
+ <div class="fd-popover__body fd-popover__body--center fd-popover__body--arrow-x-center fd-popover__body--resizable" aria-hidden="false" id="popoverF11r">
1734
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1735
+ <nav class="fd-menu" aria-label="big navigation menu">
1736
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1737
+ <li class="fd-menu__item">
1738
+ <a class="fd-menu__link" href="#">
1739
+ <span class="fd-menu__title">Option 21</span>
1740
+ </a>
1741
+ </li>
1742
+ <li class="fd-menu__item">
1743
+ <a class="fd-menu__link" href="#">
1744
+ <span class="fd-menu__title">Option 22</span>
1745
+ </a>
1746
+ </li>
1747
+ </ul>
1748
+ </nav>
1749
+ </div>
1750
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1751
+ </div>
1752
+ </div>
1753
+
1754
+ <div class="fd-popover">
1755
+ <div class="fd-popover__control">
1756
+ <button
1757
+ class="fd-button"
1758
+ aria-controls="popoverF12r"
1759
+ aria-expanded="true"
1760
+ aria-haspopup="true"
1761
+ onclick="onPopoverClick('popoverF12r');"
1762
+ role="button"
1763
+ >
1764
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1765
+ </button>
1766
+ </div>
1767
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--arrow-x-end fd-popover__body--resizable" aria-hidden="false" id="popoverF12r">
1768
+ <div class="fd-popover__wrapper" style="max-height: 250px;">
1769
+ <nav class="fd-menu" aria-label="big navigation menu">
1770
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1771
+ <li class="fd-menu__item">
1772
+ <a class="fd-menu__link" href="#">
1773
+ <span class="fd-menu__title">Option 23</span>
1774
+ </a>
1775
+ </li>
1776
+ <li class="fd-menu__item">
1777
+ <a class="fd-menu__link" href="#">
1778
+ <span class="fd-menu__title">Option 24</span>
1779
+ </a>
1780
+ </li>
1781
+ </ul>
1782
+ </nav>
1783
+ </div>
1784
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1785
+ </div>
1786
+ </div>
1787
+ </div>
1788
+ ```
1789
+
1790
+ ### BTP Popover
1791
+
1792
+ This extension of Popover is used by components and patterns in the BTP area. Apply the <code>.fd-popover--btp</code> modifier class to <code>.fd-popover</code> base class. <br>To add padding to the Popover body use the <code>.fd-popover__body--padding</code> modifier class together with <code>.fd-popover__body</code> base class. <br>The content of the footer can be centered by using the <code>.fd-popover__body-footer--center</code> modifier.
1793
+
1794
+ ```html
1795
+ <div class="fd-container" style="margin-bottom: 400px">
1796
+ <div class="fd-row">
1797
+ <div class="fd-col--3 fd-col--offset-3">
1798
+ <div class="fd-popover fd-popover--btp">
1799
+ <div class="fd-popover__control">
1800
+ <button
1801
+ class="fd-button"
1802
+ aria-label="Cart"
1803
+ aria-controls="popoverB4Btp"
1804
+ aria-expanded="true"
1805
+ aria-haspopup="true"
1806
+ onclick="onPopoverClick('popoverB4Btp');"
1807
+ role="button">
1808
+ <i class="sap-icon--cart" role="presentation"></i>
1809
+ </button>
1810
+ </div>
1811
+ <div class="fd-popover__body" aria-hidden="false" id="popoverB4Btp">
1812
+ <div class="fd-popover__body-header">Header (optional, empty container)</div>
1813
+ <div class="fd-popover__body-content" style="color: #fff; background: #0e7290; width: 15rem; height: 18rem;">
1814
+ Content (empty container)
1815
+ </div>
1816
+ <div class="fd-popover__body-footer">
1817
+ Footer (optional, empty container)
1818
+ </div>
1819
+ </div>
1820
+ </div>
1821
+ </div>
1822
+ <div class="fd-col--3 fd-col--offset-3">
1823
+ <div class="fd-popover fd-popover--btp">
1824
+ <div class="fd-popover__control">
1825
+ <button
1826
+ class="fd-button"
1827
+ aria-label="Cart"
1828
+ aria-controls="popoverB4B"
1829
+ aria-expanded="true"
1830
+ aria-haspopup="true"
1831
+ onclick="onPopoverClick('popoverB4B');"
1832
+ role="button">
1833
+ <i class="sap-icon--cart" role="presentation"></i>
1834
+ </button>
1835
+ </div>
1836
+ <div class="fd-popover__body fd-popover__body--padding" aria-hidden="false" id="popoverB4BTP">
1837
+ <div class="fd-popover__body-header">Header (optional, empty container)</div>
1838
+ <div class="fd-popover__body-content" style="color: #fff; background: #0e7290; width: 15rem; height: 18rem;">
1839
+ Content (empty container)
1840
+ </div>
1841
+ <div class="fd-popover__body-footer fd-popover__body-footer--center">
1842
+ Footer (optional, empty container)
1843
+ </div>
1844
+ </div>
1845
+ </div>
1846
+ </div>
1847
+ </div>
1848
+ </div>
1849
+ ```
1850
+
1851
+ ## Accessibility
1852
+
1853
+ - Use semantic HTML elements where appropriate
1854
+ - Include proper ARIA attributes for interactive elements
1855
+ - Ensure keyboard navigation support
1856
+ - Provide adequate color contrast
1857
+
1858
+ ## Source
1859
+
1860
+ This documentation was automatically generated from: `packages/styles/stories/Components/popover/popover.stories.js`
1861
+
1862
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).