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

package/assets/images/pf-logo.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>

package/components/Badge/badge.css

@@ -18,6 +18,7 @@
   font-weight: var(--pf-v5-c-badge--FontWeight);
   color: var(--pf-v5-c-badge--Color);
   text-align: center;
+  white-space: nowrap;
   background-color: var(--pf-v5-c-badge--BackgroundColor);
   border-radius: var(--pf-v5-c-badge--BorderRadius);
 }

package/components/Badge/badge.scss

@@ -24,6 +24,7 @@
   font-weight: var(--#{$badge}--FontWeight);
   color: var(--#{$badge}--Color);
   text-align: center;
+  white-space: nowrap;
   background-color: var(--#{$badge}--BackgroundColor);
   border-radius: var(--#{$badge}--BorderRadius);
 

package/components/Check/check.css

@@ -4,9 +4,8 @@
   --pf-v5-c-check__label--Color: var(--pf-v5-global--Color--100);
   --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--sm);
-  --pf-v5-c-check__input--Height: var(--pf-v5-c-check__label--FontSize);
-  --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);
+  --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
+  --pf-v5-c-check__input--TranslateY--moz: 5px;
   --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);
@@ -19,24 +18,18 @@
 }
 .pf-v5-c-check.pf-m-standalone {
   --pf-v5-c-check--GridGap: 0;
-  --pf-v5-c-check__input--Height: auto;
-  --pf-v5-c-check__input--MarginTop: 0;
+  --pf-v5-c-check__input--TranslateY--moz: 0;
   display: inline-grid;
-  line-height: 1;
 }
 
 .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);
   color: var(--pf-v5-c-check__label--Color);
 }
 
-.pf-v5-c-check__input {
-  height: var(--pf-v5-c-check__input--Height);
-  margin-top: var(--pf-v5-c-check__input--MarginTop);
-}
-
 .pf-v5-c-check__description {
   grid-column: 2;
   font-size: var(--pf-v5-c-check__description--FontSize);
@@ -48,6 +41,11 @@
   margin-top: 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;

package/components/Check/check.scss

@@ -6,9 +6,8 @@
   --#{$check}__label--Color: var(--#{$pf-global}--Color--100);
   --#{$check}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$check}__label--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$check}__label--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$check}__input--Height: var(--#{$check}__label--FontSize);
-  --#{$check}__input--MarginTop: calc(((var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight)) - var(--#{$check}__input--Height)) / 2);
+  --#{$check}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
+  --#{$check}__input--TranslateY--moz: 5px;
   --#{$check}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
   --#{$check}__description--Color: var(--#{$pf-global}--Color--200);
   --#{$check}__body--MarginTop: var(--#{$pf-global}--spacer--sm);
@@ -24,26 +23,20 @@
 
   &.pf-m-standalone {
     --#{$check}--GridGap: 0;
-    --#{$check}__input--Height: auto;
-    --#{$check}__input--MarginTop: 0;
+    --#{$check}__input--TranslateY--moz: 0;
 
     display: inline-grid;
-    line-height: 1;
   }
 }
 
 .#{$check}__label {
+  align-self: baseline;
   font-size: var(--#{$check}__label--FontSize);
   font-weight: var(--#{$check}__label--FontWeight);
   line-height: var(--#{$check}__label--LineHeight);
   color: var(--#{$check}__label--Color);
 }
 
-.#{$check}__input {
-  height: var(--#{$check}__input--Height);
-  margin-top: var(--#{$check}__input--MarginTop);
-}
-
 .#{$check}__description {
   grid-column: 2;
   font-size: var(--#{$check}__description--FontSize);
@@ -55,6 +48,13 @@
   margin-top: var(--#{$check}__body--MarginTop);
 }
 
+// stylelint-disable property-no-vendor-prefix
+.#{$check}__input {
+  align-self: baseline;
+  -moz-transform: translateY(var(--#{$check}__input--TranslateY--moz));
+}
+// stylelint-enable
+
 .#{$check}__label,
 .#{$check}__input {
   justify-self: start;

package/components/Dropdown/dropdown.css

@@ -64,7 +64,6 @@
   --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
-  --pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
   --pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
   --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
@@ -147,7 +146,8 @@
   --pf-v5-c-dropdown--m-full-height__toggle--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg);
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: start;
   max-width: 100%;
 }
 .pf-v5-c-dropdown .pf-v5-c-divider {
@@ -188,7 +188,7 @@
 
 .pf-v5-c-dropdown__toggle {
   position: relative;
-  display: flex;
+  display: inline-flex;
   column-gap: var(--pf-v5-c-dropdown__toggle--ColumnGap);
   align-items: center;
   min-width: var(--pf-v5-c-dropdown__toggle--MinWidth);
@@ -264,6 +264,7 @@
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check {
   display: flex;
   align-items: center;
+  overflow: hidden;
   cursor: pointer;
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check.pf-m-in-progress {
@@ -272,9 +273,13 @@
 }
 .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 {
+  align-self: revert;
+  width: auto;
   cursor: pointer;
   visibility: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
-  transform: translateY(var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
+}
+.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);
@@ -444,6 +449,10 @@
   white-space: nowrap;
 }
 
+.pf-v5-c-dropdown__toggle-button {
+  align-self: baseline;
+}
+
 .pf-v5-c-dropdown__toggle-text {
   flex: 1 1 auto;
   text-align: left;
@@ -463,12 +472,12 @@
 .pf-v5-c-dropdown__toggle-image {
   display: inline-flex;
   flex-shrink: 0;
-  align-self: center;
   line-height: 1;
 }
 
 .pf-v5-c-dropdown__toggle-progress {
   position: absolute;
+  left: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
   visibility: var(--pf-v5-c-dropdown__toggle-progress--Visibility);
 }
 .pf-v5-c-dropdown__toggle-progress .pf-v5-c-spinner {

package/components/Dropdown/dropdown.scss

@@ -80,7 +80,6 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   --#{$dropdown}__toggle--m-split-button--m-action--child--PaddingLeft: var(--#{$pf-global}--spacer--sm);
   --#{$dropdown}__toggle--m-split-button--m-action--child--PaddingRight: var(--#{$pf-global}--spacer--sm);
   --#{$dropdown}__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--#{$pf-global}--BorderWidth--sm));
-  --#{$dropdown}__toggle--m-split-button__toggle-check__input--TranslateY: #{pf-size-prem(-1px)};
   --#{$dropdown}__toggle--m-split-button__toggle-text--MarginLeft: var(--#{$pf-global}--spacer--sm);
   --#{$dropdown}__toggle--m-split-button--child--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
 
@@ -189,9 +188,9 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   --#{$dropdown}--m-full-height__toggle--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$dropdown}--m-full-height__toggle--PaddingLeft: var(--#{$pf-global}--spacer--lg);
 
-
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: start;
   max-width: 100%;
 
   .#{$divider} {
@@ -244,7 +243,7 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
 .#{$dropdown}__toggle {
   position: relative;
-  display: flex;
+  display: inline-flex;
   column-gap: var(--#{$dropdown}__toggle--ColumnGap);
   align-items: center;
   min-width: var(--#{$dropdown}__toggle--MinWidth);
@@ -346,6 +345,7 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
     .#{$dropdown}__toggle-check {
       display: flex;
       align-items: center;
+      overflow: hidden;
       cursor: pointer;
 
       &.pf-m-in-progress {
@@ -355,9 +355,16 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
       > input,
       .#{$check} {
+        align-self: revert;
+        width: auto;
         cursor: pointer;
         visibility: var(--#{$dropdown}__toggle--m-split-button__toggle-check__input--Visibility, unset);
-        transform: translateY(var(--#{$dropdown}__toggle--m-split-button__toggle-check__input--TranslateY));
+      }
+
+      .#{$check}__input {
+        // stylelint-disable property-no-vendor-prefix
+        -moz-transform: none;
+        // stylelint-enable
       }
     }
 
@@ -608,6 +615,10 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   }
 }
 
+.#{$dropdown}__toggle-button {
+  align-self: baseline;
+}
+
 .#{$dropdown}__toggle-text {
   flex: 1 1 auto;
   text-align: left;
@@ -630,13 +641,13 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 .#{$dropdown}__toggle-image {
   display: inline-flex;
   flex-shrink: 0;
-  align-self: center;
   line-height: 1;
 }
 
 // Loading spinner
 .#{$dropdown}__toggle-progress {
   position: absolute;
+  left: var(--#{$dropdown}__toggle--m-split-button--child--PaddingLeft);
   visibility: var(--#{$dropdown}__toggle-progress--Visibility);
 
   .#{$spinner} {

package/components/MenuToggle/menu-toggle.css

@@ -108,6 +108,7 @@
   --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-v5-global--primary-color--200);
   --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
   --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
+  --pf-v5-c-menu-toggle__button--AlignSelf: baseline;
   --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
@@ -115,6 +116,7 @@
   --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -207,6 +209,7 @@
   --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
   --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
   --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
+  align-items: center;
   height: 100%;
 }
 .pf-v5-c-menu-toggle:hover {
@@ -250,6 +253,7 @@
 .pf-v5-c-menu-toggle.pf-m-typeahead {
   --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
   --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
+  --pf-v5-c-menu-toggle__button--AlignSelf: var(--pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf);
   align-items: stretch;
   padding: 0;
 }
@@ -273,12 +277,15 @@
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check {
   --pf-v5-c-menu-toggle--PaddingRight: 0;
-  --pf-v5-c-check__input--MarginTop: 0;
   --pf-v5-c-check__label--Color: currentcolor;
   --pf-v5-c-check__label--disabled--Color: currentcolor;
   align-items: center;
   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;
+}
 .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;
   top: 0;
@@ -364,6 +371,7 @@
   --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
   --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
   --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
+  align-self: var(--pf-v5-c-menu-toggle__button--AlignSelf);
   padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
   padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
   color: inherit;
@@ -372,7 +380,6 @@
 }
 
 .pf-v5-c-menu-toggle__icon {
-  display: inline-flex;
   flex-shrink: 0;
   align-self: center;
   margin-right: var(--pf-v5-c-menu-toggle__icon--MarginRight);
@@ -388,7 +395,7 @@
 
 .pf-v5-c-menu-toggle__count {
   display: flex;
-  align-items: center;
+  flex-wrap: nowrap;
   margin-left: var(--pf-v5-c-menu-toggle__count--MarginLeft);
 }
 

package/components/MenuToggle/menu-toggle.scss

@@ -153,6 +153,7 @@
 
   // Split button, controls, check
   --#{$menu-toggle}__button--BackgroundColor: transparent;
+  --#{$menu-toggle}__button--AlignSelf: baseline;
   --#{$menu-toggle}__button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}__button__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
@@ -162,6 +163,7 @@
   --#{$menu-toggle}--m-typeahead__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}--m-typeahead__controls--MarginLeft: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
+  --#{$menu-toggle}--m-typeahead__button--AlignSelf: center;
 
   position: relative;
   display: inline-flex;
@@ -275,6 +277,7 @@
     --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth);
     --#{$menu-toggle}--active--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--active--after--BorderBottomWidth);
 
+    align-items: center;
     height: 100%;
   }
 
@@ -333,6 +336,7 @@
   &.pf-m-typeahead {
     --#{$menu-toggle}__button__controls--MarginRight: var(--#{$menu-toggle}--m-typeahead__controls--MarginRight);
     --#{$menu-toggle}__button__controls--MarginLeft: var(--#{$menu-toggle}--m-typeahead__controls--MarginLeft);
+    --#{$menu-toggle}__button--AlignSelf: var(--#{$menu-toggle}--m-typeahead__button--AlignSelf);
 
     align-items: stretch;
     padding: 0;
@@ -365,12 +369,19 @@
 
     > .#{$check} {
       --#{$menu-toggle}--PaddingRight: 0;
-      --#{$check}__input--MarginTop: 0;
       --#{$check}__label--Color: currentcolor;
       --#{$check}__label--disabled--Color: currentcolor;
 
       align-items: center;
       align-self: stretch;
+
+      .#{$check}__input {
+        align-self: revert;
+
+        // stylelint-disable property-no-vendor-prefix
+        -moz-transform: none;
+        // stylelint-enable
+      }
     }
 
     // Split button, active
@@ -507,6 +518,7 @@
   --#{$menu-toggle}__controls--MarginRight: var(--#{$menu-toggle}__button__controls--MarginRight);
   --#{$menu-toggle}__controls--MarginLeft: var(--#{$menu-toggle}__button__controls--MarginLeft);
 
+  align-self: var(--#{$menu-toggle}__button--AlignSelf);
   padding-right: var(--#{$menu-toggle}__button--PaddingRight);
   padding-left: var(--#{$menu-toggle}__button--PaddingLeft);
   color: inherit;
@@ -515,7 +527,6 @@
 }
 
 .#{$menu-toggle}__icon {
-  display: inline-flex;
   flex-shrink: 0;
   align-self: center;
   margin-right: var(--#{$menu-toggle}__icon--MarginRight);
@@ -530,7 +541,7 @@
 
 .#{$menu-toggle}__count {
   display: flex;
-  align-items: center;
+  flex-wrap: nowrap;
   margin-left: var(--#{$menu-toggle}__count--MarginLeft);
 }
 

package/components/Radio/radio.css

@@ -4,24 +4,23 @@
   --pf-v5-c-radio__label--Color: var(--pf-v5-global--Color--100);
   --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--sm);
-  --pf-v5-c-radio__input--Height: var(--pf-v5-c-radio__label--FontSize);
-  --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);
+  --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--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);
   --pf-v5-c-radio__description--Color: var(--pf-v5-global--Color--200);
   --pf-v5-c-radio__body--MarginTop: var(--pf-v5-global--spacer--sm);
-  display: grid;
+  display: inline-grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-v5-c-radio--GridGap);
+  align-items: baseline;
+  width: 100%;
 }
 .pf-v5-c-radio.pf-m-standalone {
   --pf-v5-c-radio--GridGap: 0;
-  --pf-v5-c-radio__input--Height: auto;
-  --pf-v5-c-radio__input--MarginTop: 0;
-  display: inline-grid;
-  line-height: 1;
+  --pf-v5-c-radio__input--TranslateY--moz: 0;
+  width: auto;
 }
 
 .pf-v5-c-radio__label {
@@ -32,8 +31,7 @@
 }
 
 .pf-v5-c-radio__input {
-  height: var(--pf-v5-c-radio__input--Height);
-  margin-top: var(--pf-v5-c-radio__input--MarginTop);
+  -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
 }
 .pf-v5-c-radio__input:first-child {
   margin-left: var(--pf-v5-c-radio__input--first-child--MarginLeft);

package/components/Radio/radio.scss

@@ -6,26 +6,25 @@
   --#{$radio}__label--Color: var(--#{$pf-global}--Color--100);
   --#{$radio}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$radio}__label--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$radio}__label--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$radio}__input--Height: var(--#{$radio}__label--FontSize);
-  --#{$radio}__input--MarginTop: calc(((var(--#{$radio}__label--FontSize) * var(--#{$radio}__label--LineHeight)) - var(--#{$radio}__input--Height)) / 2);
+  --#{$radio}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
+  --#{$radio}__input--TranslateY--moz: 5px;
   --#{$radio}__input--first-child--MarginLeft: #{pf-size-prem(1px)};
   --#{$radio}__input--last-child--MarginRight: #{pf-size-prem(1px)};
   --#{$radio}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
   --#{$radio}__description--Color: var(--#{$pf-global}--Color--200);
   --#{$radio}__body--MarginTop: var(--#{$pf-global}--spacer--sm);
 
-  display: grid;
+  display: inline-grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--#{$radio}--GridGap);
+  align-items: baseline;
+  width: 100%;
 
   &.pf-m-standalone {
     --#{$radio}--GridGap: 0;
-    --#{$radio}__input--Height: auto;
-    --#{$radio}__input--MarginTop: 0;
+    --#{$radio}__input--TranslateY--moz: 0;
 
-    display: inline-grid;
-    line-height: 1;
+    width: auto;
   }
 }
 
@@ -37,8 +36,9 @@
 }
 
 .#{$radio}__input {
-  height: var(--#{$radio}__input--Height);
-  margin-top: var(--#{$radio}__input--MarginTop);
+  // stylelint-disable property-no-vendor-prefix
+  -moz-transform: translateY(var(--#{$radio}__input--TranslateY--moz));
+  // stylelint-enable
 
   // fixes a chrome issue where the left edge is cut off in a container with overflow hidden
   &:first-child {

package/components/Toolbar/toolbar.css

@@ -55,16 +55,20 @@
   --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar--item--RowGap--base: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-toolbar__item--Display: block;
+  --pf-v5-c-toolbar__item--Display: flex;
   --pf-v5-c-toolbar__item--MinWidth--base: auto;
-  --pf-v5-c-toolbar__item--AlignSelf: auto;
   --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
+  --pf-v5-c-toolbar__item--AlignSelf: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__group--Display: flex;
+  --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
   --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__group--AlignSelf: auto;
-  --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
   --pf-v5-c-toolbar--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-toolbar--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
+  --pf-v5-c-toolbar--m-align-items-center--AlignItems: center;
+  --pf-v5-c-toolbar--m-align-items-baseline--AlignItems: baseline;
+  --pf-v5-c-toolbar--m-align-self-center--AlignSelf: center;
+  --pf-v5-c-toolbar--m-align-self-baseline--AlignSelf: baseline;
   --pf-v5-c-toolbar__content--Display: flex;
   --pf-v5-c-toolbar__content--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__content--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
@@ -109,7 +113,9 @@
   --pf-v5-c-toolbar__item--m-search-filter--spacer: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-toolbar__item--m-chip-group--spacer: var(--pf-v5-global--spacer--sm);
   --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-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);
   --pf-v5-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-v5-global--Color--100);
@@ -117,7 +123,7 @@
   --pf-v5-c-toolbar--m-full-height--PaddingTop: 0;
   --pf-v5-c-toolbar--m-full-height--PaddingBottom: 0;
   --pf-v5-c-toolbar--m-full-height__item--Display: flex;
-  --pf-v5-c-toolbar--m-full-height__item--AlignItems: var(--pf-v5-c-toolbar__group--AlignItems);
+  --pf-v5-c-toolbar--m-full-height__item--AlignItems: center;
   position: relative;
   display: grid;
   row-gap: var(--pf-v5-c-toolbar--RowGap);
@@ -196,11 +202,11 @@
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-items-center,
 .pf-v5-c-toolbar__group.pf-m-align-items-center {
-  align-items: center;
+  --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--m-align-items-center--AlignItems);
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline,
 .pf-v5-c-toolbar__group.pf-m-align-items-baseline {
-  align-items: baseline;
+  --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--m-align-items-baseline--AlignItems);
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-self-start,
 .pf-v5-c-toolbar__group.pf-m-align-self-start {
@@ -208,11 +214,11 @@
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-self-center,
 .pf-v5-c-toolbar__group.pf-m-align-self-center {
-  align-self: center;
+  --pf-v5-c-toolbar__group--AlignSelf: var(--pf-v5-c-toolbar--m-align-self-center--AlignItems);
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-self-baseline,
 .pf-v5-c-toolbar__group.pf-m-align-self-baseline {
-  align-self: baseline;
+  --pf-v5-c-toolbar__group--AlignSelf: var(--pf-v5-c-toolbar--m-align-self-baseline--AlignItems);
 }
 
 .pf-v5-c-toolbar__group {
@@ -355,6 +361,7 @@
 .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));
 }
 .pf-v5-c-toolbar__item.pf-m-pagination {
   margin-left: auto;
@@ -402,7 +409,7 @@
   align-items: flex-start;
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-items-center {
-  align-items: center;
+  --pf-v5-c-toolbar__content-section--AlignItems: var(--pf-v5-c-toolbar--m-align-items-center--AlignItems);
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline {
   align-items: baseline;
@@ -438,7 +445,7 @@
   display: grid;
   grid-row-gap: var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap);
 }
-.pf-v5-c-toolbar__expandable-content .pf-m-label {
+.pf-v5-c-toolbar__expandable-content .pf-v5-c-toolbar__item.pf-m-label {
   margin-bottom: var(--pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom);
   font-size: var(--pf-v5-c-toolbar__expandable-content__item--m-label--FontSize);
 }