@fundamental-styles/mcp 0.41.9-rc.2 → 0.41.9-rc.21

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 (27) hide show
  1. package/data/CHANGELOG.md +91 -3
  2. package/data/component-guidance.json +2 -2
  3. package/data/components/avatar-product-switch.md +175 -60
  4. package/data/components/container.md +113 -0
  5. package/data/components/form-group.md +1 -0
  6. package/data/components/navigation-navigation.md +673 -957
  7. package/data/components/navigation.md +5869 -2148
  8. package/data/components/shellbar.md +16 -16
  9. package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +4 -234
  10. package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +196 -232
  11. package/data/examples/BTP/Navigation/vertical/navigation-legacy.example.html +353 -197
  12. package/data/examples/BTP/Navigation/vertical/navigation-popup.example.html +451 -245
  13. package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
  14. package/data/examples/BTP/Navigation/vertical/navigation-snapped.example.html +361 -157
  15. package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
  16. package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +948 -0
  17. package/data/examples/BTP/Navigation/vertical/navigation.example.html +444 -242
  18. package/data/examples/Components/Forms/form-group/group-header-in-form-grid-display-mode.example.html +106 -0
  19. package/data/examples/Components/product-switch/large.example.html +65 -19
  20. package/data/examples/Components/product-switch/medium.example.html +5 -7
  21. package/data/examples/Components/product-switch/small.example.html +4 -6
  22. package/data/examples/Components/product-switch/two-column.example.html +20 -0
  23. package/data/examples/Components/shellbar/optional-items.example.html +2 -2
  24. package/data/examples/Components/shellbar/overflow-toolbar.example.html +2 -2
  25. package/data/examples/Components/shellbar/responsive-paddings.example.html +4 -4
  26. package/data/examples/Components/shellbar/responsiveness.example.html +8 -8
  27. package/package.json +1 -1
package/data/examples/BTP/Navigation/vertical/navigation-popup.example.html CHANGED
@@ -1,42 +1,45 @@
1
- <div
2
- class="fd-navigation fd-navigation--vertical fd-navigation--popup"
3
- role="navigation"
4
- aria-roledescription="Side Navigation"
5
- style="width: 18rem; height: 60rem;">
6
-
1
+ <div
2
+ class="fd-navigation fd-navigation--vertical fd-navigation--popup"
3
+ role="navigation"
4
+ aria-roledescription="Side Navigation"
5
+ style="width: 18rem; height: 60rem"
6
+ >
7
7
  <div class="fd-navigation__container fd-navigation__container--top">
8
- <ul
9
- class="fd-navigation__list"
10
- role="tree"
11
- aria-roledescription="Navigation List Tree"
12
- tabindex="-1"
13
- >
14
- <li class="fd-navigation__list-item fd-navigation__list-item--home" aria-hidden="true">
15
- <div
16
- class="fd-navigation__item"
17
- aria-level="1"
18
- role="treeitem"
8
+ <ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
9
+ <li class="fd-navigation__list-item" aria-hidden="true">
10
+ <div
11
+ class="fd-navigation__item"
12
+ aria-level="1"
13
+ role="treeitem"
19
14
  title="Home"
20
15
  aria-roledescription="Navigation List Tree Item"
21
16
  aria-selected="false"
22
17
  aria-expanded="false"
23
18
  >
24
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
19
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
25
20
  <span class="fd-navigation__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
26
21
  <span class="fd-navigation__text">Home</span>
27
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
22
+ <span
23
+ class="fd-navigation__selection-indicator"
24
+ role="presentation"
25
+ aria-hidden="true"
26
+ aria-label="selection indicator"
27
+ ></span>
28
28
  </a>
29
29
  </div>
30
30
  </li>
31
31
 
32
- <li class="fd-navigation__list-item fd-navigation__list-item--separator" role="presentation" aria-hidden="true">
33
- </li>
32
+ <li
33
+ class="fd-navigation__list-item fd-navigation__list-item--separator"
34
+ role="presentation"
35
+ aria-hidden="true"
36
+ ></li>
34
37
 
35
38
  <li class="fd-navigation__list-item" aria-hidden="true">
36
- <div
37
- class="fd-navigation__item fd-navigation__item--group"
38
- aria-level="1"
39
- role="treeitem"
39
+ <div
40
+ class="fd-navigation__item fd-navigation__item--group"
41
+ aria-level="1"
42
+ role="treeitem"
40
43
  title="Main Items Group"
41
44
  aria-roledescription="Navigation List Tree Item - Group"
42
45
  aria-selected="false"
@@ -44,69 +47,98 @@
44
47
  >
45
48
  <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
46
49
  <span class="fd-navigation__text">Main Items</span>
47
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
50
+ <span
51
+ class="fd-navigation__has-children-indicator"
52
+ role="presentation"
53
+ aria-hidden="true"
54
+ aria-label="has children indicator, expanded"
55
+ ></span>
48
56
  </a>
49
57
  </div>
50
58
 
51
- <ul
52
- class="fd-navigation__list fd-navigation__list--parent-items"
53
- role="tree"
54
- aria-roledescription="Navigation List Tree - Parent Items"
59
+ <ul
60
+ class="fd-navigation__list fd-navigation__list--parent-items"
61
+ role="tree"
62
+ aria-roledescription="Navigation List Tree - Parent Items"
55
63
  tabindex="-1"
56
64
  >
57
65
  <li class="fd-navigation__list-item" aria-hidden="true">
58
- <div
59
- class="fd-navigation__item"
60
- aria-level="2"
61
- role="treeitem"
66
+ <div
67
+ class="fd-navigation__item"
68
+ aria-level="2"
69
+ role="treeitem"
62
70
  title="Basket"
63
71
  aria-roledescription="Navigation List Tree Item - Parent"
64
- aria-expanded="true"
72
+ aria-expanded="true"
65
73
  aria-selected="false"
66
74
  >
67
- <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
68
- <span class="fd-navigation__icon sap-icon--unfavorite" role="presentation" aria-hidden="true"></span>
75
+ <a
76
+ class="fd-navigation__link"
77
+ role="button"
78
+ tabindex="-1"
79
+ onclick="toggleNavigationSubmenu(event)"
80
+ >
81
+ <span
82
+ class="fd-navigation__icon sap-icon--unfavorite"
83
+ role="presentation"
84
+ aria-hidden="true"
85
+ ></span>
69
86
  <span class="fd-navigation__text">Favorites</span>
70
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
87
+ <span
88
+ class="fd-navigation__has-children-indicator"
89
+ role="presentation"
90
+ aria-hidden="true"
91
+ aria-label="has children indicator, expanded"
92
+ ></span>
71
93
  </a>
72
94
  </div>
73
95
  <div class="fd-navigation__list-container" aria-hidden="true">
74
96
  <div class="fd-navigation__list-wrapper" aria-hidden="true">
75
- <ul
76
- class="fd-navigation__list fd-navigation__list--child-items"
77
- role="tree"
78
- aria-roledescription="Navigation List Tree - Child Items"
97
+ <ul
98
+ class="fd-navigation__list fd-navigation__list--child-items"
99
+ role="tree"
100
+ aria-roledescription="Navigation List Tree - Child Items"
79
101
  tabindex="-1"
80
102
  >
81
103
  <li class="fd-navigation__list-item" aria-hidden="true">
82
- <div
83
- class="fd-navigation__item fd-navigation__item--child"
84
- aria-level="3"
85
- role="treeitem"
104
+ <div
105
+ class="fd-navigation__item fd-navigation__item--child"
106
+ aria-level="3"
107
+ role="treeitem"
86
108
  title="My Accounts"
87
109
  aria-roledescription="Navigation List Tree Item - Child"
88
- aria-expanded="false"
110
+ aria-expanded="false"
89
111
  aria-selected="false"
90
112
  >
91
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
113
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
92
114
  <span class="fd-navigation__text">My Accounts</span>
93
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
115
+ <span
116
+ class="fd-navigation__selection-indicator"
117
+ role="presentation"
118
+ aria-hidden="true"
119
+ aria-label="selection indicator"
120
+ ></span>
94
121
  </a>
95
122
  </div>
96
123
  </li>
97
124
  <li class="fd-navigation__list-item" aria-hidden="true">
98
- <div
99
- class="fd-navigation__item fd-navigation__item--child"
100
- aria-level="3"
101
- role="treeitem"
125
+ <div
126
+ class="fd-navigation__item fd-navigation__item--child"
127
+ aria-level="3"
128
+ role="treeitem"
102
129
  title="My Orders"
103
130
  aria-roledescription="Navigation List Tree Item - Child"
104
- aria-expanded="false"
131
+ aria-expanded="false"
105
132
  aria-selected="false"
106
133
  >
107
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
134
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
108
135
  <span class="fd-navigation__text">My Orders</span>
109
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
136
+ <span
137
+ class="fd-navigation__selection-indicator"
138
+ role="presentation"
139
+ aria-hidden="true"
140
+ aria-label="selection indicator"
141
+ ></span>
110
142
  </a>
111
143
  </div>
112
144
  </li>
@@ -116,76 +148,115 @@
116
148
  </li>
117
149
 
118
150
  <li class="fd-navigation__list-item" aria-hidden="true">
119
- <div
120
- class="fd-navigation__item"
121
- aria-level="2"
122
- role="treeitem"
151
+ <div
152
+ class="fd-navigation__item"
153
+ aria-level="2"
154
+ role="treeitem"
123
155
  title="Customer Management"
124
156
  aria-roledescription="Navigation List Tree Item - Parent"
125
- aria-expanded="true"
157
+ aria-expanded="true"
126
158
  aria-selected="true"
127
159
  >
128
- <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
129
- <span class="fd-navigation__icon sap-icon--account" role="presentation" aria-hidden="true"></span>
160
+ <a
161
+ class="fd-navigation__link"
162
+ role="button"
163
+ tabindex="-1"
164
+ onclick="toggleNavigationSubmenu(event)"
165
+ >
166
+ <span
167
+ class="fd-navigation__icon sap-icon--account"
168
+ role="presentation"
169
+ aria-hidden="true"
170
+ ></span>
130
171
  <span class="fd-navigation__text">Customer Management</span>
131
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
132
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
172
+ <span
173
+ class="fd-navigation__selection-indicator"
174
+ role="presentation"
175
+ aria-hidden="true"
176
+ aria-label="selection indicator"
177
+ ></span>
178
+ <span
179
+ class="fd-navigation__has-children-indicator"
180
+ role="presentation"
181
+ aria-hidden="true"
182
+ aria-label="has children indicator, expanded"
183
+ ></span>
133
184
  </a>
134
185
  </div>
135
186
  <div class="fd-navigation__list-container" aria-hidden="true">
136
187
  <div class="fd-navigation__list-wrapper" aria-hidden="true">
137
- <ul
138
- class="fd-navigation__list fd-navigation__list--child-items"
139
- role="tree"
140
- aria-roledescription="Navigation List Tree - Child Items"
188
+ <ul
189
+ class="fd-navigation__list fd-navigation__list--child-items"
190
+ role="tree"
191
+ aria-roledescription="Navigation List Tree - Child Items"
141
192
  tabindex="-1"
142
193
  >
143
194
  <li class="fd-navigation__list-item" aria-hidden="true">
144
- <div
145
- class="fd-navigation__item fd-navigation__item--child"
146
- aria-level="3"
147
- role="treeitem"
195
+ <div
196
+ class="fd-navigation__item fd-navigation__item--child"
197
+ aria-level="3"
198
+ role="treeitem"
148
199
  title="Contacts"
149
200
  aria-roledescription="Navigation List Tree Item - Child"
150
- aria-expanded="false"
201
+ aria-expanded="false"
151
202
  aria-selected="false"
152
203
  >
153
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
204
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
154
205
  <span class="fd-navigation__text">Contacts</span>
155
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
206
+ <span
207
+ class="fd-navigation__selection-indicator"
208
+ role="presentation"
209
+ aria-hidden="true"
210
+ aria-label="selection indicator"
211
+ ></span>
156
212
  </a>
157
213
  </div>
158
214
  </li>
159
215
  <li class="fd-navigation__list-item" aria-hidden="true">
160
- <div
161
- class="fd-navigation__item fd-navigation__item--child"
162
- aria-level="3"
163
- role="treeitem"
216
+ <div
217
+ class="fd-navigation__item fd-navigation__item--child"
218
+ aria-level="3"
219
+ role="treeitem"
164
220
  title="Companies"
165
221
  aria-roledescription="Navigation List Tree Item - Child"
166
- aria-expanded="false"
222
+ aria-expanded="false"
167
223
  aria-selected="true"
168
224
  >
169
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
225
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
170
226
  <span class="fd-navigation__text">Companies (selected)</span>
171
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
227
+ <span
228
+ class="fd-navigation__selection-indicator"
229
+ role="presentation"
230
+ aria-hidden="true"
231
+ aria-label="selection indicator"
232
+ ></span>
172
233
  </a>
173
234
  </div>
174
235
  </li>
175
236
  <li class="fd-navigation__list-item" aria-hidden="true">
176
- <div
177
- class="fd-navigation__item fd-navigation__item--child"
178
- aria-level="3"
179
- role="treeitem"
237
+ <div
238
+ class="fd-navigation__item fd-navigation__item--child"
239
+ aria-level="3"
240
+ role="treeitem"
180
241
  title="Partners"
181
242
  aria-roledescription="Navigation List Tree Item - Child"
182
- aria-expanded="false"
243
+ aria-expanded="false"
183
244
  aria-selected="false"
184
245
  >
185
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
246
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
186
247
  <span class="fd-navigation__text">Partners (external link)</span>
187
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
188
- <span class="fd-navigation__external-link-indicator" role="presentation" aria-hidden="true" aria-label="external link indicator"></span>
248
+ <span
249
+ class="fd-navigation__selection-indicator"
250
+ role="presentation"
251
+ aria-hidden="true"
252
+ aria-label="selection indicator"
253
+ ></span>
254
+ <span
255
+ class="fd-navigation__external-link-indicator"
256
+ role="presentation"
257
+ aria-hidden="true"
258
+ aria-label="external link indicator"
259
+ ></span>
189
260
  </a>
190
261
  </div>
191
262
  </li>
@@ -195,107 +266,151 @@
195
266
  </li>
196
267
 
197
268
  <li class="fd-navigation__list-item" aria-hidden="true">
198
- <div
199
- class="fd-navigation__item"
200
- aria-level="2"
201
- role="treeitem"
269
+ <div
270
+ class="fd-navigation__item"
271
+ aria-level="2"
272
+ role="treeitem"
202
273
  title="Sales"
203
274
  aria-roledescription="Navigation List Tree Item - Parent"
204
275
  aria-expanded="false"
205
276
  aria-selected="false"
206
277
  >
207
- <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
208
- <span class="fd-navigation__icon sap-icon--crm-sales" role="presentation" aria-hidden="true"></span>
278
+ <a
279
+ class="fd-navigation__link"
280
+ role="button"
281
+ tabindex="-1"
282
+ onclick="toggleNavigationSubmenu(event)"
283
+ >
284
+ <span
285
+ class="fd-navigation__icon sap-icon--crm-sales"
286
+ role="presentation"
287
+ aria-hidden="true"
288
+ ></span>
209
289
  <span class="fd-navigation__text">Sales</span>
210
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
211
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, collapsed"></span>
290
+ <span
291
+ class="fd-navigation__selection-indicator"
292
+ role="presentation"
293
+ aria-hidden="true"
294
+ aria-label="selection indicator"
295
+ ></span>
296
+ <span
297
+ class="fd-navigation__has-children-indicator"
298
+ role="presentation"
299
+ aria-hidden="true"
300
+ aria-label="has children indicator, collapsed"
301
+ ></span>
212
302
  </a>
213
303
  </div>
214
304
  <div class="fd-navigation__list-container" aria-hidden="true">
215
305
  <div class="fd-navigation__list-wrapper" aria-hidden="true">
216
- <ul
217
- class="fd-navigation__list fd-navigation__list--child-items"
218
- role="tree"
219
- aria-roledescription="Navigation List Tree - Child Items"
306
+ <ul
307
+ class="fd-navigation__list fd-navigation__list--child-items"
308
+ role="tree"
309
+ aria-roledescription="Navigation List Tree - Child Items"
220
310
  tabindex="-1"
221
311
  >
222
312
  <li class="fd-navigation__list-item" aria-hidden="true">
223
- <div
224
- class="fd-navigation__item fd-navigation__item--child"
225
- aria-level="3"
226
- role="treeitem"
313
+ <div
314
+ class="fd-navigation__item fd-navigation__item--child"
315
+ aria-level="3"
316
+ role="treeitem"
227
317
  title="Leads"
228
318
  aria-roledescription="Navigation List Tree Item - Child"
229
- aria-expanded="false"
319
+ aria-expanded="false"
230
320
  aria-selected="false"
231
321
  >
232
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
322
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
233
323
  <span class="fd-navigation__text">Leads</span>
234
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
324
+ <span
325
+ class="fd-navigation__selection-indicator"
326
+ role="presentation"
327
+ aria-hidden="true"
328
+ aria-label="selection indicator"
329
+ ></span>
235
330
  </a>
236
331
  </div>
237
332
  </li>
238
333
  <li class="fd-navigation__list-item" aria-hidden="true">
239
- <div
240
- class="fd-navigation__item fd-navigation__item--child"
241
- aria-level="3"
242
- role="treeitem"
334
+ <div
335
+ class="fd-navigation__item fd-navigation__item--child"
336
+ aria-level="3"
337
+ role="treeitem"
243
338
  title="Opportunities"
244
339
  aria-roledescription="Navigation List Tree Item - Child"
245
- aria-expanded="false"
340
+ aria-expanded="false"
246
341
  aria-selected="false"
247
342
  >
248
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
343
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
249
344
  <span class="fd-navigation__text">Opportunities</span>
250
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
345
+ <span
346
+ class="fd-navigation__selection-indicator"
347
+ role="presentation"
348
+ aria-hidden="true"
349
+ aria-label="selection indicator"
350
+ ></span>
251
351
  </a>
252
352
  </div>
253
353
  </li>
254
354
  <li class="fd-navigation__list-item" aria-hidden="true">
255
- <div
256
- class="fd-navigation__item fd-navigation__item--child"
257
- aria-level="3"
258
- role="treeitem"
355
+ <div
356
+ class="fd-navigation__item fd-navigation__item--child"
357
+ aria-level="3"
358
+ role="treeitem"
259
359
  title="Quotes"
260
360
  aria-roledescription="Navigation List Tree Item - Child"
261
- aria-expanded="false"
361
+ aria-expanded="false"
262
362
  aria-selected="false"
263
363
  >
264
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
364
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
265
365
  <span class="fd-navigation__text">Quotes</span>
266
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
366
+ <span
367
+ class="fd-navigation__selection-indicator"
368
+ role="presentation"
369
+ aria-hidden="true"
370
+ aria-label="selection indicator"
371
+ ></span>
267
372
  </a>
268
373
  </div>
269
374
  </li>
270
375
  <li class="fd-navigation__list-item" aria-hidden="true">
271
- <div
272
- class="fd-navigation__item fd-navigation__item--child"
273
- aria-level="3"
274
- role="treeitem"
376
+ <div
377
+ class="fd-navigation__item fd-navigation__item--child"
378
+ aria-level="3"
379
+ role="treeitem"
275
380
  title="Orders"
276
381
  aria-roledescription="Navigation List Tree Item - Child"
277
- aria-expanded="false"
382
+ aria-expanded="false"
278
383
  aria-selected="false"
279
384
  >
280
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
385
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
281
386
  <span class="fd-navigation__text">Orders</span>
282
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
387
+ <span
388
+ class="fd-navigation__selection-indicator"
389
+ role="presentation"
390
+ aria-hidden="true"
391
+ aria-label="selection indicator"
392
+ ></span>
283
393
  </a>
284
394
  </div>
285
395
  </li>
286
396
  <li class="fd-navigation__list-item" aria-hidden="true">
287
- <div
288
- class="fd-navigation__item fd-navigation__item--child"
289
- aria-level="3"
290
- role="treeitem"
397
+ <div
398
+ class="fd-navigation__item fd-navigation__item--child"
399
+ aria-level="3"
400
+ role="treeitem"
291
401
  title="Invoices"
292
402
  aria-roledescription="Navigation List Tree Item - Child"
293
- aria-expanded="false"
403
+ aria-expanded="false"
294
404
  aria-selected="false"
295
405
  >
296
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
406
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
297
407
  <span class="fd-navigation__text">Invoices</span>
298
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
408
+ <span
409
+ class="fd-navigation__selection-indicator"
410
+ role="presentation"
411
+ aria-hidden="true"
412
+ aria-label="selection indicator"
413
+ ></span>
299
414
  </a>
300
415
  </div>
301
416
  </li>
@@ -306,14 +421,17 @@
306
421
  </ul>
307
422
  </li>
308
423
 
309
- <li class="fd-navigation__list-item fd-navigation__list-item--separator" role="presentation" aria-hidden="true">
310
- </li>
424
+ <li
425
+ class="fd-navigation__list-item fd-navigation__list-item--separator"
426
+ role="presentation"
427
+ aria-hidden="true"
428
+ ></li>
311
429
 
312
430
  <li class="fd-navigation__list-item" aria-hidden="true">
313
- <div
314
- class="fd-navigation__item fd-navigation__item--group"
315
- aria-level="1"
316
- role="treeitem"
431
+ <div
432
+ class="fd-navigation__item fd-navigation__item--group"
433
+ aria-level="1"
434
+ role="treeitem"
317
435
  title="Additional Items"
318
436
  aria-roledescription="Navigation List Tree Item - Group"
319
437
  aria-selected="false"
@@ -321,104 +439,152 @@
321
439
  >
322
440
  <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
323
441
  <span class="fd-navigation__text">Additional Items</span>
324
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
442
+ <span
443
+ class="fd-navigation__has-children-indicator"
444
+ role="presentation"
445
+ aria-hidden="true"
446
+ aria-label="has children indicator, expanded"
447
+ ></span>
325
448
  </a>
326
449
  </div>
327
450
 
328
- <ul
329
- class="fd-navigation__list fd-navigation__list--parent-items"
330
- role="tree"
331
- aria-roledescription="Navigation List Tree - Parent Items"
451
+ <ul
452
+ class="fd-navigation__list fd-navigation__list--parent-items"
453
+ role="tree"
454
+ aria-roledescription="Navigation List Tree - Parent Items"
332
455
  tabindex="-1"
333
456
  >
334
457
  <li class="fd-navigation__list-item" aria-hidden="true">
335
- <div
336
- class="fd-navigation__item"
337
- aria-level="2"
458
+ <div
459
+ class="fd-navigation__item"
460
+ aria-level="2"
338
461
  role="treeitem"
339
462
  title="Products"
340
463
  aria-roledescription="Navigation List Tree Item - Parent"
341
464
  aria-selected="false"
342
465
  aria-expanded="false"
343
466
  >
344
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
345
- <span class="fd-navigation__icon sap-icon--customer-view" role="presentation" aria-hidden="true"></span>
467
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
468
+ <span
469
+ class="fd-navigation__icon sap-icon--customer-view"
470
+ role="presentation"
471
+ aria-hidden="true"
472
+ ></span>
346
473
  <span class="fd-navigation__text">Products</span>
347
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
474
+ <span
475
+ class="fd-navigation__selection-indicator"
476
+ role="presentation"
477
+ aria-hidden="true"
478
+ aria-label="selection indicator"
479
+ ></span>
348
480
  </a>
349
481
  </div>
350
482
  </li>
351
483
 
352
484
  <li class="fd-navigation__list-item" aria-hidden="true">
353
- <div
354
- class="fd-navigation__item"
355
- aria-level="2"
356
- role="treeitem"
485
+ <div
486
+ class="fd-navigation__item"
487
+ aria-level="2"
488
+ role="treeitem"
357
489
  title="Marketing"
358
490
  aria-roledescription="Navigation List Tree Item - Parent"
359
- aria-expanded="true"
491
+ aria-expanded="true"
360
492
  aria-selected="false"
361
493
  >
362
- <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
363
- <span class="fd-navigation__icon sap-icon--marketing-campaign" role="presentation" aria-hidden="true"></span>
494
+ <a
495
+ class="fd-navigation__link"
496
+ role="button"
497
+ tabindex="-1"
498
+ onclick="toggleNavigationSubmenu(event)"
499
+ >
500
+ <span
501
+ class="fd-navigation__icon sap-icon--marketing-campaign"
502
+ role="presentation"
503
+ aria-hidden="true"
504
+ ></span>
364
505
  <span class="fd-navigation__text">Marketing</span>
365
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
366
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
506
+ <span
507
+ class="fd-navigation__selection-indicator"
508
+ role="presentation"
509
+ aria-hidden="true"
510
+ aria-label="selection indicator"
511
+ ></span>
512
+ <span
513
+ class="fd-navigation__has-children-indicator"
514
+ role="presentation"
515
+ aria-hidden="true"
516
+ aria-label="has children indicator, expanded"
517
+ ></span>
367
518
  </a>
368
519
  </div>
369
520
  <div class="fd-navigation__list-container" aria-hidden="true">
370
521
  <div class="fd-navigation__list-wrapper" aria-hidden="true">
371
- <ul
372
- class="fd-navigation__list fd-navigation__list--child-items"
373
- role="tree"
374
- aria-roledescription="Navigation List Tree - Child Items"
522
+ <ul
523
+ class="fd-navigation__list fd-navigation__list--child-items"
524
+ role="tree"
525
+ aria-roledescription="Navigation List Tree - Child Items"
375
526
  tabindex="-1"
376
527
  >
377
528
  <li class="fd-navigation__list-item" aria-hidden="true">
378
- <div
379
- class="fd-navigation__item fd-navigation__item--child"
380
- aria-level="3"
381
- role="treeitem"
529
+ <div
530
+ class="fd-navigation__item fd-navigation__item--child"
531
+ aria-level="3"
532
+ role="treeitem"
382
533
  title="Campaigns"
383
534
  aria-roledescription="Navigation List Tree Item - Child"
384
- aria-expanded="false"
535
+ aria-expanded="false"
385
536
  aria-selected="false"
386
537
  >
387
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
538
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
388
539
  <span class="fd-navigation__text">Campaigns</span>
389
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
540
+ <span
541
+ class="fd-navigation__selection-indicator"
542
+ role="presentation"
543
+ aria-hidden="true"
544
+ aria-label="selection indicator"
545
+ ></span>
390
546
  </a>
391
547
  </div>
392
548
  </li>
393
549
  <li class="fd-navigation__list-item" aria-hidden="true">
394
- <div
395
- class="fd-navigation__item fd-navigation__item--child"
396
- aria-level="3"
397
- role="treeitem"
550
+ <div
551
+ class="fd-navigation__item fd-navigation__item--child"
552
+ aria-level="3"
553
+ role="treeitem"
398
554
  title="E-Mail Marketing"
399
555
  aria-roledescription="Navigation List Tree Item - Child"
400
- aria-expanded="false"
556
+ aria-expanded="false"
401
557
  aria-selected="false"
402
558
  >
403
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
559
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
404
560
  <span class="fd-navigation__text">E-Mail Marketing</span>
405
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
561
+ <span
562
+ class="fd-navigation__selection-indicator"
563
+ role="presentation"
564
+ aria-hidden="true"
565
+ aria-label="selection indicator"
566
+ ></span>
406
567
  </a>
407
568
  </div>
408
569
  </li>
409
570
  <li class="fd-navigation__list-item" aria-hidden="true">
410
- <div
411
- class="fd-navigation__item fd-navigation__item--child"
412
- aria-level="3"
413
- role="treeitem"
571
+ <div
572
+ class="fd-navigation__item fd-navigation__item--child"
573
+ aria-level="3"
574
+ role="treeitem"
414
575
  title="Marketing Automation"
415
576
  aria-roledescription="Navigation List Tree Item - Child"
416
- aria-expanded="false"
577
+ aria-expanded="false"
417
578
  aria-selected="false"
418
579
  >
419
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
580
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
420
581
  <span class="fd-navigation__text">Marketing Automation</span>
421
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
582
+ <span
583
+ class="fd-navigation__selection-indicator"
584
+ role="presentation"
585
+ aria-hidden="true"
586
+ aria-label="selection indicator"
587
+ ></span>
422
588
  </a>
423
589
  </div>
424
590
  </li>
@@ -428,75 +594,109 @@
428
594
  </li>
429
595
 
430
596
  <li class="fd-navigation__list-item" aria-hidden="true">
431
- <div
432
- class="fd-navigation__item"
433
- aria-level="2"
434
- role="treeitem"
597
+ <div
598
+ class="fd-navigation__item"
599
+ aria-level="2"
600
+ role="treeitem"
435
601
  title="Reports"
436
602
  aria-roledescription="Navigation List Tree Item - Parent"
437
- aria-expanded="true"
603
+ aria-expanded="true"
438
604
  aria-selected="false"
439
605
  >
440
- <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
441
- <span class="fd-navigation__icon sap-icon--manager-insight" role="presentation" aria-hidden="true"></span>
606
+ <a
607
+ class="fd-navigation__link"
608
+ role="button"
609
+ tabindex="-1"
610
+ onclick="toggleNavigationSubmenu(event)"
611
+ >
612
+ <span
613
+ class="fd-navigation__icon sap-icon--manager-insight"
614
+ role="presentation"
615
+ aria-hidden="true"
616
+ ></span>
442
617
  <span class="fd-navigation__text">Reports</span>
443
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
444
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
618
+ <span
619
+ class="fd-navigation__selection-indicator"
620
+ role="presentation"
621
+ aria-hidden="true"
622
+ aria-label="selection indicator"
623
+ ></span>
624
+ <span
625
+ class="fd-navigation__has-children-indicator"
626
+ role="presentation"
627
+ aria-hidden="true"
628
+ aria-label="has children indicator, expanded"
629
+ ></span>
445
630
  </a>
446
631
  </div>
447
632
  <div class="fd-navigation__list-container" aria-hidden="true">
448
633
  <div class="fd-navigation__list-wrapper" aria-hidden="true">
449
- <ul
450
- class="fd-navigation__list fd-navigation__list--child-items"
451
- role="tree"
452
- aria-roledescription="Navigation List Tree - Child Items"
634
+ <ul
635
+ class="fd-navigation__list fd-navigation__list--child-items"
636
+ role="tree"
637
+ aria-roledescription="Navigation List Tree - Child Items"
453
638
  tabindex="-1"
454
639
  >
455
640
  <li class="fd-navigation__list-item" aria-hidden="true">
456
- <div
457
- class="fd-navigation__item fd-navigation__item--child"
458
- aria-level="3"
459
- role="treeitem"
641
+ <div
642
+ class="fd-navigation__item fd-navigation__item--child"
643
+ aria-level="3"
644
+ role="treeitem"
460
645
  title="Sales Report"
461
646
  aria-roledescription="Navigation List Tree Item - Child"
462
- aria-expanded="false"
647
+ aria-expanded="false"
463
648
  aria-selected="false"
464
649
  >
465
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
650
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
466
651
  <span class="fd-navigation__text">Sales Report</span>
467
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
652
+ <span
653
+ class="fd-navigation__selection-indicator"
654
+ role="presentation"
655
+ aria-hidden="true"
656
+ aria-label="selection indicator"
657
+ ></span>
468
658
  </a>
469
659
  </div>
470
660
  </li>
471
661
  <li class="fd-navigation__list-item" aria-hidden="true">
472
- <div
473
- class="fd-navigation__item fd-navigation__item--child"
474
- aria-level="3"
475
- role="treeitem"
662
+ <div
663
+ class="fd-navigation__item fd-navigation__item--child"
664
+ aria-level="3"
665
+ role="treeitem"
476
666
  title="Customer Reports"
477
667
  aria-roledescription="Navigation List Tree Item - Child"
478
- aria-expanded="false"
668
+ aria-expanded="false"
479
669
  aria-selected="false"
480
670
  >
481
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
671
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
482
672
  <span class="fd-navigation__text">Customer Reports</span>
483
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
673
+ <span
674
+ class="fd-navigation__selection-indicator"
675
+ role="presentation"
676
+ aria-hidden="true"
677
+ aria-label="selection indicator"
678
+ ></span>
484
679
  </a>
485
680
  </div>
486
681
  </li>
487
682
  <li class="fd-navigation__list-item" aria-hidden="true">
488
- <div
489
- class="fd-navigation__item fd-navigation__item--child"
490
- aria-level="3"
491
- role="treeitem"
683
+ <div
684
+ class="fd-navigation__item fd-navigation__item--child"
685
+ aria-level="3"
686
+ role="treeitem"
492
687
  title="Marketing Reports"
493
688
  aria-roledescription="Navigation List Tree Item - Child"
494
- aria-expanded="false"
689
+ aria-expanded="false"
495
690
  aria-selected="false"
496
691
  >
497
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
692
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
498
693
  <span class="fd-navigation__text">Marketing Reports</span>
499
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
694
+ <span
695
+ class="fd-navigation__selection-indicator"
696
+ role="presentation"
697
+ aria-hidden="true"
698
+ aria-label="selection indicator"
699
+ ></span>
500
700
  </a>
501
701
  </div>
502
702
  </li>
@@ -507,48 +707,54 @@
507
707
  </ul>
508
708
  </li>
509
709
 
510
- <li class="fd-navigation__list-item fd-navigation__list-item--spacer" role="presentation" aria-hidden="true">
511
- </li>
710
+ <li
711
+ class="fd-navigation__list-item fd-navigation__list-item--spacer"
712
+ role="presentation"
713
+ aria-hidden="true"
714
+ ></li>
512
715
  </ul>
513
716
  </div>
514
717
 
515
718
  <div class="fd-navigation__container fd-navigation__container--bottom">
516
- <ul
517
- class="fd-navigation__list"
518
- role="tree"
519
- aria-roledescription="Navigation List Tree"
520
- tabindex="-1">
521
-
719
+ <ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
522
720
  <li class="fd-navigation__list-item" aria-hidden="true">
523
- <div
524
- class="fd-navigation__item fd-navigation__item--create"
525
- aria-level="1"
526
- role="treeitem"
527
- title="Quick Create"
721
+ <div
722
+ class="fd-navigation__item fd-navigation__item--create"
723
+ aria-level="1"
724
+ role="treeitem"
725
+ title="Create Ticket"
528
726
  aria-roledescription="Navigation List Tree Item"
529
727
  aria-selected="false"
530
728
  aria-expanded="false"
531
729
  >
532
730
  <button class="fd-navigation__link">
533
- <span class="fd-navigation__icon sap-icon--add" role="presentation" aria-hidden="true"></span>
534
- <span class="fd-navigation__text">Quick Create</span>
731
+ <span
732
+ class="fd-navigation__icon sap-icon--write-new"
733
+ role="presentation"
734
+ aria-hidden="true"
735
+ ></span>
736
+ <span class="fd-navigation__text">Create Ticket</span>
535
737
  <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
536
738
  </button>
537
739
  </div>
538
740
  </li>
539
-
741
+
540
742
  <li class="fd-navigation__list-item" aria-hidden="true">
541
- <div
542
- class="fd-navigation__item"
543
- aria-level="1"
544
- role="treeitem"
743
+ <div
744
+ class="fd-navigation__item"
745
+ aria-level="1"
746
+ role="treeitem"
545
747
  title="Product Settings"
546
748
  aria-roledescription="Navigation List Tree Item"
547
749
  aria-selected="false"
548
750
  aria-expanded="false"
549
751
  >
550
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
551
- <span class="fd-navigation__icon sap-icon--settings" role="presentation" aria-hidden="true"></span>
752
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
753
+ <span
754
+ class="fd-navigation__icon sap-icon--settings"
755
+ role="presentation"
756
+ aria-hidden="true"
757
+ ></span>
552
758
  <span class="fd-navigation__text">Product Settings</span>
553
759
  <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
554
760
  </a>