@patternfly/patternfly 5.0.0-prerelease.13 → 5.0.0-prerelease.15

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 (42) hide show
  1. package/assets/images/pf-logo.svg +28 -0
  2. package/components/Badge/badge.css +1 -0
  3. package/components/Badge/badge.scss +1 -0
  4. package/components/Check/check.css +9 -11
  5. package/components/Check/check.scss +11 -11
  6. package/components/Dropdown/dropdown.css +14 -5
  7. package/components/Dropdown/dropdown.scss +17 -6
  8. package/components/MenuToggle/menu-toggle.css +10 -3
  9. package/components/MenuToggle/menu-toggle.scss +14 -3
  10. package/components/Radio/radio.css +8 -10
  11. package/components/Radio/radio.scss +10 -10
  12. package/components/Toolbar/toolbar.css +19 -10
  13. package/components/Toolbar/toolbar.scss +24 -11
  14. package/docs/components/Toolbar/examples/Toolbar.md +1 -2
  15. package/docs/demos/AboutModal/examples/AboutModal.md +6 -14
  16. package/docs/demos/Alert/examples/Alert.md +18 -42
  17. package/docs/demos/BackToTop/examples/BackToTop.md +6 -14
  18. package/docs/demos/Banner/examples/Banner.md +12 -28
  19. package/docs/demos/CardView/examples/CardView.md +6 -14
  20. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -56
  21. package/docs/demos/Dashboard/examples/Dashboard.md +6 -14
  22. package/docs/demos/DataList/examples/DataList.md +24 -56
  23. package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -42
  24. package/docs/demos/Drawer/examples/Drawer.md +30 -70
  25. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -84
  26. package/docs/demos/Masthead/examples/Masthead.md +54 -126
  27. package/docs/demos/Modal/examples/Modal.md +36 -84
  28. package/docs/demos/Nav/examples/Nav.md +48 -112
  29. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -70
  30. package/docs/demos/Page/examples/Page.md +54 -126
  31. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +42 -98
  32. package/docs/demos/Skeleton/examples/Skeleton.md +6 -14
  33. package/docs/demos/Table/examples/Table.md +90 -210
  34. package/docs/demos/Tabs/examples/Tabs.md +36 -84
  35. package/docs/demos/Toolbar/examples/Toolbar.md +12 -28
  36. package/docs/demos/Wizard/examples/Wizard.md +54 -126
  37. package/package.json +1 -1
  38. package/patternfly-no-globals.css +61 -39
  39. package/patternfly-theme-dark-unversioned.css +61 -39
  40. package/patternfly.css +61 -39
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
@@ -26,20 +26,12 @@ wrapperTag: div
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <picture
30
- class="pf-v5-c-brand pf-m-picture"
31
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
32
- >
33
- <source
34
- media="(min-width: 768px)"
35
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
36
- />
37
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
38
- <img
39
- src="/assets/images/logo__pf--reverse--base.png"
40
- alt="Fallback patternFly default logo"
41
- />
42
- </picture>
29
+ <img
30
+ class="pf-v5-c-brand"
31
+ src="/assets/images/pf-logo.svg"
32
+ alt="PatternFly logo"
33
+ style="--pf-v5-c-brand--Height:36px"
34
+ />
43
35
  </a>
44
36
  </div>
45
37
  <div class="pf-v5-c-masthead__content">
@@ -509,20 +501,12 @@ wrapperTag: div
509
501
  </span>
510
502
  <div class="pf-v5-c-masthead__main">
511
503
  <a class="pf-v5-c-masthead__brand" href="#">
512
- <picture
513
- class="pf-v5-c-brand pf-m-picture"
514
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
515
- >
516
- <source
517
- media="(min-width: 768px)"
518
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
519
- />
520
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
521
- <img
522
- src="/assets/images/logo__pf--reverse--base.png"
523
- alt="Fallback patternFly default logo"
524
- />
525
- </picture>
504
+ <img
505
+ class="pf-v5-c-brand"
506
+ src="/assets/images/pf-logo.svg"
507
+ alt="PatternFly logo"
508
+ style="--pf-v5-c-brand--Height:36px"
509
+ />
526
510
  </a>
527
511
  </div>
528
512
  <div class="pf-v5-c-masthead__content">
@@ -974,20 +958,12 @@ wrapperTag: div
974
958
  </span>
975
959
  <div class="pf-v5-c-masthead__main">
976
960
  <a class="pf-v5-c-masthead__brand" href="#">
977
- <picture
978
- class="pf-v5-c-brand pf-m-picture"
979
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
980
- >
981
- <source
982
- media="(min-width: 768px)"
983
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
984
- />
985
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
986
- <img
987
- src="/assets/images/logo__pf--reverse--base.png"
988
- alt="Fallback patternFly default logo"
989
- />
990
- </picture>
961
+ <img
962
+ class="pf-v5-c-brand"
963
+ src="/assets/images/pf-logo.svg"
964
+ alt="PatternFly logo"
965
+ style="--pf-v5-c-brand--Height:36px"
966
+ />
991
967
  </a>
992
968
  </div>
993
969
  <div class="pf-v5-c-masthead__content">
@@ -1520,20 +1496,12 @@ wrapperTag: div
1520
1496
  </span>
1521
1497
  <div class="pf-v5-c-masthead__main">
1522
1498
  <a class="pf-v5-c-masthead__brand" href="#">
1523
- <picture
1524
- class="pf-v5-c-brand pf-m-picture"
1525
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
1526
- >
1527
- <source
1528
- media="(min-width: 768px)"
1529
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1530
- />
1531
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1532
- <img
1533
- src="/assets/images/logo__pf--reverse--base.png"
1534
- alt="Fallback patternFly default logo"
1535
- />
1536
- </picture>
1499
+ <img
1500
+ class="pf-v5-c-brand"
1501
+ src="/assets/images/pf-logo.svg"
1502
+ alt="PatternFly logo"
1503
+ style="--pf-v5-c-brand--Height:36px"
1504
+ />
1537
1505
  </a>
1538
1506
  </div>
1539
1507
  <div class="pf-v5-c-masthead__content">
@@ -2065,20 +2033,12 @@ wrapperTag: div
2065
2033
  </span>
2066
2034
  <div class="pf-v5-c-masthead__main">
2067
2035
  <a class="pf-v5-c-masthead__brand" href="#">
2068
- <picture
2069
- class="pf-v5-c-brand pf-m-picture"
2070
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2071
- >
2072
- <source
2073
- media="(min-width: 768px)"
2074
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2075
- />
2076
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2077
- <img
2078
- src="/assets/images/logo__pf--reverse--base.png"
2079
- alt="Fallback patternFly default logo"
2080
- />
2081
- </picture>
2036
+ <img
2037
+ class="pf-v5-c-brand"
2038
+ src="/assets/images/pf-logo.svg"
2039
+ alt="PatternFly logo"
2040
+ style="--pf-v5-c-brand--Height:36px"
2041
+ />
2082
2042
  </a>
2083
2043
  </div>
2084
2044
  <div class="pf-v5-c-masthead__content">
@@ -2478,20 +2438,12 @@ wrapperTag: div
2478
2438
  </span>
2479
2439
  <div class="pf-v5-c-masthead__main">
2480
2440
  <a class="pf-v5-c-masthead__brand" href="#">
2481
- <picture
2482
- class="pf-v5-c-brand pf-m-picture"
2483
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2484
- >
2485
- <source
2486
- media="(min-width: 768px)"
2487
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2488
- />
2489
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2490
- <img
2491
- src="/assets/images/logo__pf--reverse--base.png"
2492
- alt="Fallback patternFly default logo"
2493
- />
2494
- </picture>
2441
+ <img
2442
+ class="pf-v5-c-brand"
2443
+ src="/assets/images/pf-logo.svg"
2444
+ alt="PatternFly logo"
2445
+ style="--pf-v5-c-brand--Height:36px"
2446
+ />
2495
2447
  </a>
2496
2448
  </div>
2497
2449
  <div class="pf-v5-c-masthead__content">
@@ -2899,20 +2851,12 @@ wrapperTag: div
2899
2851
  </span>
2900
2852
  <div class="pf-v5-c-masthead__main">
2901
2853
  <a class="pf-v5-c-masthead__brand" href="#">
2902
- <picture
2903
- class="pf-v5-c-brand pf-m-picture"
2904
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2905
- >
2906
- <source
2907
- media="(min-width: 768px)"
2908
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2909
- />
2910
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2911
- <img
2912
- src="/assets/images/logo__pf--reverse--base.png"
2913
- alt="Fallback patternFly default logo"
2914
- />
2915
- </picture>
2854
+ <img
2855
+ class="pf-v5-c-brand"
2856
+ src="/assets/images/pf-logo.svg"
2857
+ alt="PatternFly logo"
2858
+ style="--pf-v5-c-brand--Height:36px"
2859
+ />
2916
2860
  </a>
2917
2861
  </div>
2918
2862
  <div class="pf-v5-c-masthead__content">
@@ -3302,20 +3246,12 @@ wrapperTag: div
3302
3246
  </span>
3303
3247
  <div class="pf-v5-c-masthead__main">
3304
3248
  <a class="pf-v5-c-masthead__brand" href="#">
3305
- <picture
3306
- class="pf-v5-c-brand pf-m-picture"
3307
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
3308
- >
3309
- <source
3310
- media="(min-width: 768px)"
3311
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
3312
- />
3313
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
3314
- <img
3315
- src="/assets/images/logo__pf--reverse--base.png"
3316
- alt="Fallback patternFly default logo"
3317
- />
3318
- </picture>
3249
+ <img
3250
+ class="pf-v5-c-brand"
3251
+ src="/assets/images/pf-logo.svg"
3252
+ alt="PatternFly logo"
3253
+ style="--pf-v5-c-brand--Height:36px"
3254
+ />
3319
3255
  </a>
3320
3256
  </div>
3321
3257
  <div class="pf-v5-c-masthead__content">
@@ -3774,20 +3710,12 @@ wrapperTag: div
3774
3710
  </span>
3775
3711
  <div class="pf-v5-c-masthead__main">
3776
3712
  <a class="pf-v5-c-masthead__brand" href="#">
3777
- <picture
3778
- class="pf-v5-c-brand pf-m-picture"
3779
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
3780
- >
3781
- <source
3782
- media="(min-width: 768px)"
3783
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
3784
- />
3785
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
3786
- <img
3787
- src="/assets/images/logo__pf--reverse--base.png"
3788
- alt="Fallback patternFly default logo"
3789
- />
3790
- </picture>
3713
+ <img
3714
+ class="pf-v5-c-brand"
3715
+ src="/assets/images/pf-logo.svg"
3716
+ alt="PatternFly logo"
3717
+ style="--pf-v5-c-brand--Height:36px"
3718
+ />
3791
3719
  </a>
3792
3720
  </div>
3793
3721
  <div class="pf-v5-c-masthead__content">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-prerelease.13",
4
+ "version": "5.0.0-prerelease.15",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -6632,6 +6632,7 @@
6632
6632
  font-weight: var(--pf-v5-c-badge--FontWeight);
6633
6633
  color: var(--pf-v5-c-badge--Color);
6634
6634
  text-align: center;
6635
+ white-space: nowrap;
6635
6636
  background-color: var(--pf-v5-c-badge--BackgroundColor);
6636
6637
  border-radius: var(--pf-v5-c-badge--BorderRadius);
6637
6638
  }
@@ -8107,9 +8108,8 @@ button.pf-v5-c-breadcrumb__link {
8107
8108
  --pf-v5-c-check__label--Color: var(--pf-v5-global--Color--100);
8108
8109
  --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
8109
8110
  --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
8110
- --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--sm);
8111
- --pf-v5-c-check__input--Height: var(--pf-v5-c-check__label--FontSize);
8112
- --pf-v5-c-check__input--MarginTop: calc(((var(--pf-v5-c-check__label--FontSize) * var(--pf-v5-c-check__label--LineHeight)) - var(--pf-v5-c-check__input--Height)) / 2);
8111
+ --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
8112
+ --pf-v5-c-check__input--TranslateY--moz: 5px;
8113
8113
  --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
8114
8114
  --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
8115
8115
  --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
@@ -8122,24 +8122,18 @@ button.pf-v5-c-breadcrumb__link {
8122
8122
  }
8123
8123
  .pf-v5-c-check.pf-m-standalone {
8124
8124
  --pf-v5-c-check--GridGap: 0;
8125
- --pf-v5-c-check__input--Height: auto;
8126
- --pf-v5-c-check__input--MarginTop: 0;
8125
+ --pf-v5-c-check__input--TranslateY--moz: 0;
8127
8126
  display: inline-grid;
8128
- line-height: 1;
8129
8127
  }
8130
8128
 
8131
8129
  .pf-v5-c-check__label {
8130
+ align-self: baseline;
8132
8131
  font-size: var(--pf-v5-c-check__label--FontSize);
8133
8132
  font-weight: var(--pf-v5-c-check__label--FontWeight);
8134
8133
  line-height: var(--pf-v5-c-check__label--LineHeight);
8135
8134
  color: var(--pf-v5-c-check__label--Color);
8136
8135
  }
8137
8136
 
8138
- .pf-v5-c-check__input {
8139
- height: var(--pf-v5-c-check__input--Height);
8140
- margin-top: var(--pf-v5-c-check__input--MarginTop);
8141
- }
8142
-
8143
8137
  .pf-v5-c-check__description {
8144
8138
  grid-column: 2;
8145
8139
  font-size: var(--pf-v5-c-check__description--FontSize);
@@ -8151,6 +8145,11 @@ button.pf-v5-c-breadcrumb__link {
8151
8145
  margin-top: var(--pf-v5-c-check__body--MarginTop);
8152
8146
  }
8153
8147
 
8148
+ .pf-v5-c-check__input {
8149
+ align-self: baseline;
8150
+ -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
8151
+ }
8152
+
8154
8153
  .pf-v5-c-check__label,
8155
8154
  .pf-v5-c-check__input {
8156
8155
  justify-self: start;
@@ -10808,16 +10807,20 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10808
10807
  --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--md);
10809
10808
  --pf-v5-c-toolbar--PaddingBottom: var(--pf-v5-global--spacer--md);
10810
10809
  --pf-v5-c-toolbar--item--RowGap--base: var(--pf-v5-global--spacer--xs);
10811
- --pf-v5-c-toolbar__item--Display: block;
10810
+ --pf-v5-c-toolbar__item--Display: flex;
10812
10811
  --pf-v5-c-toolbar__item--MinWidth--base: auto;
10813
- --pf-v5-c-toolbar__item--AlignSelf: auto;
10814
10812
  --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
10813
+ --pf-v5-c-toolbar__item--AlignSelf: var(--pf-v5-c-toolbar--AlignItems--base);
10815
10814
  --pf-v5-c-toolbar__group--Display: flex;
10815
+ --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
10816
10816
  --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
10817
10817
  --pf-v5-c-toolbar__group--AlignSelf: auto;
10818
- --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
10819
10818
  --pf-v5-c-toolbar--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
10820
10819
  --pf-v5-c-toolbar--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
10820
+ --pf-v5-c-toolbar--m-align-items-center--AlignItems: center;
10821
+ --pf-v5-c-toolbar--m-align-items-baseline--AlignItems: baseline;
10822
+ --pf-v5-c-toolbar--m-align-self-center--AlignSelf: center;
10823
+ --pf-v5-c-toolbar--m-align-self-baseline--AlignSelf: baseline;
10821
10824
  --pf-v5-c-toolbar__content--Display: flex;
10822
10825
  --pf-v5-c-toolbar__content--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
10823
10826
  --pf-v5-c-toolbar__content--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
@@ -10862,7 +10865,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10862
10865
  --pf-v5-c-toolbar__item--m-search-filter--spacer: var(--pf-v5-global--spacer--sm);
10863
10866
  --pf-v5-c-toolbar__item--m-chip-group--spacer: var(--pf-v5-global--spacer--sm);
10864
10867
  --pf-v5-c-toolbar__item--m-label--spacer: var(--pf-v5-c-toolbar__item--spacer);
10868
+ --pf-v5-c-toolbar__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
10865
10869
  --pf-v5-c-toolbar__item--m-label--FontWeight: var(--pf-v5-global--FontWeight--bold);
10870
+ --pf-v5-c-toolbar__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
10866
10871
  --pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-v5-global--spacer--sm));
10867
10872
  --pf-v5-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-v5-global--FontSize--sm);
10868
10873
  --pf-v5-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-v5-global--Color--100);
@@ -10870,7 +10875,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10870
10875
  --pf-v5-c-toolbar--m-full-height--PaddingTop: 0;
10871
10876
  --pf-v5-c-toolbar--m-full-height--PaddingBottom: 0;
10872
10877
  --pf-v5-c-toolbar--m-full-height__item--Display: flex;
10873
- --pf-v5-c-toolbar--m-full-height__item--AlignItems: var(--pf-v5-c-toolbar__group--AlignItems);
10878
+ --pf-v5-c-toolbar--m-full-height__item--AlignItems: center;
10874
10879
  position: relative;
10875
10880
  display: grid;
10876
10881
  row-gap: var(--pf-v5-c-toolbar--RowGap);
@@ -10949,11 +10954,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10949
10954
  }
10950
10955
  .pf-v5-c-toolbar__content-section.pf-m-align-items-center,
10951
10956
  .pf-v5-c-toolbar__group.pf-m-align-items-center {
10952
- align-items: center;
10957
+ --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--m-align-items-center--AlignItems);
10953
10958
  }
10954
10959
  .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline,
10955
10960
  .pf-v5-c-toolbar__group.pf-m-align-items-baseline {
10956
- align-items: baseline;
10961
+ --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--m-align-items-baseline--AlignItems);
10957
10962
  }
10958
10963
  .pf-v5-c-toolbar__content-section.pf-m-align-self-start,
10959
10964
  .pf-v5-c-toolbar__group.pf-m-align-self-start {
@@ -10961,11 +10966,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10961
10966
  }
10962
10967
  .pf-v5-c-toolbar__content-section.pf-m-align-self-center,
10963
10968
  .pf-v5-c-toolbar__group.pf-m-align-self-center {
10964
- align-self: center;
10969
+ --pf-v5-c-toolbar__group--AlignSelf: var(--pf-v5-c-toolbar--m-align-self-center--AlignItems);
10965
10970
  }
10966
10971
  .pf-v5-c-toolbar__content-section.pf-m-align-self-baseline,
10967
10972
  .pf-v5-c-toolbar__group.pf-m-align-self-baseline {
10968
- align-self: baseline;
10973
+ --pf-v5-c-toolbar__group--AlignSelf: var(--pf-v5-c-toolbar--m-align-self-baseline--AlignItems);
10969
10974
  }
10970
10975
 
10971
10976
  .pf-v5-c-toolbar__group {
@@ -11108,6 +11113,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11108
11113
  .pf-v5-c-toolbar__item.pf-m-label {
11109
11114
  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-label--spacer);
11110
11115
  font-weight: var(--pf-v5-c-toolbar__item--m-label--FontWeight);
11116
+ transform: translateY(var(--pf-v5-global--spacer--form-element));
11111
11117
  }
11112
11118
  .pf-v5-c-toolbar__item.pf-m-pagination {
11113
11119
  margin-left: auto;
@@ -11155,7 +11161,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11155
11161
  align-items: flex-start;
11156
11162
  }
11157
11163
  .pf-v5-c-toolbar__content-section.pf-m-align-items-center {
11158
- align-items: center;
11164
+ --pf-v5-c-toolbar__content-section--AlignItems: var(--pf-v5-c-toolbar--m-align-items-center--AlignItems);
11159
11165
  }
11160
11166
  .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline {
11161
11167
  align-items: baseline;
@@ -11191,7 +11197,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11191
11197
  display: grid;
11192
11198
  grid-row-gap: var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap);
11193
11199
  }
11194
- .pf-v5-c-toolbar__expandable-content .pf-m-label {
11200
+ .pf-v5-c-toolbar__expandable-content .pf-v5-c-toolbar__item.pf-m-label {
11195
11201
  margin-bottom: var(--pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom);
11196
11202
  font-size: var(--pf-v5-c-toolbar__expandable-content__item--m-label--FontSize);
11197
11203
  }
@@ -11207,10 +11213,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11207
11213
  .pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__item,
11208
11214
  .pf-v5-c-toolbar__group.pf-m-chip-container .pf-v5-c-toolbar__item {
11209
11215
  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--spacer);
11216
+ --pf-v5-c-toolbar__item--AlignSelf: auto;
11210
11217
  margin-top: var(--pf-v5-c-toolbar__group--m-chip-container__item--MarginTop);
11211
11218
  }
11212
11219
  .pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__group,
11213
11220
  .pf-v5-c-toolbar__group.pf-m-chip-container .pf-v5-c-toolbar__group {
11221
+ --pf-v5-c-toolbar__group--AlignItems: center;
11214
11222
  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
11215
11223
  display: flex;
11216
11224
  flex-wrap: wrap;
@@ -13230,7 +13238,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13230
13238
  --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft: var(--pf-v5-global--spacer--sm);
13231
13239
  --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight: var(--pf-v5-global--spacer--sm);
13232
13240
  --pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
13233
- --pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
13234
13241
  --pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-v5-global--spacer--sm);
13235
13242
  --pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
13236
13243
  --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
@@ -13313,7 +13320,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13313
13320
  --pf-v5-c-dropdown--m-full-height__toggle--PaddingRight: var(--pf-v5-global--spacer--lg);
13314
13321
  --pf-v5-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg);
13315
13322
  position: relative;
13316
- display: inline-block;
13323
+ display: inline-flex;
13324
+ align-items: start;
13317
13325
  max-width: 100%;
13318
13326
  }
13319
13327
  .pf-v5-c-dropdown .pf-v5-c-divider {
@@ -13354,7 +13362,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13354
13362
 
13355
13363
  .pf-v5-c-dropdown__toggle {
13356
13364
  position: relative;
13357
- display: flex;
13365
+ display: inline-flex;
13358
13366
  column-gap: var(--pf-v5-c-dropdown__toggle--ColumnGap);
13359
13367
  align-items: center;
13360
13368
  min-width: var(--pf-v5-c-dropdown__toggle--MinWidth);
@@ -13430,6 +13438,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13430
13438
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check {
13431
13439
  display: flex;
13432
13440
  align-items: center;
13441
+ overflow: hidden;
13433
13442
  cursor: pointer;
13434
13443
  }
13435
13444
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check.pf-m-in-progress {
@@ -13438,9 +13447,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13438
13447
  }
13439
13448
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input,
13440
13449
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check {
13450
+ align-self: revert;
13451
+ width: auto;
13441
13452
  cursor: pointer;
13442
13453
  visibility: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
13443
- transform: translateY(var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
13454
+ }
13455
+ .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check__input {
13456
+ -moz-transform: none;
13444
13457
  }
13445
13458
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-button {
13446
13459
  color: var(--pf-v5-c-dropdown__toggle-button--Color);
@@ -13610,6 +13623,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13610
13623
  white-space: nowrap;
13611
13624
  }
13612
13625
 
13626
+ .pf-v5-c-dropdown__toggle-button {
13627
+ align-self: baseline;
13628
+ }
13629
+
13613
13630
  .pf-v5-c-dropdown__toggle-text {
13614
13631
  flex: 1 1 auto;
13615
13632
  text-align: left;
@@ -13629,12 +13646,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13629
13646
  .pf-v5-c-dropdown__toggle-image {
13630
13647
  display: inline-flex;
13631
13648
  flex-shrink: 0;
13632
- align-self: center;
13633
13649
  line-height: 1;
13634
13650
  }
13635
13651
 
13636
13652
  .pf-v5-c-dropdown__toggle-progress {
13637
13653
  position: absolute;
13654
+ left: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
13638
13655
  visibility: var(--pf-v5-c-dropdown__toggle-progress--Visibility);
13639
13656
  }
13640
13657
  .pf-v5-c-dropdown__toggle-progress .pf-v5-c-spinner {
@@ -18140,6 +18157,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18140
18157
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-v5-global--primary-color--200);
18141
18158
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
18142
18159
  --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
18160
+ --pf-v5-c-menu-toggle__button--AlignSelf: baseline;
18143
18161
  --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
18144
18162
  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
18145
18163
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
@@ -18147,6 +18165,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18147
18165
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18148
18166
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18149
18167
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18168
+ --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
18150
18169
  position: relative;
18151
18170
  display: inline-flex;
18152
18171
  align-items: center;
@@ -18239,6 +18258,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18239
18258
  --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18240
18259
  --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18241
18260
  --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18261
+ align-items: center;
18242
18262
  height: 100%;
18243
18263
  }
18244
18264
  .pf-v5-c-menu-toggle:hover {
@@ -18282,6 +18302,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18282
18302
  .pf-v5-c-menu-toggle.pf-m-typeahead {
18283
18303
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
18284
18304
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
18305
+ --pf-v5-c-menu-toggle__button--AlignSelf: var(--pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf);
18285
18306
  align-items: stretch;
18286
18307
  padding: 0;
18287
18308
  }
@@ -18305,12 +18326,15 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18305
18326
  }
18306
18327
  .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check {
18307
18328
  --pf-v5-c-menu-toggle--PaddingRight: 0;
18308
- --pf-v5-c-check__input--MarginTop: 0;
18309
18329
  --pf-v5-c-check__label--Color: currentcolor;
18310
18330
  --pf-v5-c-check__label--disabled--Color: currentcolor;
18311
18331
  align-items: center;
18312
18332
  align-self: stretch;
18313
18333
  }
18334
+ .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
18335
+ align-self: revert;
18336
+ -moz-transform: none;
18337
+ }
18314
18338
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
18315
18339
  position: absolute;
18316
18340
  top: 0;
@@ -18396,6 +18420,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18396
18420
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
18397
18421
  --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
18398
18422
  --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
18423
+ align-self: var(--pf-v5-c-menu-toggle__button--AlignSelf);
18399
18424
  padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
18400
18425
  padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
18401
18426
  color: inherit;
@@ -18404,7 +18429,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18404
18429
  }
18405
18430
 
18406
18431
  .pf-v5-c-menu-toggle__icon {
18407
- display: inline-flex;
18408
18432
  flex-shrink: 0;
18409
18433
  align-self: center;
18410
18434
  margin-right: var(--pf-v5-c-menu-toggle__icon--MarginRight);
@@ -18420,7 +18444,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18420
18444
 
18421
18445
  .pf-v5-c-menu-toggle__count {
18422
18446
  display: flex;
18423
- align-items: center;
18447
+ flex-wrap: nowrap;
18424
18448
  margin-left: var(--pf-v5-c-menu-toggle__count--MarginLeft);
18425
18449
  }
18426
18450
 
@@ -22963,24 +22987,23 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22963
22987
  --pf-v5-c-radio__label--Color: var(--pf-v5-global--Color--100);
22964
22988
  --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
22965
22989
  --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
22966
- --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--sm);
22967
- --pf-v5-c-radio__input--Height: var(--pf-v5-c-radio__label--FontSize);
22968
- --pf-v5-c-radio__input--MarginTop: calc(((var(--pf-v5-c-radio__label--FontSize) * var(--pf-v5-c-radio__label--LineHeight)) - var(--pf-v5-c-radio__input--Height)) / 2);
22990
+ --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--md);
22991
+ --pf-v5-c-radio__input--TranslateY--moz: 5px;
22969
22992
  --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
22970
22993
  --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
22971
22994
  --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
22972
22995
  --pf-v5-c-radio__description--Color: var(--pf-v5-global--Color--200);
22973
22996
  --pf-v5-c-radio__body--MarginTop: var(--pf-v5-global--spacer--sm);
22974
- display: grid;
22997
+ display: inline-grid;
22975
22998
  grid-template-columns: auto 1fr;
22976
22999
  grid-gap: var(--pf-v5-c-radio--GridGap);
23000
+ align-items: baseline;
23001
+ width: 100%;
22977
23002
  }
22978
23003
  .pf-v5-c-radio.pf-m-standalone {
22979
23004
  --pf-v5-c-radio--GridGap: 0;
22980
- --pf-v5-c-radio__input--Height: auto;
22981
- --pf-v5-c-radio__input--MarginTop: 0;
22982
- display: inline-grid;
22983
- line-height: 1;
23005
+ --pf-v5-c-radio__input--TranslateY--moz: 0;
23006
+ width: auto;
22984
23007
  }
22985
23008
 
22986
23009
  .pf-v5-c-radio__label {
@@ -22991,8 +23014,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22991
23014
  }
22992
23015
 
22993
23016
  .pf-v5-c-radio__input {
22994
- height: var(--pf-v5-c-radio__input--Height);
22995
- margin-top: var(--pf-v5-c-radio__input--MarginTop);
23017
+ -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
22996
23018
  }
22997
23019
  .pf-v5-c-radio__input:first-child {
22998
23020
  margin-left: var(--pf-v5-c-radio__input--first-child--MarginLeft);