@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/examples/Components/dialog/device-specifications.example.html CHANGED
@@ -1,22 +1,22 @@
1
-
2
1
  <h3>Tablet without mouse attached</h3>
3
2
  <div>Full Screen Button: visible (<code>sap-icon--full-screen</code>)</div>
4
3
  <div>Resize Handle: not visible</div>
5
- <br>
4
+ <br />
6
5
  <div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
7
- <div
8
- class="fd-dialog__content fd-dialog__content--s"
9
- role="dialog"
10
- aria-modal="true"
6
+ <div
7
+ class="fd-dialog__content fd-dialog__content--s"
8
+ role="dialog"
9
+ aria-modal="true"
11
10
  aria-labelledby="dialog-title-12"
12
11
  aria-describedby="dialog-description-12"
13
12
  >
14
-
15
13
  <header class="fd-dialog__header fd-bar fd-bar--header">
16
14
  <div class="fd-bar__left">
17
15
  <div class="fd-bar__element">
18
16
  <h2 class="fd-title fd-title--h5" id="dialog-title-12">
19
- Lorem ipsum
17
+ Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum
18
+ ipsum lorem ipsum lorem ipsum ipsum lorem ipsum lorem ipsum ipsum lorem ipsum lorem ipsum ipsum
19
+ lorem ipsum lorem ipsum
20
20
  </h2>
21
21
  </div>
22
22
  </div>
@@ -44,22 +44,25 @@
44
44
  </div>
45
45
  </footer>
46
46
  </div>
47
- </div>
47
+ </div>
48
48
 
49
- <br><br>
49
+ <br /><br />
50
50
  <h3>Tablet with mouse attached</h3>
51
51
  <div>Full Screen Button: visible (<code>sap-icon--full-screen</code>)</div>
52
52
  <div>Resize Handle: visible</div>
53
- <br>
53
+ <br />
54
54
  <section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
55
- <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-6">
55
+ <div
56
+ class="fd-dialog__content fd-dialog__content--s"
57
+ role="dialog"
58
+ aria-modal="true"
59
+ aria-labelledby="dialog-title-6"
60
+ >
56
61
  <span class="fd-dialog__resize-handle"></span>
57
62
  <header class="fd-dialog__header fd-bar fd-bar--header">
58
63
  <div class="fd-bar__left">
59
64
  <div class="fd-bar__element">
60
- <h2 class="fd-title fd-title--h5" id="dialog-title-6">
61
- Lorem ipsum
62
- </h2>
65
+ <h2 class="fd-title fd-title--h5" id="dialog-title-6">Lorem ipsum</h2>
63
66
  </div>
64
67
  </div>
65
68
  <div class="fd-bar__right">
@@ -84,22 +87,25 @@
84
87
  </div>
85
88
  </footer>
86
89
  </div>
87
- </section>
90
+ </section>
88
91
 
89
- <br><br>
92
+ <br /><br />
90
93
  <h3>Hybrid device</h3>
91
94
  <div>Full Screen Button: visible (<code>sap-icon--full-screen</code>)</div>
92
95
  <div>Resize Handle: visible</div>
93
- <br>
96
+ <br />
94
97
  <section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
95
- <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-6">
98
+ <div
99
+ class="fd-dialog__content fd-dialog__content--s"
100
+ role="dialog"
101
+ aria-modal="true"
102
+ aria-labelledby="dialog-title-6"
103
+ >
96
104
  <span class="fd-dialog__resize-handle"></span>
97
105
  <header class="fd-dialog__header fd-bar fd-bar--header fd-bar--compact">
98
106
  <div class="fd-bar__left">
99
107
  <div class="fd-bar__element">
100
- <h2 class="fd-title fd-title--h5" id="dialog-title-6">
101
- Lorem ipsum
102
- </h2>
108
+ <h2 class="fd-title fd-title--h5" id="dialog-title-6">Lorem ipsum</h2>
103
109
  </div>
104
110
  </div>
105
111
  <div class="fd-bar__right">
@@ -124,21 +130,24 @@
124
130
  </div>
125
131
  </footer>
126
132
  </div>
127
- </section>
133
+ </section>
128
134
 
129
- <br><br>
135
+ <br /><br />
130
136
  <h3>Full screen</h3>
131
137
  <div>Full Screen Button: visible (<code>sap-icon--exitfullscreen</code>)</div>
132
138
  <div>Resize Handle: not visible</div>
133
- <br>
139
+ <br />
134
140
  <section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
135
- <div class="fd-dialog__content fd-dialog__content--s fd-dialog__content--mobile" role="dialog" aria-modal="true" aria-labelledby="dialog-title-6">
141
+ <div
142
+ class="fd-dialog__content fd-dialog__content--s fd-dialog__content--mobile"
143
+ role="dialog"
144
+ aria-modal="true"
145
+ aria-labelledby="dialog-title-6"
146
+ >
136
147
  <header class="fd-dialog__header fd-bar fd-bar--header">
137
148
  <div class="fd-bar__left">
138
149
  <div class="fd-bar__element">
139
- <h2 class="fd-title fd-title--h5" id="dialog-title-6">
140
- Lorem ipsum
141
- </h2>
150
+ <h2 class="fd-title fd-title--h5" id="dialog-title-6">Lorem ipsum</h2>
142
151
  </div>
143
152
  </div>
144
153
  <div class="fd-bar__right">
@@ -163,4 +172,4 @@
163
172
  </div>
164
173
  </footer>
165
174
  </div>
166
- </section>
175
+ </section>
package/data/examples/Components/shellbar/optional-items.example.html CHANGED
@@ -1,17 +1,39 @@
1
- <div style="height:150px">
1
+ <div style="height: 150px">
2
2
  <div class="fd-shellbar fd-shellbar--side-nav" role="banner" aria-label="Shell Bar">
3
3
  <div class="fd-shellbar__group fd-shellbar__group--product">
4
- <button aria-label="Main Navigation" aria-expanded="false" class="fd-button fd-button--transparent fd-shellbar__button">
4
+ <button
5
+ aria-label="Main Navigation"
6
+ aria-expanded="false"
7
+ class="fd-button fd-button--transparent fd-shellbar__button"
8
+ >
5
9
  <i class="sap-icon--menu2"></i>
6
10
  </button>
7
11
 
8
- <button aria-label="Back Navigation" aria-expanded="false" class="fd-button fd-button--transparent fd-shellbar__button">
9
- <i class="sap-icon--nav-back"></i>
12
+ <button
13
+ aria-label="Back Navigation"
14
+ aria-expanded="false"
15
+ class="fd-button fd-button--transparent fd-shellbar__button"
16
+ >
17
+ <i class="sap-icon--nav-back"></i>
10
18
  </button>
11
19
 
12
-
13
- <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
14
- <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" height="32" alt="SAP"></span>
20
+ <div
21
+ class="fd-shellbar__branding"
22
+ role="link"
23
+ tabindex="0"
24
+ aria-label="SAP Corporate Portal Solution Name Home"
25
+ >
26
+ <span class="fd-shellbar__logo"
27
+ ><img
28
+ src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
29
+ srcset="
30
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,
31
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,
32
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x
33
+ "
34
+ height="32"
35
+ alt="SAP"
36
+ /></span>
15
37
  <span class="fd-shellbar__title">Corporate Portal</span>
16
38
  </div>
17
39
  </div>
@@ -19,46 +41,42 @@
19
41
  <span class="fd-shellbar__separator"></span>
20
42
  <div class="fd-popover">
21
43
  <div class="fd-popover__control">
22
- <button
23
- class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__button--menu fd-button--menu"
24
- onclick="onPopoverClick('9GLB269412ow2');"
25
- aria-controls="9GLB269412ow2"
26
- aria-haspopup="true"
27
- aria-expanded="false"
28
- >
29
- <span class="fd-button__text">EMEA</span>
30
- <i class="sap-icon--slim-arrow-down"></i>
31
- </button>
44
+ <button
45
+ class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__button--menu fd-button--menu"
46
+ onclick="onPopoverClick('9GLB269412ow2')"
47
+ aria-controls="9GLB269412ow2"
48
+ aria-haspopup="true"
49
+ aria-expanded="false"
50
+ >
51
+ <span class="fd-button__text">EMEA</span>
52
+ <i class="sap-icon--slim-arrow-down"></i>
53
+ </button>
32
54
  </div>
33
- <div
34
- class="fd-popover__body fd-popover__body--no-arrow"
35
- aria-hidden="true"
36
- id="9GLB269412ow2"
37
- >
38
- <nav class="fd-menu">
39
- <ul class="fd-menu__list fd-menu__list--no-shadow">
40
- <li class="fd-menu__item">
41
- <a role="button" class="fd-menu__link">
42
- <span class="fd-menu__title">Application A</span>
43
- </a>
44
- </li>
45
- <li class="fd-menu__item">
46
- <a role="button" class="fd-menu__link">
47
- <span class="fd-menu__title">Application B</span>
48
- </a>
49
- </li>
50
- <li class="fd-menu__item">
51
- <a role="button" class="fd-menu__link">
52
- <span class="fd-menu__title">Application C</span>
53
- </a>
54
- </li>
55
- <li class="fd-menu__item">
56
- <a role="button" class="fd-menu__link">
57
- <span class="fd-menu__title">Application D</span>
58
- </a>
59
- </li>
60
- </ul>
61
- </nav>
55
+ <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="9GLB269412ow2">
56
+ <nav class="fd-menu">
57
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
58
+ <li class="fd-menu__item">
59
+ <a role="button" class="fd-menu__link">
60
+ <span class="fd-menu__title">Application A</span>
61
+ </a>
62
+ </li>
63
+ <li class="fd-menu__item">
64
+ <a role="button" class="fd-menu__link">
65
+ <span class="fd-menu__title">Application B</span>
66
+ </a>
67
+ </li>
68
+ <li class="fd-menu__item">
69
+ <a role="button" class="fd-menu__link">
70
+ <span class="fd-menu__title">Application C</span>
71
+ </a>
72
+ </li>
73
+ <li class="fd-menu__item">
74
+ <a role="button" class="fd-menu__link">
75
+ <span class="fd-menu__title">Application D</span>
76
+ </a>
77
+ </li>
78
+ </ul>
79
+ </nav>
62
80
  </div>
63
81
  </div>
64
82
  <span class="fd-shellbar__separator"></span>
@@ -68,11 +86,18 @@
68
86
  </span>
69
87
  <span class="fd-shellbar__spacer"></span>
70
88
  <div class="fd-object-marker">
71
- <span class="fd-object-marker__text">New Feature</span>
89
+ <span class="fd-object-marker__text">New Feature</span>
72
90
  </div>
73
91
  <label class="fd-switch">
74
92
  <span class="fd-switch__control">
75
- <input class="fd-switch__input" type="checkbox" name="" value="" aria-labelledby="label1" id="y21YO3251">
93
+ <input
94
+ class="fd-switch__input"
95
+ type="checkbox"
96
+ name=""
97
+ value=""
98
+ aria-labelledby="label1"
99
+ id="y21YO3251"
100
+ />
76
101
  <div class="fd-switch__slider">
77
102
  <div class="fd-switch__track">
78
103
  <i role="presentation" class="fd-switch__icon fd-switch__icon--on sap-icon--accept"></i>
@@ -88,18 +113,30 @@
88
113
  <div class="fd-shellbar__action">
89
114
  <div class="fd-popover fd-popover--right">
90
115
  <div class="fd-popover__control">
91
- <div class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
92
- onclick="onPopoverClick('MKFAY276wed')" aria-controls="MKFAY276wed" aria-expanded="false"
93
- aria-haspopup="dialog" role="button" tabindex="0" aria-label="User Menu" title="User Menu">
116
+ <div
117
+ class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
118
+ onclick="onPopoverClick('MKFAY276wed')"
119
+ aria-controls="MKFAY276wed"
120
+ aria-expanded="false"
121
+ aria-haspopup="dialog"
122
+ role="button"
123
+ tabindex="0"
124
+ aria-label="User Menu"
125
+ title="User Menu"
126
+ >
94
127
  <span
95
128
  class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
96
- style="background-image: url('assets/images/avatars/1.svg');"
97
- aria-label="William Wallingham">
129
+ style="background-image: url('assets/images/avatars/1.svg')"
130
+ aria-label="William Wallingham"
131
+ >
98
132
  </span>
99
133
  </div>
100
134
  </div>
101
- <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true"
102
- id="MKFAY276wed">
135
+ <div
136
+ class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
137
+ aria-hidden="true"
138
+ id="MKFAY276wed"
139
+ >
103
140
  <nav class="fd-menu">
104
141
  <ul class="fd-menu__list fd-menu__list--no-shadow">
105
142
  <li class="fd-menu__item">
@@ -121,95 +158,103 @@
121
158
  </div>
122
159
  </div>
123
160
 
124
- <br><br>
125
- <div style="height:250px">
161
+ <br /><br />
162
+ <div style="height: 250px">
126
163
  <div class="fd-shellbar fd-shellbar--side-nav" role="banner" aria-label="Shell Bar">
127
164
  <div class="fd-shellbar__group fd-shellbar__group--product">
128
- <button aria-label="Main Navigation" aria-expanded="false" class="fd-button fd-button--transparent fd-shellbar__button">
165
+ <button
166
+ aria-label="Main Navigation"
167
+ aria-expanded="false"
168
+ class="fd-button fd-button--transparent fd-shellbar__button"
169
+ >
129
170
  <i class="sap-icon--menu2"></i>
130
171
  </button>
131
- <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
132
- <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" height="32" alt="SAP"></span>
172
+ <div
173
+ class="fd-shellbar__branding"
174
+ role="link"
175
+ tabindex="0"
176
+ aria-label="SAP Corporate Portal Solution Name Home"
177
+ >
178
+ <span class="fd-shellbar__logo"
179
+ ><img
180
+ src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
181
+ srcset="
182
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,
183
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,
184
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x
185
+ "
186
+ height="32"
187
+ alt="SAP"
188
+ /></span>
133
189
  <span class="fd-shellbar__title">Corporate Portal</span>
134
190
  </div>
135
191
  </div>
136
192
  <div class="fd-shellbar__group fd-shellbar__group--context-area" role="group" aria-label="Additional info">
137
- <span class="fd-shellbar__separator"></span>
138
- <div class="fd-popover">
139
- <div class="fd-popover__control">
140
- <button
141
- class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__button--menu fd-button--menu"
142
- onclick="onPopoverClick('9GLB269412874');"
143
- aria-controls="9GLB269412874"
144
- aria-haspopup="true"
145
- aria-expanded="false"
146
- >
147
- <span class="fd-button__text">EMEA</span>
148
- <i class="sap-icon--slim-arrow-down"></i>
149
- </button>
150
- </div>
151
- <div
152
- class="fd-popover__body fd-popover__body--no-arrow"
153
- aria-hidden="true"
154
- id="9GLB269412874"
155
- >
156
- <nav class="fd-menu">
157
- <ul class="fd-menu__list fd-menu__list--no-shadow">
158
- <li class="fd-menu__item">
159
- <a role="button" class="fd-menu__link">
160
- <span class="fd-menu__title">Application A</span>
161
- </a>
162
- </li>
163
- <li class="fd-menu__item">
164
- <a role="button" class="fd-menu__link">
165
- <span class="fd-menu__title">Application B</span>
166
- </a>
167
- </li>
168
- <li class="fd-menu__item">
169
- <a role="button" class="fd-menu__link">
170
- <span class="fd-menu__title">Application C</span>
171
- </a>
172
- </li>
173
- <li class="fd-menu__item">
174
- <a role="button" class="fd-menu__link">
175
- <span class="fd-menu__title">Application D</span>
176
- </a>
177
- </li>
178
- </ul>
179
- </nav>
180
- </div>
181
- </div>
193
+ <span class="fd-shellbar__separator"></span>
194
+ <div class="fd-popover">
195
+ <div class="fd-popover__control">
196
+ <button
197
+ class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__button--menu fd-button--menu"
198
+ onclick="onPopoverClick('9GLB269412874')"
199
+ aria-controls="9GLB269412874"
200
+ aria-haspopup="true"
201
+ aria-expanded="false"
202
+ >
203
+ <span class="fd-button__text">EMEA</span>
204
+ <i class="sap-icon--slim-arrow-down"></i>
205
+ </button>
206
+ </div>
207
+ <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="9GLB269412874">
208
+ <nav class="fd-menu">
209
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
210
+ <li class="fd-menu__item">
211
+ <a role="button" class="fd-menu__link">
212
+ <span class="fd-menu__title">Application A</span>
213
+ </a>
214
+ </li>
215
+ <li class="fd-menu__item">
216
+ <a role="button" class="fd-menu__link">
217
+ <span class="fd-menu__title">Application B</span>
218
+ </a>
219
+ </li>
220
+ <li class="fd-menu__item">
221
+ <a role="button" class="fd-menu__link">
222
+ <span class="fd-menu__title">Application C</span>
223
+ </a>
224
+ </li>
225
+ <li class="fd-menu__item">
226
+ <a role="button" class="fd-menu__link">
227
+ <span class="fd-menu__title">Application D</span>
228
+ </a>
229
+ </li>
230
+ </ul>
231
+ </nav>
232
+ </div>
233
+ </div>
182
234
  </div>
183
235
  <div class="fd-shellbar__group fd-shellbar__group--actions">
184
236
  <div class="fd-shellbar__action">
185
237
  <div id="JKHhjk7234k22" class="fd-input-group fd-shellbar__search-field">
186
238
  <input
187
- aria-label="search-input"
188
- type="text"
189
-
190
- class="fd-input fd-input-group__input fd-shellbar__search-field-input"
191
- id="F4GcX348b1"
192
- placeholder="Search everything"
239
+ aria-label="search-input"
240
+ type="text"
241
+ class="fd-input fd-input-group__input fd-shellbar__search-field-input"
242
+ id="F4GcX348b1"
243
+ placeholder="Search everything"
193
244
  />
194
245
  <div
195
- class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
246
+ class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
196
247
  >
197
- <button
198
- aria-label="button-search"
199
- class="fd-shellbar__button fd-button fd-button--transparent"
200
- >
201
- <i class="sap-icon--decline"></i>
202
- </button>
248
+ <button aria-label="button-search" class="fd-shellbar__button fd-button fd-button--transparent">
249
+ <i class="sap-icon--decline"></i>
250
+ </button>
203
251
  </div>
204
252
  <div
205
- class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
253
+ class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
206
254
  >
207
- <button
208
- aria-label="button-search"
209
- class="fd-shellbar__button fd-button fd-button--transparent"
210
- >
211
- <i class="sap-icon--search"></i>
212
- </button>
255
+ <button aria-label="button-search" class="fd-shellbar__button fd-button fd-button--transparent">
256
+ <i class="sap-icon--search"></i>
257
+ </button>
213
258
  </div>
214
259
  <div class="fd-shellbar__search-field-helper"></div>
215
260
  </div>
@@ -217,50 +262,53 @@
217
262
  <div class="fd-shellbar__action">
218
263
  <button
219
264
  class="fd-button fd-button--transparent fd-shellbar__button"
220
- aria-label="Joule Digital Assitant" aria-haspopup="dialog" aria-expanded="false" title="Joule Digital Assitant">
221
- <i class="sap-icon--da"></i>
222
- </button>
223
- </div>
224
- <div class="fd-shellbar__action">
225
- <button
226
- class="fd-button fd-button--transparent fd-shellbar__button"
227
- aria-label="Notifications"
228
- title="Notifications"
229
- aria-haspopup="dialog" aria-expanded="false"
265
+ aria-label="Joule Digital Assitant"
266
+ aria-haspopup="dialog"
267
+ aria-expanded="false"
268
+ title="Joule Digital Assitant"
230
269
  >
231
- <i class="sap-icon--bell"></i>
232
- <span class="fd-button__badge">72</span>
233
- </button>
234
- </div>
235
- <div class="fd-shellbar__action">
236
- <button
237
- class="fd-button fd-button--transparent fd-shellbar__button"
238
- aria-label="Feedback" aria-haspopup="dialog" aria-expanded="false" title="Feedback">
239
- <i class="sap-icon--feedback"></i>
270
+ <i class="sap-icon--da"></i>
240
271
  </button>
241
272
  </div>
242
273
  <div class="fd-shellbar__action">
243
274
  <button
244
275
  class="fd-button fd-button--transparent fd-shellbar__button"
245
- aria-label="Help" aria-haspopup="dialog" aria-expanded="false" title="Help">
246
- <i class="sap-icon--sys-help"></i>
276
+ aria-label="Notifications"
277
+ title="Notifications"
278
+ aria-haspopup="dialog"
279
+ aria-expanded="false"
280
+ >
281
+ <i class="sap-icon--bell"></i>
282
+ <span class="fd-button__badge">72</span>
247
283
  </button>
248
284
  </div>
249
285
  <div class="fd-shellbar__action">
250
286
  <div class="fd-popover fd-popover--right">
251
287
  <div class="fd-popover__control">
252
- <div class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
253
- onclick="onPopoverClick('MKFAY276')" aria-controls="MKFAY276" aria-expanded="false"
254
- aria-haspopup="dialog" role="button" tabindex="0" aria-label="User Menu" title="User Menu">
288
+ <div
289
+ class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
290
+ onclick="onPopoverClick('MKFAY276')"
291
+ aria-controls="MKFAY276"
292
+ aria-expanded="false"
293
+ aria-haspopup="dialog"
294
+ role="button"
295
+ tabindex="0"
296
+ aria-label="User Menu"
297
+ title="User Menu"
298
+ >
255
299
  <span
256
300
  class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
257
- style="background-image: url('assets/images/avatars/1.svg');"
258
- aria-label="William Wallingham">
301
+ style="background-image: url('assets/images/avatars/1.svg')"
302
+ aria-label="William Wallingham"
303
+ >
259
304
  </span>
260
305
  </div>
261
306
  </div>
262
- <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true"
263
- id="MKFAY276">
307
+ <div
308
+ class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
309
+ aria-hidden="true"
310
+ id="MKFAY276"
311
+ >
264
312
  <nav class="fd-menu">
265
313
  <ul class="fd-menu__list fd-menu__list--no-shadow">
266
314
  <li class="fd-menu__item">
@@ -288,11 +336,15 @@
288
336
  aria-controls="product-switch-body"
289
337
  aria-expanded="false"
290
338
  aria-haspopup="dialog"
291
- onclick="onPopoverClick('product-switch-body')">
339
+ onclick="onPopoverClick('product-switch-body')"
340
+ >
292
341
  <i class="sap-icon--grid"></i>
293
342
  </button>
294
- <div class="fd-popover__body fd-popover__body--right" aria-hidden="true"
295
- id="product-switch-body">
343
+ <div
344
+ class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
345
+ aria-hidden="true"
346
+ id="product-switch-body"
347
+ >
296
348
  <div class="fd-product-switch__body">
297
349
  <ul class="fd-product-switch__list">
298
350
  <li class="fd-product-switch__item">
@@ -304,7 +356,8 @@
304
356
  </li>
305
357
  <li class="fd-product-switch__item selected">
306
358
  <div
307
- class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
359
+ class="fd-product-switch__icon sap-icon--business-objects-experience"
360
+ ></div>
308
361
  <div class="fd-product-switch__text">
309
362
  <div class="fd-product-switch__title">Analytics Cloud</div>
310
363
  <div class="fd-product-switch__subtitle">Analytics Cloud</div>