@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
@@ -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 {
@@ -5356,30 +5356,12 @@
5356
5356
  content: "\e911";
5357
5357
  }
5358
5358
 
5359
- .pf-svg-size-sm {
5359
+ .pf-svg {
5360
5360
  width: 1em;
5361
5361
  height: 1em;
5362
5362
  vertical-align: -0.125em;
5363
5363
  }
5364
5364
 
5365
- .pf-svg-size-md {
5366
- width: 1.5em;
5367
- height: 1.5em;
5368
- vertical-align: -0.1875em;
5369
- }
5370
-
5371
- .pf-svg-size-lg {
5372
- width: 2em;
5373
- height: 2em;
5374
- vertical-align: -0.25em;
5375
- }
5376
-
5377
- .pf-svg-size-xl {
5378
- width: 3em;
5379
- height: 3em;
5380
- vertical-align: -0.375em;
5381
- }
5382
-
5383
5365
  .pf-c-about-modal-box {
5384
5366
  --pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000);
5385
5367
  --pf-c-about-modal-box--Height: 100%;
@@ -5431,8 +5413,8 @@
5431
5413
  color: var(--pf-global--Color--100);
5432
5414
  position: relative;
5433
5415
  display: grid;
5434
- grid-template-rows: max-content max-content auto;
5435
5416
  grid-template-areas: "brand close" "header header" "content content";
5417
+ grid-template-rows: max-content max-content auto;
5436
5418
  width: var(--pf-c-about-modal-box--Width);
5437
5419
  height: var(--pf-c-about-modal-box--Height);
5438
5420
  overflow-x: hidden;
@@ -5478,22 +5460,22 @@
5478
5460
  }
5479
5461
  @media only screen and (min-width: 576px) {
5480
5462
  .pf-c-about-modal-box {
5481
- grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
5482
5463
  grid-template-areas: "brand hero" "header hero" "content hero";
5464
+ grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
5483
5465
  }
5484
5466
  }
5485
5467
  @media only screen and (min-width: 992px) {
5486
5468
  .pf-c-about-modal-box {
5487
5469
  --pf-c-about-modal-box--Height: var(--pf-c-about-modal-box--lg--Height);
5488
5470
  --pf-c-about-modal-box--Width: var(--pf-c-about-modal-box--lg--Width);
5489
- grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
5490
5471
  grid-template-rows: max-content max-content auto;
5472
+ grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
5491
5473
  }
5492
5474
  }
5493
5475
 
5494
5476
  .pf-c-about-modal-box__brand {
5495
- grid-area: brand;
5496
5477
  display: flex;
5478
+ grid-area: brand;
5497
5479
  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);
5498
5480
  }
5499
5481
 
@@ -5502,9 +5484,9 @@
5502
5484
  }
5503
5485
 
5504
5486
  .pf-c-about-modal-box__header {
5505
- grid-area: header;
5506
5487
  display: flex;
5507
5488
  flex-direction: column;
5489
+ grid-area: header;
5508
5490
  padding-right: var(--pf-c-about-modal-box__header--PaddingRight);
5509
5491
  padding-bottom: var(--pf-c-about-modal-box__header--PaddingBottom);
5510
5492
  padding-left: var(--pf-c-about-modal-box__header--PaddingLeft);
@@ -5535,10 +5517,10 @@
5535
5517
  }
5536
5518
 
5537
5519
  .pf-c-about-modal-box__close {
5538
- grid-area: close;
5539
5520
  position: sticky;
5540
5521
  top: 0;
5541
5522
  display: flex;
5523
+ grid-area: close;
5542
5524
  align-items: flex-start;
5543
5525
  justify-content: flex-end;
5544
5526
  padding-top: var(--pf-c-about-modal-box__close--PaddingTop);
@@ -5577,12 +5559,12 @@
5577
5559
  @media only screen and (min-width: 576px) {
5578
5560
  .pf-c-about-modal-box__hero {
5579
5561
  display: block;
5562
+ grid-area: hero;
5580
5563
  background-image: var(--pf-c-about-modal-box__hero--sm--BackgroundImage);
5581
5564
  background-repeat: no-repeat;
5582
5565
  background-attachment: fixed;
5583
5566
  background-position: var(--pf-c-about-modal-box__hero--sm--BackgroundPosition);
5584
5567
  background-size: var(--pf-c-about-modal-box__hero--sm--BackgroundSize);
5585
- grid-area: hero;
5586
5568
  }
5587
5569
  }
5588
5570
 
@@ -5981,13 +5963,13 @@
5981
5963
  color: var(--pf-global--Color--100);
5982
5964
  position: relative;
5983
5965
  display: grid;
5966
+ grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
5967
+ grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
5984
5968
  padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
5985
5969
  font-size: var(--pf-c-alert__FontSize);
5986
5970
  background-color: var(--pf-c-alert--BackgroundColor);
5987
5971
  border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
5988
5972
  box-shadow: var(--pf-c-alert--BoxShadow);
5989
- grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
5990
- grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
5991
5973
  }
5992
5974
  .pf-c-alert.pf-m-success {
5993
5975
  --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
@@ -6048,8 +6030,8 @@
6048
6030
  }
6049
6031
 
6050
6032
  .pf-c-alert__icon {
6051
- grid-area: icon;
6052
6033
  display: flex;
6034
+ grid-area: icon;
6053
6035
  margin-top: var(--pf-c-alert__icon--MarginTop);
6054
6036
  margin-right: var(--pf-c-alert__icon--MarginRight);
6055
6037
  font-size: var(--pf-c-alert__icon--FontSize);
@@ -6921,8 +6903,8 @@
6921
6903
  overflow: hidden;
6922
6904
  text-overflow: ellipsis;
6923
6905
  white-space: nowrap;
6924
- padding: var(--pf-c-banner--PaddingTop) var(--pf-c-banner--PaddingRight) var(--pf-c-banner--PaddingBottom) var(--pf-c-banner--PaddingLeft);
6925
6906
  flex-shrink: 0;
6907
+ padding: var(--pf-c-banner--PaddingTop) var(--pf-c-banner--PaddingRight) var(--pf-c-banner--PaddingBottom) var(--pf-c-banner--PaddingLeft);
6926
6908
  font-size: var(--pf-c-banner--FontSize);
6927
6909
  color: var(--pf-c-banner--Color);
6928
6910
  white-space: nowrap;
@@ -7988,9 +7970,9 @@ button.pf-c-breadcrumb__link {
7988
7970
  box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
7989
7971
  }
7990
7972
  .pf-c-calendar-month__date:disabled {
7991
- pointer-events: none;
7992
7973
  --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
7993
7974
  --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
7975
+ pointer-events: none;
7994
7976
  }
7995
7977
 
7996
7978
  :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
@@ -8059,10 +8041,11 @@ button.pf-c-breadcrumb__link {
8059
8041
  --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
8060
8042
  --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8061
8043
  --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
8062
- --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
8063
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
8064
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
8065
8044
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
8045
+ --pf-c-card__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
8046
+ --pf-c-card__title-text--FontSize: var(--pf-global--FontSize--md);
8047
+ --pf-c-card__title-text--FontWeight: var(--pf-global--FontWeight--normal);
8048
+ --pf-c-card__title-text--LineHeight: var(--pf-global--LineHeight--md);
8066
8049
  --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
8067
8050
  --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
8068
8051
  --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
@@ -8124,7 +8107,7 @@ button.pf-c-breadcrumb__link {
8124
8107
  --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
8125
8108
  --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
8126
8109
  --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
8127
- --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
8110
+ --pf-c-card--m-display-lg__title-text--FontSize: var(--pf-global--FontSize--xl);
8128
8111
  --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
8129
8112
  --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
8130
8113
  --pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl);
@@ -8236,7 +8219,7 @@ button.pf-c-breadcrumb__link {
8236
8219
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
8237
8220
  }
8238
8221
  .pf-c-card.pf-m-display-lg {
8239
- --pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
8222
+ --pf-c-card__title-text--FontSize: var(--pf-c-card--m-display-lg__title-text--FontSize);
8240
8223
  --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
8241
8224
  --pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
8242
8225
  --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
@@ -8302,20 +8285,21 @@ button.pf-c-breadcrumb__link {
8302
8285
  transition: var(--pf-c-card__header-toggle-icon--Transition);
8303
8286
  }
8304
8287
 
8305
- .pf-c-card__title {
8306
- font-family: var(--pf-c-card__title--FontFamily);
8307
- font-size: var(--pf-c-card__title--FontSize);
8308
- font-weight: var(--pf-c-card__title--FontWeight);
8288
+ .pf-c-card__title-text {
8289
+ font-family: var(--pf-c-card__title-text--FontFamily);
8290
+ font-size: var(--pf-c-card__title-text--FontSize);
8291
+ font-weight: var(--pf-c-card__title-text--FontWeight);
8292
+ line-height: var(--pf-c-card__title-text--LineHeight);
8309
8293
  }
8310
8294
 
8311
8295
  .pf-c-card__actions {
8312
8296
  display: flex;
8297
+ gap: var(--pf-c-card__actions--Gap);
8313
8298
  align-items: center;
8314
8299
  align-self: flex-start;
8315
8300
  order: 1;
8316
8301
  padding-left: var(--pf-c-card__actions--PaddingLeft);
8317
8302
  margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
8318
- gap: var(--pf-c-card__actions--Gap);
8319
8303
  }
8320
8304
  .pf-c-card__actions + .pf-c-card__title,
8321
8305
  .pf-c-card__actions + .pf-c-card__body,
@@ -8568,8 +8552,8 @@ label.pf-c-check, .pf-c-check__label,
8568
8552
 
8569
8553
  .pf-c-chip__content {
8570
8554
  display: flex;
8571
- align-items: center;
8572
8555
  column-gap: var(--pf-c-chip__content--ColumnGap);
8556
+ align-items: center;
8573
8557
  font-size: var(--pf-c-chip__content--FontSize);
8574
8558
  }
8575
8559
 
@@ -8652,13 +8636,13 @@ label.pf-c-check, .pf-c-check__label,
8652
8636
  --pf-c-chip-group__label--MaxWidth: 18ch;
8653
8637
  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
8654
8638
  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
8639
+ row-gap: var(--pf-c-chip-group--RowGap);
8640
+ column-gap: var(--pf-c-chip-group--ColumnGap);
8655
8641
  max-width: 100%;
8656
8642
  padding-top: var(--pf-c-chip-group--PaddingTop);
8657
8643
  padding-right: var(--pf-c-chip-group--PaddingRight);
8658
8644
  padding-bottom: var(--pf-c-chip-group--PaddingBottom);
8659
8645
  padding-left: var(--pf-c-chip-group--PaddingLeft);
8660
- row-gap: var(--pf-c-chip-group--RowGap);
8661
- column-gap: var(--pf-c-chip-group--ColumnGap);
8662
8646
  }
8663
8647
  .pf-c-chip-group.pf-m-category {
8664
8648
  --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
@@ -8673,10 +8657,10 @@ label.pf-c-check, .pf-c-check__label,
8673
8657
  display: flex;
8674
8658
  flex: 1;
8675
8659
  flex-wrap: wrap;
8676
- align-items: baseline;
8677
- min-width: 0;
8678
8660
  row-gap: var(--pf-c-chip-group__main--RowGap);
8679
8661
  column-gap: var(--pf-c-chip-group__main--ColumnGap);
8662
+ align-items: baseline;
8663
+ min-width: 0;
8680
8664
  }
8681
8665
 
8682
8666
  .pf-c-chip-group,
@@ -9265,12 +9249,12 @@ label.pf-c-check, .pf-c-check__label,
9265
9249
  margin-left: var(--pf-c-content--ol--MarginLeft);
9266
9250
  }
9267
9251
  .pf-c-content ol ul {
9268
- margin-top: var(--pf-c-content--ul--nested--MarginTop);
9269
9252
  --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
9253
+ margin-top: var(--pf-c-content--ul--nested--MarginTop);
9270
9254
  }
9271
9255
  .pf-c-content ol ol {
9272
- margin-top: var(--pf-c-content--ol--nested--MarginTop);
9273
9256
  --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
9257
+ margin-top: var(--pf-c-content--ol--nested--MarginTop);
9274
9258
  }
9275
9259
  .pf-c-content ul {
9276
9260
  padding-left: var(--pf-c-content--ul--PaddingLeft);
@@ -9278,12 +9262,12 @@ label.pf-c-check, .pf-c-check__label,
9278
9262
  list-style: var(--pf-c-content--ul--ListStyle);
9279
9263
  }
9280
9264
  .pf-c-content ul ul {
9281
- margin-top: var(--pf-c-content--ul--nested--MarginTop);
9282
9265
  --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
9266
+ margin-top: var(--pf-c-content--ul--nested--MarginTop);
9283
9267
  }
9284
9268
  .pf-c-content ul ol {
9285
- margin-top: var(--pf-c-content--ol--nested--MarginTop);
9286
9269
  --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
9270
+ margin-top: var(--pf-c-content--ol--nested--MarginTop);
9287
9271
  }
9288
9272
  .pf-c-content dl {
9289
9273
  display: grid;
@@ -9292,8 +9276,8 @@ label.pf-c-check, .pf-c-check__label,
9292
9276
  @media screen and (min-width: 576px) {
9293
9277
  .pf-c-content dl {
9294
9278
  grid-template: auto/auto 1fr;
9295
- grid-column-gap: var(--pf-c-content--dl--ColumnGap);
9296
9279
  grid-row-gap: var(--pf-c-content--dl--RowGap);
9280
+ grid-column-gap: var(--pf-c-content--dl--ColumnGap);
9297
9281
  }
9298
9282
  }
9299
9283
  .pf-c-content dt {
@@ -9684,8 +9668,8 @@ label.pf-c-check, .pf-c-check__label,
9684
9668
  @media screen and (min-width: 768px) {
9685
9669
  .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
9686
9670
  display: flex;
9687
- flex-wrap: wrap;
9688
9671
  flex-grow: 1;
9672
+ flex-wrap: wrap;
9689
9673
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9690
9674
  }
9691
9675
  }
@@ -9746,8 +9730,8 @@ label.pf-c-check, .pf-c-check__label,
9746
9730
  @media screen and (min-width: 0) {
9747
9731
  .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
9748
9732
  display: flex;
9749
- flex-wrap: wrap;
9750
9733
  flex-grow: 1;
9734
+ flex-wrap: wrap;
9751
9735
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9752
9736
  }
9753
9737
  }
@@ -9808,8 +9792,8 @@ label.pf-c-check, .pf-c-check__label,
9808
9792
  @media screen and (min-width: 576px) {
9809
9793
  .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
9810
9794
  display: flex;
9811
- flex-wrap: wrap;
9812
9795
  flex-grow: 1;
9796
+ flex-wrap: wrap;
9813
9797
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9814
9798
  }
9815
9799
  }
@@ -9870,8 +9854,8 @@ label.pf-c-check, .pf-c-check__label,
9870
9854
  @media screen and (min-width: 768px) {
9871
9855
  .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
9872
9856
  display: flex;
9873
- flex-wrap: wrap;
9874
9857
  flex-grow: 1;
9858
+ flex-wrap: wrap;
9875
9859
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9876
9860
  }
9877
9861
  }
@@ -9932,8 +9916,8 @@ label.pf-c-check, .pf-c-check__label,
9932
9916
  @media screen and (min-width: 992px) {
9933
9917
  .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
9934
9918
  display: flex;
9935
- flex-wrap: wrap;
9936
9919
  flex-grow: 1;
9920
+ flex-wrap: wrap;
9937
9921
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9938
9922
  }
9939
9923
  }
@@ -9994,8 +9978,8 @@ label.pf-c-check, .pf-c-check__label,
9994
9978
  @media screen and (min-width: 1200px) {
9995
9979
  .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
9996
9980
  display: flex;
9997
- flex-wrap: wrap;
9998
9981
  flex-grow: 1;
9982
+ flex-wrap: wrap;
9999
9983
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10000
9984
  }
10001
9985
  }
@@ -10056,8 +10040,8 @@ label.pf-c-check, .pf-c-check__label,
10056
10040
  @media screen and (min-width: 1450px) {
10057
10041
  .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
10058
10042
  display: flex;
10059
- flex-wrap: wrap;
10060
10043
  flex-grow: 1;
10044
+ flex-wrap: wrap;
10061
10045
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10062
10046
  }
10063
10047
  }
@@ -10417,8 +10401,8 @@ label.pf-c-check, .pf-c-check__label,
10417
10401
 
10418
10402
  .pf-c-data-list__item-action {
10419
10403
  --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
10420
- align-items: flex-start;
10421
10404
  align-content: flex-start;
10405
+ align-items: flex-start;
10422
10406
  padding-top: var(--pf-c-data-list__item-action--PaddingTop);
10423
10407
  padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
10424
10408
  margin-left: var(--pf-c-data-list__item-action--MarginLeft);
@@ -10444,8 +10428,8 @@ label.pf-c-check, .pf-c-check__label,
10444
10428
 
10445
10429
  .pf-c-data-list__item-content {
10446
10430
  display: grid;
10447
- width: 100%;
10448
10431
  grid-template-columns: auto 1fr;
10432
+ width: 100%;
10449
10433
  }
10450
10434
 
10451
10435
  .pf-c-data-list__cell {
@@ -10461,8 +10445,8 @@ label.pf-c-check, .pf-c-check__label,
10461
10445
  }
10462
10446
  .pf-c-data-list__cell.pf-m-icon {
10463
10447
  flex-grow: 0;
10464
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10465
10448
  grid-column: 1/2;
10449
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10466
10450
  }
10467
10451
  .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
10468
10452
  grid-column: 2/3;
@@ -10582,10 +10566,10 @@ label.pf-c-check, .pf-c-check__label,
10582
10566
  --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
10583
10567
  --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
10584
10568
  display: grid;
10585
- align-items: baseline;
10569
+ grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
10586
10570
  row-gap: var(--pf-c-description-list--RowGap);
10587
10571
  column-gap: var(--pf-c-description-list--ColumnGap);
10588
- grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
10572
+ align-items: baseline;
10589
10573
  }
10590
10574
  @media screen and (min-width: 576px) {
10591
10575
  .pf-c-description-list {
@@ -10691,11 +10675,11 @@ label.pf-c-check, .pf-c-check__label,
10691
10675
  .pf-c-description-list__group,
10692
10676
  .pf-c-description-list > .pf-c-card {
10693
10677
  display: grid;
10678
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
10679
+ grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
10694
10680
  grid-column: var(--pf-c-description-list__group--GridColumn);
10695
10681
  row-gap: var(--pf-c-description-list__group--RowGap);
10696
10682
  column-gap: var(--pf-c-description-list__group--ColumnGap);
10697
- grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
10698
- grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
10699
10683
  align-items: baseline;
10700
10684
  }
10701
10685
 
@@ -10732,11 +10716,11 @@ label.pf-c-check, .pf-c-check__label,
10732
10716
  }
10733
10717
  .pf-c-description-list__text.pf-m-help-text {
10734
10718
  text-decoration: underline;
10735
- cursor: pointer;
10736
- text-decoration-style: dashed;
10737
10719
  text-decoration-thickness: var(--pf-c-description-list__text--m-help-text--TextDecorationThickness);
10738
- text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
10720
+ text-decoration-style: dashed;
10739
10721
  text-decoration-color: var(--pf-c-description-list__text--m-help-text--TextDecorationColor);
10722
+ text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
10723
+ cursor: pointer;
10740
10724
  }
10741
10725
  .pf-c-description-list__text.pf-m-help-text:hover {
10742
10726
  --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--hover--TextDecorationColor);
@@ -10976,8 +10960,8 @@ label.pf-c-check, .pf-c-check__label,
10976
10960
  --pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
10977
10961
  display: grid;
10978
10962
  grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
10979
- 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));
10980
10963
  grid-template-rows: repeat(3, auto) auto;
10964
+ 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));
10981
10965
  }
10982
10966
 
10983
10967
  .pf-c-dual-list-selector__pane {
@@ -11277,8 +11261,8 @@ label.pf-c-check, .pf-c-check__label,
11277
11261
  --pf-c-toolbar--m-full-height__item--Display: flex;
11278
11262
  --pf-c-toolbar--m-full-height__item--AlignItems: center;
11279
11263
  position: relative;
11280
- row-gap: var(--pf-c-toolbar--RowGap);
11281
11264
  display: grid;
11265
+ row-gap: var(--pf-c-toolbar--RowGap);
11282
11266
  padding-top: var(--pf-c-toolbar--PaddingTop);
11283
11267
  padding-bottom: var(--pf-c-toolbar--PaddingBottom);
11284
11268
  background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -11571,9 +11555,9 @@ label.pf-c-check, .pf-c-check__label,
11571
11555
  .pf-c-toolbar__group.pf-m-chip-container {
11572
11556
  display: flex;
11573
11557
  flex-wrap: wrap;
11558
+ grid-row-gap: 0;
11574
11559
  align-items: baseline;
11575
11560
  margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
11576
- grid-row-gap: 0;
11577
11561
  }
11578
11562
  .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item,
11579
11563
  .pf-c-toolbar__group.pf-m-chip-container .pf-c-toolbar__item {
@@ -12469,9 +12453,9 @@ label.pf-c-check, .pf-c-check__label,
12469
12453
  width: 100%;
12470
12454
  height: auto;
12471
12455
  flex-direction: var(--pf-c-divider--FlexDirection);
12456
+ flex-shrink: 0;
12472
12457
  align-items: center;
12473
12458
  align-self: stretch;
12474
- flex-shrink: 0;
12475
12459
  justify-content: center;
12476
12460
  border: 0;
12477
12461
  }
@@ -12480,11 +12464,11 @@ label.pf-c-check, .pf-c-check__label,
12480
12464
  }
12481
12465
  .pf-c-divider::after {
12482
12466
  align-self: stretch;
12467
+ justify-self: center;
12483
12468
  width: var(--pf-c-divider--after--Width);
12484
12469
  height: var(--pf-c-divider--after--Height);
12485
12470
  content: "";
12486
12471
  background-color: var(--pf-c-divider--after--BackgroundColor);
12487
- justify-self: center;
12488
12472
  }
12489
12473
  .pf-c-divider.pf-m-vertical {
12490
12474
  --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
@@ -13056,9 +13040,9 @@ label.pf-c-check, .pf-c-check__label,
13056
13040
  }
13057
13041
 
13058
13042
  .pf-c-drawer__actions {
13059
- grid-column: 2;
13060
- grid-row: 1;
13061
13043
  display: flex;
13044
+ grid-row: 1;
13045
+ grid-column: 2;
13062
13046
  align-self: baseline;
13063
13047
  margin-top: var(--pf-c-drawer__actions--MarginTop);
13064
13048
  margin-right: var(--pf-c-drawer__actions--MarginRight);
@@ -14408,16 +14392,16 @@ label.pf-c-check, .pf-c-check__label,
14408
14392
  .pf-c-empty-state__footer {
14409
14393
  display: flex;
14410
14394
  flex-direction: column;
14411
- align-items: center;
14412
14395
  row-gap: var(--pf-c-empty-state__footer--RowGap);
14396
+ align-items: center;
14413
14397
  margin-top: var(--pf-c-empty-state__footer--MarginTop);
14414
14398
  }
14415
14399
 
14416
14400
  .pf-c-empty-state__actions {
14417
14401
  display: flex;
14418
14402
  flex-wrap: wrap;
14419
- justify-content: center;
14420
14403
  gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
14404
+ justify-content: center;
14421
14405
  }
14422
14406
 
14423
14407
  .pf-c-expandable-section {
@@ -14732,8 +14716,8 @@ label.pf-c-check, .pf-c-check__label,
14732
14716
  }
14733
14717
  .pf-c-form.pf-m-horizontal .pf-c-form__group {
14734
14718
  display: grid;
14735
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14736
14719
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14720
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14737
14721
  }
14738
14722
  .pf-c-form.pf-m-horizontal .pf-c-form__group-label {
14739
14723
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14752,8 +14736,8 @@ label.pf-c-check, .pf-c-check__label,
14752
14736
  }
14753
14737
  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
14754
14738
  display: grid;
14755
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14756
14739
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14740
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14757
14741
  }
14758
14742
  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
14759
14743
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14772,8 +14756,8 @@ label.pf-c-check, .pf-c-check__label,
14772
14756
  }
14773
14757
  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
14774
14758
  display: grid;
14775
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14776
14759
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14760
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14777
14761
  }
14778
14762
  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
14779
14763
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14792,8 +14776,8 @@ label.pf-c-check, .pf-c-check__label,
14792
14776
  }
14793
14777
  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
14794
14778
  display: grid;
14795
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14796
14779
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14780
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14797
14781
  }
14798
14782
  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
14799
14783
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14812,8 +14796,8 @@ label.pf-c-check, .pf-c-check__label,
14812
14796
  }
14813
14797
  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
14814
14798
  display: grid;
14815
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14816
14799
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14800
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14817
14801
  }
14818
14802
  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
14819
14803
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14832,8 +14816,8 @@ label.pf-c-check, .pf-c-check__label,
14832
14816
  }
14833
14817
  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
14834
14818
  display: grid;
14835
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14836
14819
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14820
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14837
14821
  }
14838
14822
  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
14839
14823
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14852,8 +14836,8 @@ label.pf-c-check, .pf-c-check__label,
14852
14836
  }
14853
14837
  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
14854
14838
  display: grid;
14855
- grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14856
14839
  grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
14840
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
14857
14841
  }
14858
14842
  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
14859
14843
  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
@@ -14968,9 +14952,9 @@ label.pf-c-check, .pf-c-check__label,
14968
14952
  --pf-c-form__group-control--m-inline--child--MarginRight: 0;
14969
14953
  }
14970
14954
  .pf-c-form__group-control.pf-m-stack {
14955
+ --pf-c-form__helper-text--MarginTop: var(--pf-c-grid__group-control--m-stack__helper-text--MarginTop);
14971
14956
  display: grid;
14972
14957
  gap: var(--pf-c-grid__group-control--m-stack--Gap);
14973
- --pf-c-form__helper-text--MarginTop: var(--pf-c-grid__group-control--m-stack__helper-text--MarginTop);
14974
14958
  }
14975
14959
  .pf-c-form__group-control .pf-c-form__helper-text:first-child {
14976
14960
  --pf-c-form__helper-text--MarginTop: 0;
@@ -15054,8 +15038,8 @@ label.pf-c-check, .pf-c-check__label,
15054
15038
  }
15055
15039
 
15056
15040
  .pf-c-form__field-group-toggle {
15057
- grid-column: 1/2;
15058
15041
  grid-row: 1/2;
15042
+ grid-column: 1/2;
15059
15043
  padding-top: var(--pf-c-form__field-group-toggle--PaddingTop);
15060
15044
  padding-right: var(--pf-c-form__field-group-toggle--PaddingRight);
15061
15045
  }
@@ -15077,9 +15061,9 @@ label.pf-c-check, .pf-c-check__label,
15077
15061
  }
15078
15062
 
15079
15063
  .pf-c-form__field-group-header {
15080
- grid-column: var(--pf-c-form__field-group-header--GridColumn);
15081
- grid-row: 1/2;
15082
15064
  display: flex;
15065
+ grid-row: 1/2;
15066
+ grid-column: var(--pf-c-form__field-group-header--GridColumn);
15083
15067
  align-items: flex-start;
15084
15068
  padding-top: var(--pf-c-form__field-group-header--PaddingTop);
15085
15069
  padding-bottom: var(--pf-c-form__field-group-header--PaddingBottom);
@@ -15112,8 +15096,8 @@ label.pf-c-check, .pf-c-check__label,
15112
15096
  }
15113
15097
 
15114
15098
  .pf-c-form__field-group-body {
15115
- grid-column: var(--pf-c-form__field-group-body--GridColumn);
15116
15099
  display: grid;
15100
+ grid-column: var(--pf-c-form__field-group-body--GridColumn);
15117
15101
  gap: var(--pf-c-form__field-group-body--Gap);
15118
15102
  padding-top: var(--pf-c-form__field-group-body--PaddingTop);
15119
15103
  padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
@@ -15573,11 +15557,11 @@ textarea.pf-c-form-control {
15573
15557
 
15574
15558
  .pf-c-hint__actions {
15575
15559
  display: inline-grid;
15560
+ grid-row: 1;
15561
+ grid-column: 2;
15576
15562
  grid-auto-flow: column;
15577
15563
  margin-left: var(--pf-c-hint__actions--MarginLeft);
15578
15564
  text-align: right;
15579
- grid-column: 2;
15580
- grid-row: 1;
15581
15565
  }
15582
15566
  .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
15583
15567
  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
@@ -16641,12 +16625,6 @@ label.pf-c-input-group__text {
16641
16625
  }
16642
16626
 
16643
16627
  .pf-c-label.pf-m-editable {
16644
- text-decoration: var(--pf-c-label--m-editable--TextDecoration);
16645
- cursor: var(--pf-c-label--m-editable--Cursor);
16646
- text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
16647
- text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
16648
- text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
16649
- text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
16650
16628
  --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
16651
16629
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
16652
16630
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
@@ -16656,6 +16634,12 @@ label.pf-c-input-group__text {
16656
16634
  --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
16657
16635
  --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
16658
16636
  --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
16637
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
16638
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
16639
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
16640
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
16641
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
16642
+ cursor: var(--pf-c-label--m-editable--Cursor);
16659
16643
  }
16660
16644
  .pf-c-label.pf-m-editable:hover {
16661
16645
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
@@ -16875,9 +16859,9 @@ button.pf-c-label__content:focus {
16875
16859
  --pf-c-label-group__textarea--PaddingBottom: 0;
16876
16860
  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
16877
16861
  display: inline-flex;
16878
- align-items: center;
16879
16862
  row-gap: var(--pf-c-label-group--RowGap);
16880
16863
  column-gap: var(--pf-c-label-group--ColumnGap);
16864
+ align-items: center;
16881
16865
  }
16882
16866
  .pf-c-label-group.pf-m-category {
16883
16867
  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
@@ -16931,9 +16915,9 @@ button.pf-c-label__content:focus {
16931
16915
  display: flex;
16932
16916
  flex: 1;
16933
16917
  flex-wrap: wrap;
16934
- align-items: baseline;
16935
16918
  row-gap: var(--pf-c-label-group__main--RowGap);
16936
16919
  column-gap: var(--pf-c-label-group__main--ColumnGap);
16920
+ align-items: baseline;
16937
16921
  }
16938
16922
 
16939
16923
  .pf-c-label-group__list {
@@ -17398,10 +17382,10 @@ ul.pf-c-list {
17398
17382
  @media (min-width: 1200px) {
17399
17383
  .pf-c-login__container {
17400
17384
  display: grid;
17401
- justify-content: center;
17402
- grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
17403
- grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
17404
17385
  grid-template-areas: "main header" "main footer" "main .";
17386
+ grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
17387
+ grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
17388
+ justify-content: center;
17405
17389
  padding-right: var(--pf-c-login__container--PaddingRight);
17406
17390
  padding-left: var(--pf-c-login__container--PaddingLeft);
17407
17391
  }
@@ -17423,10 +17407,10 @@ ul.pf-c-list {
17423
17407
  }
17424
17408
 
17425
17409
  .pf-c-login__main {
17410
+ grid-area: main;
17426
17411
  align-self: start;
17427
17412
  margin-bottom: var(--pf-c-login__main--MarginBottom);
17428
17413
  background-color: var(--pf-c-login__main--BackgroundColor);
17429
- grid-area: main;
17430
17414
  }
17431
17415
  .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
17432
17416
  padding-top: var(--pf-c-login__main-header--PaddingTop);
@@ -17438,8 +17422,8 @@ ul.pf-c-list {
17438
17422
  .pf-c-login__main-header {
17439
17423
  display: grid;
17440
17424
  grid-template-columns: 100%;
17441
- column-gap: var(--pf-c-login__main-header--ColumnGap);
17442
17425
  row-gap: var(--pf-c-login__main-header--RowGap);
17426
+ column-gap: var(--pf-c-login__main-header--ColumnGap);
17443
17427
  align-items: center;
17444
17428
  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);
17445
17429
  }
@@ -17451,26 +17435,26 @@ ul.pf-c-list {
17451
17435
 
17452
17436
  .pf-c-login__main-header-utilities,
17453
17437
  .pf-c-login__main-header .pf-c-dropdown {
17454
- grid-column: auto;
17455
17438
  grid-row: auto;
17439
+ grid-column: auto;
17456
17440
  }
17457
17441
  @media (min-width: 768px) {
17458
17442
  .pf-c-login__main-header-utilities,
17459
17443
  .pf-c-login__main-header .pf-c-dropdown {
17460
- grid-column: 2/3;
17461
17444
  grid-row: 1;
17445
+ grid-column: 2/3;
17462
17446
  }
17463
17447
  }
17464
17448
 
17465
17449
  .pf-c-login__main-header-utilities .pf-c-dropdown {
17466
- grid-column: auto;
17467
17450
  grid-row: auto;
17451
+ grid-column: auto;
17468
17452
  }
17469
17453
 
17470
17454
  .pf-c-login__main-header-desc {
17455
+ grid-column: 1/-1;
17471
17456
  margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
17472
17457
  font-size: var(--pf-c-login__main-header-desc--FontSize);
17473
- grid-column: 1/-1;
17474
17458
  }
17475
17459
 
17476
17460
  .pf-c-login__main-body {
@@ -17505,11 +17489,11 @@ ul.pf-c-list {
17505
17489
  }
17506
17490
 
17507
17491
  .pf-c-login__main-footer-links-item-link svg {
17508
- fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
17509
17492
  width: 100%;
17510
17493
  max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
17511
17494
  height: 100%;
17512
17495
  max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
17496
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
17513
17497
  }
17514
17498
  .pf-c-login__main-footer-links-item-link:hover svg {
17515
17499
  fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
@@ -17774,6 +17758,7 @@ ul.pf-c-list {
17774
17758
  position: relative;
17775
17759
  display: flex;
17776
17760
  flex-basis: var(--pf-c-masthead__main--FlexBasis);
17761
+ grid-column: var(--pf-c-masthead__main--GridColumn);
17777
17762
  align-items: center;
17778
17763
  align-self: stretch;
17779
17764
  order: var(--pf-c-masthead__main--Order);
@@ -17781,7 +17766,6 @@ ul.pf-c-list {
17781
17766
  padding-top: var(--pf-c-masthead__main--PaddingTop);
17782
17767
  padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
17783
17768
  margin-right: var(--pf-c-masthead__main--MarginRight);
17784
- grid-column: var(--pf-c-masthead__main--GridColumn);
17785
17769
  }
17786
17770
  .pf-c-masthead__main::before {
17787
17771
  position: absolute;
@@ -17798,6 +17782,9 @@ ul.pf-c-list {
17798
17782
  .pf-c-masthead__content {
17799
17783
  display: flex;
17800
17784
  flex-grow: 1;
17785
+ flex-shrink: 1;
17786
+ grid-column: var(--pf-c-masthead__content--GridColumn);
17787
+ grid-column-end: -1;
17801
17788
  align-items: center;
17802
17789
  align-self: stretch;
17803
17790
  order: var(--pf-c-masthead__content--Order);
@@ -17805,9 +17792,6 @@ ul.pf-c-list {
17805
17792
  padding-top: var(--pf-c-masthead__content--PaddingTop);
17806
17793
  padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
17807
17794
  margin-left: var(--pf-c-masthead__content--MarginLeft);
17808
- grid-column: var(--pf-c-masthead__content--GridColumn);
17809
- grid-column-end: -1;
17810
- flex-shrink: 1;
17811
17795
  }
17812
17796
  .pf-c-masthead__content:only-child {
17813
17797
  --pf-c-masthead__content--MarginLeft: 0;
@@ -18367,12 +18351,6 @@ ul.pf-c-list {
18367
18351
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18368
18352
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
18369
18353
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
18370
- top: var(--pf-c-menu--Top);
18371
- z-index: var(--pf-c-menu--ZIndex);
18372
- width: var(--pf-c-menu--Width);
18373
- min-width: var(--pf-c-menu--MinWidth);
18374
- background-color: var(--pf-c-menu--BackgroundColor);
18375
- box-shadow: var(--pf-c-menu--BoxShadow);
18376
18354
  --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
18377
18355
  --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
18378
18356
  --pf-c-menu--m-nav__list--PaddingTop: 0;
@@ -18400,6 +18378,12 @@ ul.pf-c-list {
18400
18378
  --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
18401
18379
  --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
18402
18380
  --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
18381
+ top: var(--pf-c-menu--Top);
18382
+ z-index: var(--pf-c-menu--ZIndex);
18383
+ width: var(--pf-c-menu--Width);
18384
+ min-width: var(--pf-c-menu--MinWidth);
18385
+ background-color: var(--pf-c-menu--BackgroundColor);
18386
+ box-shadow: var(--pf-c-menu--BoxShadow);
18403
18387
  }
18404
18388
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
18405
18389
  overflow: visible;
@@ -19219,8 +19203,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19219
19203
 
19220
19204
  .pf-c-menu-toggle__icon {
19221
19205
  display: inline-flex;
19222
- align-self: center;
19223
19206
  flex-shrink: 0;
19207
+ align-self: center;
19224
19208
  margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
19225
19209
  line-height: 1;
19226
19210
  }
@@ -19592,8 +19576,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19592
19576
  --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
19593
19577
  --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
19594
19578
  display: grid;
19595
- gap: var(--pf-c-multiple-file-upload--Gap);
19596
19579
  grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
19580
+ gap: var(--pf-c-multiple-file-upload--Gap);
19597
19581
  }
19598
19582
  .pf-c-multiple-file-upload.pf-m-horizontal {
19599
19583
  --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
@@ -19619,21 +19603,21 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19619
19603
 
19620
19604
  .pf-c-multiple-file-upload__main {
19621
19605
  display: grid;
19606
+ grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
19607
+ grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
19608
+ grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
19609
+ gap: var(--pf-c-multiple-file-upload__main--Gap);
19622
19610
  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);
19623
19611
  text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
19624
19612
  background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
19625
19613
  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);
19626
- grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
19627
- grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
19628
- grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
19629
- gap: var(--pf-c-multiple-file-upload__main--Gap);
19630
19614
  }
19631
19615
 
19632
19616
  .pf-c-multiple-file-upload__title {
19633
19617
  display: var(--pf-c-multiple-file-upload__title--Display);
19618
+ grid-area: title;
19634
19619
  grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
19635
19620
  gap: var(--pf-c-multiple-file-upload__title--Gap);
19636
- grid-area: title;
19637
19621
  }
19638
19622
 
19639
19623
  .pf-c-multiple-file-upload__title-icon {
@@ -20573,8 +20557,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20573
20557
  --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__section__link--focus--after--BorderWidth);
20574
20558
  --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__section__link--active--after--BorderWidth);
20575
20559
  --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__section__link--m-current--after--BorderWidth);
20576
- margin-top: var(--pf-c-nav__section--MarginTop);
20577
20560
  --pf-c-nav--c-divider--MarginBottom: 0;
20561
+ margin-top: var(--pf-c-nav__section--MarginTop);
20578
20562
  }
20579
20563
  .pf-c-nav__section + .pf-c-nav__section {
20580
20564
  --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
@@ -21021,9 +21005,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21021
21005
 
21022
21006
  .pf-c-notification-drawer__list-item-header {
21023
21007
  display: flex;
21024
- align-items: baseline;
21025
- grid-column: 1/2;
21026
21008
  grid-row: 1/2;
21009
+ grid-column: 1/2;
21010
+ align-items: baseline;
21027
21011
  margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
21028
21012
  }
21029
21013
 
@@ -21044,8 +21028,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21044
21028
  }
21045
21029
 
21046
21030
  .pf-c-notification-drawer__list-item-action {
21047
- grid-column: 2/3;
21048
21031
  grid-row: 1/3;
21032
+ grid-column: 2/3;
21049
21033
  }
21050
21034
 
21051
21035
  .pf-c-notification-drawer__list-item-description {
@@ -21647,10 +21631,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21647
21631
  --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
21648
21632
  --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
21649
21633
  display: grid;
21650
- height: 100%;
21651
- grid-template-columns: 1fr;
21652
- grid-template-rows: max-content 1fr;
21653
21634
  grid-template-areas: "header" "main";
21635
+ grid-template-rows: max-content 1fr;
21636
+ grid-template-columns: 1fr;
21637
+ height: 100%;
21654
21638
  background-color: var(--pf-c-page--BackgroundColor);
21655
21639
  }
21656
21640
  @media (min-width: 1200px) {
@@ -21697,8 +21681,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21697
21681
  }
21698
21682
  @media (min-width: 1200px) {
21699
21683
  .pf-c-page {
21700
- grid-template-columns: max-content 1fr;
21701
21684
  grid-template-areas: "header header" "nav main";
21685
+ grid-template-columns: max-content 1fr;
21702
21686
  }
21703
21687
  }
21704
21688
  .pf-c-page.pf-m-full-height {
@@ -21709,14 +21693,14 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21709
21693
 
21710
21694
  .pf-c-page__header,
21711
21695
  .pf-c-page > .pf-c-masthead {
21712
- grid-area: header;
21713
21696
  z-index: var(--pf-c-page__header--ZIndex);
21697
+ grid-area: header;
21714
21698
  }
21715
21699
 
21716
21700
  .pf-c-page__header {
21717
21701
  color: var(--pf-global--Color--100);
21718
- grid-template-columns: auto auto;
21719
21702
  display: grid;
21703
+ grid-template-columns: auto auto;
21720
21704
  align-items: center;
21721
21705
  min-width: 0;
21722
21706
  min-height: var(--pf-c-page__header--MinHeight);
@@ -21764,18 +21748,18 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21764
21748
  }
21765
21749
 
21766
21750
  .pf-c-page__header-nav {
21751
+ grid-row: 2/3;
21752
+ grid-column: 1/-1;
21767
21753
  align-self: stretch;
21768
21754
  min-width: 0;
21769
21755
  padding-right: var(--pf-c-page__header-nav--PaddingRight);
21770
21756
  padding-left: var(--pf-c-page__header-nav--PaddingLeft);
21771
21757
  background-color: var(--pf-c-page__header-nav--BackgroundColor);
21772
- grid-column: 1/-1;
21773
- grid-row: 2/3;
21774
21758
  }
21775
21759
  @media screen and (min-width: 1200px) {
21776
21760
  .pf-c-page__header-nav {
21777
- grid-column: 2/3;
21778
21761
  grid-row: 1/2;
21762
+ grid-column: 2/3;
21779
21763
  }
21780
21764
  }
21781
21765
  .pf-c-page__header-nav .pf-c-nav {
@@ -21841,10 +21825,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21841
21825
  }
21842
21826
 
21843
21827
  .pf-c-page__sidebar {
21828
+ z-index: var(--pf-c-page__sidebar--ZIndex);
21844
21829
  grid-area: nav;
21845
21830
  grid-row-start: 2;
21846
21831
  grid-column-start: 1;
21847
- z-index: var(--pf-c-page__sidebar--ZIndex);
21848
21832
  width: var(--pf-c-page__sidebar--Width);
21849
21833
  overflow-x: hidden;
21850
21834
  overflow-y: auto;
@@ -22124,8 +22108,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22124
22108
 
22125
22109
  .pf-c-page__main,
22126
22110
  .pf-c-page__drawer {
22127
- grid-area: main;
22128
22111
  z-index: var(--pf-c-page__main--ZIndex);
22112
+ grid-area: main;
22129
22113
  overflow-x: hidden;
22130
22114
  overflow-y: auto;
22131
22115
  -webkit-overflow-scrolling: touch;
@@ -23224,10 +23208,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23224
23208
  --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
23225
23209
  --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
23226
23210
  display: grid;
23227
- align-items: end;
23228
- grid-gap: var(--pf-c-progress--GridGap);
23229
- grid-template-columns: auto auto;
23230
23211
  grid-template-rows: 1fr auto;
23212
+ grid-template-columns: auto auto;
23213
+ grid-gap: var(--pf-c-progress--GridGap);
23214
+ align-items: end;
23231
23215
  }
23232
23216
  .pf-c-progress.pf-m-sm {
23233
23217
  --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
@@ -23256,8 +23240,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23256
23240
  grid-column: 1/3;
23257
23241
  }
23258
23242
  .pf-c-progress.pf-m-outside .pf-c-progress__status {
23259
- grid-column: 2/3;
23260
23243
  grid-row: 2/3;
23244
+ grid-column: 2/3;
23261
23245
  align-self: center;
23262
23246
  }
23263
23247
  .pf-c-progress.pf-m-outside .pf-c-progress__measure {
@@ -23305,8 +23289,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23305
23289
  }
23306
23290
 
23307
23291
  .pf-c-progress__description {
23308
- word-break: break-word;
23309
23292
  grid-column: 1/2;
23293
+ word-break: break-word;
23310
23294
  }
23311
23295
  .pf-c-progress__description.pf-m-truncate {
23312
23296
  overflow: hidden;
@@ -23316,13 +23300,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23316
23300
 
23317
23301
  .pf-c-progress__status {
23318
23302
  display: flex;
23303
+ grid-row: 1/2;
23304
+ grid-column: 2/3;
23305
+ gap: var(--pf-c-progress__status--Gap);
23319
23306
  align-items: flex-start;
23320
23307
  justify-content: flex-end;
23321
- grid-column: 2/3;
23322
- grid-row: 1/2;
23323
23308
  text-align: right;
23324
23309
  word-break: break-word;
23325
- gap: var(--pf-c-progress__status--Gap);
23326
23310
  }
23327
23311
 
23328
23312
  .pf-c-progress__status-icon {
@@ -23331,8 +23315,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23331
23315
 
23332
23316
  .pf-c-progress__bar {
23333
23317
  position: relative;
23334
- grid-column: 1/3;
23335
23318
  grid-row: 2/3;
23319
+ grid-column: 1/3;
23336
23320
  align-self: center;
23337
23321
  height: var(--pf-c-progress__bar--Height);
23338
23322
  background-color: var(--pf-c-progress__bar--BackgroundColor);
@@ -23357,8 +23341,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23357
23341
  }
23358
23342
 
23359
23343
  .pf-c-progress__helper-text {
23360
- grid-column: 1/3;
23361
23344
  grid-row: 3/4;
23345
+ grid-column: 1/3;
23362
23346
  margin-top: var(--pf-c-progress__helper-text--MarginTop);
23363
23347
  }
23364
23348
 
@@ -23520,10 +23504,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23520
23504
  --pf-c-progress-stepper--m-center__step-main--before--Content: "";
23521
23505
  position: relative;
23522
23506
  display: grid;
23523
- grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
23524
- grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
23525
23507
  grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);
23508
+ grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
23526
23509
  grid-auto-columns: 1fr;
23510
+ grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
23527
23511
  }
23528
23512
  @media screen and (min-width: 768px) {
23529
23513
  .pf-c-progress-stepper {
@@ -23590,8 +23574,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23590
23574
  grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
23591
23575
  }
23592
23576
  .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-connector {
23593
- min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
23594
23577
  grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
23578
+ min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
23595
23579
  padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
23596
23580
  }
23597
23581
  .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-main {
@@ -23708,11 +23692,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23708
23692
  }
23709
23693
  .pf-c-progress-stepper__step-title.pf-m-help-text {
23710
23694
  text-decoration: underline;
23711
- cursor: pointer;
23695
+ text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
23712
23696
  text-decoration-style: dashed;
23713
23697
  text-decoration-color: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor);
23714
- text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
23715
23698
  text-underline-offset: var(--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
23699
+ cursor: pointer;
23716
23700
  }
23717
23701
  .pf-c-progress-stepper__step-title.pf-m-help-text:hover {
23718
23702
  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step-title--m-help-text--hover--Color);
@@ -24135,9 +24119,9 @@ label.pf-c-radio, .pf-c-radio__label,
24135
24119
 
24136
24120
  .pf-c-search-input__text {
24137
24121
  display: grid;
24138
- grid-template-columns: 1fr;
24139
- grid-template-areas: "text-input";
24140
24122
  flex: 1;
24123
+ grid-template-areas: "text-input";
24124
+ grid-template-columns: 1fr;
24141
24125
  }
24142
24126
  .pf-c-search-input__text::before, .pf-c-search-input__text::after {
24143
24127
  position: absolute;
@@ -24660,8 +24644,8 @@ label.pf-c-radio, .pf-c-radio__label,
24660
24644
  .pf-c-select__toggle-typeahead {
24661
24645
  flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
24662
24646
  flex-grow: 1;
24663
- min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
24664
24647
  flex-shrink: 0;
24648
+ min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
24665
24649
  }
24666
24650
  .pf-c-select__toggle-typeahead.pf-c-form-control {
24667
24651
  background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);
@@ -25049,8 +25033,8 @@ label.pf-c-radio, .pf-c-radio__label,
25049
25033
  position: var(--pf-c-sidebar__panel--Position);
25050
25034
  top: var(--pf-c-sidebar__panel--Top);
25051
25035
  z-index: var(--pf-c-sidebar__panel--ZIndex);
25052
- flex-shrink: 0;
25053
25036
  flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
25037
+ flex-shrink: 0;
25054
25038
  order: var(--pf-c-sidebar__panel--Order);
25055
25039
  background-color: var(--pf-c-sidebar__panel--BackgroundColor);
25056
25040
  box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
@@ -25263,9 +25247,9 @@ label.pf-c-radio, .pf-c-radio__label,
25263
25247
  border: none;
25264
25248
  }
25265
25249
  .pf-c-simple-list__item-link:hover {
25266
- text-decoration: none;
25267
25250
  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
25268
25251
  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
25252
+ text-decoration: none;
25269
25253
  }
25270
25254
  .pf-c-simple-list__item-link:focus {
25271
25255
  --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
@@ -25944,13 +25928,13 @@ svg.pf-c-spinner.pf-m-xl {
25944
25928
  .pf-c-spinner__path {
25945
25929
  width: 100%;
25946
25930
  height: 100%;
25947
- transform-origin: 50% 50%;
25948
- animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
25949
25931
  stroke: var(--pf-c-spinner--Color);
25950
- stroke-linecap: round;
25951
25932
  stroke-dasharray: 283;
25952
25933
  stroke-dashoffset: 280;
25934
+ stroke-linecap: round;
25953
25935
  stroke-width: var(--pf-c-spinner--stroke-width);
25936
+ transform-origin: 50% 50%;
25937
+ animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
25954
25938
  }
25955
25939
 
25956
25940
  @keyframes pf-c-spinner-animation-rotate {
@@ -25970,8 +25954,8 @@ svg.pf-c-spinner.pf-m-xl {
25970
25954
  stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
25971
25955
  }
25972
25956
  40% {
25973
- stroke-dashoffset: 150;
25974
25957
  stroke-dasharray: 220;
25958
+ stroke-dashoffset: 150;
25975
25959
  }
25976
25960
  100% {
25977
25961
  stroke-dashoffset: 280;
@@ -28432,9 +28416,9 @@ svg.pf-c-spinner.pf-m-xl {
28432
28416
  .pf-c-table__button-content,
28433
28417
  .pf-c-table__column-help {
28434
28418
  display: grid;
28419
+ grid-template-columns: auto max-content;
28435
28420
  align-items: end;
28436
28421
  justify-content: start;
28437
- grid-template-columns: auto max-content;
28438
28422
  }
28439
28423
  .pf-c-table__button-content .pf-c-table__text,
28440
28424
  .pf-c-table__column-help .pf-c-table__text {
@@ -30692,9 +30676,9 @@ svg.pf-c-spinner.pf-m-xl {
30692
30676
 
30693
30677
  .pf-c-text-input-group__text {
30694
30678
  display: inline-grid;
30695
- grid-template-columns: 1fr;
30696
- grid-template-areas: "text-input";
30697
30679
  flex: 1;
30680
+ grid-template-areas: "text-input";
30681
+ grid-template-columns: 1fr;
30698
30682
  }
30699
30683
  .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
30700
30684
  position: absolute;
@@ -30810,11 +30794,11 @@ svg.pf-c-spinner.pf-m-xl {
30810
30794
  --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
30811
30795
  position: relative;
30812
30796
  display: inline-grid;
30797
+ grid-template-rows: min-content;
30813
30798
  padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
30814
30799
  text-align: center;
30815
30800
  cursor: pointer;
30816
30801
  background-color: var(--pf-c-tile--BackgroundColor);
30817
- grid-template-rows: min-content;
30818
30802
  transition: var(--pf-c-tile--Transition);
30819
30803
  transform: translateY(var(--pf-c-tile--TranslateY));
30820
30804
  }
@@ -30966,12 +30950,12 @@ svg.pf-c-spinner.pf-m-xl {
30966
30950
  outline-offset: var(--pf-c-timestamp--OutlineOffset);
30967
30951
  }
30968
30952
  .pf-c-timestamp.pf-m-help-text {
30969
- cursor: pointer;
30970
30953
  text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
30971
- text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
30972
30954
  text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
30973
- text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
30955
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
30974
30956
  text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
30957
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
30958
+ cursor: pointer;
30975
30959
  }
30976
30960
  .pf-c-timestamp.pf-m-help-text:hover {
30977
30961
  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
@@ -31889,6 +31873,10 @@ label.pf-c-tree-view__node-text {
31889
31873
  --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
31890
31874
  --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
31891
31875
  --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
31876
+ --pf-c-wizard__title-text--FontSize: var(--pf-global--FontSize--3xl);
31877
+ --pf-c-wizard__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
31878
+ --pf-c-wizard__title-text--FontWeight: var(--pf-global--FontWeight--normal);
31879
+ --pf-c-wizard__title-text--LineHeight: var(--pf-global--LineHeight--sm);
31892
31880
  --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
31893
31881
  --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
31894
31882
  --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
@@ -32072,6 +32060,8 @@ label.pf-c-tree-view__node-text {
32072
32060
  position: absolute;
32073
32061
  top: var(--pf-c-wizard__close--Top);
32074
32062
  right: var(--pf-c-wizard__close--Right);
32063
+ }
32064
+ .pf-c-wizard__header .pf-c-wizard__close button {
32075
32065
  font-size: var(--pf-c-wizard__close--FontSize);
32076
32066
  }
32077
32067
 
@@ -32080,6 +32070,13 @@ label.pf-c-tree-view__node-text {
32080
32070
  word-wrap: break-word;
32081
32071
  }
32082
32072
 
32073
+ .pf-c-wizard__title-text {
32074
+ font-family: var(--pf-c-wizard__title-text--FontFamily);
32075
+ font-size: var(--pf-c-wizard__title-text--FontSize);
32076
+ font-weight: var(--pf-c-wizard__title-text--FontWeight);
32077
+ line-height: var(--pf-c-wizard__title-text--LineHeight);
32078
+ }
32079
+
32083
32080
  .pf-c-wizard__description {
32084
32081
  display: none;
32085
32082
  padding-top: var(--pf-c-wizard__description--PaddingTop);
@@ -32328,8 +32325,8 @@ label.pf-c-tree-view__node-text {
32328
32325
  position: relative;
32329
32326
  z-index: var(--pf-c-wizard__footer--ZIndex);
32330
32327
  display: flex;
32331
- flex-wrap: wrap;
32332
32328
  flex-shrink: 0;
32329
+ flex-wrap: wrap;
32333
32330
  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);
32334
32331
  background-color: var(--pf-c-wizard__footer--BackgroundColor);
32335
32332
  }
@@ -34010,8 +34007,8 @@ label.pf-c-tree-view__node-text {
34010
34007
  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
34011
34008
  --pf-l-gallery--GridTemplateRows: auto;
34012
34009
  display: grid;
34013
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
34014
34010
  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
34011
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
34015
34012
  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
34016
34013
  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
34017
34014
  }
@@ -34079,10 +34076,10 @@ label.pf-c-tree-view__node-text {
34079
34076
  }
34080
34077
  .pf-l-grid > *,
34081
34078
  .pf-l-grid .pf-l-grid__item {
34082
- min-width: 0;
34083
- min-height: 0;
34084
34079
  grid-column-start: var(--pf-l-grid__item--GridColumnStart);
34085
34080
  grid-column-end: var(--pf-l-grid__item--GridColumnEnd);
34081
+ min-width: 0;
34082
+ min-height: 0;
34086
34083
  order: var(--pf-l-grid--item--Order);
34087
34084
  }
34088
34085
  @media (min-width: 576px) {