@patternfly/patternfly 6.5.0-prerelease.25 → 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 +78 -9
  2. package/components/Compass/compass.scss +85 -50
  3. package/components/_index.css +78 -9
  4. package/docs/components/Compass/examples/Compass.css +2 -2
  5. package/docs/components/Compass/examples/Compass.md +6 -5
  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 +109 -30
  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 +78 -9
  15. package/patternfly.css +78 -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,7 +1232,7 @@ wrapperTag: div
1212
1232
  </div>
1213
1233
  </div>
1214
1234
  </div>
1215
- <div class="pf-v6-c-compass__main-footer">
1235
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
1216
1236
  <div class="pf-v6-c-compass__message-bar">
1217
1237
  <div
1218
1238
  class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
@@ -1220,7 +1240,7 @@ wrapperTag: div
1220
1240
  </div>
1221
1241
  </div>
1222
1242
  </div>
1223
- <div class="pf-v6-c-compass__sidebar pf-m-end">
1243
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
1224
1244
  <div class="pf-v6-c-compass__panel pf-m-pill">
1225
1245
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
1226
1246
  <div class="pf-v6-c-action-list__item">
@@ -1309,7 +1329,7 @@ wrapperTag: div
1309
1329
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
1310
1330
  "
1311
1331
  >
1312
- <div class="pf-v6-c-compass__header">
1332
+ <div class="pf-v6-c-compass__header pf-m-expanded">
1313
1333
  <div class="pf-v6-c-compass__logo">
1314
1334
  <svg
1315
1335
  width="192"
@@ -1465,6 +1485,7 @@ wrapperTag: div
1465
1485
  class="pf-v6-c-tabs__link"
1466
1486
  href="#"
1467
1487
  role="tab"
1488
+ aria-selected="false"
1468
1489
  id="primary-nav-users-link"
1469
1490
  >
1470
1491
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1475,6 +1496,7 @@ wrapperTag: div
1475
1496
  class="pf-v6-c-tabs__link"
1476
1497
  href="#"
1477
1498
  role="tab"
1499
+ aria-selected="true"
1478
1500
  id="primary-nav-containers-link"
1479
1501
  >
1480
1502
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1485,6 +1507,7 @@ wrapperTag: div
1485
1507
  class="pf-v6-c-tabs__link"
1486
1508
  href="#"
1487
1509
  role="tab"
1510
+ aria-selected="false"
1488
1511
  id="primary-nav-database-link"
1489
1512
  >
1490
1513
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1496,6 +1519,7 @@ wrapperTag: div
1496
1519
  class="pf-v6-c-tabs__link"
1497
1520
  href="#"
1498
1521
  role="tab"
1522
+ aria-selected="false"
1499
1523
  id="primary-nav-server-link"
1500
1524
  >
1501
1525
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -1506,6 +1530,7 @@ wrapperTag: div
1506
1530
  class="pf-v6-c-tabs__link"
1507
1531
  href="#"
1508
1532
  role="tab"
1533
+ aria-selected="false"
1509
1534
  id="primary-nav-system-link"
1510
1535
  >
1511
1536
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -1516,6 +1541,7 @@ wrapperTag: div
1516
1541
  class="pf-v6-c-tabs__link"
1517
1542
  href="#"
1518
1543
  role="tab"
1544
+ aria-selected="false"
1519
1545
  id="primary-nav-network-wired-link"
1520
1546
  >
1521
1547
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1578,7 +1604,7 @@ wrapperTag: div
1578
1604
  <div class="pf-v6-c-compass__nav-main">
1579
1605
  <nav
1580
1606
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
1581
- aria-label="Secondary nav"
1607
+ aria-label="Compass secondary"
1582
1608
  >
1583
1609
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1584
1610
  <button
@@ -1592,12 +1618,17 @@ wrapperTag: div
1592
1618
  </span>
1593
1619
  </button>
1594
1620
  </div>
1595
- <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
+ >
1596
1626
  <li class="pf-v6-c-tabs__item" role="presentation">
1597
1627
  <a
1598
1628
  class="pf-v6-c-tabs__link"
1599
1629
  href="#"
1600
1630
  role="tab"
1631
+ aria-selected="false"
1601
1632
  id="secondary-nav-sub-1-link"
1602
1633
  >
1603
1634
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -1608,6 +1639,7 @@ wrapperTag: div
1608
1639
  class="pf-v6-c-tabs__link"
1609
1640
  href="#"
1610
1641
  role="tab"
1642
+ aria-selected="false"
1611
1643
  id="secondary-nav-sub-2-link"
1612
1644
  >
1613
1645
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -1618,6 +1650,7 @@ wrapperTag: div
1618
1650
  class="pf-v6-c-tabs__link"
1619
1651
  href="#"
1620
1652
  role="tab"
1653
+ aria-selected="true"
1621
1654
  id="secondary-nav-sub-3-link"
1622
1655
  >
1623
1656
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -1631,6 +1664,7 @@ wrapperTag: div
1631
1664
  tabindex="-1"
1632
1665
  href="#"
1633
1666
  role="tab"
1667
+ aria-selected="false"
1634
1668
  id="secondary-nav-sub-disabled-link"
1635
1669
  >
1636
1670
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -1642,6 +1676,7 @@ wrapperTag: div
1642
1676
  aria-disabled="true"
1643
1677
  href="#"
1644
1678
  role="tab"
1679
+ aria-selected="false"
1645
1680
  id="secondary-nav-sub-aria-disabled-link"
1646
1681
  >
1647
1682
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -1652,6 +1687,7 @@ wrapperTag: div
1652
1687
  class="pf-v6-c-tabs__link"
1653
1688
  href="#"
1654
1689
  role="tab"
1690
+ aria-selected="false"
1655
1691
  id="secondary-nav-sub-6-link"
1656
1692
  >
1657
1693
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -1699,7 +1735,7 @@ wrapperTag: div
1699
1735
  </button>
1700
1736
  </div>
1701
1737
  </div>
1702
- <div class="pf-v6-c-compass__sidebar pf-m-start">
1738
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">
1703
1739
  <div class="pf-v6-c-compass__panel pf-m-pill">
1704
1740
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
1705
1741
  <div class="pf-v6-c-action-list__item">
@@ -2732,7 +2768,7 @@ wrapperTag: div
2732
2768
  </div>
2733
2769
  </div>
2734
2770
  </div>
2735
- <div class="pf-v6-c-compass__main-footer">
2771
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
2736
2772
  <div class="pf-v6-c-compass__message-bar">
2737
2773
  <div
2738
2774
  class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
@@ -2740,7 +2776,7 @@ wrapperTag: div
2740
2776
  </div>
2741
2777
  </div>
2742
2778
  </div>
2743
- <div class="pf-v6-c-compass__sidebar pf-m-end">
2779
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
2744
2780
  <div class="pf-v6-c-compass__panel pf-m-pill">
2745
2781
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
2746
2782
  <div class="pf-v6-c-action-list__item">
@@ -2829,7 +2865,7 @@ wrapperTag: div
2829
2865
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
2830
2866
  "
2831
2867
  >
2832
- <div class="pf-v6-c-compass__header">
2868
+ <div class="pf-v6-c-compass__header pf-m-expanded">
2833
2869
  <div class="pf-v6-c-compass__logo">
2834
2870
  <svg
2835
2871
  width="192"
@@ -2966,7 +3002,7 @@ wrapperTag: div
2966
3002
  </button>
2967
3003
  </div>
2968
3004
  <div class="pf-v6-c-compass__nav-main">
2969
- <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">
2970
3006
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2971
3007
  <button
2972
3008
  class="pf-v6-c-button pf-m-small pf-m-plain"
@@ -2979,12 +3015,17 @@ wrapperTag: div
2979
3015
  </span>
2980
3016
  </button>
2981
3017
  </div>
2982
- <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
+ >
2983
3023
  <li class="pf-v6-c-tabs__item" role="presentation">
2984
3024
  <a
2985
3025
  class="pf-v6-c-tabs__link"
2986
3026
  href="#"
2987
3027
  role="tab"
3028
+ aria-selected="false"
2988
3029
  id="primary-nav-users-link"
2989
3030
  >
2990
3031
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -2995,6 +3036,7 @@ wrapperTag: div
2995
3036
  class="pf-v6-c-tabs__link"
2996
3037
  href="#"
2997
3038
  role="tab"
3039
+ aria-selected="true"
2998
3040
  id="primary-nav-containers-link"
2999
3041
  >
3000
3042
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -3005,6 +3047,7 @@ wrapperTag: div
3005
3047
  class="pf-v6-c-tabs__link"
3006
3048
  href="#"
3007
3049
  role="tab"
3050
+ aria-selected="false"
3008
3051
  id="primary-nav-database-link"
3009
3052
  >
3010
3053
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -3016,6 +3059,7 @@ wrapperTag: div
3016
3059
  class="pf-v6-c-tabs__link"
3017
3060
  href="#"
3018
3061
  role="tab"
3062
+ aria-selected="false"
3019
3063
  id="primary-nav-server-link"
3020
3064
  >
3021
3065
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -3026,6 +3070,7 @@ wrapperTag: div
3026
3070
  class="pf-v6-c-tabs__link"
3027
3071
  href="#"
3028
3072
  role="tab"
3073
+ aria-selected="false"
3029
3074
  id="primary-nav-system-link"
3030
3075
  >
3031
3076
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -3036,6 +3081,7 @@ wrapperTag: div
3036
3081
  class="pf-v6-c-tabs__link"
3037
3082
  href="#"
3038
3083
  role="tab"
3084
+ aria-selected="false"
3039
3085
  id="primary-nav-network-wired-link"
3040
3086
  >
3041
3087
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -3098,7 +3144,7 @@ wrapperTag: div
3098
3144
  <div class="pf-v6-c-compass__nav-main">
3099
3145
  <nav
3100
3146
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
3101
- aria-label="Secondary nav"
3147
+ aria-label="Compass secondary"
3102
3148
  >
3103
3149
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3104
3150
  <button
@@ -3112,12 +3158,17 @@ wrapperTag: div
3112
3158
  </span>
3113
3159
  </button>
3114
3160
  </div>
3115
- <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
+ >
3116
3166
  <li class="pf-v6-c-tabs__item" role="presentation">
3117
3167
  <a
3118
3168
  class="pf-v6-c-tabs__link"
3119
3169
  href="#"
3120
3170
  role="tab"
3171
+ aria-selected="false"
3121
3172
  id="secondary-nav-sub-1-link"
3122
3173
  >
3123
3174
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -3128,6 +3179,7 @@ wrapperTag: div
3128
3179
  class="pf-v6-c-tabs__link"
3129
3180
  href="#"
3130
3181
  role="tab"
3182
+ aria-selected="false"
3131
3183
  id="secondary-nav-sub-2-link"
3132
3184
  >
3133
3185
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -3138,6 +3190,7 @@ wrapperTag: div
3138
3190
  class="pf-v6-c-tabs__link"
3139
3191
  href="#"
3140
3192
  role="tab"
3193
+ aria-selected="true"
3141
3194
  id="secondary-nav-sub-3-link"
3142
3195
  >
3143
3196
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -3151,6 +3204,7 @@ wrapperTag: div
3151
3204
  tabindex="-1"
3152
3205
  href="#"
3153
3206
  role="tab"
3207
+ aria-selected="false"
3154
3208
  id="secondary-nav-sub-disabled-link"
3155
3209
  >
3156
3210
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -3162,6 +3216,7 @@ wrapperTag: div
3162
3216
  aria-disabled="true"
3163
3217
  href="#"
3164
3218
  role="tab"
3219
+ aria-selected="false"
3165
3220
  id="secondary-nav-sub-aria-disabled-link"
3166
3221
  >
3167
3222
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -3172,6 +3227,7 @@ wrapperTag: div
3172
3227
  class="pf-v6-c-tabs__link"
3173
3228
  href="#"
3174
3229
  role="tab"
3230
+ aria-selected="false"
3175
3231
  id="secondary-nav-sub-6-link"
3176
3232
  >
3177
3233
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -3219,7 +3275,7 @@ wrapperTag: div
3219
3275
  </button>
3220
3276
  </div>
3221
3277
  </div>
3222
- <div class="pf-v6-c-compass__sidebar pf-m-start">
3278
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">
3223
3279
  <div class="pf-v6-c-compass__panel pf-m-pill">
3224
3280
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
3225
3281
  <div class="pf-v6-c-action-list__item">
@@ -4699,7 +4755,7 @@ wrapperTag: div
4699
4755
  </div>
4700
4756
  </div>
4701
4757
  </div>
4702
- <div class="pf-v6-c-compass__main-footer">
4758
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
4703
4759
  <div class="pf-v6-c-compass__message-bar">
4704
4760
  <div
4705
4761
  class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
@@ -4707,7 +4763,7 @@ wrapperTag: div
4707
4763
  </div>
4708
4764
  </div>
4709
4765
  </div>
4710
- <div class="pf-v6-c-compass__sidebar pf-m-end">
4766
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
4711
4767
  <div class="pf-v6-c-compass__panel pf-m-pill">
4712
4768
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
4713
4769
  <div class="pf-v6-c-action-list__item">
@@ -4800,7 +4856,7 @@ wrapperTag: div
4800
4856
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
4801
4857
  "
4802
4858
  >
4803
- <div class="pf-v6-c-compass__header">
4859
+ <div class="pf-v6-c-compass__header pf-m-expanded">
4804
4860
  <div class="pf-v6-c-compass__logo">
4805
4861
  <svg
4806
4862
  width="192"
@@ -4937,7 +4993,10 @@ wrapperTag: div
4937
4993
  </button>
4938
4994
  </div>
4939
4995
  <div class="pf-v6-c-compass__nav-main">
4940
- <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
+ >
4941
5000
  <div
4942
5001
  class="pf-v6-c-tabs__scroll-button"
4943
5002
  aria-hidden="true"
@@ -4953,12 +5012,17 @@ wrapperTag: div
4953
5012
  </span>
4954
5013
  </button>
4955
5014
  </div>
4956
- <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
+ >
4957
5020
  <li class="pf-v6-c-tabs__item" role="presentation">
4958
5021
  <a
4959
5022
  class="pf-v6-c-tabs__link"
4960
5023
  href="#"
4961
5024
  role="tab"
5025
+ aria-selected="false"
4962
5026
  id="primary-nav-users-link"
4963
5027
  >
4964
5028
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -4972,6 +5036,7 @@ wrapperTag: div
4972
5036
  class="pf-v6-c-tabs__link"
4973
5037
  href="#"
4974
5038
  role="tab"
5039
+ aria-selected="true"
4975
5040
  id="primary-nav-containers-link"
4976
5041
  >
4977
5042
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -4982,6 +5047,7 @@ wrapperTag: div
4982
5047
  class="pf-v6-c-tabs__link"
4983
5048
  href="#"
4984
5049
  role="tab"
5050
+ aria-selected="false"
4985
5051
  id="primary-nav-database-link"
4986
5052
  >
4987
5053
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -4993,6 +5059,7 @@ wrapperTag: div
4993
5059
  class="pf-v6-c-tabs__link"
4994
5060
  href="#"
4995
5061
  role="tab"
5062
+ aria-selected="false"
4996
5063
  id="primary-nav-server-link"
4997
5064
  >
4998
5065
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -5003,6 +5070,7 @@ wrapperTag: div
5003
5070
  class="pf-v6-c-tabs__link"
5004
5071
  href="#"
5005
5072
  role="tab"
5073
+ aria-selected="false"
5006
5074
  id="primary-nav-system-link"
5007
5075
  >
5008
5076
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -5013,6 +5081,7 @@ wrapperTag: div
5013
5081
  class="pf-v6-c-tabs__link"
5014
5082
  href="#"
5015
5083
  role="tab"
5084
+ aria-selected="false"
5016
5085
  id="primary-nav-network-wired-link"
5017
5086
  >
5018
5087
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -5078,7 +5147,7 @@ wrapperTag: div
5078
5147
  <div class="pf-v6-c-compass__nav-main">
5079
5148
  <nav
5080
5149
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
5081
- aria-label="Secondary nav"
5150
+ aria-label="Compass secondary"
5082
5151
  >
5083
5152
  <div
5084
5153
  class="pf-v6-c-tabs__scroll-button"
@@ -5095,12 +5164,17 @@ wrapperTag: div
5095
5164
  </span>
5096
5165
  </button>
5097
5166
  </div>
5098
- <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
+ >
5099
5172
  <li class="pf-v6-c-tabs__item" role="presentation">
5100
5173
  <a
5101
5174
  class="pf-v6-c-tabs__link"
5102
5175
  href="#"
5103
5176
  role="tab"
5177
+ aria-selected="false"
5104
5178
  id="secondary-nav-sub-1-link"
5105
5179
  >
5106
5180
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -5111,6 +5185,7 @@ wrapperTag: div
5111
5185
  class="pf-v6-c-tabs__link"
5112
5186
  href="#"
5113
5187
  role="tab"
5188
+ aria-selected="false"
5114
5189
  id="secondary-nav-sub-2-link"
5115
5190
  >
5116
5191
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -5124,6 +5199,7 @@ wrapperTag: div
5124
5199
  class="pf-v6-c-tabs__link"
5125
5200
  href="#"
5126
5201
  role="tab"
5202
+ aria-selected="true"
5127
5203
  id="secondary-nav-sub-3-link"
5128
5204
  >
5129
5205
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -5137,6 +5213,7 @@ wrapperTag: div
5137
5213
  tabindex="-1"
5138
5214
  href="#"
5139
5215
  role="tab"
5216
+ aria-selected="false"
5140
5217
  id="secondary-nav-sub-disabled-link"
5141
5218
  >
5142
5219
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -5148,6 +5225,7 @@ wrapperTag: div
5148
5225
  aria-disabled="true"
5149
5226
  href="#"
5150
5227
  role="tab"
5228
+ aria-selected="false"
5151
5229
  id="secondary-nav-sub-aria-disabled-link"
5152
5230
  >
5153
5231
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -5158,6 +5236,7 @@ wrapperTag: div
5158
5236
  class="pf-v6-c-tabs__link"
5159
5237
  href="#"
5160
5238
  role="tab"
5239
+ aria-selected="false"
5161
5240
  id="secondary-nav-sub-6-link"
5162
5241
  >
5163
5242
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -5208,7 +5287,7 @@ wrapperTag: div
5208
5287
  </button>
5209
5288
  </div>
5210
5289
  </div>
5211
- <div class="pf-v6-c-compass__sidebar pf-m-start">
5290
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">
5212
5291
  <div class="pf-v6-c-compass__panel pf-m-pill">
5213
5292
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
5214
5293
  <div class="pf-v6-c-action-list__item">
@@ -6053,7 +6132,7 @@ wrapperTag: div
6053
6132
  </div>
6054
6133
  </div>
6055
6134
  </div>
6056
- <div class="pf-v6-c-compass__main-footer">
6135
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
6057
6136
  <div class="pf-v6-c-compass__message-bar">
6058
6137
  <div
6059
6138
  class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
@@ -6061,7 +6140,7 @@ wrapperTag: div
6061
6140
  </div>
6062
6141
  </div>
6063
6142
  </div>
6064
- <div class="pf-v6-c-compass__sidebar pf-m-end">
6143
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
6065
6144
  <div class="pf-v6-c-compass__panel pf-m-pill">
6066
6145
  <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
6067
6146
  <div class="pf-v6-c-action-list__item">