@patternfly/react-styles 6.0.0-alpha.31 → 6.0.0-alpha.32

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Masthead/masthead.css +194 -96
  3. package/css/components/Nav/nav.css +5 -4
  4. package/css/components/Nav/nav.d.ts +1 -1
  5. package/css/components/Nav/nav.js +1 -1
  6. package/css/components/Nav/nav.mjs +1 -1
  7. package/css/components/Page/page.css +32 -18
  8. package/css/components/_index.css +231 -118
  9. package/css/components/_index.d.ts +1 -0
  10. package/css/components/_index.js +1 -0
  11. package/css/components/_index.mjs +1 -0
  12. package/package.json +3 -3
package/css/components/_index.css CHANGED
@@ -8835,44 +8835,61 @@ ul.pf-v6-c-list {
8835
8835
 
8836
8836
  :where(:root, .pf-v6-c-masthead) {
8837
8837
  --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
8838
- --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
8838
+ --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
8839
8839
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
8840
8840
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
8841
8841
  --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
8842
8842
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
8843
8843
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8844
- --pf-v6-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
8845
- --pf-v6-c-masthead__brand--MaxHeight: 2.375rem;
8844
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
8845
+ --pf-v6-c-masthead__main--MarginInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
8846
+ --pf-v6-c-masthead__logo--MaxHeight: 2.375rem;
8847
+ --pf-v6-c-masthead__logo--Width: 11.8125rem;
8846
8848
  --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
8849
+ --pf-v6-c-masthead__content--ColumnGap: var(--pf-t--global--spacer--md);
8850
+ --pf-v6-c-masthead--m-display-stack--ColumnGap: var(--pf-t--global--spacer--gutter--default);
8847
8851
  --pf-v6-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
8848
- --pf-v6-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
8849
- --pf-v6-c-masthead--m-display-stack__main--Order: -1;
8850
- --pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
8851
- --pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
8852
- --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
8852
+ --pf-v6-c-masthead--m-display-stack__brand--GridColumn: -1 / 1;
8853
+ --pf-v6-c-masthead--m-display-stack__brand--Order: -1;
8854
+ --pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
8855
+ --pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
8856
+ --pf-v6-c-masthead--m-display-stack__content--GridColumn: 1;
8853
8857
  --pf-v6-c-masthead--m-display-stack__content--Order: 1;
8854
- --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
8855
- --pf-v6-c-masthead--m-display-inline__main--GridColumn: 2;
8856
- --pf-v6-c-masthead--m-display-inline__main--Order: 0;
8857
- --pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd: 0;
8858
- --pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd: 0;
8859
- --pf-v6-c-masthead--m-display-inline__content--GridColumn: 3;
8858
+ --pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn: 2;
8859
+ --pf-v6-c-masthead--m-display-stack__main--Display: contents;
8860
+ --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset;
8861
+ --pf-v6-c-masthead--m-display-inline--ColumnGap: 0;
8862
+ --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
8863
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: subgrid;
8864
+ --pf-v6-c-masthead--m-display-inline__brand--GridColumn: initial;
8865
+ --pf-v6-c-masthead--m-display-inline__brand--Order: initial;
8866
+ --pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd: 0;
8867
+ --pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd: 0;
8868
+ --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1;
8869
+ --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2;
8860
8870
  --pf-v6-c-masthead--m-display-inline__content--Order: 0;
8871
+ --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
8872
+ --pf-v6-c-masthead--m-display-inline__main--Display: flex;
8873
+ --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
8861
8874
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
8862
8875
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
8863
8876
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
8864
8877
  --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
8865
- --pf-v6-c-masthead--c-toolbar--PaddingInline: 0;
8866
8878
  }
8867
8879
 
8868
8880
  .pf-v6-c-masthead {
8881
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
8869
8882
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
8870
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
8871
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
8872
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
8873
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
8883
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
8884
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
8885
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
8886
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
8887
+ --pf-v6-c-masthead__main--GridColumn: unset;
8874
8888
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
8875
8889
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
8890
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
8891
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
8892
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
8876
8893
  display: grid;
8877
8894
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
8878
8895
  row-gap: var(--pf-v6-c-masthead--RowGap);
@@ -8888,18 +8905,22 @@ ul.pf-v6-c-list {
8888
8905
  .pf-v6-c-masthead .pf-v6-c-toolbar {
8889
8906
  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
8890
8907
  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
8891
- --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
8892
8908
  --pf-v6-c-toolbar__content--MinWidth: 0;
8893
8909
  }
8894
8910
  @media screen and (min-width: 48rem) {
8895
8911
  :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
8912
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
8896
8913
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
8914
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
8915
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
8916
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
8917
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
8897
8918
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
8898
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
8899
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
8900
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
8901
8919
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
8902
8920
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
8921
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
8922
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
8923
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
8903
8924
  }
8904
8925
  }
8905
8926
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
@@ -8912,22 +8933,32 @@ ul.pf-v6-c-list {
8912
8933
  box-shadow: var(--pf-v6-c-masthead__expandable-content--BoxShadow);
8913
8934
  }
8914
8935
  .pf-v6-c-masthead.pf-m-display-stack {
8936
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
8915
8937
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
8916
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
8917
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
8918
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
8919
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
8938
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
8939
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
8940
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
8941
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
8942
+ --pf-v6-c-masthead__main--GridColumn: unset;
8920
8943
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
8921
8944
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
8945
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
8946
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
8947
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
8922
8948
  }
8923
8949
  .pf-v6-c-masthead.pf-m-display-inline {
8950
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
8924
8951
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
8952
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
8953
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
8954
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
8955
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
8925
8956
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
8926
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
8927
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
8928
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
8929
8957
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
8930
8958
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
8959
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
8960
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
8961
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
8931
8962
  }
8932
8963
  .pf-v6-c-masthead.pf-m-inset-none {
8933
8964
  padding-inline-start: 0;
@@ -8954,48 +8985,55 @@ ul.pf-v6-c-list {
8954
8985
  padding-inline-end: var(--pf-t--global--spacer--2xl);
8955
8986
  }
8956
8987
 
8957
- .pf-v6-c-masthead,
8958
8988
  .pf-v6-c-masthead__main {
8989
+ display: var(--pf-v6-c-masthead__main--Display);
8990
+ grid-column: var(--pf-v6-c-masthead__main--GridColumn);
8991
+ column-gap: var(--pf-v6-c-masthead__main--ColumnGap);
8992
+ align-items: center;
8993
+ margin-inline-end: var(--pf-v6-c-masthead__main--MarginInlineEnd);
8994
+ }
8995
+ .pf-v6-c-masthead__main:has(.pf-v6-c-masthead__toggle) ~ .pf-v6-c-masthead__content {
8996
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead__main--toggle--content--GridColumn);
8997
+ }
8998
+
8999
+ .pf-v6-c-masthead,
9000
+ .pf-v6-c-masthead__brand {
8959
9001
  position: relative;
8960
9002
  }
8961
9003
 
8962
- .pf-v6-c-masthead__main,
8963
- .pf-v6-c-masthead__content,
8964
- .pf-v6-c-masthead__logo,
8965
9004
  .pf-v6-c-masthead__brand {
8966
9005
  display: flex;
9006
+ flex-shrink: 0;
9007
+ grid-column: var(--pf-v6-c-masthead__brand--GridColumn, revert);
9008
+ row-gap: var(--pf-v6-c-masthead__brand--RowGap, var(--pf-v6-c-masthead--RowGap));
8967
9009
  align-self: stretch;
8968
- }
8969
-
8970
- .pf-v6-c-masthead__main,
8971
- .pf-v6-c-masthead__brand,
8972
- .pf-v6-c-masthead__content {
9010
+ order: var(--pf-v6-c-masthead__brand--Order, revert);
8973
9011
  min-width: 0.25rem;
8974
- }
8975
-
8976
- .pf-v6-c-masthead__main {
8977
- grid-column: var(--pf-v6-c-masthead__main--GridColumn);
8978
- row-gap: var(--pf-v6-c-masthead__main--RowGap, var(--pf-v6-c-masthead--RowGap));
8979
- align-items: var(--pf-v6-c-masthead__main--AlignItems, var(--pf-v6-c-masthead--AlignItems));
8980
- order: var(--pf-v6-c-masthead__main--Order);
8981
- padding-block-end: var(--pf-v6-c-masthead__main--PaddingBlockEnd);
8982
- border-block-end: var(--pf-v6-c-masthead__main--BorderBlockEnd);
9012
+ padding-block-end: var(--pf-v6-c-masthead__brand--PaddingBlockEnd);
9013
+ border-block-end: var(--pf-v6-c-masthead__brand--BorderBlockEnd);
8983
9014
  }
8984
9015
 
8985
9016
  .pf-v6-c-masthead__content {
9017
+ display: flex;
8986
9018
  flex-wrap: wrap;
8987
9019
  grid-column: var(--pf-v6-c-masthead__content--GridColumn);
8988
9020
  grid-column-end: -1;
8989
9021
  row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap));
8990
- column-gap: var(--pf-v6-c-masthead__content-ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
8991
- align-items: var(--pf-v6-c-masthead__content--AlignItems, var(--pf-v6-c-masthead--AlignItems));
9022
+ column-gap: var(--pf-v6-c-masthead__content--ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
9023
+ align-self: stretch;
8992
9024
  order: var(--pf-v6-c-masthead__content--Order);
9025
+ min-width: 0.25rem;
8993
9026
  }
8994
9027
 
8995
- .pf-v6-c-masthead__brand {
8996
- align-items: var(--pf-v6-c-masthead__brand--AlignItems, var(--pf-v6-c-masthead--AlignItems));
8997
- max-height: var(--pf-v6-c-masthead__brand--MaxHeight);
8998
- margin-inline-end: var(--pf-v6-c-masthead__brand--MarginInlineEnd);
9028
+ .pf-v6-c-masthead__logo {
9029
+ position: relative;
9030
+ width: var(--pf-v6-c-masthead__logo--Width);
9031
+ max-height: var(--pf-v6-c-masthead__logo--MaxHeight);
9032
+ }
9033
+ .pf-v6-c-masthead__logo > * {
9034
+ max-width: 100%;
9035
+ max-height: 100%;
9036
+ vertical-align: middle;
8999
9037
  }
9000
9038
 
9001
9039
  .pf-v6-c-masthead__toggle {
@@ -9008,22 +9046,32 @@ ul.pf-v6-c-list {
9008
9046
  }
9009
9047
 
9010
9048
  .pf-v6-c-masthead.pf-m-display-stack {
9049
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
9011
9050
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
9012
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
9013
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
9014
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
9015
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
9051
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
9052
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
9053
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
9054
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
9055
+ --pf-v6-c-masthead__main--GridColumn: unset;
9016
9056
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9017
9057
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9058
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9059
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9060
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9018
9061
  }
9019
9062
  .pf-v6-c-masthead.pf-m-display-inline {
9063
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
9020
9064
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
9065
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
9066
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
9067
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
9068
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
9021
9069
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9022
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
9023
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
9024
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
9025
9070
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9026
9071
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9072
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9073
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9074
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9027
9075
  }
9028
9076
  .pf-v6-c-masthead.pf-m-inset-none {
9029
9077
  padding-inline-start: 0;
@@ -9051,22 +9099,32 @@ ul.pf-v6-c-list {
9051
9099
  }
9052
9100
  @media (min-width: 36rem) {
9053
9101
  .pf-v6-c-masthead.pf-m-display-stack-on-sm {
9102
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
9054
9103
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
9055
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
9056
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
9057
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
9058
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
9104
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
9105
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
9106
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
9107
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
9108
+ --pf-v6-c-masthead__main--GridColumn: unset;
9059
9109
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9060
9110
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9111
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9112
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9113
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9061
9114
  }
9062
9115
  .pf-v6-c-masthead.pf-m-display-inline-on-sm {
9116
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
9063
9117
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
9118
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
9119
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
9120
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
9121
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
9064
9122
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9065
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
9066
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
9067
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
9068
9123
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9069
9124
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9125
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9126
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9127
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9070
9128
  }
9071
9129
  }
9072
9130
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -9095,22 +9153,32 @@ ul.pf-v6-c-list {
9095
9153
  }
9096
9154
  @media (min-width: 48rem) {
9097
9155
  .pf-v6-c-masthead.pf-m-display-stack-on-md {
9156
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
9098
9157
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
9099
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
9100
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
9101
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
9102
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
9158
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
9159
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
9160
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
9161
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
9162
+ --pf-v6-c-masthead__main--GridColumn: unset;
9103
9163
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9104
9164
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9165
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9166
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9167
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9105
9168
  }
9106
9169
  .pf-v6-c-masthead.pf-m-display-inline-on-md {
9170
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
9107
9171
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
9172
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
9173
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
9174
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
9175
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
9108
9176
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9109
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
9110
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
9111
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
9112
9177
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9113
9178
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9179
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9180
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9181
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9114
9182
  }
9115
9183
  }
9116
9184
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -9139,22 +9207,32 @@ ul.pf-v6-c-list {
9139
9207
  }
9140
9208
  @media (min-width: 62rem) {
9141
9209
  .pf-v6-c-masthead.pf-m-display-stack-on-lg {
9210
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
9142
9211
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
9143
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
9144
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
9145
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
9146
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
9212
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
9213
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
9214
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
9215
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
9216
+ --pf-v6-c-masthead__main--GridColumn: unset;
9147
9217
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9148
9218
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9219
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9220
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9221
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9149
9222
  }
9150
9223
  .pf-v6-c-masthead.pf-m-display-inline-on-lg {
9224
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
9151
9225
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
9226
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
9227
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
9228
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
9229
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
9152
9230
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9153
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
9154
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
9155
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
9156
9231
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9157
9232
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9233
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9234
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9235
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9158
9236
  }
9159
9237
  }
9160
9238
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -9183,22 +9261,32 @@ ul.pf-v6-c-list {
9183
9261
  }
9184
9262
  @media (min-width: 75rem) {
9185
9263
  .pf-v6-c-masthead.pf-m-display-stack-on-xl {
9264
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
9186
9265
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
9187
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
9188
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
9189
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
9190
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
9266
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
9267
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
9268
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
9269
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
9270
+ --pf-v6-c-masthead__main--GridColumn: unset;
9191
9271
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9192
9272
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9273
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9274
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9275
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9193
9276
  }
9194
9277
  .pf-v6-c-masthead.pf-m-display-inline-on-xl {
9278
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
9195
9279
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
9280
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
9281
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
9282
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
9283
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
9196
9284
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9197
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
9198
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
9199
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
9200
9285
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9201
9286
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9287
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9288
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9289
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9202
9290
  }
9203
9291
  }
9204
9292
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -9227,22 +9315,32 @@ ul.pf-v6-c-list {
9227
9315
  }
9228
9316
  @media (min-width: 90.625rem) {
9229
9317
  .pf-v6-c-masthead.pf-m-display-stack-on-2xl {
9318
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
9230
9319
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
9231
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
9232
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
9233
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
9234
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
9320
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
9321
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
9322
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
9323
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
9324
+ --pf-v6-c-masthead__main--GridColumn: unset;
9235
9325
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
9236
9326
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
9327
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9328
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9329
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9237
9330
  }
9238
9331
  .pf-v6-c-masthead.pf-m-display-inline-on-2xl {
9332
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
9239
9333
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
9334
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
9335
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
9336
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
9337
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
9240
9338
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9241
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
9242
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
9243
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
9244
9339
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9245
9340
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9341
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9342
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9343
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9246
9344
  }
9247
9345
  }
9248
9346
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -10672,8 +10770,8 @@ ul.pf-v6-c-list {
10672
10770
  --pf-v6-c-nav__list--ColumnGap: var(--pf-t--global--spacer--xs);
10673
10771
  --pf-v6-c-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
10674
10772
  --pf-v6-c-nav--PaddingBlockEnd: var(--pf-t--global--spacer--md);
10675
- --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
10676
- --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10773
+ --pf-v6-c-nav--PaddingInlineStart: 0;
10774
+ --pf-v6-c-nav--PaddingInlineEnd: 0;
10677
10775
  --pf-v6-c-nav--RowGap: var(--pf-t--global--spacer--lg);
10678
10776
  --pf-v6-c-nav--ColumnGap: 0;
10679
10777
  --pf-v6-c-nav--AlignItems: baseline;
@@ -10763,8 +10861,9 @@ ul.pf-v6-c-list {
10763
10861
  .pf-v6-c-nav.pf-m-overflow-hidden {
10764
10862
  overflow: hidden;
10765
10863
  }
10766
- .pf-v6-c-nav.pf-m-full-width {
10767
- width: 100%;
10864
+ .pf-v6-c-nav.pf-m-inset {
10865
+ --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
10866
+ --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10768
10867
  }
10769
10868
  .pf-v6-c-nav.pf-m-fill {
10770
10869
  flex-grow: 1;
@@ -11359,8 +11458,7 @@ ul.pf-v6-c-list {
11359
11458
 
11360
11459
  :where(:root, .pf-v6-c-page) {
11361
11460
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11362
- --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
11363
- --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
11461
+ --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
11364
11462
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
11365
11463
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
11366
11464
  --pf-v6-c-page__sidebar--Width: 18.125rem;
@@ -11374,6 +11472,7 @@ ul.pf-v6-c-list {
11374
11472
  --pf-v6-c-page__sidebar--MarginInlineEnd: 0;
11375
11473
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
11376
11474
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
11475
+ --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
11377
11476
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
11378
11477
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
11379
11478
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -11383,17 +11482,19 @@ ul.pf-v6-c-list {
11383
11482
  --pf-v6-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
11384
11483
  --pf-v6-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
11385
11484
  --pf-v6-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
11386
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0;
11387
- --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0;
11485
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
11486
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
11388
11487
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd: var(--pf-v6-c-page--inset);
11389
11488
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
11390
11489
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11391
11490
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
11392
11491
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
11492
+ --pf-v6-c-page__main-container--GridArea: main;
11493
+ --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
11393
11494
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
11394
11495
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11395
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
11396
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
11496
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
11497
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
11397
11498
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
11398
11499
  --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
11399
11500
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -11434,11 +11535,6 @@ ul.pf-v6-c-list {
11434
11535
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
11435
11536
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
11436
11537
  }
11437
- @media (min-width: 75rem) {
11438
- :where(:root, .pf-v6-c-page) {
11439
- --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
11440
- }
11441
- }
11442
11538
  @media screen and (min-width: 75rem) {
11443
11539
  :where(:root, .pf-v6-c-page) {
11444
11540
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
@@ -11458,7 +11554,7 @@ ul.pf-v6-c-list {
11458
11554
  @media (min-width: 75rem) {
11459
11555
  .pf-v6-c-page {
11460
11556
  grid-template-areas: "header header" "sidebar main";
11461
- grid-template-columns: max-content 1fr;
11557
+ grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
11462
11558
  }
11463
11559
  }
11464
11560
 
@@ -11466,6 +11562,11 @@ ul.pf-v6-c-list {
11466
11562
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
11467
11563
  grid-area: header;
11468
11564
  }
11565
+ @media (min-width: 75rem) {
11566
+ .pf-v6-c-page > .pf-v6-c-masthead {
11567
+ --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
11568
+ }
11569
+ }
11469
11570
 
11470
11571
  .pf-v6-c-page__sidebar {
11471
11572
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
@@ -11478,6 +11579,7 @@ ul.pf-v6-c-list {
11478
11579
  padding-block-start: 0;
11479
11580
  padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
11480
11581
  padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
11582
+ padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
11481
11583
  margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd);
11482
11584
  overflow-x: hidden;
11483
11585
  overflow-y: auto;
@@ -11749,26 +11851,37 @@ ul.pf-v6-c-list {
11749
11851
  flex-direction: column;
11750
11852
  align-self: start;
11751
11853
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
11752
- margin-block-start: 0;
11753
11854
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
11754
11855
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
11755
- overflow: auto;
11756
11856
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
11757
11857
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
11758
11858
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
11759
11859
  }
11760
- .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
11761
- align-self: stretch;
11762
- }
11763
11860
 
11764
11861
  .pf-v6-c-page__main-container,
11765
11862
  .pf-v6-c-page__drawer {
11766
11863
  z-index: var(--pf-v6-c-page__main-container--ZIndex);
11767
- grid-area: main;
11864
+ grid-area: var(--pf-v6-c-page__main-container--GridArea);
11768
11865
  overflow-x: hidden;
11769
11866
  overflow-y: auto;
11770
11867
  -webkit-overflow-scrolling: touch;
11771
11868
  }
11869
+ @media screen and (min-width: 75rem) {
11870
+ .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
11871
+ .pf-v6-c-masthead + .pf-v6-c-page__drawer,
11872
+ .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
11873
+ --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
11874
+ }
11875
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
11876
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
11877
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
11878
+ }
11879
+ }
11880
+ .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
11881
+ .pf-v6-c-page__drawer.pf-m-fill,
11882
+ .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
11883
+ align-self: stretch;
11884
+ }
11772
11885
  .pf-v6-c-page__main-container:focus,
11773
11886
  .pf-v6-c-page__drawer:focus {
11774
11887
  outline: 0;
package/css/components/_index.d.ts CHANGED
@@ -657,6 +657,7 @@ declare const _default: {
657
657
  "alignTop": "pf-m-align-top",
658
658
  "help": "pf-m-help",
659
659
  "overflowHidden": "pf-m-overflow-hidden",
660
+ "inset": "pf-m-inset",
660
661
  "subnav": "pf-m-subnav",
661
662
  "hoverable": "pf-m-hoverable",
662
663
  "buttonGroup": "pf-m-button-group",
package/css/components/_index.js CHANGED
@@ -659,6 +659,7 @@ exports.default = {
659
659
  "alignTop": "pf-m-align-top",
660
660
  "help": "pf-m-help",
661
661
  "overflowHidden": "pf-m-overflow-hidden",
662
+ "inset": "pf-m-inset",
662
663
  "subnav": "pf-m-subnav",
663
664
  "hoverable": "pf-m-hoverable",
664
665
  "buttonGroup": "pf-m-button-group",