@patternfly/patternfly 5.0.0-alpha.23 → 5.0.0-alpha.25

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 (121) hide show
  1. package/base/_base.scss +0 -18
  2. package/base/_fonts.scss +22 -22
  3. package/base/_globals.scss +1 -1
  4. package/base/_icons.scss +1 -28
  5. package/base/_svg-icons.scss +6 -0
  6. package/base/_variables.scss +1 -1
  7. package/base/patternfly-fonts.css +17 -17
  8. package/base/patternfly-icons.css +1 -19
  9. package/base/themes/dark/_globals.scss +1 -1
  10. package/base/themes/dark/_variables.scss +1 -1
  11. package/components/AboutModalBox/about-modal-box.css +7 -7
  12. package/components/AboutModalBox/about-modal-box.scss +7 -7
  13. package/components/Alert/alert.css +3 -3
  14. package/components/Alert/alert.scss +3 -3
  15. package/components/Avatar/avatar.scss +2 -2
  16. package/components/Banner/banner.css +1 -1
  17. package/components/Banner/banner.scss +1 -1
  18. package/components/CalendarMonth/calendar-month.css +1 -1
  19. package/components/CalendarMonth/calendar-month.scss +2 -2
  20. package/components/Card/card.css +12 -10
  21. package/components/Card/card.scss +12 -10
  22. package/components/Chip/chip.css +1 -1
  23. package/components/Chip/chip.scss +1 -1
  24. package/components/ChipGroup/chip-group.css +4 -4
  25. package/components/ChipGroup/chip-group.scss +4 -4
  26. package/components/Content/content.css +5 -5
  27. package/components/Content/content.scss +9 -9
  28. package/components/DataList/data-list-grid.css +7 -7
  29. package/components/DataList/data-list-grid.scss +1 -1
  30. package/components/DataList/data-list.css +10 -10
  31. package/components/DataList/data-list.scss +3 -3
  32. package/components/DescriptionList/description-list.css +7 -7
  33. package/components/DescriptionList/description-list.scss +7 -7
  34. package/components/Divider/divider.css +2 -2
  35. package/components/Divider/divider.scss +3 -3
  36. package/components/Drawer/drawer.css +2 -2
  37. package/components/Drawer/drawer.scss +2 -2
  38. package/components/DualListSelector/dual-list-selector.css +1 -1
  39. package/components/DualListSelector/dual-list-selector.scss +1 -1
  40. package/components/EmptyState/empty-state.css +2 -2
  41. package/components/EmptyState/empty-state.scss +2 -2
  42. package/components/Form/form.css +12 -12
  43. package/components/Form/form.scss +7 -7
  44. package/components/Hint/hint.css +2 -2
  45. package/components/Hint/hint.scss +2 -2
  46. package/components/Label/label.css +6 -6
  47. package/components/Label/label.scss +7 -7
  48. package/components/LabelGroup/label-group.css +2 -2
  49. package/components/LabelGroup/label-group.scss +2 -2
  50. package/components/Login/login.css +10 -10
  51. package/components/Login/login.scss +10 -10
  52. package/components/Masthead/masthead.css +4 -4
  53. package/components/Masthead/masthead.scss +4 -4
  54. package/components/Menu/menu.css +6 -6
  55. package/components/Menu/menu.scss +31 -31
  56. package/components/MenuToggle/menu-toggle.css +1 -1
  57. package/components/MenuToggle/menu-toggle.scss +1 -1
  58. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  59. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  60. package/components/Nav/nav.css +1 -1
  61. package/components/Nav/nav.scss +2 -2
  62. package/components/NotificationDrawer/notification-drawer.css +3 -3
  63. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  64. package/components/Page/page.css +11 -11
  65. package/components/Page/page.scss +12 -12
  66. package/components/Progress/progress.css +10 -10
  67. package/components/Progress/progress.scss +10 -10
  68. package/components/ProgressStepper/progress-stepper.css +5 -5
  69. package/components/ProgressStepper/progress-stepper.scss +5 -5
  70. package/components/SearchInput/search-input.css +2 -2
  71. package/components/SearchInput/search-input.scss +2 -2
  72. package/components/Select/select.css +1 -1
  73. package/components/Select/select.scss +1 -1
  74. package/components/Sidebar/sidebar.css +1 -1
  75. package/components/Sidebar/sidebar.scss +1 -1
  76. package/components/SimpleList/simple-list.css +1 -1
  77. package/components/SimpleList/simple-list.scss +2 -2
  78. package/components/Spinner/spinner.css +4 -4
  79. package/components/Spinner/spinner.scss +4 -4
  80. package/components/Table/table.css +1 -1
  81. package/components/Table/table.scss +1 -1
  82. package/components/TextInputGroup/text-input-group.css +2 -2
  83. package/components/TextInputGroup/text-input-group.scss +2 -2
  84. package/components/Tile/tile.css +1 -1
  85. package/components/Tile/tile.scss +1 -1
  86. package/components/Timestamp/timestamp.css +3 -3
  87. package/components/Timestamp/timestamp.scss +3 -3
  88. package/components/Toolbar/toolbar.css +2 -2
  89. package/components/Toolbar/toolbar.scss +2 -2
  90. package/components/Wizard/wizard.css +14 -1
  91. package/components/Wizard/wizard.scss +18 -2
  92. package/docs/components/Card/examples/Card.md +90 -32
  93. package/docs/components/Popover/examples/Popover.md +1 -2
  94. package/docs/components/Wizard/examples/Wizard.md +58 -59
  95. package/docs/demos/Card/examples/Card.md +50 -30
  96. package/docs/demos/CardView/examples/CardView.md +41 -15
  97. package/docs/demos/Dashboard/examples/Dashboard.md +18 -12
  98. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -20
  99. package/docs/demos/Tabs/examples/Tabs.md +24 -12
  100. package/docs/demos/Wizard/examples/Wizard.md +60 -45
  101. package/layouts/Gallery/gallery.css +1 -1
  102. package/layouts/Gallery/gallery.scss +1 -1
  103. package/layouts/Grid/grid.css +2 -2
  104. package/layouts/Grid/grid.scss +2 -2
  105. package/package.json +7 -8
  106. package/patternfly-base-no-reset.css +18 -36
  107. package/patternfly-base.css +18 -36
  108. package/patternfly-no-reset.css +190 -193
  109. package/patternfly.css +190 -193
  110. package/patternfly.min.css +1 -1
  111. package/patternfly.min.css.map +1 -1
  112. package/sass-utilities/functions.scss +8 -24
  113. package/sass-utilities/mixins.scss +15 -39
  114. package/sass-utilities/scss-variables.scss +1 -0
  115. package/utilities/Spacing/spacing.scss +2 -2
  116. package/base/_shield-inheritable.scss +0 -69
  117. package/base/_shield-noninheritable.scss +0 -13
  118. package/base/patternfly-shield-inheritable.css +0 -66
  119. package/base/patternfly-shield-inheritable.scss +0 -4
  120. package/base/patternfly-shield-noninheritable.css +0 -9
  121. package/base/patternfly-shield-noninheritable.scss +0 -4
package/patternfly.css CHANGED
@@ -470,121 +470,121 @@
470
470
 
471
471
  @font-face {
472
472
  font-family: "RedHatDisplay";
473
- src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
474
473
  font-style: normal;
475
474
  font-weight: 300;
475
+ src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
476
476
  text-rendering: optimizelegibility;
477
477
  }
478
478
  @font-face {
479
479
  font-family: "RedHatDisplay";
480
- src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
481
480
  font-style: normal;
482
481
  font-weight: 400;
482
+ src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
483
483
  text-rendering: optimizelegibility;
484
484
  }
485
485
  @font-face {
486
486
  font-family: "RedHatDisplay";
487
- src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
488
487
  font-style: normal;
489
488
  font-weight: 700;
489
+ src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
490
490
  text-rendering: optimizelegibility;
491
491
  }
492
492
  @font-face {
493
493
  font-family: "RedHatText";
494
- src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Regular.woff") format("woff");
495
494
  font-style: normal;
496
495
  font-weight: 400;
496
+ src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Regular.woff") format("woff");
497
497
  text-rendering: optimizelegibility;
498
498
  }
499
499
  @font-face {
500
500
  font-family: "RedHatText";
501
- src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Medium.woff") format("woff");
502
501
  font-style: normal;
503
502
  font-weight: 700;
503
+ src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Medium.woff") format("woff");
504
504
  text-rendering: optimizelegibility;
505
505
  }
506
506
  @font-face {
507
507
  font-family: "RedHatDisplayUpdated";
508
- src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
509
508
  font-style: normal;
510
509
  font-weight: 300;
510
+ src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
511
511
  text-rendering: optimizelegibility;
512
512
  }
513
513
  @font-face {
514
514
  font-family: "RedHatDisplayUpdated";
515
- src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
516
515
  font-style: normal;
517
516
  font-weight: 400;
517
+ src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
518
518
  text-rendering: optimizelegibility;
519
519
  }
520
520
  @font-face {
521
521
  font-family: "RedHatDisplayUpdated";
522
- src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
523
522
  font-style: normal;
524
523
  font-weight: 700;
524
+ src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
525
525
  text-rendering: optimizelegibility;
526
526
  }
527
527
  @font-face {
528
528
  font-family: "RedHatTextUpdated";
529
- src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
530
529
  font-style: normal;
531
530
  font-weight: 400;
531
+ src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
532
532
  text-rendering: optimizelegibility;
533
533
  }
534
534
  @font-face {
535
535
  font-family: "RedHatTextUpdated";
536
- src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
537
536
  font-style: normal;
538
537
  font-weight: 700;
538
+ src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
539
539
  text-rendering: optimizelegibility;
540
540
  }
541
541
  @font-face {
542
542
  font-family: "RedHatMono";
543
- src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
544
543
  font-style: normal;
545
544
  font-weight: 400;
545
+ src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
546
546
  font-display: fallback;
547
547
  }
548
548
  @font-face {
549
549
  font-family: "RedHatDisplayVF";
550
- src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
551
550
  font-style: normal;
552
551
  font-weight: 300 900;
552
+ src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
553
553
  font-display: fallback;
554
554
  }
555
555
  @font-face {
556
556
  font-family: "RedHatDisplayVF";
557
- src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
558
557
  font-style: italic;
559
558
  font-weight: 300 900;
559
+ src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
560
560
  font-display: fallback;
561
561
  }
562
562
  @font-face {
563
563
  font-family: "RedHatTextVF";
564
- src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
565
564
  font-style: normal;
566
565
  font-weight: 400 500;
566
+ src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
567
567
  font-display: fallback;
568
568
  }
569
569
  @font-face {
570
570
  font-family: "RedHatTextVF";
571
- src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
572
571
  font-style: italic;
573
572
  font-weight: 400 500;
573
+ src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
574
574
  font-display: fallback;
575
575
  }
576
576
  @font-face {
577
577
  font-family: "RedHatMonoVF";
578
- src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
579
578
  font-style: normal;
580
579
  font-weight: 300 700;
580
+ src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
581
581
  font-display: fallback;
582
582
  }
583
583
  @font-face {
584
584
  font-family: "RedHatMonoVF";
585
- src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
586
585
  font-style: italic;
587
586
  font-weight: 300 700;
587
+ src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
588
588
  font-display: fallback;
589
589
  }
590
590
  .pf-screen-reader {
@@ -5479,30 +5479,12 @@ a {
5479
5479
  content: "\e911";
5480
5480
  }
5481
5481
 
5482
- .pf-svg-size-sm {
5482
+ .pf-svg {
5483
5483
  width: 1em;
5484
5484
  height: 1em;
5485
5485
  vertical-align: -0.125em;
5486
5486
  }
5487
5487
 
5488
- .pf-svg-size-md {
5489
- width: 1.5em;
5490
- height: 1.5em;
5491
- vertical-align: -0.1875em;
5492
- }
5493
-
5494
- .pf-svg-size-lg {
5495
- width: 2em;
5496
- height: 2em;
5497
- vertical-align: -0.25em;
5498
- }
5499
-
5500
- .pf-svg-size-xl {
5501
- width: 3em;
5502
- height: 3em;
5503
- vertical-align: -0.375em;
5504
- }
5505
-
5506
5488
  .pf-c-about-modal-box {
5507
5489
  --pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000);
5508
5490
  --pf-c-about-modal-box--Height: 100%;
@@ -5554,8 +5536,8 @@ a {
5554
5536
  color: var(--pf-global--Color--100);
5555
5537
  position: relative;
5556
5538
  display: grid;
5557
- grid-template-rows: max-content max-content auto;
5558
5539
  grid-template-areas: "brand close" "header header" "content content";
5540
+ grid-template-rows: max-content max-content auto;
5559
5541
  width: var(--pf-c-about-modal-box--Width);
5560
5542
  height: var(--pf-c-about-modal-box--Height);
5561
5543
  overflow-x: hidden;
@@ -5601,22 +5583,22 @@ a {
5601
5583
  }
5602
5584
  @media only screen and (min-width: 576px) {
5603
5585
  .pf-c-about-modal-box {
5604
- grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
5605
5586
  grid-template-areas: "brand hero" "header hero" "content hero";
5587
+ grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
5606
5588
  }
5607
5589
  }
5608
5590
  @media only screen and (min-width: 992px) {
5609
5591
  .pf-c-about-modal-box {
5610
5592
  --pf-c-about-modal-box--Height: var(--pf-c-about-modal-box--lg--Height);
5611
5593
  --pf-c-about-modal-box--Width: var(--pf-c-about-modal-box--lg--Width);
5612
- grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
5613
5594
  grid-template-rows: max-content max-content auto;
5595
+ grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
5614
5596
  }
5615
5597
  }
5616
5598
 
5617
5599
  .pf-c-about-modal-box__brand {
5618
- grid-area: brand;
5619
5600
  display: flex;
5601
+ grid-area: brand;
5620
5602
  padding: var(--pf-c-about-modal-box__brand--PaddingTop) var(--pf-c-about-modal-box__brand--PaddingRight) var(--pf-c-about-modal-box__brand--PaddingBottom) var(--pf-c-about-modal-box__brand--PaddingLeft);
5621
5603
  }
5622
5604
 
@@ -5625,9 +5607,9 @@ a {
5625
5607
  }
5626
5608
 
5627
5609
  .pf-c-about-modal-box__header {
5628
- grid-area: header;
5629
5610
  display: flex;
5630
5611
  flex-direction: column;
5612
+ grid-area: header;
5631
5613
  padding-right: var(--pf-c-about-modal-box__header--PaddingRight);
5632
5614
  padding-bottom: var(--pf-c-about-modal-box__header--PaddingBottom);
5633
5615
  padding-left: var(--pf-c-about-modal-box__header--PaddingLeft);
@@ -5658,10 +5640,10 @@ a {
5658
5640
  }
5659
5641
 
5660
5642
  .pf-c-about-modal-box__close {
5661
- grid-area: close;
5662
5643
  position: sticky;
5663
5644
  top: 0;
5664
5645
  display: flex;
5646
+ grid-area: close;
5665
5647
  align-items: flex-start;
5666
5648
  justify-content: flex-end;
5667
5649
  padding-top: var(--pf-c-about-modal-box__close--PaddingTop);
@@ -5700,12 +5682,12 @@ a {
5700
5682
  @media only screen and (min-width: 576px) {
5701
5683
  .pf-c-about-modal-box__hero {
5702
5684
  display: block;
5685
+ grid-area: hero;
5703
5686
  background-image: var(--pf-c-about-modal-box__hero--sm--BackgroundImage);
5704
5687
  background-repeat: no-repeat;
5705
5688
  background-attachment: fixed;
5706
5689
  background-position: var(--pf-c-about-modal-box__hero--sm--BackgroundPosition);
5707
5690
  background-size: var(--pf-c-about-modal-box__hero--sm--BackgroundSize);
5708
- grid-area: hero;
5709
5691
  }
5710
5692
  }
5711
5693
 
@@ -6104,13 +6086,13 @@ a {
6104
6086
  color: var(--pf-global--Color--100);
6105
6087
  position: relative;
6106
6088
  display: grid;
6089
+ grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
6090
+ grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
6107
6091
  padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
6108
6092
  font-size: var(--pf-c-alert__FontSize);
6109
6093
  background-color: var(--pf-c-alert--BackgroundColor);
6110
6094
  border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
6111
6095
  box-shadow: var(--pf-c-alert--BoxShadow);
6112
- grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
6113
- grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
6114
6096
  }
6115
6097
  .pf-c-alert.pf-m-success {
6116
6098
  --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
@@ -6171,8 +6153,8 @@ a {
6171
6153
  }
6172
6154
 
6173
6155
  .pf-c-alert__icon {
6174
- grid-area: icon;
6175
6156
  display: flex;
6157
+ grid-area: icon;
6176
6158
  margin-top: var(--pf-c-alert__icon--MarginTop);
6177
6159
  margin-right: var(--pf-c-alert__icon--MarginRight);
6178
6160
  font-size: var(--pf-c-alert__icon--FontSize);
@@ -7044,8 +7026,8 @@ a {
7044
7026
  overflow: hidden;
7045
7027
  text-overflow: ellipsis;
7046
7028
  white-space: nowrap;
7047
- padding: var(--pf-c-banner--PaddingTop) var(--pf-c-banner--PaddingRight) var(--pf-c-banner--PaddingBottom) var(--pf-c-banner--PaddingLeft);
7048
7029
  flex-shrink: 0;
7030
+ padding: var(--pf-c-banner--PaddingTop) var(--pf-c-banner--PaddingRight) var(--pf-c-banner--PaddingBottom) var(--pf-c-banner--PaddingLeft);
7049
7031
  font-size: var(--pf-c-banner--FontSize);
7050
7032
  color: var(--pf-c-banner--Color);
7051
7033
  white-space: nowrap;
@@ -8111,9 +8093,9 @@ button.pf-c-breadcrumb__link {
8111
8093
  box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
8112
8094
  }
8113
8095
  .pf-c-calendar-month__date:disabled {
8114
- pointer-events: none;
8115
8096
  --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
8116
8097
  --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
8098
+ pointer-events: none;
8117
8099
  }
8118
8100
 
8119
8101
  :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
@@ -8182,10 +8164,11 @@ button.pf-c-breadcrumb__link {
8182
8164
  --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
8183
8165
  --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8184
8166
  --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
8185
- --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
8186
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
8187
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
8188
8167
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
8168
+ --pf-c-card__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
8169
+ --pf-c-card__title-text--FontSize: var(--pf-global--FontSize--md);
8170
+ --pf-c-card__title-text--FontWeight: var(--pf-global--FontWeight--normal);
8171
+ --pf-c-card__title-text--LineHeight: var(--pf-global--LineHeight--md);
8189
8172
  --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
8190
8173
  --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
8191
8174
  --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
@@ -8247,7 +8230,7 @@ button.pf-c-breadcrumb__link {
8247
8230
  --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
8248
8231
  --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
8249
8232
  --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
8250
- --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
8233
+ --pf-c-card--m-display-lg__title-text--FontSize: var(--pf-global--FontSize--xl);
8251
8234
  --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
8252
8235
  --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
8253
8236
  --pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl);
@@ -8359,7 +8342,7 @@ button.pf-c-breadcrumb__link {
8359
8342
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
8360
8343
  }
8361
8344
  .pf-c-card.pf-m-display-lg {
8362
- --pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
8345
+ --pf-c-card__title-text--FontSize: var(--pf-c-card--m-display-lg__title-text--FontSize);
8363
8346
  --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
8364
8347
  --pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
8365
8348
  --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
@@ -8425,20 +8408,21 @@ button.pf-c-breadcrumb__link {
8425
8408
  transition: var(--pf-c-card__header-toggle-icon--Transition);
8426
8409
  }
8427
8410
 
8428
- .pf-c-card__title {
8429
- font-family: var(--pf-c-card__title--FontFamily);
8430
- font-size: var(--pf-c-card__title--FontSize);
8431
- font-weight: var(--pf-c-card__title--FontWeight);
8411
+ .pf-c-card__title-text {
8412
+ font-family: var(--pf-c-card__title-text--FontFamily);
8413
+ font-size: var(--pf-c-card__title-text--FontSize);
8414
+ font-weight: var(--pf-c-card__title-text--FontWeight);
8415
+ line-height: var(--pf-c-card__title-text--LineHeight);
8432
8416
  }
8433
8417
 
8434
8418
  .pf-c-card__actions {
8435
8419
  display: flex;
8420
+ gap: var(--pf-c-card__actions--Gap);
8436
8421
  align-items: center;
8437
8422
  align-self: flex-start;
8438
8423
  order: 1;
8439
8424
  padding-left: var(--pf-c-card__actions--PaddingLeft);
8440
8425
  margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
8441
- gap: var(--pf-c-card__actions--Gap);
8442
8426
  }
8443
8427
  .pf-c-card__actions + .pf-c-card__title,
8444
8428
  .pf-c-card__actions + .pf-c-card__body,
@@ -8691,8 +8675,8 @@ label.pf-c-check, .pf-c-check__label,
8691
8675
 
8692
8676
  .pf-c-chip__content {
8693
8677
  display: flex;
8694
- align-items: center;
8695
8678
  column-gap: var(--pf-c-chip__content--ColumnGap);
8679
+ align-items: center;
8696
8680
  font-size: var(--pf-c-chip__content--FontSize);
8697
8681
  }
8698
8682
 
@@ -8775,13 +8759,13 @@ label.pf-c-check, .pf-c-check__label,
8775
8759
  --pf-c-chip-group__label--MaxWidth: 18ch;
8776
8760
  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
8777
8761
  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
8762
+ row-gap: var(--pf-c-chip-group--RowGap);
8763
+ column-gap: var(--pf-c-chip-group--ColumnGap);
8778
8764
  max-width: 100%;
8779
8765
  padding-top: var(--pf-c-chip-group--PaddingTop);
8780
8766
  padding-right: var(--pf-c-chip-group--PaddingRight);
8781
8767
  padding-bottom: var(--pf-c-chip-group--PaddingBottom);
8782
8768
  padding-left: var(--pf-c-chip-group--PaddingLeft);
8783
- row-gap: var(--pf-c-chip-group--RowGap);
8784
- column-gap: var(--pf-c-chip-group--ColumnGap);
8785
8769
  }
8786
8770
  .pf-c-chip-group.pf-m-category {
8787
8771
  --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
@@ -8796,10 +8780,10 @@ label.pf-c-check, .pf-c-check__label,
8796
8780
  display: flex;
8797
8781
  flex: 1;
8798
8782
  flex-wrap: wrap;
8799
- align-items: baseline;
8800
- min-width: 0;
8801
8783
  row-gap: var(--pf-c-chip-group__main--RowGap);
8802
8784
  column-gap: var(--pf-c-chip-group__main--ColumnGap);
8785
+ align-items: baseline;
8786
+ min-width: 0;
8803
8787
  }
8804
8788
 
8805
8789
  .pf-c-chip-group,
@@ -9388,12 +9372,12 @@ label.pf-c-check, .pf-c-check__label,
9388
9372
  margin-left: var(--pf-c-content--ol--MarginLeft);
9389
9373
  }
9390
9374
  .pf-c-content ol ul {
9391
- margin-top: var(--pf-c-content--ul--nested--MarginTop);
9392
9375
  --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
9376
+ margin-top: var(--pf-c-content--ul--nested--MarginTop);
9393
9377
  }
9394
9378
  .pf-c-content ol ol {
9395
- margin-top: var(--pf-c-content--ol--nested--MarginTop);
9396
9379
  --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
9380
+ margin-top: var(--pf-c-content--ol--nested--MarginTop);
9397
9381
  }
9398
9382
  .pf-c-content ul {
9399
9383
  padding-left: var(--pf-c-content--ul--PaddingLeft);
@@ -9401,12 +9385,12 @@ label.pf-c-check, .pf-c-check__label,
9401
9385
  list-style: var(--pf-c-content--ul--ListStyle);
9402
9386
  }
9403
9387
  .pf-c-content ul ul {
9404
- margin-top: var(--pf-c-content--ul--nested--MarginTop);
9405
9388
  --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
9389
+ margin-top: var(--pf-c-content--ul--nested--MarginTop);
9406
9390
  }
9407
9391
  .pf-c-content ul ol {
9408
- margin-top: var(--pf-c-content--ol--nested--MarginTop);
9409
9392
  --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
9393
+ margin-top: var(--pf-c-content--ol--nested--MarginTop);
9410
9394
  }
9411
9395
  .pf-c-content dl {
9412
9396
  display: grid;
@@ -9415,8 +9399,8 @@ label.pf-c-check, .pf-c-check__label,
9415
9399
  @media screen and (min-width: 576px) {
9416
9400
  .pf-c-content dl {
9417
9401
  grid-template: auto/auto 1fr;
9418
- grid-column-gap: var(--pf-c-content--dl--ColumnGap);
9419
9402
  grid-row-gap: var(--pf-c-content--dl--RowGap);
9403
+ grid-column-gap: var(--pf-c-content--dl--ColumnGap);
9420
9404
  }
9421
9405
  }
9422
9406
  .pf-c-content dt {
@@ -9807,8 +9791,8 @@ label.pf-c-check, .pf-c-check__label,
9807
9791
  @media screen and (min-width: 768px) {
9808
9792
  .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
9809
9793
  display: flex;
9810
- flex-wrap: wrap;
9811
9794
  flex-grow: 1;
9795
+ flex-wrap: wrap;
9812
9796
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9813
9797
  }
9814
9798
  }
@@ -9869,8 +9853,8 @@ label.pf-c-check, .pf-c-check__label,
9869
9853
  @media screen and (min-width: 0) {
9870
9854
  .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
9871
9855
  display: flex;
9872
- flex-wrap: wrap;
9873
9856
  flex-grow: 1;
9857
+ flex-wrap: wrap;
9874
9858
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9875
9859
  }
9876
9860
  }
@@ -9931,8 +9915,8 @@ label.pf-c-check, .pf-c-check__label,
9931
9915
  @media screen and (min-width: 576px) {
9932
9916
  .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
9933
9917
  display: flex;
9934
- flex-wrap: wrap;
9935
9918
  flex-grow: 1;
9919
+ flex-wrap: wrap;
9936
9920
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9937
9921
  }
9938
9922
  }
@@ -9993,8 +9977,8 @@ label.pf-c-check, .pf-c-check__label,
9993
9977
  @media screen and (min-width: 768px) {
9994
9978
  .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
9995
9979
  display: flex;
9996
- flex-wrap: wrap;
9997
9980
  flex-grow: 1;
9981
+ flex-wrap: wrap;
9998
9982
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9999
9983
  }
10000
9984
  }
@@ -10055,8 +10039,8 @@ label.pf-c-check, .pf-c-check__label,
10055
10039
  @media screen and (min-width: 992px) {
10056
10040
  .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10057
10041
  display: flex;
10058
- flex-wrap: wrap;
10059
10042
  flex-grow: 1;
10043
+ flex-wrap: wrap;
10060
10044
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10061
10045
  }
10062
10046
  }
@@ -10117,8 +10101,8 @@ label.pf-c-check, .pf-c-check__label,
10117
10101
  @media screen and (min-width: 1200px) {
10118
10102
  .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10119
10103
  display: flex;
10120
- flex-wrap: wrap;
10121
10104
  flex-grow: 1;
10105
+ flex-wrap: wrap;
10122
10106
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10123
10107
  }
10124
10108
  }
@@ -10179,8 +10163,8 @@ label.pf-c-check, .pf-c-check__label,
10179
10163
  @media screen and (min-width: 1450px) {
10180
10164
  .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
10181
10165
  display: flex;
10182
- flex-wrap: wrap;
10183
10166
  flex-grow: 1;
10167
+ flex-wrap: wrap;
10184
10168
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10185
10169
  }
10186
10170
  }
@@ -10540,8 +10524,8 @@ label.pf-c-check, .pf-c-check__label,
10540
10524
 
10541
10525
  .pf-c-data-list__item-action {
10542
10526
  --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
10543
- align-items: flex-start;
10544
10527
  align-content: flex-start;
10528
+ align-items: flex-start;
10545
10529
  padding-top: var(--pf-c-data-list__item-action--PaddingTop);
10546
10530
  padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
10547
10531
  margin-left: var(--pf-c-data-list__item-action--MarginLeft);
@@ -10567,8 +10551,8 @@ label.pf-c-check, .pf-c-check__label,
10567
10551
 
10568
10552
  .pf-c-data-list__item-content {
10569
10553
  display: grid;
10570
- width: 100%;
10571
10554
  grid-template-columns: auto 1fr;
10555
+ width: 100%;
10572
10556
  }
10573
10557
 
10574
10558
  .pf-c-data-list__cell {
@@ -10584,8 +10568,8 @@ label.pf-c-check, .pf-c-check__label,
10584
10568
  }
10585
10569
  .pf-c-data-list__cell.pf-m-icon {
10586
10570
  flex-grow: 0;
10587
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10588
10571
  grid-column: 1/2;
10572
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10589
10573
  }
10590
10574
  .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
10591
10575
  grid-column: 2/3;
@@ -10705,10 +10689,10 @@ label.pf-c-check, .pf-c-check__label,
10705
10689
  --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
10706
10690
  --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
10707
10691
  display: grid;
10708
- align-items: baseline;
10692
+ grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
10709
10693
  row-gap: var(--pf-c-description-list--RowGap);
10710
10694
  column-gap: var(--pf-c-description-list--ColumnGap);
10711
- grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
10695
+ align-items: baseline;
10712
10696
  }
10713
10697
  @media screen and (min-width: 576px) {
10714
10698
  .pf-c-description-list {
@@ -10814,11 +10798,11 @@ label.pf-c-check, .pf-c-check__label,
10814
10798
  .pf-c-description-list__group,
10815
10799
  .pf-c-description-list > .pf-c-card {
10816
10800
  display: grid;
10801
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
10802
+ grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
10817
10803
  grid-column: var(--pf-c-description-list__group--GridColumn);
10818
10804
  row-gap: var(--pf-c-description-list__group--RowGap);
10819
10805
  column-gap: var(--pf-c-description-list__group--ColumnGap);
10820
- grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
10821
- grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
10822
10806
  align-items: baseline;
10823
10807
  }
10824
10808
 
@@ -10855,11 +10839,11 @@ label.pf-c-check, .pf-c-check__label,
10855
10839
  }
10856
10840
  .pf-c-description-list__text.pf-m-help-text {
10857
10841
  text-decoration: underline;
10858
- cursor: pointer;
10859
- text-decoration-style: dashed;
10860
10842
  text-decoration-thickness: var(--pf-c-description-list__text--m-help-text--TextDecorationThickness);
10861
- text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
10843
+ text-decoration-style: dashed;
10862
10844
  text-decoration-color: var(--pf-c-description-list__text--m-help-text--TextDecorationColor);
10845
+ text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
10846
+ cursor: pointer;
10863
10847
  }
10864
10848
  .pf-c-description-list__text.pf-m-help-text:hover {
10865
10849
  --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--hover--TextDecorationColor);
@@ -11099,8 +11083,8 @@ label.pf-c-check, .pf-c-check__label,
11099
11083
  --pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
11100
11084
  display: grid;
11101
11085
  grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
11102
- grid-template-columns: minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max)) min-content minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max));
11103
11086
  grid-template-rows: repeat(3, auto) auto;
11087
+ grid-template-columns: minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max)) min-content minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max));
11104
11088
  }
11105
11089
 
11106
11090
  .pf-c-dual-list-selector__pane {
@@ -11400,8 +11384,8 @@ label.pf-c-check, .pf-c-check__label,
11400
11384
  --pf-c-toolbar--m-full-height__item--Display: flex;
11401
11385
  --pf-c-toolbar--m-full-height__item--AlignItems: center;
11402
11386
  position: relative;
11403
- row-gap: var(--pf-c-toolbar--RowGap);
11404
11387
  display: grid;
11388
+ row-gap: var(--pf-c-toolbar--RowGap);
11405
11389
  padding-top: var(--pf-c-toolbar--PaddingTop);
11406
11390
  padding-bottom: var(--pf-c-toolbar--PaddingBottom);
11407
11391
  background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -11694,9 +11678,9 @@ label.pf-c-check, .pf-c-check__label,
11694
11678
  .pf-c-toolbar__group.pf-m-chip-container {
11695
11679
  display: flex;
11696
11680
  flex-wrap: wrap;
11681
+ grid-row-gap: 0;
11697
11682
  align-items: baseline;
11698
11683
  margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
11699
- grid-row-gap: 0;
11700
11684
  }
11701
11685
  .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item,
11702
11686
  .pf-c-toolbar__group.pf-m-chip-container .pf-c-toolbar__item {
@@ -12592,9 +12576,9 @@ label.pf-c-check, .pf-c-check__label,
12592
12576
  width: 100%;
12593
12577
  height: auto;
12594
12578
  flex-direction: var(--pf-c-divider--FlexDirection);
12579
+ flex-shrink: 0;
12595
12580
  align-items: center;
12596
12581
  align-self: stretch;
12597
- flex-shrink: 0;
12598
12582
  justify-content: center;
12599
12583
  border: 0;
12600
12584
  }
@@ -12603,11 +12587,11 @@ label.pf-c-check, .pf-c-check__label,
12603
12587
  }
12604
12588
  .pf-c-divider::after {
12605
12589
  align-self: stretch;
12590
+ justify-self: center;
12606
12591
  width: var(--pf-c-divider--after--Width);
12607
12592
  height: var(--pf-c-divider--after--Height);
12608
12593
  content: "";
12609
12594
  background-color: var(--pf-c-divider--after--BackgroundColor);
12610
- justify-self: center;
12611
12595
  }
12612
12596
  .pf-c-divider.pf-m-vertical {
12613
12597
  --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
@@ -13179,9 +13163,9 @@ label.pf-c-check, .pf-c-check__label,
13179
13163
  }
13180
13164
 
13181
13165
  .pf-c-drawer__actions {
13182
- grid-column: 2;
13183
- grid-row: 1;
13184
13166
  display: flex;
13167
+ grid-row: 1;
13168
+ grid-column: 2;
13185
13169
  align-self: baseline;
13186
13170
  margin-top: var(--pf-c-drawer__actions--MarginTop);
13187
13171
  margin-right: var(--pf-c-drawer__actions--MarginRight);
@@ -14531,16 +14515,16 @@ label.pf-c-check, .pf-c-check__label,
14531
14515
  .pf-c-empty-state__footer {
14532
14516
  display: flex;
14533
14517
  flex-direction: column;
14534
- align-items: center;
14535
14518
  row-gap: var(--pf-c-empty-state__footer--RowGap);
14519
+ align-items: center;
14536
14520
  margin-top: var(--pf-c-empty-state__footer--MarginTop);
14537
14521
  }
14538
14522
 
14539
14523
  .pf-c-empty-state__actions {
14540
14524
  display: flex;
14541
14525
  flex-wrap: wrap;
14542
- justify-content: center;
14543
14526
  gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
14527
+ justify-content: center;
14544
14528
  }
14545
14529
 
14546
14530
  .pf-c-expandable-section {
@@ -14855,8 +14839,8 @@ label.pf-c-check, .pf-c-check__label,
14855
14839
  }
14856
14840
  .pf-c-form.pf-m-horizontal .pf-c-form__group {
14857
14841
  display: grid;
14858
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14859
14842
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14843
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14860
14844
  }
14861
14845
  .pf-c-form.pf-m-horizontal .pf-c-form__group-label {
14862
14846
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14875,8 +14859,8 @@ label.pf-c-check, .pf-c-check__label,
14875
14859
  }
14876
14860
  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
14877
14861
  display: grid;
14878
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14879
14862
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14863
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14880
14864
  }
14881
14865
  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
14882
14866
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14895,8 +14879,8 @@ label.pf-c-check, .pf-c-check__label,
14895
14879
  }
14896
14880
  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
14897
14881
  display: grid;
14898
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14899
14882
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14883
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14900
14884
  }
14901
14885
  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
14902
14886
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14915,8 +14899,8 @@ label.pf-c-check, .pf-c-check__label,
14915
14899
  }
14916
14900
  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
14917
14901
  display: grid;
14918
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14919
14902
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14903
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14920
14904
  }
14921
14905
  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
14922
14906
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14935,8 +14919,8 @@ label.pf-c-check, .pf-c-check__label,
14935
14919
  }
14936
14920
  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
14937
14921
  display: grid;
14938
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14939
14922
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14923
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14940
14924
  }
14941
14925
  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
14942
14926
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14955,8 +14939,8 @@ label.pf-c-check, .pf-c-check__label,
14955
14939
  }
14956
14940
  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
14957
14941
  display: grid;
14958
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14959
14942
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14943
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14960
14944
  }
14961
14945
  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
14962
14946
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14975,8 +14959,8 @@ label.pf-c-check, .pf-c-check__label,
14975
14959
  }
14976
14960
  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
14977
14961
  display: grid;
14978
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14979
14962
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14963
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14980
14964
  }
14981
14965
  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
14982
14966
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -15091,9 +15075,9 @@ label.pf-c-check, .pf-c-check__label,
15091
15075
  --pf-c-form__group-control--m-inline--child--MarginRight: 0;
15092
15076
  }
15093
15077
  .pf-c-form__group-control.pf-m-stack {
15078
+ --pf-c-form__helper-text--MarginTop: var(--pf-c-grid__group-control--m-stack__helper-text--MarginTop);
15094
15079
  display: grid;
15095
15080
  gap: var(--pf-c-grid__group-control--m-stack--Gap);
15096
- --pf-c-form__helper-text--MarginTop: var(--pf-c-grid__group-control--m-stack__helper-text--MarginTop);
15097
15081
  }
15098
15082
  .pf-c-form__group-control .pf-c-form__helper-text:first-child {
15099
15083
  --pf-c-form__helper-text--MarginTop: 0;
@@ -15177,8 +15161,8 @@ label.pf-c-check, .pf-c-check__label,
15177
15161
  }
15178
15162
 
15179
15163
  .pf-c-form__field-group-toggle {
15180
- grid-column: 1/2;
15181
15164
  grid-row: 1/2;
15165
+ grid-column: 1/2;
15182
15166
  padding-top: var(--pf-c-form__field-group-toggle--PaddingTop);
15183
15167
  padding-right: var(--pf-c-form__field-group-toggle--PaddingRight);
15184
15168
  }
@@ -15200,9 +15184,9 @@ label.pf-c-check, .pf-c-check__label,
15200
15184
  }
15201
15185
 
15202
15186
  .pf-c-form__field-group-header {
15203
- grid-column: var(--pf-c-form__field-group-header--GridColumn);
15204
- grid-row: 1/2;
15205
15187
  display: flex;
15188
+ grid-row: 1/2;
15189
+ grid-column: var(--pf-c-form__field-group-header--GridColumn);
15206
15190
  align-items: flex-start;
15207
15191
  padding-top: var(--pf-c-form__field-group-header--PaddingTop);
15208
15192
  padding-bottom: var(--pf-c-form__field-group-header--PaddingBottom);
@@ -15235,8 +15219,8 @@ label.pf-c-check, .pf-c-check__label,
15235
15219
  }
15236
15220
 
15237
15221
  .pf-c-form__field-group-body {
15238
- grid-column: var(--pf-c-form__field-group-body--GridColumn);
15239
15222
  display: grid;
15223
+ grid-column: var(--pf-c-form__field-group-body--GridColumn);
15240
15224
  gap: var(--pf-c-form__field-group-body--Gap);
15241
15225
  padding-top: var(--pf-c-form__field-group-body--PaddingTop);
15242
15226
  padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
@@ -15696,11 +15680,11 @@ textarea.pf-c-form-control {
15696
15680
 
15697
15681
  .pf-c-hint__actions {
15698
15682
  display: inline-grid;
15683
+ grid-row: 1;
15684
+ grid-column: 2;
15699
15685
  grid-auto-flow: column;
15700
15686
  margin-left: var(--pf-c-hint__actions--MarginLeft);
15701
15687
  text-align: right;
15702
- grid-column: 2;
15703
- grid-row: 1;
15704
15688
  }
15705
15689
  .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
15706
15690
  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
@@ -16764,12 +16748,6 @@ label.pf-c-input-group__text {
16764
16748
  }
16765
16749
 
16766
16750
  .pf-c-label.pf-m-editable {
16767
- text-decoration: var(--pf-c-label--m-editable--TextDecoration);
16768
- cursor: var(--pf-c-label--m-editable--Cursor);
16769
- text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
16770
- text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
16771
- text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
16772
- text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
16773
16751
  --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
16774
16752
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
16775
16753
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
@@ -16779,6 +16757,12 @@ label.pf-c-input-group__text {
16779
16757
  --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
16780
16758
  --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
16781
16759
  --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
16760
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
16761
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
16762
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
16763
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
16764
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
16765
+ cursor: var(--pf-c-label--m-editable--Cursor);
16782
16766
  }
16783
16767
  .pf-c-label.pf-m-editable:hover {
16784
16768
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
@@ -16998,9 +16982,9 @@ button.pf-c-label__content:focus {
16998
16982
  --pf-c-label-group__textarea--PaddingBottom: 0;
16999
16983
  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
17000
16984
  display: inline-flex;
17001
- align-items: center;
17002
16985
  row-gap: var(--pf-c-label-group--RowGap);
17003
16986
  column-gap: var(--pf-c-label-group--ColumnGap);
16987
+ align-items: center;
17004
16988
  }
17005
16989
  .pf-c-label-group.pf-m-category {
17006
16990
  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
@@ -17054,9 +17038,9 @@ button.pf-c-label__content:focus {
17054
17038
  display: flex;
17055
17039
  flex: 1;
17056
17040
  flex-wrap: wrap;
17057
- align-items: baseline;
17058
17041
  row-gap: var(--pf-c-label-group__main--RowGap);
17059
17042
  column-gap: var(--pf-c-label-group__main--ColumnGap);
17043
+ align-items: baseline;
17060
17044
  }
17061
17045
 
17062
17046
  .pf-c-label-group__list {
@@ -17521,10 +17505,10 @@ ul.pf-c-list {
17521
17505
  @media (min-width: 1200px) {
17522
17506
  .pf-c-login__container {
17523
17507
  display: grid;
17524
- justify-content: center;
17525
- grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
17526
- grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
17527
17508
  grid-template-areas: "main header" "main footer" "main .";
17509
+ grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
17510
+ grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
17511
+ justify-content: center;
17528
17512
  padding-right: var(--pf-c-login__container--PaddingRight);
17529
17513
  padding-left: var(--pf-c-login__container--PaddingLeft);
17530
17514
  }
@@ -17546,10 +17530,10 @@ ul.pf-c-list {
17546
17530
  }
17547
17531
 
17548
17532
  .pf-c-login__main {
17533
+ grid-area: main;
17549
17534
  align-self: start;
17550
17535
  margin-bottom: var(--pf-c-login__main--MarginBottom);
17551
17536
  background-color: var(--pf-c-login__main--BackgroundColor);
17552
- grid-area: main;
17553
17537
  }
17554
17538
  .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
17555
17539
  padding-top: var(--pf-c-login__main-header--PaddingTop);
@@ -17561,8 +17545,8 @@ ul.pf-c-list {
17561
17545
  .pf-c-login__main-header {
17562
17546
  display: grid;
17563
17547
  grid-template-columns: 100%;
17564
- column-gap: var(--pf-c-login__main-header--ColumnGap);
17565
17548
  row-gap: var(--pf-c-login__main-header--RowGap);
17549
+ column-gap: var(--pf-c-login__main-header--ColumnGap);
17566
17550
  align-items: center;
17567
17551
  padding: var(--pf-c-login__main-header--PaddingTop) var(--pf-c-login__main-header--PaddingRight) var(--pf-c-login__main-header--PaddingBottom) var(--pf-c-login__main-header--PaddingLeft);
17568
17552
  }
@@ -17574,26 +17558,26 @@ ul.pf-c-list {
17574
17558
 
17575
17559
  .pf-c-login__main-header-utilities,
17576
17560
  .pf-c-login__main-header .pf-c-dropdown {
17577
- grid-column: auto;
17578
17561
  grid-row: auto;
17562
+ grid-column: auto;
17579
17563
  }
17580
17564
  @media (min-width: 768px) {
17581
17565
  .pf-c-login__main-header-utilities,
17582
17566
  .pf-c-login__main-header .pf-c-dropdown {
17583
- grid-column: 2/3;
17584
17567
  grid-row: 1;
17568
+ grid-column: 2/3;
17585
17569
  }
17586
17570
  }
17587
17571
 
17588
17572
  .pf-c-login__main-header-utilities .pf-c-dropdown {
17589
- grid-column: auto;
17590
17573
  grid-row: auto;
17574
+ grid-column: auto;
17591
17575
  }
17592
17576
 
17593
17577
  .pf-c-login__main-header-desc {
17578
+ grid-column: 1/-1;
17594
17579
  margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
17595
17580
  font-size: var(--pf-c-login__main-header-desc--FontSize);
17596
- grid-column: 1/-1;
17597
17581
  }
17598
17582
 
17599
17583
  .pf-c-login__main-body {
@@ -17628,11 +17612,11 @@ ul.pf-c-list {
17628
17612
  }
17629
17613
 
17630
17614
  .pf-c-login__main-footer-links-item-link svg {
17631
- fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
17632
17615
  width: 100%;
17633
17616
  max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
17634
17617
  height: 100%;
17635
17618
  max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
17619
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
17636
17620
  }
17637
17621
  .pf-c-login__main-footer-links-item-link:hover svg {
17638
17622
  fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
@@ -17897,6 +17881,7 @@ ul.pf-c-list {
17897
17881
  position: relative;
17898
17882
  display: flex;
17899
17883
  flex-basis: var(--pf-c-masthead__main--FlexBasis);
17884
+ grid-column: var(--pf-c-masthead__main--GridColumn);
17900
17885
  align-items: center;
17901
17886
  align-self: stretch;
17902
17887
  order: var(--pf-c-masthead__main--Order);
@@ -17904,7 +17889,6 @@ ul.pf-c-list {
17904
17889
  padding-top: var(--pf-c-masthead__main--PaddingTop);
17905
17890
  padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
17906
17891
  margin-right: var(--pf-c-masthead__main--MarginRight);
17907
- grid-column: var(--pf-c-masthead__main--GridColumn);
17908
17892
  }
17909
17893
  .pf-c-masthead__main::before {
17910
17894
  position: absolute;
@@ -17921,6 +17905,9 @@ ul.pf-c-list {
17921
17905
  .pf-c-masthead__content {
17922
17906
  display: flex;
17923
17907
  flex-grow: 1;
17908
+ flex-shrink: 1;
17909
+ grid-column: var(--pf-c-masthead__content--GridColumn);
17910
+ grid-column-end: -1;
17924
17911
  align-items: center;
17925
17912
  align-self: stretch;
17926
17913
  order: var(--pf-c-masthead__content--Order);
@@ -17928,9 +17915,6 @@ ul.pf-c-list {
17928
17915
  padding-top: var(--pf-c-masthead__content--PaddingTop);
17929
17916
  padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
17930
17917
  margin-left: var(--pf-c-masthead__content--MarginLeft);
17931
- grid-column: var(--pf-c-masthead__content--GridColumn);
17932
- grid-column-end: -1;
17933
- flex-shrink: 1;
17934
17918
  }
17935
17919
  .pf-c-masthead__content:only-child {
17936
17920
  --pf-c-masthead__content--MarginLeft: 0;
@@ -18490,12 +18474,6 @@ ul.pf-c-list {
18490
18474
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18491
18475
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
18492
18476
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
18493
- top: var(--pf-c-menu--Top);
18494
- z-index: var(--pf-c-menu--ZIndex);
18495
- width: var(--pf-c-menu--Width);
18496
- min-width: var(--pf-c-menu--MinWidth);
18497
- background-color: var(--pf-c-menu--BackgroundColor);
18498
- box-shadow: var(--pf-c-menu--BoxShadow);
18499
18477
  --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
18500
18478
  --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
18501
18479
  --pf-c-menu--m-nav__list--PaddingTop: 0;
@@ -18523,6 +18501,12 @@ ul.pf-c-list {
18523
18501
  --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
18524
18502
  --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
18525
18503
  --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
18504
+ top: var(--pf-c-menu--Top);
18505
+ z-index: var(--pf-c-menu--ZIndex);
18506
+ width: var(--pf-c-menu--Width);
18507
+ min-width: var(--pf-c-menu--MinWidth);
18508
+ background-color: var(--pf-c-menu--BackgroundColor);
18509
+ box-shadow: var(--pf-c-menu--BoxShadow);
18526
18510
  }
18527
18511
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
18528
18512
  overflow: visible;
@@ -19342,8 +19326,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19342
19326
 
19343
19327
  .pf-c-menu-toggle__icon {
19344
19328
  display: inline-flex;
19345
- align-self: center;
19346
19329
  flex-shrink: 0;
19330
+ align-self: center;
19347
19331
  margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
19348
19332
  line-height: 1;
19349
19333
  }
@@ -19715,8 +19699,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19715
19699
  --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
19716
19700
  --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
19717
19701
  display: grid;
19718
- gap: var(--pf-c-multiple-file-upload--Gap);
19719
19702
  grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
19703
+ gap: var(--pf-c-multiple-file-upload--Gap);
19720
19704
  }
19721
19705
  .pf-c-multiple-file-upload.pf-m-horizontal {
19722
19706
  --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
@@ -19742,21 +19726,21 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19742
19726
 
19743
19727
  .pf-c-multiple-file-upload__main {
19744
19728
  display: grid;
19729
+ grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
19730
+ grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
19731
+ grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
19732
+ gap: var(--pf-c-multiple-file-upload__main--Gap);
19745
19733
  padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
19746
19734
  text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
19747
19735
  background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
19748
19736
  border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
19749
- grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
19750
- grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
19751
- grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
19752
- gap: var(--pf-c-multiple-file-upload__main--Gap);
19753
19737
  }
19754
19738
 
19755
19739
  .pf-c-multiple-file-upload__title {
19756
19740
  display: var(--pf-c-multiple-file-upload__title--Display);
19741
+ grid-area: title;
19757
19742
  grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
19758
19743
  gap: var(--pf-c-multiple-file-upload__title--Gap);
19759
- grid-area: title;
19760
19744
  }
19761
19745
 
19762
19746
  .pf-c-multiple-file-upload__title-icon {
@@ -20696,8 +20680,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20696
20680
  --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__section__link--focus--after--BorderWidth);
20697
20681
  --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__section__link--active--after--BorderWidth);
20698
20682
  --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__section__link--m-current--after--BorderWidth);
20699
- margin-top: var(--pf-c-nav__section--MarginTop);
20700
20683
  --pf-c-nav--c-divider--MarginBottom: 0;
20684
+ margin-top: var(--pf-c-nav__section--MarginTop);
20701
20685
  }
20702
20686
  .pf-c-nav__section + .pf-c-nav__section {
20703
20687
  --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
@@ -21144,9 +21128,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21144
21128
 
21145
21129
  .pf-c-notification-drawer__list-item-header {
21146
21130
  display: flex;
21147
- align-items: baseline;
21148
- grid-column: 1/2;
21149
21131
  grid-row: 1/2;
21132
+ grid-column: 1/2;
21133
+ align-items: baseline;
21150
21134
  margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
21151
21135
  }
21152
21136
 
@@ -21167,8 +21151,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21167
21151
  }
21168
21152
 
21169
21153
  .pf-c-notification-drawer__list-item-action {
21170
- grid-column: 2/3;
21171
21154
  grid-row: 1/3;
21155
+ grid-column: 2/3;
21172
21156
  }
21173
21157
 
21174
21158
  .pf-c-notification-drawer__list-item-description {
@@ -21770,10 +21754,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21770
21754
  --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
21771
21755
  --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
21772
21756
  display: grid;
21773
- height: 100%;
21774
- grid-template-columns: 1fr;
21775
- grid-template-rows: max-content 1fr;
21776
21757
  grid-template-areas: "header" "main";
21758
+ grid-template-rows: max-content 1fr;
21759
+ grid-template-columns: 1fr;
21760
+ height: 100%;
21777
21761
  background-color: var(--pf-c-page--BackgroundColor);
21778
21762
  }
21779
21763
  @media (min-width: 1200px) {
@@ -21820,8 +21804,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21820
21804
  }
21821
21805
  @media (min-width: 1200px) {
21822
21806
  .pf-c-page {
21823
- grid-template-columns: max-content 1fr;
21824
21807
  grid-template-areas: "header header" "nav main";
21808
+ grid-template-columns: max-content 1fr;
21825
21809
  }
21826
21810
  }
21827
21811
  .pf-c-page.pf-m-full-height {
@@ -21832,14 +21816,14 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21832
21816
 
21833
21817
  .pf-c-page__header,
21834
21818
  .pf-c-page > .pf-c-masthead {
21835
- grid-area: header;
21836
21819
  z-index: var(--pf-c-page__header--ZIndex);
21820
+ grid-area: header;
21837
21821
  }
21838
21822
 
21839
21823
  .pf-c-page__header {
21840
21824
  color: var(--pf-global--Color--100);
21841
- grid-template-columns: auto auto;
21842
21825
  display: grid;
21826
+ grid-template-columns: auto auto;
21843
21827
  align-items: center;
21844
21828
  min-width: 0;
21845
21829
  min-height: var(--pf-c-page__header--MinHeight);
@@ -21887,18 +21871,18 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21887
21871
  }
21888
21872
 
21889
21873
  .pf-c-page__header-nav {
21874
+ grid-row: 2/3;
21875
+ grid-column: 1/-1;
21890
21876
  align-self: stretch;
21891
21877
  min-width: 0;
21892
21878
  padding-right: var(--pf-c-page__header-nav--PaddingRight);
21893
21879
  padding-left: var(--pf-c-page__header-nav--PaddingLeft);
21894
21880
  background-color: var(--pf-c-page__header-nav--BackgroundColor);
21895
- grid-column: 1/-1;
21896
- grid-row: 2/3;
21897
21881
  }
21898
21882
  @media screen and (min-width: 1200px) {
21899
21883
  .pf-c-page__header-nav {
21900
- grid-column: 2/3;
21901
21884
  grid-row: 1/2;
21885
+ grid-column: 2/3;
21902
21886
  }
21903
21887
  }
21904
21888
  .pf-c-page__header-nav .pf-c-nav {
@@ -21964,10 +21948,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21964
21948
  }
21965
21949
 
21966
21950
  .pf-c-page__sidebar {
21951
+ z-index: var(--pf-c-page__sidebar--ZIndex);
21967
21952
  grid-area: nav;
21968
21953
  grid-row-start: 2;
21969
21954
  grid-column-start: 1;
21970
- z-index: var(--pf-c-page__sidebar--ZIndex);
21971
21955
  width: var(--pf-c-page__sidebar--Width);
21972
21956
  overflow-x: hidden;
21973
21957
  overflow-y: auto;
@@ -22247,8 +22231,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22247
22231
 
22248
22232
  .pf-c-page__main,
22249
22233
  .pf-c-page__drawer {
22250
- grid-area: main;
22251
22234
  z-index: var(--pf-c-page__main--ZIndex);
22235
+ grid-area: main;
22252
22236
  overflow-x: hidden;
22253
22237
  overflow-y: auto;
22254
22238
  -webkit-overflow-scrolling: touch;
@@ -23347,10 +23331,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23347
23331
  --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
23348
23332
  --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
23349
23333
  display: grid;
23350
- align-items: end;
23351
- grid-gap: var(--pf-c-progress--GridGap);
23352
- grid-template-columns: auto auto;
23353
23334
  grid-template-rows: 1fr auto;
23335
+ grid-template-columns: auto auto;
23336
+ grid-gap: var(--pf-c-progress--GridGap);
23337
+ align-items: end;
23354
23338
  }
23355
23339
  .pf-c-progress.pf-m-sm {
23356
23340
  --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
@@ -23379,8 +23363,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23379
23363
  grid-column: 1/3;
23380
23364
  }
23381
23365
  .pf-c-progress.pf-m-outside .pf-c-progress__status {
23382
- grid-column: 2/3;
23383
23366
  grid-row: 2/3;
23367
+ grid-column: 2/3;
23384
23368
  align-self: center;
23385
23369
  }
23386
23370
  .pf-c-progress.pf-m-outside .pf-c-progress__measure {
@@ -23428,8 +23412,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23428
23412
  }
23429
23413
 
23430
23414
  .pf-c-progress__description {
23431
- word-break: break-word;
23432
23415
  grid-column: 1/2;
23416
+ word-break: break-word;
23433
23417
  }
23434
23418
  .pf-c-progress__description.pf-m-truncate {
23435
23419
  overflow: hidden;
@@ -23439,13 +23423,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23439
23423
 
23440
23424
  .pf-c-progress__status {
23441
23425
  display: flex;
23426
+ grid-row: 1/2;
23427
+ grid-column: 2/3;
23428
+ gap: var(--pf-c-progress__status--Gap);
23442
23429
  align-items: flex-start;
23443
23430
  justify-content: flex-end;
23444
- grid-column: 2/3;
23445
- grid-row: 1/2;
23446
23431
  text-align: right;
23447
23432
  word-break: break-word;
23448
- gap: var(--pf-c-progress__status--Gap);
23449
23433
  }
23450
23434
 
23451
23435
  .pf-c-progress__status-icon {
@@ -23454,8 +23438,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23454
23438
 
23455
23439
  .pf-c-progress__bar {
23456
23440
  position: relative;
23457
- grid-column: 1/3;
23458
23441
  grid-row: 2/3;
23442
+ grid-column: 1/3;
23459
23443
  align-self: center;
23460
23444
  height: var(--pf-c-progress__bar--Height);
23461
23445
  background-color: var(--pf-c-progress__bar--BackgroundColor);
@@ -23480,8 +23464,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23480
23464
  }
23481
23465
 
23482
23466
  .pf-c-progress__helper-text {
23483
- grid-column: 1/3;
23484
23467
  grid-row: 3/4;
23468
+ grid-column: 1/3;
23485
23469
  margin-top: var(--pf-c-progress__helper-text--MarginTop);
23486
23470
  }
23487
23471
 
@@ -23643,10 +23627,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23643
23627
  --pf-c-progress-stepper--m-center__step-main--before--Content: "";
23644
23628
  position: relative;
23645
23629
  display: grid;
23646
- grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
23647
- grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
23648
23630
  grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);
23631
+ grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
23649
23632
  grid-auto-columns: 1fr;
23633
+ grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
23650
23634
  }
23651
23635
  @media screen and (min-width: 768px) {
23652
23636
  .pf-c-progress-stepper {
@@ -23713,8 +23697,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23713
23697
  grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
23714
23698
  }
23715
23699
  .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-connector {
23716
- min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
23717
23700
  grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
23701
+ min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
23718
23702
  padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
23719
23703
  }
23720
23704
  .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-main {
@@ -23831,11 +23815,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23831
23815
  }
23832
23816
  .pf-c-progress-stepper__step-title.pf-m-help-text {
23833
23817
  text-decoration: underline;
23834
- cursor: pointer;
23818
+ text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
23835
23819
  text-decoration-style: dashed;
23836
23820
  text-decoration-color: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor);
23837
- text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
23838
23821
  text-underline-offset: var(--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
23822
+ cursor: pointer;
23839
23823
  }
23840
23824
  .pf-c-progress-stepper__step-title.pf-m-help-text:hover {
23841
23825
  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step-title--m-help-text--hover--Color);
@@ -24258,9 +24242,9 @@ label.pf-c-radio, .pf-c-radio__label,
24258
24242
 
24259
24243
  .pf-c-search-input__text {
24260
24244
  display: grid;
24261
- grid-template-columns: 1fr;
24262
- grid-template-areas: "text-input";
24263
24245
  flex: 1;
24246
+ grid-template-areas: "text-input";
24247
+ grid-template-columns: 1fr;
24264
24248
  }
24265
24249
  .pf-c-search-input__text::before, .pf-c-search-input__text::after {
24266
24250
  position: absolute;
@@ -24783,8 +24767,8 @@ label.pf-c-radio, .pf-c-radio__label,
24783
24767
  .pf-c-select__toggle-typeahead {
24784
24768
  flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
24785
24769
  flex-grow: 1;
24786
- min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
24787
24770
  flex-shrink: 0;
24771
+ min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
24788
24772
  }
24789
24773
  .pf-c-select__toggle-typeahead.pf-c-form-control {
24790
24774
  background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);
@@ -25172,8 +25156,8 @@ label.pf-c-radio, .pf-c-radio__label,
25172
25156
  position: var(--pf-c-sidebar__panel--Position);
25173
25157
  top: var(--pf-c-sidebar__panel--Top);
25174
25158
  z-index: var(--pf-c-sidebar__panel--ZIndex);
25175
- flex-shrink: 0;
25176
25159
  flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
25160
+ flex-shrink: 0;
25177
25161
  order: var(--pf-c-sidebar__panel--Order);
25178
25162
  background-color: var(--pf-c-sidebar__panel--BackgroundColor);
25179
25163
  box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
@@ -25386,9 +25370,9 @@ label.pf-c-radio, .pf-c-radio__label,
25386
25370
  border: none;
25387
25371
  }
25388
25372
  .pf-c-simple-list__item-link:hover {
25389
- text-decoration: none;
25390
25373
  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
25391
25374
  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
25375
+ text-decoration: none;
25392
25376
  }
25393
25377
  .pf-c-simple-list__item-link:focus {
25394
25378
  --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
@@ -26067,13 +26051,13 @@ svg.pf-c-spinner.pf-m-xl {
26067
26051
  .pf-c-spinner__path {
26068
26052
  width: 100%;
26069
26053
  height: 100%;
26070
- transform-origin: 50% 50%;
26071
- animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
26072
26054
  stroke: var(--pf-c-spinner--Color);
26073
- stroke-linecap: round;
26074
26055
  stroke-dasharray: 283;
26075
26056
  stroke-dashoffset: 280;
26057
+ stroke-linecap: round;
26076
26058
  stroke-width: var(--pf-c-spinner--stroke-width);
26059
+ transform-origin: 50% 50%;
26060
+ animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
26077
26061
  }
26078
26062
 
26079
26063
  @keyframes pf-c-spinner-animation-rotate {
@@ -26093,8 +26077,8 @@ svg.pf-c-spinner.pf-m-xl {
26093
26077
  stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
26094
26078
  }
26095
26079
  40% {
26096
- stroke-dashoffset: 150;
26097
26080
  stroke-dasharray: 220;
26081
+ stroke-dashoffset: 150;
26098
26082
  }
26099
26083
  100% {
26100
26084
  stroke-dashoffset: 280;
@@ -28555,9 +28539,9 @@ svg.pf-c-spinner.pf-m-xl {
28555
28539
  .pf-c-table__button-content,
28556
28540
  .pf-c-table__column-help {
28557
28541
  display: grid;
28542
+ grid-template-columns: auto max-content;
28558
28543
  align-items: end;
28559
28544
  justify-content: start;
28560
- grid-template-columns: auto max-content;
28561
28545
  }
28562
28546
  .pf-c-table__button-content .pf-c-table__text,
28563
28547
  .pf-c-table__column-help .pf-c-table__text {
@@ -30815,9 +30799,9 @@ svg.pf-c-spinner.pf-m-xl {
30815
30799
 
30816
30800
  .pf-c-text-input-group__text {
30817
30801
  display: inline-grid;
30818
- grid-template-columns: 1fr;
30819
- grid-template-areas: "text-input";
30820
30802
  flex: 1;
30803
+ grid-template-areas: "text-input";
30804
+ grid-template-columns: 1fr;
30821
30805
  }
30822
30806
  .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
30823
30807
  position: absolute;
@@ -30933,11 +30917,11 @@ svg.pf-c-spinner.pf-m-xl {
30933
30917
  --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
30934
30918
  position: relative;
30935
30919
  display: inline-grid;
30920
+ grid-template-rows: min-content;
30936
30921
  padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
30937
30922
  text-align: center;
30938
30923
  cursor: pointer;
30939
30924
  background-color: var(--pf-c-tile--BackgroundColor);
30940
- grid-template-rows: min-content;
30941
30925
  transition: var(--pf-c-tile--Transition);
30942
30926
  transform: translateY(var(--pf-c-tile--TranslateY));
30943
30927
  }
@@ -31089,12 +31073,12 @@ svg.pf-c-spinner.pf-m-xl {
31089
31073
  outline-offset: var(--pf-c-timestamp--OutlineOffset);
31090
31074
  }
31091
31075
  .pf-c-timestamp.pf-m-help-text {
31092
- cursor: pointer;
31093
31076
  text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
31094
- text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
31095
31077
  text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
31096
- text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
31078
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
31097
31079
  text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
31080
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
31081
+ cursor: pointer;
31098
31082
  }
31099
31083
  .pf-c-timestamp.pf-m-help-text:hover {
31100
31084
  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
@@ -32012,6 +31996,10 @@ label.pf-c-tree-view__node-text {
32012
31996
  --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
32013
31997
  --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
32014
31998
  --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
31999
+ --pf-c-wizard__title-text--FontSize: var(--pf-global--FontSize--3xl);
32000
+ --pf-c-wizard__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
32001
+ --pf-c-wizard__title-text--FontWeight: var(--pf-global--FontWeight--normal);
32002
+ --pf-c-wizard__title-text--LineHeight: var(--pf-global--LineHeight--sm);
32015
32003
  --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
32016
32004
  --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
32017
32005
  --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
@@ -32195,6 +32183,8 @@ label.pf-c-tree-view__node-text {
32195
32183
  position: absolute;
32196
32184
  top: var(--pf-c-wizard__close--Top);
32197
32185
  right: var(--pf-c-wizard__close--Right);
32186
+ }
32187
+ .pf-c-wizard__header .pf-c-wizard__close button {
32198
32188
  font-size: var(--pf-c-wizard__close--FontSize);
32199
32189
  }
32200
32190
 
@@ -32203,6 +32193,13 @@ label.pf-c-tree-view__node-text {
32203
32193
  word-wrap: break-word;
32204
32194
  }
32205
32195
 
32196
+ .pf-c-wizard__title-text {
32197
+ font-family: var(--pf-c-wizard__title-text--FontFamily);
32198
+ font-size: var(--pf-c-wizard__title-text--FontSize);
32199
+ font-weight: var(--pf-c-wizard__title-text--FontWeight);
32200
+ line-height: var(--pf-c-wizard__title-text--LineHeight);
32201
+ }
32202
+
32206
32203
  .pf-c-wizard__description {
32207
32204
  display: none;
32208
32205
  padding-top: var(--pf-c-wizard__description--PaddingTop);
@@ -32451,8 +32448,8 @@ label.pf-c-tree-view__node-text {
32451
32448
  position: relative;
32452
32449
  z-index: var(--pf-c-wizard__footer--ZIndex);
32453
32450
  display: flex;
32454
- flex-wrap: wrap;
32455
32451
  flex-shrink: 0;
32452
+ flex-wrap: wrap;
32456
32453
  padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
32457
32454
  background-color: var(--pf-c-wizard__footer--BackgroundColor);
32458
32455
  }
@@ -34133,8 +34130,8 @@ label.pf-c-tree-view__node-text {
34133
34130
  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
34134
34131
  --pf-l-gallery--GridTemplateRows: auto;
34135
34132
  display: grid;
34136
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
34137
34133
  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
34134
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
34138
34135
  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
34139
34136
  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
34140
34137
  }
@@ -34202,10 +34199,10 @@ label.pf-c-tree-view__node-text {
34202
34199
  }
34203
34200
  .pf-l-grid > *,
34204
34201
  .pf-l-grid .pf-l-grid__item {
34205
- min-width: 0;
34206
- min-height: 0;
34207
34202
  grid-column-start: var(--pf-l-grid__item--GridColumnStart);
34208
34203
  grid-column-end: var(--pf-l-grid__item--GridColumnEnd);
34204
+ min-width: 0;
34205
+ min-height: 0;
34209
34206
  order: var(--pf-l-grid--item--Order);
34210
34207
  }
34211
34208
  @media (min-width: 576px) {