@fundamental-styles/mcp 0.41.7-rc.13 → 0.41.7-rc.15

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.
package/data/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.41.7-rc.15](https://github.com/SAP/fundamental-styles/compare/v0.41.7-rc.14...v0.41.7-rc.15) (2026-06-08)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **styles:** address ShellBar review comments [ci visual] ([#6324](https://github.com/SAP/fundamental-styles/issues/6324)) ([e2c01dd](https://github.com/SAP/fundamental-styles/commit/e2c01dd8eda3210dfd2e6b63be529dd8d77befef))
11
+
12
+ ## [0.41.7-rc.14](https://github.com/SAP/fundamental-styles/compare/v0.41.7-rc.13...v0.41.7-rc.14) (2026-06-05)
13
+
14
+ **Note:** Version bump only for package fundamental-styles
15
+
6
16
  ## [0.41.7-rc.13](https://github.com/SAP/fundamental-styles/compare/v0.41.7-rc.12...v0.41.7-rc.13) (2026-06-05)
7
17
 
8
18
  ### Bug Fixes
@@ -6927,9 +6937,9 @@ Co-authored-by: droshev <mladen.droshev@sap.com>
6927
6937
 
6928
6938
  - added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.
6929
6939
  Before:
6930
- <div class="fd-row">
6931
- After:
6932
- <div class="fd-row fd-row--top">
6940
+ <div class="fd-row">
6941
+ After:
6942
+ <div class="fd-row fd-row--top">
6933
6943
 
6934
6944
  ### Bug Fixes
6935
6945
 
@@ -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>