@patternfly/patternfly 4.162.0 → 4.164.0

package/components/DataList/data-list.scss

@@ -1,4 +1,4 @@
-@import "./data-list-grid.scss";
+@import "./data-list-grid";
 
 .pf-c-data-list {
   --pf-c-data-list--FontSize: 1em; // inherit font-size, update this to global variable at breaking change

package/components/Dropdown/dropdown.css

@@ -191,24 +191,27 @@
   border-color: var(--pf-c-dropdown__toggle--before--BorderTopColor) var(--pf-c-dropdown__toggle--before--BorderRightColor) var(--pf-c-dropdown__toggle--before--BorderBottomColor) var(--pf-c-dropdown__toggle--before--BorderLeftColor);
 }
 .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
+  --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
   pointer-events: none;
 }
-.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled:not(.pf-m-plain) {
+.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
 }
-.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before {
+.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
   border: 0;
 }
 .pf-c-dropdown__toggle.pf-m-split-button {
   padding: 0;
 }
+.pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
+  background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
+}
 .pf-c-dropdown__toggle.pf-m-split-button > * {
   position: relative;
   padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
   padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
   padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
   padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
-  background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
 }
 .pf-c-dropdown__toggle.pf-m-split-button > *:first-child {
   --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
@@ -232,6 +235,9 @@
 .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
   border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
 }
+.pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
+  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
+}
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
   display: flex;
   align-items: center;
@@ -289,13 +295,13 @@
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
 }
-.pf-c-dropdown__toggle.pf-m-plain {
+.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
   --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
   display: inline-block;
   color: var(--pf-c-dropdown__toggle--m-plain--Color);
 }
-.pf-c-dropdown__toggle.pf-m-plain > * {
+.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
   line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
 }
 .pf-c-dropdown__toggle.pf-m-plain::before {
@@ -308,12 +314,12 @@
   --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
 }
 .pf-c-dropdown__toggle.pf-m-primary {
-  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
-  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
   border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
 }
-.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
+.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
+  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
 }
 .pf-c-dropdown__toggle.pf-m-primary::before {
   border: 0;
@@ -327,15 +333,17 @@
 .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
 }
-.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
+.pf-c-dropdown__toggle.pf-m-primary .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
 }
 .pf-c-dropdown__toggle.pf-m-secondary {
+  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
+}
+.pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
-  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
 }
-.pf-c-dropdown__toggle.pf-m-secondary::before {
+.pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
   border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
   border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
 }

package/components/Dropdown/dropdown.scss

@@ -247,9 +247,12 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
 
   &.pf-m-disabled,
   &:disabled {
+    --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
+
     pointer-events: none;
 
-    &:not(.pf-m-plain) {
+    &:not(.pf-m-plain),
+    &.pf-m-plain.pf-m-text {
       --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
 
       &::before {
@@ -261,13 +264,16 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   &.pf-m-split-button {
     padding: 0;
 
+    &:not(.pf-m-disabled) {
+      background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
+    }
+
     > * {
       position: relative;
       padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
       padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
       padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
       padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
-      background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
 
       &:first-child {
         --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
@@ -297,10 +303,15 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
       }
 
       &.pf-m-primary {
-        // stylelint-disable max-nesting-depth
+        // stylelint-disable max-nesting-depth, selector-max-class
         > :not(:first-child) {
           border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
         }
+
+        &.pf-m-disabled,
+        &[disabled] {
+          --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
+        }
         // stylelint-enable
       }
     }
@@ -396,15 +407,17 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 
   &.pf-m-plain {
-    --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
-    --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
+    &:not(.pf-m-text) {
+      --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
+      --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
 
-    display: inline-block;
-    color: var(--pf-c-dropdown__toggle--m-plain--Color);
+      display: inline-block;
+      color: var(--pf-c-dropdown__toggle--m-plain--Color);
 
-    // remove at breaking change
-    > * {
-      line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
+      // remove at breaking change
+      > * {
+        line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
+      }
     }
 
     &::before {
@@ -426,11 +439,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 
   &.pf-m-primary {
-    --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
-    --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
-
-    &:not(.pf-m-disabled) {
+    &:not(.pf-m-disabled):not([disabled]) {
       --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
+      --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
     }
 
     border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
@@ -452,20 +464,22 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
       --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
     }
 
-    .pf-m-expanded > & {
+    .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
       --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
     }
   }
 
   &.pf-m-secondary {
-    --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
-    --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
-
     border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
 
-    &::before {
-      border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
-      border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
+    &:not(.pf-m-disabled):not([disabled]) {
+      --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
+      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
+
+      &::before {
+        border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
+        border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
+      }
     }
 
     &:hover {

package/components/Form/form.css

@@ -100,7 +100,7 @@
 .pf-c-form.pf-m-horizontal.pf-m-align-right .pf-c-form__label {
   text-align: right;
 }
-@media (min-width: 768px) {
+@media screen and (min-width: 768px) {
   .pf-c-form.pf-m-horizontal {
     --pf-c-form__group-label--PaddingBottom: 0;
   }
@@ -120,6 +120,126 @@
     grid-column: 2;
   }
 }
+@media screen and (min-width: 0) {
+  .pf-c-form.pf-m-horizontal-on-xs {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-form.pf-m-horizontal-on-sm {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-form.pf-m-horizontal-on-md {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-form.pf-m-horizontal-on-lg {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-form.pf-m-horizontal-on-xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-form.pf-m-horizontal-on-2xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
 .pf-c-form.pf-m-limit-width {
   max-width: var(--pf-c-form--m-limit-width--MaxWidth);
 }

package/components/Form/form.scss

@@ -1,3 +1,28 @@
+$pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
+
+@mixin pf-c-form--m-horizontal {
+  // default horizontal styles applied at medium breakpoint
+  @media screen and (min-width: $pf-global--breakpoint--md) {
+    @content;
+  }
+
+  // custom xs style since this isn't in our maps - maps are based on mobile first design. This may not even be a valid option based on design but I guess it doesn't hurt to add.
+  &-on-xs {
+    @media screen and (min-width: $pf-global--breakpoint--xs) {
+      @content;
+    }
+  }
+
+  // loop to build the rest of the breakpoints
+  @each $breakpoint, $breakpoint-value in $pf-c-form--m-horizontal--breakpoint-map {
+    &-on-#{$breakpoint} {
+      @include pf-apply-breakpoint($breakpoint) {
+        @content;
+      }
+    }
+  }
+}
+
 .pf-c-form {
   --pf-c-form--GridGap: var(--pf-global--gutter--md);
 
@@ -160,7 +185,7 @@
       }
     }
 
-    @media (min-width: $pf-global--breakpoint--md) {
+    @include pf-c-form--m-horizontal {
       --pf-c-form__group-label--PaddingBottom: 0;
 
       .pf-c-form__group {

package/components/MultipleFileUpload/multiple-file-upload.css

@@ -0,0 +1,180 @@
+.pf-c-multiple-file-upload {
+  --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
+  --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--TextAlign: center;
+  --pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateRows: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateAreas:
+    "title"
+    "upload"
+    "info";
+  --pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
+  --pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__main--BorderStyle: dashed;
+  --pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-multiple-file-upload__title--Display: grid;
+  --pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__title-text-separator--Display: block;
+  --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
+  --pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
+    "title upload"
+    "info upload";
+  --pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
+  --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
+  --pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
+  --pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
+  --pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
+  --pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
+  --pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
+  --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
+  display: grid;
+  gap: var(--pf-c-multiple-file-upload--Gap);
+  grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
+}
+.pf-c-multiple-file-upload.pf-m-horizontal {
+  --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
+  --pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
+  --pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
+  --pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
+  --pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
+  --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
+  --pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
+  --pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
+  --pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
+  --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
+  --pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
+}
+.pf-c-multiple-file-upload.pf-m-drag-over {
+  --pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
+  --pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
+  --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
+  --pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
+  --pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
+  --pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
+}
+
+.pf-c-multiple-file-upload__main {
+  display: grid;
+  padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
+  text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
+  background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
+  border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
+  grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
+  grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
+  grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
+  gap: var(--pf-c-multiple-file-upload__main--Gap);
+}
+
+.pf-c-multiple-file-upload__title {
+  display: var(--pf-c-multiple-file-upload__title--Display);
+  grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__title--Gap);
+  grid-area: title;
+}
+
+.pf-c-multiple-file-upload__title-icon {
+  color: var(--pf-c-multiple-file-upload__title-icon--Color);
+}
+
+.pf-c-multiple-file-upload__title-text {
+  color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
+}
+
+.pf-c-multiple-file-upload__title-text-separator {
+  display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
+  margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
+}
+
+.pf-c-multiple-file-upload__upload {
+  grid-area: upload;
+}
+
+.pf-c-multiple-file-upload__info {
+  grid-area: info;
+  margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
+  font-size: var(--pf-c-multiple-file-upload__info--FontSize);
+  color: var(--pf-c-multiple-file-upload__info--Color);
+}
+
+.pf-c-multiple-file-upload__status,
+.pf-c-multiple-file-upload__status-item-main {
+  min-width: 0;
+}
+
+.pf-c-multiple-file-upload__status-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-progress-icon {
+  color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item--Gap);
+  padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
+  padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
+  border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
+}
+.pf-c-multiple-file-upload__status-item:first-child {
+  --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
+}
+
+.pf-c-multiple-file-upload__status-item-icon {
+  color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-close {
+  margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
+}
+
+.pf-c-multiple-file-upload__status-item-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-text {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-size {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
+}