@patternfly/patternfly 5.0.0-prerelease.9 → 5.0.1

package/.gitignore

@@ -0,0 +1,21 @@
+/dist/
+**/node_modules/
+.sass-cache/
+/.vscode/
+/.cache/
+/public/
+/tmp/
+/src/icons/**/*.svg
+.DS_Store
+.blueprints
+npm-debug.log
+yarn-error.log
+package-lock.json
+/.idea
+/coverage/
+*.swp
+/workspace/
+/assets/
+/scripts/sizeReport/package-lock.json
+/scripts/sizeReport/report.html
+patternfly-docs/generated/**/*.js

package/.npmignore

@@ -0,0 +1,7 @@
+*
+*/
+!/dist
+!/dist/*
+!/dist/**/*
+!.gitignore
+!.npmignore

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Red Hat, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/README.md

@@ -0,0 +1,114 @@
+# PatternFly 5
+
+## Install
+
+- This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at [https://docs.npmjs.com/getting-started/using-a-package.json](https://docs.npmjs.com/getting-started/using-a-package.json).
+- run `npm install @patternfly/patternfly --save`
+
+When you install PatternFly 5, the package includes:
+
+- a single file for the entire compiled library: `node_modules/@patternfly/patternfly/patternfly.css`
+- individual files with each component compiled separately: `node_modules/@patternfly/patternfly/<ComponentName>/styles.css`
+- a single file for the entire library's source (SASS): `node_modules/@patternfly/patternfly/patternfly.scss`
+- individual files for each component's source (SASS): `node_modules/@patternfly/patternfly/<ComponentName>/styles.scss`
+
+Any of the files above are meant for use in consuming the library. The recommended consumption approach will vary from project to project.
+
+## Development
+
+**PatternFly 5 Development requires Node v16.0.0 or greater**
+
+To setup the PatternFly 5 development environment:
+
+- clone the project
+- run `yarn install` from the project root
+- run `yarn start`
+- open your browser to `http://localhost:8001`
+
+After working on your contribution, check for [accessibility violations](#testing-for-accessibility).
+
+### Create components, layouts...
+
+To create source file scaffolding for a new component, layout, utility, or demo, run the NPM script:
+
+`node generate <CamelName>`
+
+Below are the full options for this script:
+
+```sh
+Options:
+  -f, --folder <folder>  Source folder (components, demos, layouts, or utilities) (default: "components")
+```
+
+#### Examples
+
+To create a "Test component" component (`.pf-v5-c-test-component`), run:
+
+`node generate TestComponent`
+
+To create a "Test layout" layout (`.pf-l-test-layout`), run:
+
+`node generate TestLayout -f layouts`
+
+To create 3 new demos named "Test demo", "Test demo 2", and "Test demo 3", run:
+
+`node generate TestDemo TestDemo2 TestDemo3 -f demos`
+
+
+#### Update screenshots
+When making visual changes to a full page example, new example preview screenshots must be generated. To update the screenshots:
+
+- open a terminal and run `yarn build && yarn serve`
+- in another terminal, run `yarn screenshots`
+
+## Guidelines for CSS development
+
+- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://pf4.patternfly.org, and information detailing the change.
+- If global variables are modified in Core, a React issue should be opened to address this.
+- CSS developers should ensure that animation is well documented and communicated to the respective React developer.
+- Once the component/enhancement is complete it should receive sign off from a visual designer who can then update the master sketch file with any changes.
+
+## Beta components
+
+When creating a brand new component, it should be released as beta in order to get feedback.
+
+## Testing for accessibility
+
+PatternFly uses [aXe: The Accessibility Engine](https://www.deque.com/axe/) to check for accessibility violations. Our goal is to meet WCAG 2.0 AA requirements, as noted in our [Accessibility guide](https://pf4.patternfly.org/accessibility-guide).
+
+### How to perform an accessibility audit with aXe
+aXe is available as either a browser extension or npm script.
+
+To run the a11y audit locally:
+
+- install the latest [chromedriver](http://chromedriver.chromium.org/downloads) and ensure its available on your system `$PATH`
+  - macOS users can simply `brew cask install chromedriver`
+- open a terminal and run `yarn build && yarn serve`
+- in another terminal, run `yarn a11y`
+
+The tool is configured to return WCAG 2.0 AA violations for the full page renderings of all components, layouts, utilities, and demos. The tool will provide feedback about what the violation is and a link to documentation about how to address the violation.
+
+The same tool is also available as a browser extension for [Chrome](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/).
+
+### Fixing violations
+
+Ignore the violations that aren’t related to your contribution.
+
+Fix violations related to your contribution.
+
+If there are violations that are not obvious how to fix, then [create an issue](https://github.com/patternfly/patternfly/issues/new) with information about the violation that was found. For example, some violations might require further discussion before they can be addressed. And some violations may not be valid and require changes to the workspace or tooling to stop flagging the violation.
+
+If you have any suggestions about ways that we can improve how we use this tool, please let us know by opening an issue.
+
+## FAQ
+
+#### CSS Variables
+[How do I use CSS variables to customize the library?](https://pf4.patternfly.org/guidelines#variables)
+
+#### Browser support
+PatternFly 5 is supported on the latest two major versions of the following browsers:
+
+- Chrome
+- Firefox
+- Safari
+- Edge

package/dist/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/{base → dist/base}/themes/dark/_chart-globals.scss

@@ -1,7 +1,7 @@
 @import "../../../sass-utilities/colors";
 @import "../../../sass-utilities/scss-variables";
 // stylelint-disable scss/dollar-variable-pattern
-$chart: #{$pf-prefix} + 'c-chart';
+$chart: #{$pf-prefix} + 'chart';
 // stylelint-enable
 
 // Chart colors

package/{components → dist/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 → dist/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 → dist/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 → dist/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 → dist/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 → dist/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 → dist/components}/Menu/menu.css

@@ -454,13 +454,18 @@
   --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--focus-within--BackgroundColor);
   --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--focus-within--Color, inherit);
 }
-.pf-v5-c-menu__list-item.pf-m-disabled {
+.pf-v5-c-menu__list-item.pf-m-disabled, .pf-v5-c-menu__list-item.pf-m-aria-disabled {
   --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
-  --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
   --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color);
   --pf-v5-c-menu__item-toggle-icon: var(--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color);
+}
+.pf-v5-c-menu__list-item.pf-m-disabled {
+  --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
   pointer-events: none;
 }
+.pf-v5-c-menu__list-item.pf-m-aria-disabled .pf-v5-c-menu__item {
+  cursor: default;
+}
 .pf-v5-c-menu__list-item.pf-m-load {
   --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
   --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
@@ -503,7 +508,7 @@
 .pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-select-icon {
   opacity: 1;
 }
-label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
+label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
   cursor: pointer;
 }
 
@@ -597,7 +602,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 .pf-v5-c-menu__item-action:hover, .pf-v5-c-menu__item-action:focus {
   --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--hover--Color);
 }
-.pf-v5-c-menu__item-action:disabled {
+.pf-v5-c-menu__item-action:disabled, .pf-v5-c-menu__item-action.pf-m-disabled, .pf-v5-c-menu__item-action.pf-m-aria-disabled {
   --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--disabled--Color);
 }
 

package/{components → dist/components}/Menu/menu.scss

@@ -553,15 +553,23 @@
     --#{$menu}__list-item--Color: var(--#{$menu}__list-item--focus-within--Color, inherit);
   }
 
-  &.pf-m-disabled {
+  &.pf-m-disabled,
+  &.pf-m-aria-disabled {
     --#{$menu}__list-item--hover--BackgroundColor: transparent;
-    --#{$menu}__list-item--focus-within--BackgroundColor: transparent;
     --#{$menu}__item--Color: var(--#{$menu}__list-item--m-disabled__item--Color);
     --#{$menu}__item-toggle-icon: var(--#{$menu}__list-item--m-disabled__item-toggle-icon--Color);
+  }
+  
+  &.pf-m-disabled {
+    --#{$menu}__list-item--focus-within--BackgroundColor: transparent;
 
     pointer-events: none;
   }
 
+  &.pf-m-aria-disabled .#{$menu}__item {
+    cursor: default;
+  }
+
   &.pf-m-load {
     --#{$menu}__list-item--hover--BackgroundColor: transparent;
     --#{$menu}__list-item--focus-within--BackgroundColor: transparent;
@@ -615,7 +623,7 @@
     }
   }
 
-  @at-root label#{&}:where(:not([disabled], .pf-m-disabled)) {
+  @at-root label#{&}:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
     cursor: pointer;
   }
 }
@@ -724,7 +732,9 @@
     --#{$menu}__item-action--Color: var(--#{$menu}__item-action--hover--Color);
   }
 
-  &:disabled {
+  &:disabled,
+  &.pf-m-disabled,
+  &.pf-m-aria-disabled {
     --#{$menu}__item-action--Color: var(--#{$menu}__item-action--disabled--Color);
   }
 }

package/{components → dist/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);
 }