@patternfly/patternfly 6.5.0-prerelease.24 → 6.5.0-prerelease.26

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 (17) hide show
  1. package/components/Compass/compass.css +85 -9
  2. package/components/Compass/compass.scss +92 -51
  3. package/components/_index.css +85 -9
  4. package/docs/components/Compass/examples/Compass.css +2 -2
  5. package/docs/components/Compass/examples/Compass.md +12 -7
  6. package/docs/components/Tabs/examples/Tabs.md +813 -77
  7. package/docs/demos/Card/examples/Card.md +14 -2
  8. package/docs/demos/Compass/examples/Compass.md +133 -46
  9. package/docs/demos/DescriptionList/examples/DescriptionList.md +11 -2
  10. package/docs/demos/Drawer/examples/Drawer.md +11 -2
  11. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +16 -2
  12. package/docs/demos/Tabs/examples/Tabs.md +72 -9
  13. package/package.json +1 -1
  14. package/patternfly-no-globals.css +85 -9
  15. package/patternfly.css +85 -9
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -15,7 +15,7 @@ wrapperTag: div
15
15
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
16
16
  "
17
17
  >
18
- <div class="pf-v6-c-compass__header">
18
+ <div class="pf-v6-c-compass__header pf-m-expanded">
19
19
  <div class="pf-v6-c-compass__logo">
20
20
  <svg
21
21
  width="192"
@@ -152,7 +152,7 @@ wrapperTag: div
152
152
  </button>
153
153
  </div>
154
154
  <div class="pf-v6-c-compass__nav-main">
155
- <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
155
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Compass primary">
156
156
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
157
157
  <button
158
158
  class="pf-v6-c-button pf-m-small pf-m-plain"
@@ -165,12 +165,17 @@ wrapperTag: div
165
165
  </span>
166
166
  </button>
167
167
  </div>
168
- <ul class="pf-v6-c-tabs__list" role="tablist">
168
+ <ul
169
+ class="pf-v6-c-tabs__list"
170
+ role="tablist"
171
+ aria-label="Compass primary"
172
+ >
169
173
  <li class="pf-v6-c-tabs__item" role="presentation">
170
174
  <a
171
175
  class="pf-v6-c-tabs__link"
172
176
  href="#"
173
177
  role="tab"
178
+ aria-selected="false"
174
179
  id="primary-nav-users-link"
175
180
  >
176
181
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -181,6 +186,7 @@ wrapperTag: div
181
186
  class="pf-v6-c-tabs__link"
182
187
  href="#"
183
188
  role="tab"
189
+ aria-selected="true"
184
190
  id="primary-nav-containers-link"
185
191
  >
186
192
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -191,6 +197,7 @@ wrapperTag: div
191
197
  class="pf-v6-c-tabs__link"
192
198
  href="#"
193
199
  role="tab"
200
+ aria-selected="false"
194
201
  id="primary-nav-database-link"
195
202
  >
196
203
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -202,6 +209,7 @@ wrapperTag: div
202
209
  class="pf-v6-c-tabs__link"
203
210
  href="#"
204
211
  role="tab"
212
+ aria-selected="false"
205
213
  id="primary-nav-server-link"
206
214
  >
207
215
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -212,6 +220,7 @@ wrapperTag: div
212
220
  class="pf-v6-c-tabs__link"
213
221
  href="#"
214
222
  role="tab"
223
+ aria-selected="false"
215
224
  id="primary-nav-system-link"
216
225
  >
217
226
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -222,6 +231,7 @@ wrapperTag: div
222
231
  class="pf-v6-c-tabs__link"
223
232
  href="#"
224
233
  role="tab"
234
+ aria-selected="false"
225
235
  id="primary-nav-network-wired-link"
226
236
  >
227
237
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -284,7 +294,7 @@ wrapperTag: div
284
294
  <div class="pf-v6-c-compass__nav-main">
285
295
  <nav
286
296
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
287
- aria-label="Secondary nav"
297
+ aria-label="Compass secondary"
288
298
  >
289
299
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
290
300
  <button
@@ -298,12 +308,17 @@ wrapperTag: div
298
308
  </span>
299
309
  </button>
300
310
  </div>
301
- <ul class="pf-v6-c-tabs__list" role="tablist">
311
+ <ul
312
+ class="pf-v6-c-tabs__list"
313
+ role="tablist"
314
+ aria-label="Compass secondary"
315
+ >
302
316
  <li class="pf-v6-c-tabs__item" role="presentation">
303
317
  <a
304
318
  class="pf-v6-c-tabs__link"
305
319
  href="#"
306
320
  role="tab"
321
+ aria-selected="false"
307
322
  id="secondary-nav-sub-1-link"
308
323
  >
309
324
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -314,6 +329,7 @@ wrapperTag: div
314
329
  class="pf-v6-c-tabs__link"
315
330
  href="#"
316
331
  role="tab"
332
+ aria-selected="false"
317
333
  id="secondary-nav-sub-2-link"
318
334
  >
319
335
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -324,6 +340,7 @@ wrapperTag: div
324
340
  class="pf-v6-c-tabs__link"
325
341
  href="#"
326
342
  role="tab"
343
+ aria-selected="true"
327
344
  id="secondary-nav-sub-3-link"
328
345
  >
329
346
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -337,6 +354,7 @@ wrapperTag: div
337
354
  tabindex="-1"
338
355
  href="#"
339
356
  role="tab"
357
+ aria-selected="false"
340
358
  id="secondary-nav-sub-disabled-link"
341
359
  >
342
360
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -348,6 +366,7 @@ wrapperTag: div
348
366
  aria-disabled="true"
349
367
  href="#"
350
368
  role="tab"
369
+ aria-selected="false"
351
370
  id="secondary-nav-sub-aria-disabled-link"
352
371
  >
353
372
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -358,6 +377,7 @@ wrapperTag: div
358
377
  class="pf-v6-c-tabs__link"
359
378
  href="#"
360
379
  role="tab"
380
+ aria-selected="false"
361
381
  id="secondary-nav-sub-6-link"
362
382
  >
363
383
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -405,7 +425,7 @@ wrapperTag: div
405
425
  </button>
406
426
  </div>
407
427
  </div>
408
- <div class="pf-v6-c-compass__sidebar pf-m-start">
428
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">
409
429
  <div class="pf-v6-c-compass__panel pf-m-pill">
410
430
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
411
431
  <div class="pf-v6-c-action-list__item">
@@ -1212,8 +1232,15 @@ wrapperTag: div
1212
1232
  </div>
1213
1233
  </div>
1214
1234
  </div>
1235
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
1236
+ <div class="pf-v6-c-compass__message-bar">
1237
+ <div
1238
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
1239
+ >chatbot message bar</div>
1240
+ </div>
1241
+ </div>
1215
1242
  </div>
1216
- <div class="pf-v6-c-compass__sidebar pf-m-end">
1243
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
1217
1244
  <div class="pf-v6-c-compass__panel pf-m-pill">
1218
1245
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
1219
1246
  <div class="pf-v6-c-action-list__item">
@@ -1288,11 +1315,6 @@ wrapperTag: div
1288
1315
  </div>
1289
1316
  </div>
1290
1317
  </div>
1291
- <div class="pf-v6-c-compass__footer">
1292
- <div
1293
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
1294
- >chatbot message bar</div>
1295
- </div>
1296
1318
  </div>
1297
1319
 
1298
1320
  ```
@@ -1307,7 +1329,7 @@ wrapperTag: div
1307
1329
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
1308
1330
  "
1309
1331
  >
1310
- <div class="pf-v6-c-compass__header">
1332
+ <div class="pf-v6-c-compass__header pf-m-expanded">
1311
1333
  <div class="pf-v6-c-compass__logo">
1312
1334
  <svg
1313
1335
  width="192"
@@ -1463,6 +1485,7 @@ wrapperTag: div
1463
1485
  class="pf-v6-c-tabs__link"
1464
1486
  href="#"
1465
1487
  role="tab"
1488
+ aria-selected="false"
1466
1489
  id="primary-nav-users-link"
1467
1490
  >
1468
1491
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1473,6 +1496,7 @@ wrapperTag: div
1473
1496
  class="pf-v6-c-tabs__link"
1474
1497
  href="#"
1475
1498
  role="tab"
1499
+ aria-selected="true"
1476
1500
  id="primary-nav-containers-link"
1477
1501
  >
1478
1502
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1483,6 +1507,7 @@ wrapperTag: div
1483
1507
  class="pf-v6-c-tabs__link"
1484
1508
  href="#"
1485
1509
  role="tab"
1510
+ aria-selected="false"
1486
1511
  id="primary-nav-database-link"
1487
1512
  >
1488
1513
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1494,6 +1519,7 @@ wrapperTag: div
1494
1519
  class="pf-v6-c-tabs__link"
1495
1520
  href="#"
1496
1521
  role="tab"
1522
+ aria-selected="false"
1497
1523
  id="primary-nav-server-link"
1498
1524
  >
1499
1525
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -1504,6 +1530,7 @@ wrapperTag: div
1504
1530
  class="pf-v6-c-tabs__link"
1505
1531
  href="#"
1506
1532
  role="tab"
1533
+ aria-selected="false"
1507
1534
  id="primary-nav-system-link"
1508
1535
  >
1509
1536
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -1514,6 +1541,7 @@ wrapperTag: div
1514
1541
  class="pf-v6-c-tabs__link"
1515
1542
  href="#"
1516
1543
  role="tab"
1544
+ aria-selected="false"
1517
1545
  id="primary-nav-network-wired-link"
1518
1546
  >
1519
1547
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1576,7 +1604,7 @@ wrapperTag: div
1576
1604
  <div class="pf-v6-c-compass__nav-main">
1577
1605
  <nav
1578
1606
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
1579
- aria-label="Secondary nav"
1607
+ aria-label="Compass secondary"
1580
1608
  >
1581
1609
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1582
1610
  <button
@@ -1590,12 +1618,17 @@ wrapperTag: div
1590
1618
  </span>
1591
1619
  </button>
1592
1620
  </div>
1593
- <ul class="pf-v6-c-tabs__list" role="tablist">
1621
+ <ul
1622
+ class="pf-v6-c-tabs__list"
1623
+ role="tablist"
1624
+ aria-label="Compass secondary"
1625
+ >
1594
1626
  <li class="pf-v6-c-tabs__item" role="presentation">
1595
1627
  <a
1596
1628
  class="pf-v6-c-tabs__link"
1597
1629
  href="#"
1598
1630
  role="tab"
1631
+ aria-selected="false"
1599
1632
  id="secondary-nav-sub-1-link"
1600
1633
  >
1601
1634
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -1606,6 +1639,7 @@ wrapperTag: div
1606
1639
  class="pf-v6-c-tabs__link"
1607
1640
  href="#"
1608
1641
  role="tab"
1642
+ aria-selected="false"
1609
1643
  id="secondary-nav-sub-2-link"
1610
1644
  >
1611
1645
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -1616,6 +1650,7 @@ wrapperTag: div
1616
1650
  class="pf-v6-c-tabs__link"
1617
1651
  href="#"
1618
1652
  role="tab"
1653
+ aria-selected="true"
1619
1654
  id="secondary-nav-sub-3-link"
1620
1655
  >
1621
1656
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -1629,6 +1664,7 @@ wrapperTag: div
1629
1664
  tabindex="-1"
1630
1665
  href="#"
1631
1666
  role="tab"
1667
+ aria-selected="false"
1632
1668
  id="secondary-nav-sub-disabled-link"
1633
1669
  >
1634
1670
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -1640,6 +1676,7 @@ wrapperTag: div
1640
1676
  aria-disabled="true"
1641
1677
  href="#"
1642
1678
  role="tab"
1679
+ aria-selected="false"
1643
1680
  id="secondary-nav-sub-aria-disabled-link"
1644
1681
  >
1645
1682
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -1650,6 +1687,7 @@ wrapperTag: div
1650
1687
  class="pf-v6-c-tabs__link"
1651
1688
  href="#"
1652
1689
  role="tab"
1690
+ aria-selected="false"
1653
1691
  id="secondary-nav-sub-6-link"
1654
1692
  >
1655
1693
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -1697,7 +1735,7 @@ wrapperTag: div
1697
1735
  </button>
1698
1736
  </div>
1699
1737
  </div>
1700
- <div class="pf-v6-c-compass__sidebar pf-m-start">
1738
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">
1701
1739
  <div class="pf-v6-c-compass__panel pf-m-pill">
1702
1740
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
1703
1741
  <div class="pf-v6-c-action-list__item">
@@ -2730,8 +2768,15 @@ wrapperTag: div
2730
2768
  </div>
2731
2769
  </div>
2732
2770
  </div>
2771
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
2772
+ <div class="pf-v6-c-compass__message-bar">
2773
+ <div
2774
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
2775
+ >chatbot message bar</div>
2776
+ </div>
2777
+ </div>
2733
2778
  </div>
2734
- <div class="pf-v6-c-compass__sidebar pf-m-end">
2779
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
2735
2780
  <div class="pf-v6-c-compass__panel pf-m-pill">
2736
2781
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
2737
2782
  <div class="pf-v6-c-action-list__item">
@@ -2806,11 +2851,6 @@ wrapperTag: div
2806
2851
  </div>
2807
2852
  </div>
2808
2853
  </div>
2809
- <div class="pf-v6-c-compass__footer">
2810
- <div
2811
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
2812
- >chatbot message bar</div>
2813
- </div>
2814
2854
  </div>
2815
2855
 
2816
2856
  ```
@@ -2825,7 +2865,7 @@ wrapperTag: div
2825
2865
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
2826
2866
  "
2827
2867
  >
2828
- <div class="pf-v6-c-compass__header">
2868
+ <div class="pf-v6-c-compass__header pf-m-expanded">
2829
2869
  <div class="pf-v6-c-compass__logo">
2830
2870
  <svg
2831
2871
  width="192"
@@ -2962,7 +3002,7 @@ wrapperTag: div
2962
3002
  </button>
2963
3003
  </div>
2964
3004
  <div class="pf-v6-c-compass__nav-main">
2965
- <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
3005
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Compass primary">
2966
3006
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2967
3007
  <button
2968
3008
  class="pf-v6-c-button pf-m-small pf-m-plain"
@@ -2975,12 +3015,17 @@ wrapperTag: div
2975
3015
  </span>
2976
3016
  </button>
2977
3017
  </div>
2978
- <ul class="pf-v6-c-tabs__list" role="tablist">
3018
+ <ul
3019
+ class="pf-v6-c-tabs__list"
3020
+ role="tablist"
3021
+ aria-label="Compass primary"
3022
+ >
2979
3023
  <li class="pf-v6-c-tabs__item" role="presentation">
2980
3024
  <a
2981
3025
  class="pf-v6-c-tabs__link"
2982
3026
  href="#"
2983
3027
  role="tab"
3028
+ aria-selected="false"
2984
3029
  id="primary-nav-users-link"
2985
3030
  >
2986
3031
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -2991,6 +3036,7 @@ wrapperTag: div
2991
3036
  class="pf-v6-c-tabs__link"
2992
3037
  href="#"
2993
3038
  role="tab"
3039
+ aria-selected="true"
2994
3040
  id="primary-nav-containers-link"
2995
3041
  >
2996
3042
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -3001,6 +3047,7 @@ wrapperTag: div
3001
3047
  class="pf-v6-c-tabs__link"
3002
3048
  href="#"
3003
3049
  role="tab"
3050
+ aria-selected="false"
3004
3051
  id="primary-nav-database-link"
3005
3052
  >
3006
3053
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -3012,6 +3059,7 @@ wrapperTag: div
3012
3059
  class="pf-v6-c-tabs__link"
3013
3060
  href="#"
3014
3061
  role="tab"
3062
+ aria-selected="false"
3015
3063
  id="primary-nav-server-link"
3016
3064
  >
3017
3065
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -3022,6 +3070,7 @@ wrapperTag: div
3022
3070
  class="pf-v6-c-tabs__link"
3023
3071
  href="#"
3024
3072
  role="tab"
3073
+ aria-selected="false"
3025
3074
  id="primary-nav-system-link"
3026
3075
  >
3027
3076
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -3032,6 +3081,7 @@ wrapperTag: div
3032
3081
  class="pf-v6-c-tabs__link"
3033
3082
  href="#"
3034
3083
  role="tab"
3084
+ aria-selected="false"
3035
3085
  id="primary-nav-network-wired-link"
3036
3086
  >
3037
3087
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -3094,7 +3144,7 @@ wrapperTag: div
3094
3144
  <div class="pf-v6-c-compass__nav-main">
3095
3145
  <nav
3096
3146
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
3097
- aria-label="Secondary nav"
3147
+ aria-label="Compass secondary"
3098
3148
  >
3099
3149
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3100
3150
  <button
@@ -3108,12 +3158,17 @@ wrapperTag: div
3108
3158
  </span>
3109
3159
  </button>
3110
3160
  </div>
3111
- <ul class="pf-v6-c-tabs__list" role="tablist">
3161
+ <ul
3162
+ class="pf-v6-c-tabs__list"
3163
+ role="tablist"
3164
+ aria-label="Compass secondary"
3165
+ >
3112
3166
  <li class="pf-v6-c-tabs__item" role="presentation">
3113
3167
  <a
3114
3168
  class="pf-v6-c-tabs__link"
3115
3169
  href="#"
3116
3170
  role="tab"
3171
+ aria-selected="false"
3117
3172
  id="secondary-nav-sub-1-link"
3118
3173
  >
3119
3174
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -3124,6 +3179,7 @@ wrapperTag: div
3124
3179
  class="pf-v6-c-tabs__link"
3125
3180
  href="#"
3126
3181
  role="tab"
3182
+ aria-selected="false"
3127
3183
  id="secondary-nav-sub-2-link"
3128
3184
  >
3129
3185
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -3134,6 +3190,7 @@ wrapperTag: div
3134
3190
  class="pf-v6-c-tabs__link"
3135
3191
  href="#"
3136
3192
  role="tab"
3193
+ aria-selected="true"
3137
3194
  id="secondary-nav-sub-3-link"
3138
3195
  >
3139
3196
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -3147,6 +3204,7 @@ wrapperTag: div
3147
3204
  tabindex="-1"
3148
3205
  href="#"
3149
3206
  role="tab"
3207
+ aria-selected="false"
3150
3208
  id="secondary-nav-sub-disabled-link"
3151
3209
  >
3152
3210
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -3158,6 +3216,7 @@ wrapperTag: div
3158
3216
  aria-disabled="true"
3159
3217
  href="#"
3160
3218
  role="tab"
3219
+ aria-selected="false"
3161
3220
  id="secondary-nav-sub-aria-disabled-link"
3162
3221
  >
3163
3222
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -3168,6 +3227,7 @@ wrapperTag: div
3168
3227
  class="pf-v6-c-tabs__link"
3169
3228
  href="#"
3170
3229
  role="tab"
3230
+ aria-selected="false"
3171
3231
  id="secondary-nav-sub-6-link"
3172
3232
  >
3173
3233
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -3215,7 +3275,7 @@ wrapperTag: div
3215
3275
  </button>
3216
3276
  </div>
3217
3277
  </div>
3218
- <div class="pf-v6-c-compass__sidebar pf-m-start">
3278
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">
3219
3279
  <div class="pf-v6-c-compass__panel pf-m-pill">
3220
3280
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
3221
3281
  <div class="pf-v6-c-action-list__item">
@@ -4695,8 +4755,15 @@ wrapperTag: div
4695
4755
  </div>
4696
4756
  </div>
4697
4757
  </div>
4758
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
4759
+ <div class="pf-v6-c-compass__message-bar">
4760
+ <div
4761
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
4762
+ >chatbot message bar</div>
4763
+ </div>
4764
+ </div>
4698
4765
  </div>
4699
- <div class="pf-v6-c-compass__sidebar pf-m-end">
4766
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
4700
4767
  <div class="pf-v6-c-compass__panel pf-m-pill">
4701
4768
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
4702
4769
  <div class="pf-v6-c-action-list__item">
@@ -4771,11 +4838,6 @@ wrapperTag: div
4771
4838
  </div>
4772
4839
  </div>
4773
4840
  </div>
4774
- <div class="pf-v6-c-compass__footer">
4775
- <div
4776
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
4777
- >chatbot message bar</div>
4778
- </div>
4779
4841
  </div>
4780
4842
 
4781
4843
  ```
@@ -4794,7 +4856,7 @@ wrapperTag: div
4794
4856
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
4795
4857
  "
4796
4858
  >
4797
- <div class="pf-v6-c-compass__header">
4859
+ <div class="pf-v6-c-compass__header pf-m-expanded">
4798
4860
  <div class="pf-v6-c-compass__logo">
4799
4861
  <svg
4800
4862
  width="192"
@@ -4931,7 +4993,10 @@ wrapperTag: div
4931
4993
  </button>
4932
4994
  </div>
4933
4995
  <div class="pf-v6-c-compass__nav-main">
4934
- <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
4996
+ <nav
4997
+ class="pf-v6-c-tabs pf-m-nav"
4998
+ aria-label="Compass primary"
4999
+ >
4935
5000
  <div
4936
5001
  class="pf-v6-c-tabs__scroll-button"
4937
5002
  aria-hidden="true"
@@ -4947,12 +5012,17 @@ wrapperTag: div
4947
5012
  </span>
4948
5013
  </button>
4949
5014
  </div>
4950
- <ul class="pf-v6-c-tabs__list" role="tablist">
5015
+ <ul
5016
+ class="pf-v6-c-tabs__list"
5017
+ role="tablist"
5018
+ aria-label="Compass primary"
5019
+ >
4951
5020
  <li class="pf-v6-c-tabs__item" role="presentation">
4952
5021
  <a
4953
5022
  class="pf-v6-c-tabs__link"
4954
5023
  href="#"
4955
5024
  role="tab"
5025
+ aria-selected="false"
4956
5026
  id="primary-nav-users-link"
4957
5027
  >
4958
5028
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -4966,6 +5036,7 @@ wrapperTag: div
4966
5036
  class="pf-v6-c-tabs__link"
4967
5037
  href="#"
4968
5038
  role="tab"
5039
+ aria-selected="true"
4969
5040
  id="primary-nav-containers-link"
4970
5041
  >
4971
5042
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -4976,6 +5047,7 @@ wrapperTag: div
4976
5047
  class="pf-v6-c-tabs__link"
4977
5048
  href="#"
4978
5049
  role="tab"
5050
+ aria-selected="false"
4979
5051
  id="primary-nav-database-link"
4980
5052
  >
4981
5053
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -4987,6 +5059,7 @@ wrapperTag: div
4987
5059
  class="pf-v6-c-tabs__link"
4988
5060
  href="#"
4989
5061
  role="tab"
5062
+ aria-selected="false"
4990
5063
  id="primary-nav-server-link"
4991
5064
  >
4992
5065
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -4997,6 +5070,7 @@ wrapperTag: div
4997
5070
  class="pf-v6-c-tabs__link"
4998
5071
  href="#"
4999
5072
  role="tab"
5073
+ aria-selected="false"
5000
5074
  id="primary-nav-system-link"
5001
5075
  >
5002
5076
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -5007,6 +5081,7 @@ wrapperTag: div
5007
5081
  class="pf-v6-c-tabs__link"
5008
5082
  href="#"
5009
5083
  role="tab"
5084
+ aria-selected="false"
5010
5085
  id="primary-nav-network-wired-link"
5011
5086
  >
5012
5087
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -5072,7 +5147,7 @@ wrapperTag: div
5072
5147
  <div class="pf-v6-c-compass__nav-main">
5073
5148
  <nav
5074
5149
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
5075
- aria-label="Secondary nav"
5150
+ aria-label="Compass secondary"
5076
5151
  >
5077
5152
  <div
5078
5153
  class="pf-v6-c-tabs__scroll-button"
@@ -5089,12 +5164,17 @@ wrapperTag: div
5089
5164
  </span>
5090
5165
  </button>
5091
5166
  </div>
5092
- <ul class="pf-v6-c-tabs__list" role="tablist">
5167
+ <ul
5168
+ class="pf-v6-c-tabs__list"
5169
+ role="tablist"
5170
+ aria-label="Compass secondary"
5171
+ >
5093
5172
  <li class="pf-v6-c-tabs__item" role="presentation">
5094
5173
  <a
5095
5174
  class="pf-v6-c-tabs__link"
5096
5175
  href="#"
5097
5176
  role="tab"
5177
+ aria-selected="false"
5098
5178
  id="secondary-nav-sub-1-link"
5099
5179
  >
5100
5180
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -5105,6 +5185,7 @@ wrapperTag: div
5105
5185
  class="pf-v6-c-tabs__link"
5106
5186
  href="#"
5107
5187
  role="tab"
5188
+ aria-selected="false"
5108
5189
  id="secondary-nav-sub-2-link"
5109
5190
  >
5110
5191
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -5118,6 +5199,7 @@ wrapperTag: div
5118
5199
  class="pf-v6-c-tabs__link"
5119
5200
  href="#"
5120
5201
  role="tab"
5202
+ aria-selected="true"
5121
5203
  id="secondary-nav-sub-3-link"
5122
5204
  >
5123
5205
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -5131,6 +5213,7 @@ wrapperTag: div
5131
5213
  tabindex="-1"
5132
5214
  href="#"
5133
5215
  role="tab"
5216
+ aria-selected="false"
5134
5217
  id="secondary-nav-sub-disabled-link"
5135
5218
  >
5136
5219
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -5142,6 +5225,7 @@ wrapperTag: div
5142
5225
  aria-disabled="true"
5143
5226
  href="#"
5144
5227
  role="tab"
5228
+ aria-selected="false"
5145
5229
  id="secondary-nav-sub-aria-disabled-link"
5146
5230
  >
5147
5231
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -5152,6 +5236,7 @@ wrapperTag: div
5152
5236
  class="pf-v6-c-tabs__link"
5153
5237
  href="#"
5154
5238
  role="tab"
5239
+ aria-selected="false"
5155
5240
  id="secondary-nav-sub-6-link"
5156
5241
  >
5157
5242
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -5202,7 +5287,7 @@ wrapperTag: div
5202
5287
  </button>
5203
5288
  </div>
5204
5289
  </div>
5205
- <div class="pf-v6-c-compass__sidebar pf-m-start">
5290
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">
5206
5291
  <div class="pf-v6-c-compass__panel pf-m-pill">
5207
5292
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
5208
5293
  <div class="pf-v6-c-action-list__item">
@@ -6047,8 +6132,15 @@ wrapperTag: div
6047
6132
  </div>
6048
6133
  </div>
6049
6134
  </div>
6135
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
6136
+ <div class="pf-v6-c-compass__message-bar">
6137
+ <div
6138
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
6139
+ >chatbot message bar</div>
6140
+ </div>
6141
+ </div>
6050
6142
  </div>
6051
- <div class="pf-v6-c-compass__sidebar pf-m-end">
6143
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
6052
6144
  <div class="pf-v6-c-compass__panel pf-m-pill">
6053
6145
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
6054
6146
  <div class="pf-v6-c-action-list__item">
@@ -6123,11 +6215,6 @@ wrapperTag: div
6123
6215
  </div>
6124
6216
  </div>
6125
6217
  </div>
6126
- <div class="pf-v6-c-compass__footer">
6127
- <div
6128
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
6129
- >chatbot message bar</div>
6130
- </div>
6131
6218
  </div>
6132
6219
  </div>
6133
6220
  </div>