@patternfly/patternfly 5.2.0-prerelease.1 → 5.2.0-prerelease.3

package/components/Toolbar/toolbar.css

@@ -115,6 +115,9 @@
   --pf-v5-c-toolbar__item--m-label--spacer: var(--pf-v5-c-toolbar__item--spacer);
   --pf-v5-c-toolbar__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__item--m-label--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-toolbar__item--m-form-element--spacer: var(--pf-v5-c-toolbar__item--spacer);
+  --pf-v5-c-toolbar__item--m-form-element--TranslateY: var(--pf-v5-global--spacer--form-element);
+  --pf-v5-c-toolbar__item--m-form-element--FontWeight: var(--pf-v5-global--FontWeight--bold);
   --pf-v5-c-toolbar__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
   --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));
   --pf-v5-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -361,7 +364,12 @@
 .pf-v5-c-toolbar__item.pf-m-label {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-label--spacer);
   font-weight: var(--pf-v5-c-toolbar__item--m-label--FontWeight);
-  transform: translateY(var(--pf-v5-global--spacer--form-element));
+  transform: translateY(var(--pf-v5-c-toolbar__item--m-label--TranslateY));
+}
+.pf-v5-c-toolbar__item.pf-m-form-element {
+  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-form-element--spacer);
+  font-weight: var(--pf-v5-c-toolbar__item--m-form-element--FontWeight);
+  transform: translateY(var(--pf-v5-c-toolbar__item--m-form-element--TranslateY));
 }
 .pf-v5-c-toolbar__item.pf-m-pagination {
   margin-inline-start: auto;

package/components/Toolbar/toolbar.scss

@@ -117,11 +117,16 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   // Label
   --#{$toolbar}__item--m-label--spacer: var(--#{$toolbar}__item--spacer);
-  --#{$toolbar}__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
+  --#{$toolbar}__item--m-label--TranslateY: var(--#{$pf-global}--spacer--form-element);
   --#{$toolbar}__item--m-label--FontWeight: var(--#{$pf-global}--FontWeight--bold);
 
+  // Form control inline
+  --#{$toolbar}__item--m-form-element--spacer: var(--#{$toolbar}__item--spacer);
+  --#{$toolbar}__item--m-form-element--TranslateY: var(--#{$pf-global}--spacer--form-element);
+  --#{$toolbar}__item--m-form-element--FontWeight: var(--#{$pf-global}--FontWeight--bold);
+
   // Input
-  --#{$toolbar}__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
+  --#{$toolbar}__item--m-form-control--TranslateY: var(--#{$pf-global}--spacer--form-element);
 
   // Label in expanded content
   --#{$toolbar}__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--#{$toolbar}__expandable-content--m-expanded--GridRowGap) + var(--#{$pf-global}--spacer--sm));
@@ -379,7 +384,15 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-label--spacer);
 
     font-weight: var(--#{$toolbar}__item--m-label--FontWeight);
-    transform: translateY(var(--#{$pf-global}--spacer--form-element));
+    transform: translateY(var(--#{$toolbar}__item--m-label--TranslateY));
+  }
+
+  // Form element
+  &.pf-m-form-element {
+    --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-form-element--spacer);
+
+    font-weight: var(--#{$toolbar}__item--m-form-element--FontWeight);
+    transform: translateY(var(--#{$toolbar}__item--m-form-element--TranslateY));
   }
 
   // Total items

package/docs/components/Brand/examples/Brand.css

@@ -0,0 +1,12 @@
+.show-dark,
+:where(.pf-v5-theme-dark) .show-light {
+  display: none;
+}
+
+:where(.pf-v5-theme-dark) .show-dark {
+  display: revert;
+}
+
+:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+  display: inline-flex;
+}

package/docs/components/Brand/examples/Brand.md

@@ -1,48 +1,91 @@
 ---
 id: Brand
 section: components
----## Examples
+---import './Brand.css'
+
+## Examples
 
 ### Basic
 
 ```html
-<img
-  class="pf-v5-c-brand"
-  src="/assets/images/pf_logo.svg"
-  alt="PatternFly logo"
-/>
+<div class="show-light">
+  <img
+    class="pf-v5-c-brand"
+    src="/assets/images/pf_logo.svg"
+    alt="PatternFly logo"
+  />
+</div>
+
+<div class="show-dark">
+  <img
+    class="pf-v5-c-brand"
+    src="/assets/images/pf_logo_white.svg"
+    alt="PatternFly logo"
+  />
+</div>
 
 ```
 
 ### Responsive
 
 ```html
-<picture
-  class="pf-v5-c-brand pf-m-picture"
-  style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
->
-  <source
-    media="(min-width: 1200px)"
-    srcset="/assets/images/pf-c-brand__logo-on-xl.svg"
-  />
-  <source
-    media="(min-width: 992px)"
-    srcset="/assets/images/pf-c-brand__logo-on-lg.svg"
-  />
-  <source
-    media="(min-width: 768px)"
-    srcset="/assets/images/pf-c-brand__logo-on-md.svg"
-  />
-  <source
-    media="(min-width: 576px)"
-    srcset="/assets/images/pf-c-brand__logo-on-sm.svg"
-  />
-  <source srcset="/assets/images/pf-c-brand__logo.svg" />
-  <img
-    src="/assets/images/pf-c-brand__logo-base.jpg"
-    alt="Fallback patternFly default logo"
-  />
-</picture>
+<div class="show-light">
+  <picture
+    class="pf-v5-c-brand pf-m-picture"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
+  >
+    <source
+      media="(min-width: 1200px)"
+      srcset="/assets/images/pf-c-brand__logo-on-xl.svg"
+    />
+    <source
+      media="(min-width: 992px)"
+      srcset="/assets/images/pf-c-brand__logo-on-lg.svg"
+    />
+    <source
+      media="(min-width: 768px)"
+      srcset="/assets/images/pf-c-brand__logo-on-md.svg"
+    />
+    <source
+      media="(min-width: 576px)"
+      srcset="/assets/images/pf-c-brand__logo-on-sm.svg"
+    />
+    <source srcset="/assets/images/pf-c-brand__logo.svg" />
+    <img
+      src="/assets/images/pf_logo.svg"
+      alt="Fallback patternFly default logo"
+    />
+  </picture>
+</div>
+
+<div class="show-dark">
+  <picture
+    class="pf-v5-c-brand pf-m-picture"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
+  >
+    <source
+      media="(min-width: 1200px)"
+      srcset="/assets/images/pf-c-brand__logo-on-xl-white.svg"
+    />
+    <source
+      media="(min-width: 992px)"
+      srcset="/assets/images/pf-c-brand__logo-on-lg-white.svg"
+    />
+    <source
+      media="(min-width: 768px)"
+      srcset="/assets/images/pf-c-brand__logo-on-md-white.svg"
+    />
+    <source
+      media="(min-width: 576px)"
+      srcset="/assets/images/pf-c-brand__logo-on-sm-white.svg"
+    />
+    <source srcset="/assets/images/pf-c-brand__logo-white.svg" />
+    <img
+      src="/assets/images/pf_logo-white.svg"
+      alt="Fallback patternFly default logo"
+    />
+  </picture>
+</div>
 
 ```
 

package/docs/components/Card/examples/Card.md

@@ -25,7 +25,61 @@ cssPrefix: pf-v5-c-card
 <div class="pf-v5-c-card" id="card-action-example-1">
   <div class="pf-v5-c-card__header">
     <div class="pf-v5-c-card__header-main">
-      <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 706.3 132.5"
+        fill="currentColor"
+        width="300px"
+      >
+        <g>
+          <path
+            d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
+                c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
+                c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
+                c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
+                c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
+          />
+          <path
+            d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
+                c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
+          />
+          <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
+          <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
+          <path
+            d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
+          />
+          <path
+            d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
+                c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
+                l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
+                c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
+                H478.9z"
+          />
+          <path
+            d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
+                c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
+                c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
+          />
+          <path
+            d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
+          />
+          <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
+          <path
+            d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
+          />
+        </g>
+        <g>
+          <path
+            d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
+                l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
+                l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
+                L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
+                l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
+                L101.1,70z"
+          />
+        </g>
+      </svg>
     </div>
     <div class="pf-v5-c-card__actions">
       <div class="pf-v5-c-dropdown">
@@ -293,7 +347,61 @@ cssPrefix: pf-v5-c-card
 <div class="pf-v5-c-card" id="card-image-head-example">
   <div class="pf-v5-c-card__header">
     <div class="pf-v5-c-card__header-main">
-      <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 706.3 132.5"
+        fill="currentColor"
+        width="300px"
+      >
+        <g>
+          <path
+            d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
+                c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
+                c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
+                c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
+                c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
+          />
+          <path
+            d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
+                c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
+          />
+          <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
+          <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
+          <path
+            d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
+          />
+          <path
+            d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
+                c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
+                l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
+                c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
+                H478.9z"
+          />
+          <path
+            d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
+                c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
+                c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
+          />
+          <path
+            d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
+          />
+          <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
+          <path
+            d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
+          />
+        </g>
+        <g>
+          <path
+            d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
+                l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
+                l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
+                L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
+                l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
+                L101.1,70z"
+          />
+        </g>
+      </svg>
     </div>
   </div>
   <div class="pf-v5-c-card__title">

package/docs/components/Toolbar/examples/Toolbar.md

@@ -4593,16 +4593,18 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-m-full-height` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
 | `.pf-m-static` | `.pf-v5-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
 | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
-| `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Initiates bulk select spacing. |
-| `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Initiates overflow menu spacing. |
-| `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Initiates pagination spacing and margin. |
-| `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Initiates search filter spacing. |
-| `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Initiates chip group spacing. |
-| `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Initiates an item for an expand all button. |
+| `.pf-m-label` | `.pf-v5-c-toolbar__item` | Modifies label vertical positioning. |
+| `.pf-m-form-element` | `.pf-v5-c-toolbar__item` | Modifies form element vertical positioning. |
+| `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Modifies bulk select spacing. |
+| `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Modifies overflow menu spacing. |
+| `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Modifies pagination spacing and margin. |
+| `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Modifies search filter spacing. |
+| `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Modifies chip group spacing. |
+| `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Modifies an item for an expand all button. |
 | `.pf-m-expanded` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
-| `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Initiates button group spacing. |
-| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Initiates icon button group spacing. |
-| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Initiates filter group spacing. |
+| `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Modifies button group spacing. |
+| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies icon button group spacing. |
+| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies filter group spacing. |
 | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.2.0-prerelease.1",
+  "version": "5.2.0-prerelease.3",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -45,7 +45,7 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.0.1",
-    "@patternfly/documentation-framework": "5.2.17",
+    "@patternfly/documentation-framework": "5.2.20",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "5.1.1",
     "@patternfly/react-core": "5.1.1",

package/patternfly-no-globals.css

@@ -8211,7 +8211,8 @@ button.pf-v5-c-breadcrumb__link {
   --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-check__input--TranslateY--moz: 5px;
+  --pf-v5-c-check__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%);
+  --pf-v5-c-check__input--TranslateY--moz: var(--pf-v5-c-check__input--TranslateY);
   --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
   --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
@@ -8221,15 +8222,21 @@ button.pf-v5-c-breadcrumb__link {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-v5-c-check--GridGap);
+  align-items: baseline;
 }
 .pf-v5-c-check.pf-m-standalone {
   --pf-v5-c-check--GridGap: 0;
-  --pf-v5-c-check__input--TranslateY--moz: 0;
+  --pf-v5-c-check__input--TranslateY: none;
   display: inline-grid;
 }
 
+.pf-v5-c-check__input {
+  align-self: start;
+  -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
+  transform: translateY(var(--pf-v5-c-check__input--TranslateY));
+}
+
 .pf-v5-c-check__label {
-  align-self: baseline;
   font-size: var(--pf-v5-c-check__label--FontSize);
   font-weight: var(--pf-v5-c-check__label--FontWeight);
   line-height: var(--pf-v5-c-check__label--LineHeight);
@@ -8247,11 +8254,6 @@ button.pf-v5-c-breadcrumb__link {
   margin-block-start: var(--pf-v5-c-check__body--MarginTop);
 }
 
-.pf-v5-c-check__input {
-  align-self: baseline;
-  -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
-}
-
 .pf-v5-c-check__label,
 .pf-v5-c-check__input {
   justify-self: start;
@@ -11017,6 +11019,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-toolbar__item--m-label--spacer: var(--pf-v5-c-toolbar__item--spacer);
   --pf-v5-c-toolbar__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__item--m-label--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-toolbar__item--m-form-element--spacer: var(--pf-v5-c-toolbar__item--spacer);
+  --pf-v5-c-toolbar__item--m-form-element--TranslateY: var(--pf-v5-global--spacer--form-element);
+  --pf-v5-c-toolbar__item--m-form-element--FontWeight: var(--pf-v5-global--FontWeight--bold);
   --pf-v5-c-toolbar__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
   --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));
   --pf-v5-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -11263,7 +11268,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 .pf-v5-c-toolbar__item.pf-m-label {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-label--spacer);
   font-weight: var(--pf-v5-c-toolbar__item--m-label--FontWeight);
-  transform: translateY(var(--pf-v5-global--spacer--form-element));
+  transform: translateY(var(--pf-v5-c-toolbar__item--m-label--TranslateY));
+}
+.pf-v5-c-toolbar__item.pf-m-form-element {
+  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-form-element--spacer);
+  font-weight: var(--pf-v5-c-toolbar__item--m-form-element--FontWeight);
+  transform: translateY(var(--pf-v5-c-toolbar__item--m-form-element--TranslateY));
 }
 .pf-v5-c-toolbar__item.pf-m-pagination {
   margin-inline-start: auto;
@@ -13665,14 +13675,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input,
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check {
+  --pf-v5-c-check__input--TranslateY: none;
   align-self: revert;
   width: auto;
   cursor: pointer;
   visibility: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
 }
-.pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check__input {
-  -moz-transform: none;
-}
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-button {
   color: var(--pf-v5-c-dropdown__toggle-button--Color);
   background-color: var(--pf-v5-c-dropdown__toggle-button--BackgroundColor);
@@ -18241,6 +18249,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   align-items: center;
   margin-inline-end: var(--pf-v5-c-menu__item-check--MarginRight);
 }
+.pf-v5-c-menu__item-check .pf-v5-c-check {
+  --pf-v5-c-check__input--TranslateY: none;
+}
 
 .pf-v5-c-menu__item-toggle-icon {
   padding-inline-start: var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft);
@@ -18622,8 +18633,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   align-self: stretch;
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
-  align-self: revert;
-  -moz-transform: none;
+  align-self: center;
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
   position: absolute;
@@ -23453,7 +23463,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-radio__input--TranslateY--moz: 5px;
+  --pf-v5-c-radio__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%);
+  --pf-v5-c-radio__input--TranslateY--moz: var(--pf-v5-c-radio__input--TranslateY);
   --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
   --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
   --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -23466,19 +23477,14 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 }
 .pf-v5-c-radio.pf-m-standalone {
   --pf-v5-c-radio--GridGap: 0;
-  --pf-v5-c-radio__input--TranslateY--moz: 0;
-  width: auto;
-}
-
-.pf-v5-c-radio__label {
-  font-size: var(--pf-v5-c-radio__label--FontSize);
-  font-weight: var(--pf-v5-c-radio__label--FontWeight);
-  line-height: var(--pf-v5-c-radio__label--LineHeight);
-  color: var(--pf-v5-c-radio__label--Color);
+  --pf-v5-c-radio__input--TranslateY: none;
+  display: inline-grid;
 }
 
 .pf-v5-c-radio__input {
+  align-self: start;
   -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
+  transform: translateY(var(--pf-v5-c-radio__input--TranslateY));
 }
 .pf-v5-c-radio__input:first-child {
   margin-inline-start: var(--pf-v5-c-radio__input--first-child--MarginLeft);
@@ -23487,6 +23493,13 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   margin-inline-end: var(--pf-v5-c-radio__input--last-child--MarginRight);
 }
 
+.pf-v5-c-radio__label {
+  font-size: var(--pf-v5-c-radio__label--FontSize);
+  font-weight: var(--pf-v5-c-radio__label--FontWeight);
+  line-height: var(--pf-v5-c-radio__label--LineHeight);
+  color: var(--pf-v5-c-radio__label--Color);
+}
+
 .pf-v5-c-radio__description {
   grid-column: 2;
   font-size: var(--pf-v5-c-radio__description--FontSize);
@@ -25099,7 +25112,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
   cursor: pointer;
   opacity: 0;
 }
-.pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle {
+.pf-v5-c-switch__input:focus-visible ~ .pf-v5-c-switch__toggle {
   outline: var(--pf-v5-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v5-c-switch__input--focus__toggle--OutlineColor);
   outline-offset: var(--pf-v5-c-switch__input--focus__toggle--OutlineOffset);
 }
@@ -26957,7 +26970,8 @@ svg.pf-v5-c-spinner.pf-m-xl {
   --pf-v5-c-table__button--OutlineOffset: calc(var(--pf-v5-global--BorderWidth--lg) * -1);
   --pf-v5-c-table--m-compact__toggle--PaddingTop: 0;
   --pf-v5-c-table--m-compact__toggle--PaddingBottom: 0;
-  --pf-v5-c-table__check--input--MarginTop: 0.25rem;
+  --pf-v5-c-table__check--input--MarginTop: 0.1875rem;
+  --pf-v5-c-table__thead__check--input--TranslateY: var(--pf-v5-c-table__check--input--MarginTop);
   --pf-v5-c-table__check--input--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-table--cell--m-favorite--Color: var(--pf-v5-global--Color--light-300);
   --pf-v5-c-table__favorite--c-button--Color: var(--pf-v5-global--Color--light-300);
@@ -27590,13 +27604,16 @@ svg.pf-v5-c-spinner.pf-m-xl {
   cursor: pointer;
 }
 .pf-v5-c-table__check label {
-  display: block;
+  display: inline-flex;
   padding: inherit;
   margin-block-start: calc(var(--pf-v5-c-table--cell--PaddingTop) * -1);
   margin-block-end: calc(var(--pf-v5-c-table--cell--PaddingBottom) * -1);
   margin-inline-start: calc(var(--pf-v5-c-table--cell--PaddingLeft) * -1);
   margin-inline-end: calc(var(--pf-v5-c-table--cell--PaddingRight) * -1);
 }
+.pf-v5-c-table__thead .pf-v5-c-check.pf-m-standalone {
+  --pf-v5-c-check__input--TranslateY: var(--pf-v5-c-table__thead__check--input--TranslateY);
+}
 
 .pf-v5-c-table__favorite .pf-v5-c-button {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-table__favorite--c-button--Color);