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

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 (36) hide show
  1. package/components/Drawer/drawer.css +5 -4
  2. package/components/Drawer/drawer.scss +7 -6
  3. package/components/Page/page.css +24 -23
  4. package/components/Page/page.scss +24 -23
  5. package/docs/components/Drawer/examples/Drawer.md +2 -1
  6. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  7. package/docs/components/Page/examples/Page.md +114 -100
  8. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  9. package/docs/demos/Alert/examples/Alert.md +551 -524
  10. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  11. package/docs/demos/Banner/examples/Banner.md +420 -412
  12. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  14. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  15. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  17. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  19. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  20. package/docs/demos/Modal/examples/Modal.md +486 -474
  21. package/docs/demos/Nav/examples/Nav.md +528 -510
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  23. package/docs/demos/Page/examples/Page.md +1656 -1633
  24. package/docs/demos/Page/examples/Penta.md +632 -577
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  26. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  27. package/docs/demos/Table/examples/Table.md +14137 -13972
  28. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  29. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  30. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +29 -27
  33. package/patternfly-theme-dark-unversioned.css +29 -27
  34. package/patternfly.css +29 -27
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
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.0.0-alpha.103",
4
+ "version": "6.0.0-alpha.104",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -14803,7 +14803,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
14803
14803
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14804
14804
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14805
14805
  --pf-v6-c-drawer__content--FlexBasis: 100%;
14806
- --pf-v6-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14806
+ --pf-v6-c-drawer__content--BackgroundColor: transparent;
14807
+ --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14807
14808
  --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14808
14809
  --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
14809
14810
  --pf-v6-c-drawer__panel--MinWidth: 50%;
@@ -15004,12 +15005,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
15004
15005
  order: 0;
15005
15006
  background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
15006
15007
  }
15008
+ .pf-v6-c-drawer__content.pf-m-primary {
15009
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
15010
+ }
15007
15011
  .pf-v6-c-drawer__content.pf-m-secondary {
15008
15012
  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
15009
15013
  }
15010
- .pf-v6-c-drawer__content.pf-m-no-background {
15011
- --pf-v6-c-drawer__content--BackgroundColor: transparent;
15012
- }
15013
15014
  .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
15014
15015
  padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingTop);
15015
15016
  padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBottom);
@@ -22209,19 +22210,19 @@ ul.pf-v6-c-list {
22209
22210
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
22210
22211
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
22211
22212
  --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);
22213
+ --pf-v6-c-page__main-container--ZIndex: var(--pf-v6-global--ZIndex--xs);
22214
+ --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
22215
+ --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22216
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
22217
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
22218
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
22219
+ --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
22220
+ --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
22220
22221
  --pf-v6-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
22221
22222
  --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
22222
22223
  --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22223
22224
  --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));
22225
+ --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22225
22226
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
22226
22227
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22227
22228
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -22249,9 +22250,9 @@ ul.pf-v6-c-list {
22249
22250
  --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22250
22251
  --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22251
22252
  --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));
22253
+ --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22253
22254
  --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));
22255
+ --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22255
22256
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22256
22257
  --pf-v6-c-page__main-tabs--PaddingTop: 0;
22257
22258
  --pf-v6-c-page__main-tabs--PaddingRight: 0;
@@ -22297,7 +22298,7 @@ ul.pf-v6-c-list {
22297
22298
  }
22298
22299
  @media (min-width: 1200px) {
22299
22300
  .pf-v6-c-page {
22300
- grid-template-areas: "header header" "nav main";
22301
+ grid-template-areas: "header header" "sidebar main";
22301
22302
  grid-template-columns: max-content 1fr;
22302
22303
  }
22303
22304
  }
@@ -22409,7 +22410,7 @@ ul.pf-v6-c-list {
22409
22410
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
22410
22411
  display: flex;
22411
22412
  flex-direction: column;
22412
- grid-area: nav;
22413
+ grid-area: sidebar;
22413
22414
  grid-row-start: 2;
22414
22415
  grid-column-start: 1;
22415
22416
  width: var(--pf-v6-c-page__sidebar--Width);
@@ -22721,26 +22722,27 @@ ul.pf-v6-c-list {
22721
22722
  }
22722
22723
  }
22723
22724
 
22724
- .pf-v6-c-page__main {
22725
+ .pf-v6-c-page__main-container {
22725
22726
  align-self: start;
22726
- max-height: var(--pf-v6-c-page__main--MaxHeight);
22727
+ max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22727
22728
  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);
22729
+ margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22730
+ margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22731
+ overflow: auto;
22732
+ background: var(--pf-v6-c-page__main-container--BackgroundColor);
22733
+ border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
22734
+ border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
22733
22735
  }
22734
22736
 
22735
- .pf-v6-c-page__main,
22737
+ .pf-v6-c-page__main-container,
22736
22738
  .pf-v6-c-page__drawer {
22737
- z-index: var(--pf-v6-c-page__main--ZIndex);
22739
+ z-index: var(--pf-v6-c-page__main-container--ZIndex);
22738
22740
  grid-area: main;
22739
22741
  overflow-x: hidden;
22740
22742
  overflow-y: auto;
22741
22743
  -webkit-overflow-scrolling: touch;
22742
22744
  }
22743
- .pf-v6-c-page__main:focus,
22745
+ .pf-v6-c-page__main-container:focus,
22744
22746
  .pf-v6-c-page__drawer:focus {
22745
22747
  outline: 0;
22746
22748
  }
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -14920,7 +14920,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
14920
14920
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14921
14921
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14922
14922
  --pf-v6-c-drawer__content--FlexBasis: 100%;
14923
- --pf-v6-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14923
+ --pf-v6-c-drawer__content--BackgroundColor: transparent;
14924
+ --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14924
14925
  --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14925
14926
  --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
14926
14927
  --pf-v6-c-drawer__panel--MinWidth: 50%;
@@ -15121,12 +15122,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
15121
15122
  order: 0;
15122
15123
  background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
15123
15124
  }
15125
+ .pf-v6-c-drawer__content.pf-m-primary {
15126
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
15127
+ }
15124
15128
  .pf-v6-c-drawer__content.pf-m-secondary {
15125
15129
  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
15126
15130
  }
15127
- .pf-v6-c-drawer__content.pf-m-no-background {
15128
- --pf-v6-c-drawer__content--BackgroundColor: transparent;
15129
- }
15130
15131
  .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
15131
15132
  padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingTop);
15132
15133
  padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBottom);
@@ -22326,19 +22327,19 @@ ul.pf-v6-c-list {
22326
22327
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
22327
22328
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
22328
22329
  --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);
22330
+ --pf-v6-c-page__main-container--ZIndex: var(--pf-v6-global--ZIndex--xs);
22331
+ --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
22332
+ --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22333
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
22334
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
22335
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
22336
+ --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
22337
+ --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
22337
22338
  --pf-v6-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
22338
22339
  --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
22339
22340
  --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22340
22341
  --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));
22342
+ --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22342
22343
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
22343
22344
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22344
22345
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -22366,9 +22367,9 @@ ul.pf-v6-c-list {
22366
22367
  --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22367
22368
  --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22368
22369
  --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));
22370
+ --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22370
22371
  --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));
22372
+ --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22372
22373
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22373
22374
  --pf-v6-c-page__main-tabs--PaddingTop: 0;
22374
22375
  --pf-v6-c-page__main-tabs--PaddingRight: 0;
@@ -22414,7 +22415,7 @@ ul.pf-v6-c-list {
22414
22415
  }
22415
22416
  @media (min-width: 1200px) {
22416
22417
  .pf-v6-c-page {
22417
- grid-template-areas: "header header" "nav main";
22418
+ grid-template-areas: "header header" "sidebar main";
22418
22419
  grid-template-columns: max-content 1fr;
22419
22420
  }
22420
22421
  }
@@ -22526,7 +22527,7 @@ ul.pf-v6-c-list {
22526
22527
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
22527
22528
  display: flex;
22528
22529
  flex-direction: column;
22529
- grid-area: nav;
22530
+ grid-area: sidebar;
22530
22531
  grid-row-start: 2;
22531
22532
  grid-column-start: 1;
22532
22533
  width: var(--pf-v6-c-page__sidebar--Width);
@@ -22838,26 +22839,27 @@ ul.pf-v6-c-list {
22838
22839
  }
22839
22840
  }
22840
22841
 
22841
- .pf-v6-c-page__main {
22842
+ .pf-v6-c-page__main-container {
22842
22843
  align-self: start;
22843
- max-height: var(--pf-v6-c-page__main--MaxHeight);
22844
+ max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22844
22845
  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);
22846
+ margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22847
+ margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22848
+ overflow: auto;
22849
+ background: var(--pf-v6-c-page__main-container--BackgroundColor);
22850
+ border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
22851
+ border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
22850
22852
  }
22851
22853
 
22852
- .pf-v6-c-page__main,
22854
+ .pf-v6-c-page__main-container,
22853
22855
  .pf-v6-c-page__drawer {
22854
- z-index: var(--pf-v6-c-page__main--ZIndex);
22856
+ z-index: var(--pf-v6-c-page__main-container--ZIndex);
22855
22857
  grid-area: main;
22856
22858
  overflow-x: hidden;
22857
22859
  overflow-y: auto;
22858
22860
  -webkit-overflow-scrolling: touch;
22859
22861
  }
22860
- .pf-v6-c-page__main:focus,
22862
+ .pf-v6-c-page__main-container:focus,
22861
22863
  .pf-v6-c-page__drawer:focus {
22862
22864
  outline: 0;
22863
22865
  }
package/patternfly.css CHANGED
@@ -14920,7 +14920,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
14920
14920
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14921
14921
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14922
14922
  --pf-v6-c-drawer__content--FlexBasis: 100%;
14923
- --pf-v6-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14923
+ --pf-v6-c-drawer__content--BackgroundColor: transparent;
14924
+ --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14924
14925
  --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14925
14926
  --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
14926
14927
  --pf-v6-c-drawer__panel--MinWidth: 50%;
@@ -15121,12 +15122,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
15121
15122
  order: 0;
15122
15123
  background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
15123
15124
  }
15125
+ .pf-v6-c-drawer__content.pf-m-primary {
15126
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
15127
+ }
15124
15128
  .pf-v6-c-drawer__content.pf-m-secondary {
15125
15129
  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
15126
15130
  }
15127
- .pf-v6-c-drawer__content.pf-m-no-background {
15128
- --pf-v6-c-drawer__content--BackgroundColor: transparent;
15129
- }
15130
15131
  .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
15131
15132
  padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingTop);
15132
15133
  padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBottom);
@@ -22326,19 +22327,19 @@ ul.pf-v6-c-list {
22326
22327
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
22327
22328
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
22328
22329
  --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);
22330
+ --pf-v6-c-page__main-container--ZIndex: var(--pf-v6-global--ZIndex--xs);
22331
+ --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
22332
+ --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22333
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
22334
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
22335
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
22336
+ --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
22337
+ --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
22337
22338
  --pf-v6-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
22338
22339
  --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
22339
22340
  --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22340
22341
  --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));
22342
+ --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22342
22343
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
22343
22344
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22344
22345
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -22366,9 +22367,9 @@ ul.pf-v6-c-list {
22366
22367
  --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22367
22368
  --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
22368
22369
  --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));
22370
+ --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22370
22371
  --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));
22372
+ --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
22372
22373
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22373
22374
  --pf-v6-c-page__main-tabs--PaddingTop: 0;
22374
22375
  --pf-v6-c-page__main-tabs--PaddingRight: 0;
@@ -22414,7 +22415,7 @@ ul.pf-v6-c-list {
22414
22415
  }
22415
22416
  @media (min-width: 1200px) {
22416
22417
  .pf-v6-c-page {
22417
- grid-template-areas: "header header" "nav main";
22418
+ grid-template-areas: "header header" "sidebar main";
22418
22419
  grid-template-columns: max-content 1fr;
22419
22420
  }
22420
22421
  }
@@ -22526,7 +22527,7 @@ ul.pf-v6-c-list {
22526
22527
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
22527
22528
  display: flex;
22528
22529
  flex-direction: column;
22529
- grid-area: nav;
22530
+ grid-area: sidebar;
22530
22531
  grid-row-start: 2;
22531
22532
  grid-column-start: 1;
22532
22533
  width: var(--pf-v6-c-page__sidebar--Width);
@@ -22838,26 +22839,27 @@ ul.pf-v6-c-list {
22838
22839
  }
22839
22840
  }
22840
22841
 
22841
- .pf-v6-c-page__main {
22842
+ .pf-v6-c-page__main-container {
22842
22843
  align-self: start;
22843
- max-height: var(--pf-v6-c-page__main--MaxHeight);
22844
+ max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22844
22845
  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);
22846
+ margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22847
+ margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22848
+ overflow: auto;
22849
+ background: var(--pf-v6-c-page__main-container--BackgroundColor);
22850
+ border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
22851
+ border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
22850
22852
  }
22851
22853
 
22852
- .pf-v6-c-page__main,
22854
+ .pf-v6-c-page__main-container,
22853
22855
  .pf-v6-c-page__drawer {
22854
- z-index: var(--pf-v6-c-page__main--ZIndex);
22856
+ z-index: var(--pf-v6-c-page__main-container--ZIndex);
22855
22857
  grid-area: main;
22856
22858
  overflow-x: hidden;
22857
22859
  overflow-y: auto;
22858
22860
  -webkit-overflow-scrolling: touch;
22859
22861
  }
22860
- .pf-v6-c-page__main:focus,
22862
+ .pf-v6-c-page__main-container:focus,
22861
22863
  .pf-v6-c-page__drawer:focus {
22862
22864
  outline: 0;
22863
22865
  }