@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.105

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 (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -660,18 +660,18 @@ html .ws-preview {
660
660
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
661
661
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
662
662
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
663
- --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--60);
664
- --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--50);
663
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
664
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
665
665
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
666
666
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
667
667
  --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
668
- --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--60);
669
- --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--50);
668
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
669
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
670
670
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
671
671
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
672
672
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
673
- --pf-t--global--color--status--success--200: var(--pf-t--color--green--60);
674
- --pf-t--global--color--status--success--100: var(--pf-t--color--green--50);
673
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
674
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
675
675
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
676
676
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
677
677
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
@@ -742,6 +742,7 @@ html .ws-preview {
742
742
  --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
743
743
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
744
744
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
745
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
745
746
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
746
747
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
747
748
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -790,9 +791,6 @@ html .ws-preview {
790
791
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
791
792
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
792
793
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
793
- --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
794
- --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
795
- --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
796
794
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
797
795
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
798
796
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -904,6 +902,7 @@ html .ws-preview {
904
902
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
905
903
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
906
904
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
905
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
907
906
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
908
907
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
909
908
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
@@ -955,13 +954,13 @@ html .ws-preview {
955
954
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
956
955
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
957
956
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
958
- --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular);
957
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
959
958
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
960
959
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
961
960
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
962
961
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
963
962
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
964
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--regular);
963
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
965
964
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
966
965
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
967
966
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -973,13 +972,16 @@ html .ws-preview {
973
972
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
974
973
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
975
974
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
976
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular);
975
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
976
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
977
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
978
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
977
979
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
978
980
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
979
981
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
980
982
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
981
983
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
982
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--regular);
984
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
983
985
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
984
986
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
985
987
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -1044,13 +1046,13 @@ html .ws-preview {
1044
1046
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
1045
1047
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
1046
1048
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
1047
- --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular);
1049
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
1048
1050
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
1049
1051
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
1050
1052
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
1051
1053
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
1052
1054
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
1053
- --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--regular);
1055
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
1054
1056
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
1055
1057
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
1056
1058
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -1062,7 +1064,7 @@ html .ws-preview {
1062
1064
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
1063
1065
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
1064
1066
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
1065
- --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular);
1067
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
1066
1068
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
1067
1069
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
1068
1070
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
@@ -1071,7 +1073,7 @@ html .ws-preview {
1071
1073
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
1072
1074
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
1073
1075
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
1074
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--regular);
1076
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
1075
1077
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
1076
1078
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
1077
1079
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -1146,8 +1148,8 @@ html .ws-preview {
1146
1148
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
1147
1149
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
1148
1150
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
1149
- --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--20);
1150
- --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--30);
1151
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
1152
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
1151
1153
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
1152
1154
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
1153
1155
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
@@ -1214,6 +1216,7 @@ html .ws-preview {
1214
1216
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
1215
1217
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
1216
1218
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
1219
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
1217
1220
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
1218
1221
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
1219
1222
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
@@ -14803,7 +14806,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
14803
14806
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14804
14807
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14805
14808
  --pf-v6-c-drawer__content--FlexBasis: 100%;
14806
- --pf-v6-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14809
+ --pf-v6-c-drawer__content--BackgroundColor: transparent;
14810
+ --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14807
14811
  --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14808
14812
  --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
14809
14813
  --pf-v6-c-drawer__panel--MinWidth: 50%;
@@ -15004,12 +15008,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
15004
15008
  order: 0;
15005
15009
  background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
15006
15010
  }
15011
+ .pf-v6-c-drawer__content.pf-m-primary {
15012
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
15013
+ }
15007
15014
  .pf-v6-c-drawer__content.pf-m-secondary {
15008
15015
  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
15009
15016
  }
15010
- .pf-v6-c-drawer__content.pf-m-no-background {
15011
- --pf-v6-c-drawer__content--BackgroundColor: transparent;
15012
- }
15013
15017
  .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
15014
15018
  padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingTop);
15015
15019
  padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBottom);
@@ -20491,6 +20495,13 @@ ul.pf-v6-c-list {
20491
20495
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
20492
20496
  --pf-v6-c-menu-toggle--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
20493
20497
  --pf-v6-c-menu-toggle--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
20498
+ --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
20499
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
20500
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
20501
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
20502
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
20503
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
20504
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
20494
20505
  }
20495
20506
 
20496
20507
  .pf-v6-c-menu-toggle {
@@ -20625,6 +20636,18 @@ ul.pf-v6-c-list {
20625
20636
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
20626
20637
  background-color: transparent;
20627
20638
  }
20639
+ .pf-v6-c-menu-toggle.pf-m-success {
20640
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
20641
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
20642
+ }
20643
+ .pf-v6-c-menu-toggle.pf-m-warning {
20644
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
20645
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
20646
+ }
20647
+ .pf-v6-c-menu-toggle.pf-m-danger {
20648
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
20649
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
20650
+ }
20628
20651
 
20629
20652
  .pf-v6-c-menu-toggle.pf-m-split-button {
20630
20653
  --pf-v6-c-menu-toggle--ColumnGap: 0;
@@ -20767,6 +20790,11 @@ ul.pf-v6-c-list {
20767
20790
  color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
20768
20791
  }
20769
20792
 
20793
+ .pf-v6-c-menu-toggle__status-icon {
20794
+ margin-inline-end: var(--pf-v6-c-menu-toggle__status-icon--MarginInlineEnd);
20795
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
20796
+ }
20797
+
20770
20798
  :root {
20771
20799
  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
20772
20800
  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -22209,19 +22237,19 @@ ul.pf-v6-c-list {
22209
22237
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
22210
22238
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
22211
22239
  --pf-v6-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
22212
- --pf-v6-c-page__main--ZIndex: var(--pf-v6-global--ZIndex--xs);
22213
- --pf-v6-c-page__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
22214
- --pf-v6-c-page__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22215
- --pf-v6-c-page__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
22216
- --pf-v6-c-page__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
22217
- --pf-v6-c-page__main--BorderRadius: var(--pf-t--global--border--radius--large);
22218
- --pf-v6-c-page__main--BorderWidth: var(--pf-t--global--spacer--sm);
22219
- --pf-v6-c-page__main--BorderColor: var(--pf-v6-c-page__main--BackgroundColor);
22240
+ --pf-v6-c-page__main-container--ZIndex: var(--pf-v6-global--ZIndex--xs);
22241
+ --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
22242
+ --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22243
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
22244
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
22245
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
22246
+ --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
22247
+ --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
22220
22248
  --pf-v6-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
22221
22249
  --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
22222
22250
  --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22223
22251
  --pf-v6-c-page__main-section--PaddingBottom: 0;
22224
- --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22252
+ --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22225
22253
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
22226
22254
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22227
22255
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -22249,9 +22277,9 @@ ul.pf-v6-c-list {
22249
22277
  --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22250
22278
  --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22251
22279
  --pf-v6-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
22252
- --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22280
+ --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22253
22281
  --pf-v6-c-page__main-breadcrumb--PaddingBottom: 0;
22254
- --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22282
+ --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22255
22283
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22256
22284
  --pf-v6-c-page__main-tabs--PaddingTop: 0;
22257
22285
  --pf-v6-c-page__main-tabs--PaddingRight: 0;
@@ -22297,7 +22325,7 @@ ul.pf-v6-c-list {
22297
22325
  }
22298
22326
  @media (min-width: 1200px) {
22299
22327
  .pf-v6-c-page {
22300
- grid-template-areas: "header header" "nav main";
22328
+ grid-template-areas: "header header" "sidebar main";
22301
22329
  grid-template-columns: max-content 1fr;
22302
22330
  }
22303
22331
  }
@@ -22409,7 +22437,7 @@ ul.pf-v6-c-list {
22409
22437
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
22410
22438
  display: flex;
22411
22439
  flex-direction: column;
22412
- grid-area: nav;
22440
+ grid-area: sidebar;
22413
22441
  grid-row-start: 2;
22414
22442
  grid-column-start: 1;
22415
22443
  width: var(--pf-v6-c-page__sidebar--Width);
@@ -22721,26 +22749,27 @@ ul.pf-v6-c-list {
22721
22749
  }
22722
22750
  }
22723
22751
 
22724
- .pf-v6-c-page__main {
22752
+ .pf-v6-c-page__main-container {
22725
22753
  align-self: start;
22726
- max-height: var(--pf-v6-c-page__main--MaxHeight);
22754
+ max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22727
22755
  margin-block-start: 0;
22728
- margin-inline-start: var(--pf-v6-c-page__main--MarginInlineStart);
22729
- margin-inline-end: var(--pf-v6-c-page__main--MarginInlineEnd);
22730
- background: var(--pf-v6-c-page__main--BackgroundColor);
22731
- border: var(--pf-v6-c-page__main--BorderWidth) solid var(--pf-v6-c-page__main--BorderColor);
22732
- border-radius: var(--pf-v6-c-page__main--BorderRadius);
22756
+ margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22757
+ margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22758
+ overflow: auto;
22759
+ background: var(--pf-v6-c-page__main-container--BackgroundColor);
22760
+ border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
22761
+ border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
22733
22762
  }
22734
22763
 
22735
- .pf-v6-c-page__main,
22764
+ .pf-v6-c-page__main-container,
22736
22765
  .pf-v6-c-page__drawer {
22737
- z-index: var(--pf-v6-c-page__main--ZIndex);
22766
+ z-index: var(--pf-v6-c-page__main-container--ZIndex);
22738
22767
  grid-area: main;
22739
22768
  overflow-x: hidden;
22740
22769
  overflow-y: auto;
22741
22770
  -webkit-overflow-scrolling: touch;
22742
22771
  }
22743
- .pf-v6-c-page__main:focus,
22772
+ .pf-v6-c-page__main-container:focus,
22744
22773
  .pf-v6-c-page__drawer:focus {
22745
22774
  outline: 0;
22746
22775
  }
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -660,18 +660,18 @@ html .ws-preview {
660
660
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
661
661
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
662
662
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
663
- --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--60);
664
- --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--50);
663
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
664
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
665
665
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
666
666
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
667
667
  --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
668
- --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--60);
669
- --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--50);
668
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
669
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
670
670
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
671
671
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
672
672
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
673
- --pf-t--global--color--status--success--200: var(--pf-t--color--green--60);
674
- --pf-t--global--color--status--success--100: var(--pf-t--color--green--50);
673
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
674
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
675
675
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
676
676
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
677
677
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
@@ -742,6 +742,7 @@ html .ws-preview {
742
742
  --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
743
743
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
744
744
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
745
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
745
746
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
746
747
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
747
748
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -790,9 +791,6 @@ html .ws-preview {
790
791
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
791
792
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
792
793
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
793
- --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
794
- --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
795
- --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
796
794
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
797
795
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
798
796
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -904,6 +902,7 @@ html .ws-preview {
904
902
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
905
903
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
906
904
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
905
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
907
906
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
908
907
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
909
908
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
@@ -955,13 +954,13 @@ html .ws-preview {
955
954
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
956
955
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
957
956
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
958
- --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular);
957
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
959
958
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
960
959
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
961
960
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
962
961
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
963
962
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
964
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--regular);
963
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
965
964
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
966
965
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
967
966
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -973,13 +972,16 @@ html .ws-preview {
973
972
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
974
973
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
975
974
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
976
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular);
975
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
976
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
977
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
978
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
977
979
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
978
980
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
979
981
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
980
982
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
981
983
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
982
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--regular);
984
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
983
985
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
984
986
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
985
987
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -1044,13 +1046,13 @@ html .ws-preview {
1044
1046
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
1045
1047
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
1046
1048
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
1047
- --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular);
1049
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
1048
1050
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
1049
1051
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
1050
1052
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
1051
1053
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
1052
1054
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
1053
- --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--regular);
1055
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
1054
1056
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
1055
1057
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
1056
1058
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -1062,7 +1064,7 @@ html .ws-preview {
1062
1064
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
1063
1065
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
1064
1066
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
1065
- --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular);
1067
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
1066
1068
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
1067
1069
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
1068
1070
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
@@ -1071,7 +1073,7 @@ html .ws-preview {
1071
1073
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
1072
1074
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
1073
1075
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
1074
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--regular);
1076
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
1075
1077
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
1076
1078
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
1077
1079
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -1146,8 +1148,8 @@ html .ws-preview {
1146
1148
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
1147
1149
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
1148
1150
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
1149
- --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--20);
1150
- --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--30);
1151
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
1152
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
1151
1153
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
1152
1154
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
1153
1155
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
@@ -1214,6 +1216,7 @@ html .ws-preview {
1214
1216
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
1215
1217
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
1216
1218
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
1219
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
1217
1220
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
1218
1221
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
1219
1222
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
@@ -14920,7 +14923,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
14920
14923
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14921
14924
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14922
14925
  --pf-v6-c-drawer__content--FlexBasis: 100%;
14923
- --pf-v6-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14926
+ --pf-v6-c-drawer__content--BackgroundColor: transparent;
14927
+ --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14924
14928
  --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14925
14929
  --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
14926
14930
  --pf-v6-c-drawer__panel--MinWidth: 50%;
@@ -15121,12 +15125,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
15121
15125
  order: 0;
15122
15126
  background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
15123
15127
  }
15128
+ .pf-v6-c-drawer__content.pf-m-primary {
15129
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
15130
+ }
15124
15131
  .pf-v6-c-drawer__content.pf-m-secondary {
15125
15132
  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
15126
15133
  }
15127
- .pf-v6-c-drawer__content.pf-m-no-background {
15128
- --pf-v6-c-drawer__content--BackgroundColor: transparent;
15129
- }
15130
15134
  .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
15131
15135
  padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingTop);
15132
15136
  padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBottom);
@@ -20608,6 +20612,13 @@ ul.pf-v6-c-list {
20608
20612
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
20609
20613
  --pf-v6-c-menu-toggle--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
20610
20614
  --pf-v6-c-menu-toggle--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
20615
+ --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
20616
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
20617
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
20618
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
20619
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
20620
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
20621
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
20611
20622
  }
20612
20623
 
20613
20624
  .pf-v6-c-menu-toggle {
@@ -20742,6 +20753,18 @@ ul.pf-v6-c-list {
20742
20753
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
20743
20754
  background-color: transparent;
20744
20755
  }
20756
+ .pf-v6-c-menu-toggle.pf-m-success {
20757
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
20758
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
20759
+ }
20760
+ .pf-v6-c-menu-toggle.pf-m-warning {
20761
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
20762
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
20763
+ }
20764
+ .pf-v6-c-menu-toggle.pf-m-danger {
20765
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
20766
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
20767
+ }
20745
20768
 
20746
20769
  .pf-v6-c-menu-toggle.pf-m-split-button {
20747
20770
  --pf-v6-c-menu-toggle--ColumnGap: 0;
@@ -20884,6 +20907,11 @@ ul.pf-v6-c-list {
20884
20907
  color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
20885
20908
  }
20886
20909
 
20910
+ .pf-v6-c-menu-toggle__status-icon {
20911
+ margin-inline-end: var(--pf-v6-c-menu-toggle__status-icon--MarginInlineEnd);
20912
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
20913
+ }
20914
+
20887
20915
  :root {
20888
20916
  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
20889
20917
  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -22326,19 +22354,19 @@ ul.pf-v6-c-list {
22326
22354
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
22327
22355
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
22328
22356
  --pf-v6-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
22329
- --pf-v6-c-page__main--ZIndex: var(--pf-v6-global--ZIndex--xs);
22330
- --pf-v6-c-page__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
22331
- --pf-v6-c-page__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22332
- --pf-v6-c-page__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
22333
- --pf-v6-c-page__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
22334
- --pf-v6-c-page__main--BorderRadius: var(--pf-t--global--border--radius--large);
22335
- --pf-v6-c-page__main--BorderWidth: var(--pf-t--global--spacer--sm);
22336
- --pf-v6-c-page__main--BorderColor: var(--pf-v6-c-page__main--BackgroundColor);
22357
+ --pf-v6-c-page__main-container--ZIndex: var(--pf-v6-global--ZIndex--xs);
22358
+ --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
22359
+ --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22360
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
22361
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
22362
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
22363
+ --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
22364
+ --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
22337
22365
  --pf-v6-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
22338
22366
  --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
22339
22367
  --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22340
22368
  --pf-v6-c-page__main-section--PaddingBottom: 0;
22341
- --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22369
+ --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22342
22370
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
22343
22371
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22344
22372
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -22366,9 +22394,9 @@ ul.pf-v6-c-list {
22366
22394
  --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22367
22395
  --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22368
22396
  --pf-v6-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
22369
- --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22397
+ --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22370
22398
  --pf-v6-c-page__main-breadcrumb--PaddingBottom: 0;
22371
- --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22399
+ --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22372
22400
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22373
22401
  --pf-v6-c-page__main-tabs--PaddingTop: 0;
22374
22402
  --pf-v6-c-page__main-tabs--PaddingRight: 0;
@@ -22414,7 +22442,7 @@ ul.pf-v6-c-list {
22414
22442
  }
22415
22443
  @media (min-width: 1200px) {
22416
22444
  .pf-v6-c-page {
22417
- grid-template-areas: "header header" "nav main";
22445
+ grid-template-areas: "header header" "sidebar main";
22418
22446
  grid-template-columns: max-content 1fr;
22419
22447
  }
22420
22448
  }
@@ -22526,7 +22554,7 @@ ul.pf-v6-c-list {
22526
22554
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
22527
22555
  display: flex;
22528
22556
  flex-direction: column;
22529
- grid-area: nav;
22557
+ grid-area: sidebar;
22530
22558
  grid-row-start: 2;
22531
22559
  grid-column-start: 1;
22532
22560
  width: var(--pf-v6-c-page__sidebar--Width);
@@ -22838,26 +22866,27 @@ ul.pf-v6-c-list {
22838
22866
  }
22839
22867
  }
22840
22868
 
22841
- .pf-v6-c-page__main {
22869
+ .pf-v6-c-page__main-container {
22842
22870
  align-self: start;
22843
- max-height: var(--pf-v6-c-page__main--MaxHeight);
22871
+ max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22844
22872
  margin-block-start: 0;
22845
- margin-inline-start: var(--pf-v6-c-page__main--MarginInlineStart);
22846
- margin-inline-end: var(--pf-v6-c-page__main--MarginInlineEnd);
22847
- background: var(--pf-v6-c-page__main--BackgroundColor);
22848
- border: var(--pf-v6-c-page__main--BorderWidth) solid var(--pf-v6-c-page__main--BorderColor);
22849
- border-radius: var(--pf-v6-c-page__main--BorderRadius);
22873
+ margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22874
+ margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22875
+ overflow: auto;
22876
+ background: var(--pf-v6-c-page__main-container--BackgroundColor);
22877
+ border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
22878
+ border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
22850
22879
  }
22851
22880
 
22852
- .pf-v6-c-page__main,
22881
+ .pf-v6-c-page__main-container,
22853
22882
  .pf-v6-c-page__drawer {
22854
- z-index: var(--pf-v6-c-page__main--ZIndex);
22883
+ z-index: var(--pf-v6-c-page__main-container--ZIndex);
22855
22884
  grid-area: main;
22856
22885
  overflow-x: hidden;
22857
22886
  overflow-y: auto;
22858
22887
  -webkit-overflow-scrolling: touch;
22859
22888
  }
22860
- .pf-v6-c-page__main:focus,
22889
+ .pf-v6-c-page__main-container:focus,
22861
22890
  .pf-v6-c-page__drawer:focus {
22862
22891
  outline: 0;
22863
22892
  }