@patternfly/patternfly 6.0.0-alpha.202 → 6.0.0-alpha.203

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 (11) hide show
  1. package/components/Masthead/masthead.css +22 -1
  2. package/components/Masthead/masthead.scss +9 -1
  3. package/components/Page/page.css +19 -11
  4. package/components/Page/page.scss +19 -12
  5. package/components/_index.css +41 -12
  6. package/docs/demos/Page/examples/Page.md +608 -0
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +41 -12
  9. package/patternfly.css +41 -12
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -14916,8 +14916,9 @@ ul.pf-v6-c-list {
14916
14916
  --pf-v6-c-masthead--m-display-stack__brand--Order: -1;
14917
14917
  --pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
14918
14918
  --pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
14919
- --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
14919
+ --pf-v6-c-masthead--m-display-stack__content--GridColumn: 1;
14920
14920
  --pf-v6-c-masthead--m-display-stack__content--Order: 1;
14921
+ --pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn: 2;
14921
14922
  --pf-v6-c-masthead--m-display-stack__main--Display: contents;
14922
14923
  --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset;
14923
14924
  --pf-v6-c-masthead--m-display-inline--ColumnGap: 0;
@@ -14930,6 +14931,7 @@ ul.pf-v6-c-list {
14930
14931
  --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1;
14931
14932
  --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2;
14932
14933
  --pf-v6-c-masthead--m-display-inline__content--Order: 0;
14934
+ --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
14933
14935
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
14934
14936
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
14935
14937
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
@@ -14948,6 +14950,7 @@ ul.pf-v6-c-list {
14948
14950
  --pf-v6-c-masthead__main--GridColumn: unset;
14949
14951
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
14950
14952
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
14953
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
14951
14954
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
14952
14955
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
14953
14956
  display: grid;
@@ -14978,6 +14981,7 @@ ul.pf-v6-c-list {
14978
14981
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
14979
14982
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
14980
14983
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
14984
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
14981
14985
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
14982
14986
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
14983
14987
  }
@@ -15001,6 +15005,7 @@ ul.pf-v6-c-list {
15001
15005
  --pf-v6-c-masthead__main--GridColumn: unset;
15002
15006
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15003
15007
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15008
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15004
15009
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15005
15010
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15006
15011
  }
@@ -15014,6 +15019,7 @@ ul.pf-v6-c-list {
15014
15019
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15015
15020
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15016
15021
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15022
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15017
15023
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15018
15024
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15019
15025
  }
@@ -15049,6 +15055,9 @@ ul.pf-v6-c-list {
15049
15055
  align-items: center;
15050
15056
  margin-inline-end: var(--pf-v6-c-masthead__main--MarginInlineEnd);
15051
15057
  }
15058
+ .pf-v6-c-masthead__main:has(.pf-v6-c-masthead__toggle) ~ .pf-v6-c-masthead__content {
15059
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead__main--toggle--content--GridColumn);
15060
+ }
15052
15061
 
15053
15062
  .pf-v6-c-masthead,
15054
15063
  .pf-v6-c-masthead__brand {
@@ -15109,6 +15118,7 @@ ul.pf-v6-c-list {
15109
15118
  --pf-v6-c-masthead__main--GridColumn: unset;
15110
15119
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15111
15120
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15121
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15112
15122
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15113
15123
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15114
15124
  }
@@ -15122,6 +15132,7 @@ ul.pf-v6-c-list {
15122
15132
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15123
15133
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15124
15134
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15135
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15125
15136
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15126
15137
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15127
15138
  }
@@ -15160,6 +15171,7 @@ ul.pf-v6-c-list {
15160
15171
  --pf-v6-c-masthead__main--GridColumn: unset;
15161
15172
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15162
15173
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15174
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15163
15175
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15164
15176
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15165
15177
  }
@@ -15173,6 +15185,7 @@ ul.pf-v6-c-list {
15173
15185
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15174
15186
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15175
15187
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15188
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15176
15189
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15177
15190
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15178
15191
  }
@@ -15212,6 +15225,7 @@ ul.pf-v6-c-list {
15212
15225
  --pf-v6-c-masthead__main--GridColumn: unset;
15213
15226
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15214
15227
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15228
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15215
15229
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15216
15230
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15217
15231
  }
@@ -15225,6 +15239,7 @@ ul.pf-v6-c-list {
15225
15239
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15226
15240
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15227
15241
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15242
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15228
15243
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15229
15244
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15230
15245
  }
@@ -15264,6 +15279,7 @@ ul.pf-v6-c-list {
15264
15279
  --pf-v6-c-masthead__main--GridColumn: unset;
15265
15280
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15266
15281
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15282
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15267
15283
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15268
15284
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15269
15285
  }
@@ -15277,6 +15293,7 @@ ul.pf-v6-c-list {
15277
15293
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15278
15294
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15279
15295
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15296
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15280
15297
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15281
15298
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15282
15299
  }
@@ -15316,6 +15333,7 @@ ul.pf-v6-c-list {
15316
15333
  --pf-v6-c-masthead__main--GridColumn: unset;
15317
15334
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15318
15335
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15336
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15319
15337
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15320
15338
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15321
15339
  }
@@ -15329,6 +15347,7 @@ ul.pf-v6-c-list {
15329
15347
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15330
15348
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15331
15349
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15350
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15332
15351
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15333
15352
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15334
15353
  }
@@ -15368,6 +15387,7 @@ ul.pf-v6-c-list {
15368
15387
  --pf-v6-c-masthead__main--GridColumn: unset;
15369
15388
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15370
15389
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15390
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15371
15391
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15372
15392
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15373
15393
  }
@@ -15381,6 +15401,7 @@ ul.pf-v6-c-list {
15381
15401
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15382
15402
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15383
15403
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15404
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15384
15405
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15385
15406
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15386
15407
  }
@@ -17531,6 +17552,8 @@ ul.pf-v6-c-list {
17531
17552
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
17532
17553
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
17533
17554
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
17555
+ --pf-v6-c-page__main-container--GridArea: main;
17556
+ --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
17534
17557
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
17535
17558
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
17536
17559
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
@@ -17891,31 +17914,37 @@ ul.pf-v6-c-list {
17891
17914
  flex-direction: column;
17892
17915
  align-self: start;
17893
17916
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
17894
- margin-block-start: 0;
17895
17917
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
17896
17918
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
17897
- overflow: auto;
17898
17919
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
17899
17920
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
17900
17921
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
17901
17922
  }
17902
- @media screen and (min-width: 75rem) {
17903
- .pf-v6-c-page__main-container {
17904
- --pf-v6-c-page__main-container--MarginInlineStart: 0;
17905
- }
17906
- }
17907
- .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
17908
- align-self: stretch;
17909
- }
17910
17923
 
17911
17924
  .pf-v6-c-page__main-container,
17912
17925
  .pf-v6-c-page__drawer {
17913
17926
  z-index: var(--pf-v6-c-page__main-container--ZIndex);
17914
- grid-area: main;
17927
+ grid-area: var(--pf-v6-c-page__main-container--GridArea);
17915
17928
  overflow-x: hidden;
17916
17929
  overflow-y: auto;
17917
17930
  -webkit-overflow-scrolling: touch;
17918
17931
  }
17932
+ @media screen and (min-width: 75rem) {
17933
+ .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
17934
+ .pf-v6-c-masthead + .pf-v6-c-page__drawer,
17935
+ .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
17936
+ --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
17937
+ }
17938
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
17939
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
17940
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
17941
+ }
17942
+ }
17943
+ .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
17944
+ .pf-v6-c-page__drawer.pf-m-fill,
17945
+ .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
17946
+ align-self: stretch;
17947
+ }
17919
17948
  .pf-v6-c-page__main-container:focus,
17920
17949
  .pf-v6-c-page__drawer:focus {
17921
17950
  outline: 0;
package/patternfly.css CHANGED
@@ -15037,8 +15037,9 @@ ul.pf-v6-c-list {
15037
15037
  --pf-v6-c-masthead--m-display-stack__brand--Order: -1;
15038
15038
  --pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
15039
15039
  --pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
15040
- --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
15040
+ --pf-v6-c-masthead--m-display-stack__content--GridColumn: 1;
15041
15041
  --pf-v6-c-masthead--m-display-stack__content--Order: 1;
15042
+ --pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn: 2;
15042
15043
  --pf-v6-c-masthead--m-display-stack__main--Display: contents;
15043
15044
  --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset;
15044
15045
  --pf-v6-c-masthead--m-display-inline--ColumnGap: 0;
@@ -15051,6 +15052,7 @@ ul.pf-v6-c-list {
15051
15052
  --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1;
15052
15053
  --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2;
15053
15054
  --pf-v6-c-masthead--m-display-inline__content--Order: 0;
15055
+ --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
15054
15056
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
15055
15057
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
15056
15058
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
@@ -15069,6 +15071,7 @@ ul.pf-v6-c-list {
15069
15071
  --pf-v6-c-masthead__main--GridColumn: unset;
15070
15072
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15071
15073
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15074
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15072
15075
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15073
15076
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15074
15077
  display: grid;
@@ -15099,6 +15102,7 @@ ul.pf-v6-c-list {
15099
15102
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15100
15103
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15101
15104
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15105
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15102
15106
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15103
15107
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15104
15108
  }
@@ -15122,6 +15126,7 @@ ul.pf-v6-c-list {
15122
15126
  --pf-v6-c-masthead__main--GridColumn: unset;
15123
15127
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15124
15128
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15129
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15125
15130
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15126
15131
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15127
15132
  }
@@ -15135,6 +15140,7 @@ ul.pf-v6-c-list {
15135
15140
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15136
15141
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15137
15142
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15143
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15138
15144
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15139
15145
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15140
15146
  }
@@ -15170,6 +15176,9 @@ ul.pf-v6-c-list {
15170
15176
  align-items: center;
15171
15177
  margin-inline-end: var(--pf-v6-c-masthead__main--MarginInlineEnd);
15172
15178
  }
15179
+ .pf-v6-c-masthead__main:has(.pf-v6-c-masthead__toggle) ~ .pf-v6-c-masthead__content {
15180
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead__main--toggle--content--GridColumn);
15181
+ }
15173
15182
 
15174
15183
  .pf-v6-c-masthead,
15175
15184
  .pf-v6-c-masthead__brand {
@@ -15230,6 +15239,7 @@ ul.pf-v6-c-list {
15230
15239
  --pf-v6-c-masthead__main--GridColumn: unset;
15231
15240
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15232
15241
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15242
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15233
15243
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15234
15244
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15235
15245
  }
@@ -15243,6 +15253,7 @@ ul.pf-v6-c-list {
15243
15253
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15244
15254
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15245
15255
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15256
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15246
15257
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15247
15258
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15248
15259
  }
@@ -15281,6 +15292,7 @@ ul.pf-v6-c-list {
15281
15292
  --pf-v6-c-masthead__main--GridColumn: unset;
15282
15293
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15283
15294
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15295
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15284
15296
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15285
15297
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15286
15298
  }
@@ -15294,6 +15306,7 @@ ul.pf-v6-c-list {
15294
15306
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15295
15307
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15296
15308
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15309
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15297
15310
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15298
15311
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15299
15312
  }
@@ -15333,6 +15346,7 @@ ul.pf-v6-c-list {
15333
15346
  --pf-v6-c-masthead__main--GridColumn: unset;
15334
15347
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15335
15348
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15349
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15336
15350
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15337
15351
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15338
15352
  }
@@ -15346,6 +15360,7 @@ ul.pf-v6-c-list {
15346
15360
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15347
15361
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15348
15362
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15363
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15349
15364
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15350
15365
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15351
15366
  }
@@ -15385,6 +15400,7 @@ ul.pf-v6-c-list {
15385
15400
  --pf-v6-c-masthead__main--GridColumn: unset;
15386
15401
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15387
15402
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15403
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15388
15404
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15389
15405
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15390
15406
  }
@@ -15398,6 +15414,7 @@ ul.pf-v6-c-list {
15398
15414
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15399
15415
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15400
15416
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15417
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15401
15418
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15402
15419
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15403
15420
  }
@@ -15437,6 +15454,7 @@ ul.pf-v6-c-list {
15437
15454
  --pf-v6-c-masthead__main--GridColumn: unset;
15438
15455
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15439
15456
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15457
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15440
15458
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15441
15459
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15442
15460
  }
@@ -15450,6 +15468,7 @@ ul.pf-v6-c-list {
15450
15468
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15451
15469
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15452
15470
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15471
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15453
15472
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15454
15473
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15455
15474
  }
@@ -15489,6 +15508,7 @@ ul.pf-v6-c-list {
15489
15508
  --pf-v6-c-masthead__main--GridColumn: unset;
15490
15509
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
15491
15510
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
15511
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
15492
15512
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
15493
15513
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
15494
15514
  }
@@ -15502,6 +15522,7 @@ ul.pf-v6-c-list {
15502
15522
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
15503
15523
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
15504
15524
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
15525
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
15505
15526
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
15506
15527
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
15507
15528
  }
@@ -17652,6 +17673,8 @@ ul.pf-v6-c-list {
17652
17673
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
17653
17674
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
17654
17675
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
17676
+ --pf-v6-c-page__main-container--GridArea: main;
17677
+ --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
17655
17678
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
17656
17679
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
17657
17680
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
@@ -18012,31 +18035,37 @@ ul.pf-v6-c-list {
18012
18035
  flex-direction: column;
18013
18036
  align-self: start;
18014
18037
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
18015
- margin-block-start: 0;
18016
18038
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
18017
18039
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
18018
- overflow: auto;
18019
18040
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
18020
18041
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
18021
18042
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
18022
18043
  }
18023
- @media screen and (min-width: 75rem) {
18024
- .pf-v6-c-page__main-container {
18025
- --pf-v6-c-page__main-container--MarginInlineStart: 0;
18026
- }
18027
- }
18028
- .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
18029
- align-self: stretch;
18030
- }
18031
18044
 
18032
18045
  .pf-v6-c-page__main-container,
18033
18046
  .pf-v6-c-page__drawer {
18034
18047
  z-index: var(--pf-v6-c-page__main-container--ZIndex);
18035
- grid-area: main;
18048
+ grid-area: var(--pf-v6-c-page__main-container--GridArea);
18036
18049
  overflow-x: hidden;
18037
18050
  overflow-y: auto;
18038
18051
  -webkit-overflow-scrolling: touch;
18039
18052
  }
18053
+ @media screen and (min-width: 75rem) {
18054
+ .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
18055
+ .pf-v6-c-masthead + .pf-v6-c-page__drawer,
18056
+ .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
18057
+ --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
18058
+ }
18059
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
18060
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
18061
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
18062
+ }
18063
+ }
18064
+ .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
18065
+ .pf-v6-c-page__drawer.pf-m-fill,
18066
+ .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
18067
+ align-self: stretch;
18068
+ }
18040
18069
  .pf-v6-c-page__main-container:focus,
18041
18070
  .pf-v6-c-page__drawer:focus {
18042
18071
  outline: 0;