@patternfly/patternfly 6.5.0-prerelease.63 → 6.5.0-prerelease.65

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 (41) hide show
  1. package/base/patternfly-svg-icons.css +6 -0
  2. package/base/patternfly-svg-icons.scss +6 -0
  3. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  4. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  5. package/components/Page/page.css +83 -34
  6. package/components/Page/page.scss +94 -39
  7. package/components/Table/table.css +2 -2
  8. package/components/Table/table.scss +2 -2
  9. package/components/_index.css +92 -37
  10. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  11. package/docs/components/Page/examples/Page.md +62 -15
  12. package/docs/components/Table/examples/Table.md +1879 -151
  13. package/docs/demos/AboutModal/examples/AboutModal.md +8 -2
  14. package/docs/demos/Alert/examples/Alert.md +24 -6
  15. package/docs/demos/BackToTop/examples/BackToTop.md +8 -2
  16. package/docs/demos/Banner/examples/Banner.md +16 -4
  17. package/docs/demos/CardView/examples/CardView.md +8 -2
  18. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  19. package/docs/demos/DataList/examples/DataList.md +32 -8
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +24 -6
  21. package/docs/demos/Drawer/examples/Drawer.md +24 -6
  22. package/docs/demos/JumpLinks/examples/JumpLinks.md +32 -8
  23. package/docs/demos/Masthead/examples/Masthead.md +72 -18
  24. package/docs/demos/Modal/examples/Modal.md +48 -12
  25. package/docs/demos/Nav/examples/Nav.md +80 -20
  26. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -10
  27. package/docs/demos/Page/examples/Page.md +113 -28
  28. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +56 -14
  29. package/docs/demos/Skeleton/examples/Skeleton.md +8 -2
  30. package/docs/demos/Table/examples/Table.md +496 -64
  31. package/docs/demos/Tabs/examples/Tabs.md +48 -12
  32. package/docs/demos/Toolbar/examples/Toolbar.md +16 -4
  33. package/docs/demos/Wizard/examples/Wizard.md +72 -18
  34. package/package.json +21 -1
  35. package/patternfly-base-no-globals.css +6 -0
  36. package/patternfly-base.css +6 -0
  37. package/patternfly-no-globals.css +99 -38
  38. package/patternfly.css +99 -38
  39. package/patternfly.min.css +1 -1
  40. package/patternfly.min.css.map +1 -1
  41. package/patternfly.scss +3 -1
@@ -339,9 +339,15 @@ section: components
339
339
  </nav>
340
340
  </div>
341
341
  </section>
342
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
342
+ <section
343
+ class="pf-v6-c-page__main-section pf-m-limit-width"
344
+ aria-labelledby="main-title"
345
+ >
343
346
  <div class="pf-v6-c-page__main-body">
344
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
347
+ <h1
348
+ class="pf-v6-c-content--h1 pf-m-page-title"
349
+ id="main-title"
350
+ >Main title</h1>
345
351
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
346
352
  </div>
347
353
  </section>
@@ -995,9 +1001,15 @@ section: components
995
1001
  </nav>
996
1002
  </div>
997
1003
  </section>
998
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1004
+ <section
1005
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1006
+ aria-labelledby="main-title"
1007
+ >
999
1008
  <div class="pf-v6-c-page__main-body">
1000
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1009
+ <h1
1010
+ class="pf-v6-c-content--h1 pf-m-page-title"
1011
+ id="main-title"
1012
+ >Main title</h1>
1001
1013
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1002
1014
  </div>
1003
1015
  </section>
@@ -1658,9 +1670,15 @@ section: components
1658
1670
  </nav>
1659
1671
  </div>
1660
1672
  </section>
1661
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1673
+ <section
1674
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1675
+ aria-labelledby="main-title"
1676
+ >
1662
1677
  <div class="pf-v6-c-page__main-body">
1663
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1678
+ <h1
1679
+ class="pf-v6-c-content--h1 pf-m-page-title"
1680
+ id="main-title"
1681
+ >Main title</h1>
1664
1682
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1665
1683
  </div>
1666
1684
  </section>
@@ -2238,9 +2256,15 @@ section: components
2238
2256
  </nav>
2239
2257
  </div>
2240
2258
  </section>
2241
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2259
+ <section
2260
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2261
+ aria-labelledby="main-title"
2262
+ >
2242
2263
  <div class="pf-v6-c-page__main-body">
2243
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2264
+ <h1
2265
+ class="pf-v6-c-content--h1 pf-m-page-title"
2266
+ id="main-title"
2267
+ >Main title</h1>
2244
2268
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2245
2269
  </div>
2246
2270
  </section>
@@ -3726,9 +3750,15 @@ section: components
3726
3750
  </nav>
3727
3751
  </div>
3728
3752
  </section>
3729
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3753
+ <section
3754
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3755
+ aria-labelledby="main-title"
3756
+ >
3730
3757
  <div class="pf-v6-c-page__main-body">
3731
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3758
+ <h1
3759
+ class="pf-v6-c-content--h1 pf-m-page-title"
3760
+ id="main-title"
3761
+ >Main title</h1>
3732
3762
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3733
3763
  </div>
3734
3764
  </section>
@@ -4113,9 +4143,15 @@ section: components
4113
4143
  </nav>
4114
4144
  </div>
4115
4145
  </section>
4116
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4146
+ <section
4147
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4148
+ aria-labelledby="main-title"
4149
+ >
4117
4150
  <div class="pf-v6-c-page__main-body">
4118
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4151
+ <h1
4152
+ class="pf-v6-c-content--h1 pf-m-page-title"
4153
+ id="main-title"
4154
+ >Main title</h1>
4119
4155
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4120
4156
  </div>
4121
4157
  </section>
@@ -569,9 +569,15 @@ section: components
569
569
  </nav>
570
570
  </div>
571
571
  </section>
572
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
572
+ <section
573
+ class="pf-v6-c-page__main-section pf-m-limit-width"
574
+ aria-labelledby="main-title"
575
+ >
573
576
  <div class="pf-v6-c-page__main-body">
574
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
577
+ <h1
578
+ class="pf-v6-c-content--h1 pf-m-page-title"
579
+ id="main-title"
580
+ >Main title</h1>
575
581
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
576
582
  </div>
577
583
  </section>
@@ -3618,9 +3624,15 @@ section: components
3618
3624
  </nav>
3619
3625
  </div>
3620
3626
  </section>
3621
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3627
+ <section
3628
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3629
+ aria-labelledby="main-title"
3630
+ >
3622
3631
  <div class="pf-v6-c-page__main-body">
3623
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3632
+ <h1
3633
+ class="pf-v6-c-content--h1 pf-m-page-title"
3634
+ id="main-title"
3635
+ >Main title</h1>
3624
3636
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3625
3637
  </div>
3626
3638
  </section>
@@ -340,9 +340,15 @@ wrapperTag: div
340
340
  </nav>
341
341
  </div>
342
342
  </section>
343
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
343
+ <section
344
+ class="pf-v6-c-page__main-section pf-m-limit-width"
345
+ aria-labelledby="main-title"
346
+ >
344
347
  <div class="pf-v6-c-page__main-body">
345
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
348
+ <h1
349
+ class="pf-v6-c-content--h1 pf-m-page-title"
350
+ id="main-title"
351
+ >Main title</h1>
346
352
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
347
353
  </div>
348
354
  </section>
@@ -1061,9 +1067,15 @@ wrapperTag: div
1061
1067
  </nav>
1062
1068
  </div>
1063
1069
  </section>
1064
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1070
+ <section
1071
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1072
+ aria-labelledby="main-title"
1073
+ >
1065
1074
  <div class="pf-v6-c-page__main-body">
1066
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1075
+ <h1
1076
+ class="pf-v6-c-content--h1 pf-m-page-title"
1077
+ id="main-title"
1078
+ >Main title</h1>
1067
1079
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1068
1080
  </div>
1069
1081
  </section>
@@ -1764,9 +1776,15 @@ wrapperTag: div
1764
1776
  </nav>
1765
1777
  </div>
1766
1778
  </section>
1767
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1779
+ <section
1780
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1781
+ aria-labelledby="main-title"
1782
+ >
1768
1783
  <div class="pf-v6-c-page__main-body">
1769
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1784
+ <h1
1785
+ class="pf-v6-c-content--h1 pf-m-page-title"
1786
+ id="main-title"
1787
+ >Main title</h1>
1770
1788
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1771
1789
  </div>
1772
1790
  </section>
@@ -2563,9 +2581,15 @@ wrapperTag: div
2563
2581
  </nav>
2564
2582
  </div>
2565
2583
  </section>
2566
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2584
+ <section
2585
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2586
+ aria-labelledby="main-title"
2587
+ >
2567
2588
  <div class="pf-v6-c-page__main-body">
2568
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2589
+ <h1
2590
+ class="pf-v6-c-content--h1 pf-m-page-title"
2591
+ id="main-title"
2592
+ >Main title</h1>
2569
2593
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2570
2594
  </div>
2571
2595
  </section>
@@ -3358,9 +3382,15 @@ wrapperTag: div
3358
3382
  </nav>
3359
3383
  </div>
3360
3384
  </section>
3361
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3385
+ <section
3386
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3387
+ aria-labelledby="main-title"
3388
+ >
3362
3389
  <div class="pf-v6-c-page__main-body">
3363
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3390
+ <h1
3391
+ class="pf-v6-c-content--h1 pf-m-page-title"
3392
+ id="main-title"
3393
+ >Main title</h1>
3364
3394
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3365
3395
  </div>
3366
3396
  </section>
@@ -4028,9 +4058,15 @@ wrapperTag: div
4028
4058
  </nav>
4029
4059
  </div>
4030
4060
  </section>
4031
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4061
+ <section
4062
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4063
+ aria-labelledby="main-title"
4064
+ >
4032
4065
  <div class="pf-v6-c-page__main-body">
4033
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4066
+ <h1
4067
+ class="pf-v6-c-content--h1 pf-m-page-title"
4068
+ id="main-title"
4069
+ >Main title</h1>
4034
4070
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4035
4071
  </div>
4036
4072
  </section>
@@ -4681,9 +4717,15 @@ wrapperTag: div
4681
4717
  </nav>
4682
4718
  </div>
4683
4719
  </section>
4684
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4720
+ <section
4721
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4722
+ aria-labelledby="main-title"
4723
+ >
4685
4724
  <div class="pf-v6-c-page__main-body">
4686
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4725
+ <h1
4726
+ class="pf-v6-c-content--h1 pf-m-page-title"
4727
+ id="main-title"
4728
+ >Main title</h1>
4687
4729
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4688
4730
  </div>
4689
4731
  </section>
@@ -5316,9 +5358,15 @@ wrapperTag: div
5316
5358
  </nav>
5317
5359
  </div>
5318
5360
  </section>
5319
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5361
+ <section
5362
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5363
+ aria-labelledby="main-title"
5364
+ >
5320
5365
  <div class="pf-v6-c-page__main-body">
5321
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5366
+ <h1
5367
+ class="pf-v6-c-content--h1 pf-m-page-title"
5368
+ id="main-title"
5369
+ >Main title</h1>
5322
5370
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5323
5371
  </div>
5324
5372
  </section>
@@ -6034,9 +6082,15 @@ wrapperTag: div
6034
6082
  </nav>
6035
6083
  </div>
6036
6084
  </section>
6037
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6085
+ <section
6086
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6087
+ aria-labelledby="main-title"
6088
+ >
6038
6089
  <div class="pf-v6-c-page__main-body">
6039
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6090
+ <h1
6091
+ class="pf-v6-c-content--h1 pf-m-page-title"
6092
+ id="main-title"
6093
+ >Main title</h1>
6040
6094
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
6041
6095
  </div>
6042
6096
  </section>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.63",
4
+ "version": "6.5.0-prerelease.65",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -9,8 +9,28 @@
9
9
  "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
10
10
  "backstop:test": "backstop test --config='backstop.js'",
11
11
  "backstop:test:dark": "backstop test --config='backstop.js' --dark",
12
+ "backstop:test:glass": "backstop test --config='backstop.js' --glass",
13
+ "backstop:test:hc": "backstop test --config='backstop.js' --high-contrast",
14
+ "backstop:test:dark-hc": "backstop test --config='backstop.js' --dark --high-contrast",
15
+ "backstop:test:dark-glass": "backstop test --config='backstop.js' --dark --glass",
16
+ "backstop:test:felt": "backstop test --config='backstop.js' --felt",
17
+ "backstop:test:felt-dark": "backstop test --config='backstop.js' --felt --dark",
18
+ "backstop:test:felt-glass": "backstop test --config='backstop.js' --felt --glass",
19
+ "backstop:test:felt-hc": "backstop test --config='backstop.js' --felt --high-contrast",
20
+ "backstop:test:felt-dark-hc": "backstop test --config='backstop.js' --felt --dark --high-contrast",
21
+ "backstop:test:felt-dark-glass": "backstop test --config='backstop.js' --felt --dark --glass",
12
22
  "backstop:approve": "backstop approve --config='backstop.js'",
13
23
  "backstop:approve:dark": "backstop approve --config='backstop.js' --dark",
24
+ "backstop:approve:glass": "backstop approve --config='backstop.js' --glass",
25
+ "backstop:approve:hc": "backstop approve --config='backstop.js' --high-contrast",
26
+ "backstop:approve:dark-hc": "backstop approve --config='backstop.js' --dark --high-contrast",
27
+ "backstop:approve:dark-glass": "backstop approve --config='backstop.js' --dark --glass",
28
+ "backstop:approve:felt": "backstop approve --config='backstop.js' --felt",
29
+ "backstop:approve:felt-dark": "backstop approve --config='backstop.js' --felt --dark",
30
+ "backstop:approve:felt-glass": "backstop approve --config='backstop.js' --felt --glass",
31
+ "backstop:approve:felt-hc": "backstop approve --config='backstop.js' --felt --high-contrast",
32
+ "backstop:approve:felt-dark-hc": "backstop approve --config='backstop.js' --felt --dark --high-contrast",
33
+ "backstop:approve:felt-dark-glass": "backstop approve --config='backstop.js' --felt --dark --glass",
14
34
  "backstop:chrome": "node backstop_data/engine_scripts/puppet/chrome.js",
15
35
  "playwright": "node ./node_modules/playwright/cli.js",
16
36
  "build-patternfly": "gulp buildPatternfly",
@@ -6314,6 +6314,12 @@
6314
6314
  display: revert;
6315
6315
  }
6316
6316
 
6317
+ .pf-v6-icon-rh-standard {
6318
+ width: 3rem;
6319
+ height: 3rem;
6320
+ color: var(--pf-t--global--icon--color--brand--accent--default);
6321
+ }
6322
+
6317
6323
  :root {
6318
6324
  --pf-v6-global--inverse--multiplier: 1;
6319
6325
  --pf-t--color--black: #000000;
@@ -6461,6 +6461,12 @@ button) {
6461
6461
  display: revert;
6462
6462
  }
6463
6463
 
6464
+ .pf-v6-icon-rh-standard {
6465
+ width: 3rem;
6466
+ height: 3rem;
6467
+ color: var(--pf-t--global--icon--color--brand--accent--default);
6468
+ }
6469
+
6464
6470
  :root {
6465
6471
  --pf-v6-global--inverse--multiplier: 1;
6466
6472
  --pf-t--color--black: #000000;
@@ -6314,6 +6314,12 @@
6314
6314
  display: revert;
6315
6315
  }
6316
6316
 
6317
+ .pf-v6-icon-rh-standard {
6318
+ width: 3rem;
6319
+ height: 3rem;
6320
+ color: var(--pf-t--global--icon--color--brand--accent--default);
6321
+ }
6322
+
6317
6323
  :root {
6318
6324
  --pf-v6-global--inverse--multiplier: 1;
6319
6325
  --pf-t--color--black: #000000;
@@ -12432,7 +12438,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12432
12438
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12433
12439
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12434
12440
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
12435
- --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12441
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--default);
12436
12442
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
12437
12443
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
12438
12444
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
@@ -12440,6 +12446,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12440
12446
  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
12441
12447
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
12442
12448
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
12449
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
12450
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor: var(--pf-t--global--border--color--control--read-only);
12443
12451
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
12444
12452
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
12445
12453
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -12468,6 +12476,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12468
12476
  .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
12469
12477
  display: inline-flex;
12470
12478
  }
12479
+ .pf-v6-c-clipboard-copy.pf-m-readonly {
12480
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor);
12481
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor);
12482
+ }
12471
12483
 
12472
12484
  .pf-v6-c-clipboard-copy__group {
12473
12485
  display: flex;
@@ -22718,6 +22730,7 @@ ul.pf-v6-c-list {
22718
22730
  --pf-v6-c-page__sidebar--TranslateZ: 0;
22719
22731
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
22720
22732
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
22733
+ --pf-v6-c-page__sidebar--MarginBlockStart: 0;
22721
22734
  --pf-v6-c-page__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
22722
22735
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
22723
22736
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
@@ -22735,6 +22748,20 @@ ul.pf-v6-c-list {
22735
22748
  }
22736
22749
  }
22737
22750
  .pf-v6-c-page {
22751
+ --pf-v6-c-page__sidebar-main--PaddingBlockStart: 0;
22752
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: 0;
22753
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: 0;
22754
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: 0;
22755
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: 0;
22756
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: 0;
22757
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: 0;
22758
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: 0;
22759
+ --pf-v6-c-page__sidebar-main--BackgroundColor: transparent;
22760
+ --pf-v6-c-page__sidebar-main--BackdropFilter: none;
22761
+ --pf-v6-c-page__sidebar-main--BorderWidth: 0;
22762
+ --pf-v6-c-page__sidebar-main--BorderColor: transparent;
22763
+ --pf-v6-c-page__sidebar-main--BorderRadius: 0;
22764
+ --pf-v6-c-page__sidebar-main--BoxShadow: none;
22738
22765
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
22739
22766
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
22740
22767
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -22805,6 +22832,10 @@ ul.pf-v6-c-list {
22805
22832
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22806
22833
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22807
22834
  --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
22835
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
22836
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor: var(--pf-t--global--border--color--subtle);
22837
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
22838
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor: var(--pf-t--global--border--color--subtle);
22808
22839
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
22809
22840
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
22810
22841
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -22847,11 +22878,54 @@ ul.pf-v6-c-list {
22847
22878
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
22848
22879
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
22849
22880
  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
22881
+ --pf-v6-c-page--BackgroundColor--glass: transparent;
22882
+ --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
22883
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
22884
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
22885
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
22886
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
22887
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
22888
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
22889
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
22890
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
22891
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
22892
+ --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
22893
+ --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
22894
+ --pf-v6-c-page__sidebar-main--BorderWidth--glass: var(--pf-t--global--border--width--glass--default);
22895
+ --pf-v6-c-page__sidebar-main--BorderColor--glass: var(--pf-t--global--border--color--glass--default);
22896
+ --pf-v6-c-page__sidebar-main--BorderRadius--glass: var(--pf-t--global--border--radius--glass--default);
22897
+ --pf-v6-c-page__sidebar-main--BoxShadow--glass: var(--pf-t--global--box-shadow--glass--default);
22898
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
22899
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
22900
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
22901
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
22850
22902
  }
22851
22903
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
22852
- --pf-v6-c-page__sidebar--Width--base: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
22853
- --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
22854
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
22904
+ --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
22905
+ --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
22906
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
22907
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
22908
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
22909
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart--glass);
22910
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass);
22911
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: var(--pf-v6-c-page__sidebar-main--MarginBlockStart--glass);
22912
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd--glass);
22913
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: var(--pf-v6-c-page__sidebar-main--MarginInlineStart--glass);
22914
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd--glass);
22915
+ --pf-v6-c-page__sidebar-main--BackgroundColor: var(--pf-v6-c-page__sidebar-main--BackgroundColor--glass);
22916
+ --pf-v6-c-page__sidebar-main--BackdropFilter: var(--pf-v6-c-page__sidebar-main--BackdropFilter--glass);
22917
+ --pf-v6-c-page__sidebar-main--BorderWidth: var(--pf-v6-c-page__sidebar-main--BorderWidth--glass);
22918
+ --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
22919
+ --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
22920
+ --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
22921
+ }
22922
+ @media (min-width: 75rem) {
22923
+ .pf-v6-c-page {
22924
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass);
22925
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass);
22926
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass);
22927
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass);
22928
+ }
22855
22929
  }
22856
22930
 
22857
22931
  .pf-v6-c-page {
@@ -22864,9 +22938,6 @@ ul.pf-v6-c-list {
22864
22938
  max-height: 100%;
22865
22939
  background-color: var(--pf-v6-c-page--BackgroundColor);
22866
22940
  }
22867
- :where(:root.pf-v6-theme-glass) .pf-v6-c-page {
22868
- background-color: transparent;
22869
- }
22870
22941
  @media (min-width: 75rem) {
22871
22942
  .pf-v6-c-page {
22872
22943
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
@@ -23016,6 +23087,7 @@ ul.pf-v6-c-list {
23016
23087
  padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
23017
23088
  padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
23018
23089
  padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
23090
+ margin-block-start: var(--pf-v6-c-page__sidebar--MarginBlockStart);
23019
23091
  margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd);
23020
23092
  overflow-x: hidden;
23021
23093
  overflow-y: auto;
@@ -23047,44 +23119,33 @@ ul.pf-v6-c-list {
23047
23119
  :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
23048
23120
  min-height: 0;
23049
23121
  padding: 0;
23050
- overflow: visible;
23122
+ overflow: revert;
23051
23123
  background: transparent;
23052
23124
  }
23053
23125
  :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded {
23054
23126
  box-shadow: none;
23055
23127
  }
23056
- :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
23057
- padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
23058
- padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
23059
- padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
23060
- margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
23061
- margin-block-end: var(--pf-t--global--spacer--md);
23062
- margin-inline-start: var(--pf-t--global--spacer--md);
23063
- margin-inline-end: var(--pf-t--global--spacer--md);
23128
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar-main {
23064
23129
  overflow: auto;
23065
- background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
23066
- backdrop-filter: var(--pf-v6-c-page__sidebar--BackdropFilter);
23067
- border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
23068
- border-radius: var(--pf-t--global--border--radius--glass--default);
23069
- box-shadow: var(--pf-t--global--box-shadow--glass--default);
23070
- }
23071
- @media (min-width: 75rem) {
23072
- :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
23073
- margin-block-start: 0;
23074
- margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
23075
- margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
23076
- margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
23077
- }
23078
- }
23079
-
23080
- .pf-v6-c-page__sidebar:has(> .pf-v6-c-page__sidebar-main) {
23081
- overflow: revert;
23082
23130
  }
23083
23131
 
23084
23132
  .pf-v6-c-page__sidebar-main {
23085
23133
  display: flex;
23086
23134
  flex-grow: 1;
23087
23135
  flex-direction: column;
23136
+ padding-block-start: var(--pf-v6-c-page__sidebar-main--PaddingBlockStart);
23137
+ padding-block-end: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd);
23138
+ padding-inline-start: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart);
23139
+ padding-inline-end: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd);
23140
+ margin-block-start: var(--pf-v6-c-page__sidebar-main--MarginBlockStart);
23141
+ margin-block-end: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd);
23142
+ margin-inline-start: var(--pf-v6-c-page__sidebar-main--MarginInlineStart);
23143
+ margin-inline-end: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd);
23144
+ background-color: var(--pf-v6-c-page__sidebar-main--BackgroundColor);
23145
+ backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
23146
+ border: var(--pf-v6-c-page__sidebar-main--BorderWidth) solid var(--pf-v6-c-page__sidebar-main--BorderColor);
23147
+ border-radius: var(--pf-v6-c-page__sidebar-main--BorderRadius);
23148
+ box-shadow: var(--pf-v6-c-page__sidebar-main--BoxShadow);
23088
23149
  }
23089
23150
 
23090
23151
  .pf-v6-c-page__sidebar-header {
@@ -23512,8 +23573,8 @@ ul.pf-v6-c-list {
23512
23573
  }
23513
23574
  .pf-v6-c-page__main-section.pf-m-secondary {
23514
23575
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
23515
- border-block-start: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
23516
- border-block-end: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
23576
+ border-block-start: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor);
23577
+ border-block-end: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor);
23517
23578
  }
23518
23579
  .pf-v6-c-page__main-section.pf-m-padding {
23519
23580
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
@@ -28055,7 +28116,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28055
28116
  --pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
28056
28117
  --pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
28057
28118
  --pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
28058
- --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
28119
+ --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
28059
28120
  --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
28060
28121
  --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
28061
28122
  --pf-v6-c-table__check--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -28150,7 +28211,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28150
28211
  --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
28151
28212
  --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
28152
28213
  --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
28153
- --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
28214
+ --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
28154
28215
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
28155
28216
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
28156
28217
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
@@ -38134,6 +38195,6 @@ label.pf-v6-c-tree-view__node-text {
38134
38195
  :where(.pf-v6-theme-glass) body {
38135
38196
  overflow: auto;
38136
38197
  }
38137
- :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
38198
+ :where(.pf-v6-theme-glass) #page-sidebar {
38138
38199
  overflow: auto;
38139
38200
  }