@patternfly/react-styles 6.0.0-alpha.8 → 6.0.0-alpha.9

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.0.0-alpha.9 (2024-01-22)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 # 6.0.0-alpha.8 (2024-01-18)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/ActionList/action-list.css

@@ -1,27 +1,28 @@
-.pf-v5-c-action-list {
-  --pf-v5-c-action-list--m-icon--spacer: 0;
-  --pf-v5-c-action-list--child--spacer-base: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-action-list--group--spacer-base: var(--pf-v5-global--spacer--2xl);
+:where(:root) {
+  --pf-v5-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
+  --pf-v5-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
 }
 
 .pf-v5-c-action-list,
 .pf-v5-c-action-list__group {
-  --pf-v5-c-action-list--child--spacer: var(--pf-v5-c-action-list--child--spacer-base);
-  --pf-v5-c-action-list--group--spacer: var(--pf-v5-c-action-list--group--spacer-base);
   display: flex;
-  align-items: center;
+  align-items: start;
+}
+
+.pf-v5-c-action-list {
+  row-gap: var(--pf-v5-c-action-list--RowGap);
+  column-gap: var(--pf-v5-c-action-list--ColumnGap);
 }
-.pf-v5-c-action-list > * + *,
-.pf-v5-c-action-list__group > * + * {
-  margin-inline-start: var(--pf-v5-c-action-list--child--spacer);
+.pf-v5-c-action-list.pf-m-icons {
+  column-gap: var(--pf-v5-c-action-list--m-icons--ColumnGap);
 }
-.pf-v5-c-action-list > * + .pf-v5-c-action-list__group,
-.pf-v5-c-action-list .pf-v5-c-action-list__group + *,
-.pf-v5-c-action-list__group > * + .pf-v5-c-action-list__group,
-.pf-v5-c-action-list__group .pf-v5-c-action-list__group + * {
-  margin-inline-start: var(--pf-v5-c-action-list--group--spacer);
+
+.pf-v5-c-action-list__group {
+  row-gap: var(--pf-v5-c-action-list__group--RowGap, var(--pf-v5-c-action-list--RowGap));
+  column-gap: var(--pf-v5-c-action-list__group--ColumnGap);
 }
-.pf-v5-c-action-list.pf-m-icons,
 .pf-v5-c-action-list__group.pf-m-icons {
-  --pf-v5-c-action-list--child--spacer: var(--pf-v5-c-action-list--m-icon--spacer);
+  column-gap: var(--pf-v5-c-action-list--m-icons--ColumnGap);
 }

package/css/components/BackToTop/back-to-top.css

@@ -25,7 +25,6 @@
 }
 .pf-v5-c-back-to-top .pf-v5-c-button {
   --pf-v5-c-button--FontSize: var(--pf-v5-c-back-to-top--c-button--FontSize);
-  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-back-to-top--c-button--BorderRadius);
   --pf-v5-c-button--PaddingTop: var(--pf-v5-c-back-to-top--c-button--PaddingTop);
   --pf-v5-c-button--PaddingRight: var(--pf-v5-c-back-to-top--c-button--PaddingRight);
   --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-back-to-top--c-button--PaddingBottom);

package/css/components/Button/button.css

@@ -14,10 +14,6 @@
   --pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
   --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v5-c-button--TextDecoration: none;
-  --pf-v5-c-button--BorderStartStartRadius: var(--pf-v5-c-button--BorderRadius);
-  --pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-button--BorderRadius);
-  --pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-button--BorderRadius);
-  --pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-button--BorderRadius);
   --pf-v5-c-button--MixBlendMode: normal;
   --pf-v5-c-button--hover--BackgroundColor: transparent;
   --pf-v5-c-button--hover--BorderColor: transparent;
@@ -247,11 +243,10 @@
   user-select: none;
   background-color: var(--pf-v5-c-button--BackgroundColor);
   border: 0;
-  border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius);
-  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius);
-  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius);
-  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius);
-  mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
+  border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius, var(--pf-v5-c-button--BorderRadius));
+  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
+  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
+  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
 }
 .pf-v5-c-button::after {
   position: absolute;

package/css/components/Masthead/masthead.css

@@ -1,15 +1,10 @@
 :root,
-:where(.pf-v5-c-masthead) {
-  --pf-v5-c-masthead--inset: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-masthead--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v5-c-masthead--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v5-c-masthead--PaddingInlineStart: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-masthead--PaddingInlineEnd: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-masthead--AlignItems: start;
+[data-theme=pf-v5-c-masthead] {
   --pf-v5-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
-  --pf-v5-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
+  --pf-v5-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
   --pf-v5-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v5-c-masthead__brand--MaxHeight: 2.375rem;
@@ -30,21 +25,15 @@
   --pf-v5-c-masthead--m-display-inline__content--Order: 0;
   --pf-v5-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v5-c-masthead__expandable-content--BorderBlockStart: var(--pf-v5-c-masthead--BorderWidth) solid var(--pf-v5-c-masthead--BorderColor);
+  --pf-v5-c-masthead--pf-v5-c-toolbar--Width: 100%;
+  --pf-v5-c-masthead--pf-v5-c-toolbar--PaddingBlock: 0;
+  --pf-v5-c-masthead--pf-v5-c-toolbar--PaddingInline: 0;
 }
 
 .pf-v5-c-masthead {
-  --pf-v5-c-toolbar--PaddingTop: 0;
-  --pf-v5-c-toolbar--PaddingBottom: 0;
-  --pf-v5-c-toolbar__content--PaddingRight: 0;
-  --pf-v5-c-toolbar__content--PaddingLeft: 0;
-  --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-toolbar__expandable-content--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
-  --pf-v5-c-toolbar__expandable-content--lg--PaddingRight: var(--pf-v5-c-masthead--PaddingInlineStart);
-  --pf-v5-c-toolbar__expandable-content--lg--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-toolbar__expandable-content--lg--PaddingLeft: var(--pf-v5-c-masthead--PaddingInlineEnd);
+  --pf-v5-c-toolbar--Width: var(--pf-v5-c-masthead--pf-v5-c-toolbar--Width);
+  --pf-v5-c-toolbar__content--PaddingBlock: var(--pf-v5-c-masthead--pf-v5-c-toolbar--PaddingBlock);
+  --pf-v5-c-toolbar__content--PaddingInline: var(--pf-v5-c-masthead--pf-v5-c-toolbar--PaddingInline);
   --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
   --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
   --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
@@ -56,13 +45,13 @@
   grid-template-columns: var(--pf-v5-c-masthead--GridTemplateColumns);
   row-gap: var(--pf-v5-c-masthead--RowGap);
   column-gap: var(--pf-v5-c-masthead--ColumnGap);
-  align-items: var(--pf-v5-c-masthead--AlignItems);
+  align-items: start;
   min-width: 0;
-  padding-block-start: var(--pf-v5-c-masthead--PaddingBlockStart);
-  padding-block-end: var(--pf-v5-c-masthead--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v5-c-masthead--inset);
-  padding-inline-end: var(--pf-v5-c-masthead--inset);
-  background-color: var(--pf-v5-c-masthead--BackgroundColor);
+  padding-block-start: var(--pf-v5-c-masthead--PaddingBlockStart, var(--pf-v5-c-masthead--PaddingBlock));
+  padding-block-end: var(--pf-v5-c-masthead--PaddingBlockEnd, var(--pf-v5-c-masthead--PaddingBlock));
+  padding-inline-start: var(--pf-v5-c-masthead--PaddingInlineStart, var(--pf-v5-c-masthead--PaddingInline));
+  padding-inline-end: var(--pf-v5-c-masthead--PaddingInlineEnd, var(--pf-v5-c-masthead--PaddingInline));
+  background-color: var(--pf-v5-c-masthead--BackgroundColor, var(--pf-t--global--background--color--secondary--default));
 }
 @media screen and (min-width: 768px) {
   :where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
@@ -75,9 +64,6 @@
     --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
   }
 }
-.pf-v5-c-masthead .pf-v5-c-toolbar {
-  width: 100%;
-}
 .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
   inset-block-start: 100%;
   border-block-start: var(--pf-v5-c-masthead__expandable-content--BorderBlockStart);

package/css/components/Masthead/masthead.d.ts

@@ -28,7 +28,6 @@ declare const _default: {
     "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
     "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
   },
-  "toolbar": "pf-v5-c-toolbar",
   "toolbarExpandableContent": "pf-v5-c-toolbar__expandable-content"
 };
 export default _default;

package/css/components/Masthead/masthead.js

@@ -30,6 +30,5 @@ exports.default = {
     "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
     "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
   },
-  "toolbar": "pf-v5-c-toolbar",
   "toolbarExpandableContent": "pf-v5-c-toolbar__expandable-content"
 };

package/css/components/Masthead/masthead.mjs

@@ -28,6 +28,5 @@ export default {
     "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
     "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
   },
-  "toolbar": "pf-v5-c-toolbar",
   "toolbarExpandableContent": "pf-v5-c-toolbar__expandable-content"
 };

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

@@ -1,6 +1,7 @@
-.pf-v5-c-multiple-file-upload {
+:root,
+:where(.pf-v5-c-multiple-file-upload) {
   --pf-v5-c-multiple-file-upload--GridTemplateColumns: 1fr;
-  --pf-v5-c-multiple-file-upload--Gap: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
   --pf-v5-c-multiple-file-upload__main--TextAlign: center;
   --pf-v5-c-multiple-file-upload__main--GridTemplateColumns: auto;
   --pf-v5-c-multiple-file-upload__main--GridTemplateRows: auto;
@@ -8,59 +9,74 @@
     "title"
     "upload"
     "info";
-  --pf-v5-c-multiple-file-upload__main--Gap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-multiple-file-upload__main--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-multiple-file-upload__main--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-multiple-file-upload__main--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-multiple-file-upload__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-multiple-file-upload__main--PaddingTop: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-multiple-file-upload__main--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-multiple-file-upload__main--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v5-c-multiple-file-upload__main--BorderStyle: dashed;
-  --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-multiple-file-upload__main--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v5-c-multiple-file-upload__title--Display: grid;
   --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: auto;
-  --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-global--icon--Color--dark);
+  --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-multiple-file-upload__title-text--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-multiple-file-upload__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-multiple-file-upload__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --pf-v5-c-multiple-file-upload__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-multiple-file-upload__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
   --pf-v5-c-multiple-file-upload__title-text-separator--Display: block;
-  --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
-  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-v5-global--palette--blue-50);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__title-text-separator--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__title-text-separator--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-multiple-file-upload__info--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle: dashed;
+  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
   --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
   --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
   --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
     "title upload"
     "info upload";
-  --pf-v5-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
+  --pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-t--global--spacer--lg);
   --pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
-  --pf-v5-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
   --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
+  --pf-v5-c-multiple-file-upload__status--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-multiple-file-upload__status--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
-  --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-v5-global--icon--Color--dark);
-  --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
+  --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
-  --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-v5-global--icon--Color--dark);
-  --pf-v5-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
+  --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
-  --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-t--global--text--color--subtle);
+}
+
+.pf-v5-c-multiple-file-upload {
   display: grid;
   grid-template-columns: var(--pf-v5-c-multiple-file-upload--GridTemplateColumns);
   gap: var(--pf-v5-c-multiple-file-upload--Gap);
@@ -74,17 +90,18 @@
   --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
   --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
   --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--Gap);
+  --pf-v5-c-multiple-file-upload__title-icon--FontSize: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-icon--FontSize);
+  --pf-v5-c-multiple-file-upload__title-text--FontSize: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text--FontSize);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily);
   --pf-v5-c-multiple-file-upload__title-text-separator--Display: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
   --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight);
   --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop);
 }
 .pf-v5-c-multiple-file-upload.pf-m-drag-over {
   --pf-v5-c-multiple-file-upload__main--BorderStyle: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle);
   --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor);
-  --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
-  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
-  --pf-v5-c-multiple-file-upload__title-text--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color);
-  --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color);
 }
 
 .pf-v5-c-multiple-file-upload__main {
@@ -93,13 +110,14 @@
   grid-template-rows: var(--pf-v5-c-multiple-file-upload__main--GridTemplateRows);
   grid-template-columns: var(--pf-v5-c-multiple-file-upload__main--GridTemplateColumns);
   gap: var(--pf-v5-c-multiple-file-upload__main--Gap);
+  align-items: center;
   padding-block-start: var(--pf-v5-c-multiple-file-upload__main--PaddingTop);
   padding-block-end: var(--pf-v5-c-multiple-file-upload__main--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-multiple-file-upload__main--PaddingRight);
   text-align: var(--pf-v5-c-multiple-file-upload__main--TextAlign);
-  background-color: var(--pf-v5-c-multiple-file-upload__main--BackgroundColor);
   border: var(--pf-v5-c-multiple-file-upload__main--BorderWidth) var(--pf-v5-c-multiple-file-upload__main--BorderStyle) var(--pf-v5-c-multiple-file-upload__main--BorderColor);
+  border-radius: var(--pf-v5-c-multiple-file-upload__main--BorderRadius);
 }
 
 .pf-v5-c-multiple-file-upload__title {
@@ -110,16 +128,25 @@
 }
 
 .pf-v5-c-multiple-file-upload__title-icon {
+  font-size: var(--pf-v5-c-multiple-file-upload__title-icon--FontSize);
   color: var(--pf-v5-c-multiple-file-upload__title-icon--Color);
 }
 
 .pf-v5-c-multiple-file-upload__title-text {
+  font-family: var(--pf-v5-c-multiple-file-upload__title-text--FontFamily);
+  font-size: var(--pf-v5-c-multiple-file-upload__title-text--FontSize);
+  font-weight: var(--pf-v5-c-multiple-file-upload__title-text--FontWeight);
   color: var(--pf-v5-c-multiple-file-upload__title-text--Color, inherit);
 }
 
 .pf-v5-c-multiple-file-upload__title-text-separator {
   display: var(--pf-v5-c-multiple-file-upload__title-text-separator--Display);
   margin-block-start: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
+  margin-block-end: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginBottom);
+  font-family: var(--pf-v5-c-multiple-file-upload__title-text-separator--FontFamily);
+  font-size: var(--pf-v5-c-multiple-file-upload__title-text-separator--FontSize);
+  font-weight: var(--pf-v5-c-multiple-file-upload__title-text-separator--FontWeight);
+  color: var(--pf-v5-c-multiple-file-upload__title-text-separator--Color);
 }
 
 .pf-v5-c-multiple-file-upload__upload {
@@ -133,6 +160,13 @@
   color: var(--pf-v5-c-multiple-file-upload__info--Color);
 }
 
+.pf-v5-c-multiple-file-upload__status {
+  padding-block-start: var(--pf-v5-c-multiple-file-upload__status--PaddingTop);
+  padding-block-end: var(--pf-v5-c-multiple-file-upload__status--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-multiple-file-upload__status--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-multiple-file-upload__status--PaddingRight);
+}
+
 .pf-v5-c-multiple-file-upload__status,
 .pf-v5-c-multiple-file-upload__status-item-main {
   min-width: 0;
@@ -156,18 +190,11 @@
   padding-block-end: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
   border-block-end: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
 }
-.pf-v5-c-multiple-file-upload__status-item:first-child {
-  --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop);
-}
 
 .pf-v5-c-multiple-file-upload__status-item-icon {
   color: var(--pf-v5-c-multiple-file-upload__status-item-icon--Color);
 }
 
-.pf-v5-c-multiple-file-upload__status-item-close {
-  margin-block-start: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
-}
-
 .pf-v5-c-multiple-file-upload__status-item-progress {
   display: grid;
   grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns);

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

@@ -9,7 +9,6 @@ declare const _default: {
   "multipleFileUploadMain": "pf-v5-c-multiple-file-upload__main",
   "multipleFileUploadStatus": "pf-v5-c-multiple-file-upload__status",
   "multipleFileUploadStatusItem": "pf-v5-c-multiple-file-upload__status-item",
-  "multipleFileUploadStatusItemClose": "pf-v5-c-multiple-file-upload__status-item-close",
   "multipleFileUploadStatusItemIcon": "pf-v5-c-multiple-file-upload__status-item-icon",
   "multipleFileUploadStatusItemMain": "pf-v5-c-multiple-file-upload__status-item-main",
   "multipleFileUploadStatusItemProgress": "pf-v5-c-multiple-file-upload__status-item-progress",

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

@@ -11,7 +11,6 @@ exports.default = {
   "multipleFileUploadMain": "pf-v5-c-multiple-file-upload__main",
   "multipleFileUploadStatus": "pf-v5-c-multiple-file-upload__status",
   "multipleFileUploadStatusItem": "pf-v5-c-multiple-file-upload__status-item",
-  "multipleFileUploadStatusItemClose": "pf-v5-c-multiple-file-upload__status-item-close",
   "multipleFileUploadStatusItemIcon": "pf-v5-c-multiple-file-upload__status-item-icon",
   "multipleFileUploadStatusItemMain": "pf-v5-c-multiple-file-upload__status-item-main",
   "multipleFileUploadStatusItemProgress": "pf-v5-c-multiple-file-upload__status-item-progress",

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

@@ -9,7 +9,6 @@ export default {
   "multipleFileUploadMain": "pf-v5-c-multiple-file-upload__main",
   "multipleFileUploadStatus": "pf-v5-c-multiple-file-upload__status",
   "multipleFileUploadStatusItem": "pf-v5-c-multiple-file-upload__status-item",
-  "multipleFileUploadStatusItemClose": "pf-v5-c-multiple-file-upload__status-item-close",
   "multipleFileUploadStatusItemIcon": "pf-v5-c-multiple-file-upload__status-item-icon",
   "multipleFileUploadStatusItemMain": "pf-v5-c-multiple-file-upload__status-item-main",
   "multipleFileUploadStatusItemProgress": "pf-v5-c-multiple-file-upload__status-item-progress",

package/css/components/OverflowMenu/overflow-menu.css

@@ -1,66 +1,36 @@
+:root {
+  --pf-v5-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+}
+
 .pf-v5-c-overflow-menu {
-  --pf-v5-c-overflow-menu--spacer--base: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-overflow-menu__group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__item--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__group--m-button-group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__group--m-button-group--space-items: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__group--m-icon-button-group--space-items: 0;
   display: inline-flex;
-  align-items: center;
+  column-gap: var(--pf-v5-c-overflow-menu--ColumnGap);
 }
 
-.pf-v5-c-overflow-menu__content {
+.pf-v5-c-overflow-menu__content,
+.pf-v5-c-overflow-menu__group {
   display: flex;
-  align-items: center;
+  align-items: start;
 }
 
 .pf-v5-c-overflow-menu__group {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--spacer);
-  display: flex;
-  align-items: center;
+  column-gap: var(--pf-v5-c-overflow-menu__group--ColumnGap);
 }
 .pf-v5-c-overflow-menu__group.pf-m-button-group {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-button-group--spacer);
-}
-.pf-v5-c-overflow-menu__group.pf-m-button-group > * {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-button-group--space-items);
+  column-gap: var(--pf-v5-c-overflow-menu__group--m-button-group--ColumnGap);
 }
 .pf-v5-c-overflow-menu__group.pf-m-icon-button-group {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer);
-}
-.pf-v5-c-overflow-menu__group.pf-m-icon-button-group > * {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--space-items);
+  column-gap: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--ColumnGap);
 }
 
 .pf-v5-c-overflow-menu__item {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__item--spacer);
+  column-gap: var(--pf-v5-c-overflow-menu__item--ColumnGap, var(--pf-v5-c-overflow-menu--ColumnGap));
 }
 
 .pf-v5-c-overflow-menu__content,
-.pf-v5-c-overflow-menu__control,
-.pf-v5-c-overflow-menu__group,
-.pf-v5-c-overflow-menu__item {
-  margin-inline-end: var(--pf-v5-c-overflow-menu--spacer);
-}
-.pf-v5-c-overflow-menu__content:last-child,
-.pf-v5-c-overflow-menu__control:last-child,
-.pf-v5-c-overflow-menu__group:last-child,
-.pf-v5-c-overflow-menu__item:last-child {
-  --pf-v5-c-overflow-menu--spacer: 0;
-}
-
-.pf-v5-c-overflow-menu > .pf-v5-c-divider,
-.pf-v5-c-overflow-menu__group > .pf-v5-c-divider {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu--c-divider--m-vertical--spacer);
-}
-.pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical,
-.pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical {
-  margin-inline-end: var(--pf-v5-c-overflow-menu--spacer);
-}
-.pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical:last-child,
-.pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical:last-child {
-  --pf-v5-c-overflow-menu--spacer: 0;
+.pf-v5-c-overflow-menu__control {
+  column-gap: var(--pf-v5-c-overflow-menu--ColumnGap);
 }

package/css/components/OverflowMenu/overflow-menu.d.ts

@@ -1,10 +1,8 @@
 import './overflow-menu.css';
 declare const _default: {
-  "divider": "pf-v5-c-divider",
   "modifiers": {
     "buttonGroup": "pf-m-button-group",
-    "iconButtonGroup": "pf-m-icon-button-group",
-    "vertical": "pf-m-vertical"
+    "iconButtonGroup": "pf-m-icon-button-group"
   },
   "overflowMenu": "pf-v5-c-overflow-menu",
   "overflowMenuContent": "pf-v5-c-overflow-menu__content",

package/css/components/OverflowMenu/overflow-menu.js

@@ -2,11 +2,9 @@
 exports.__esModule = true;
 require('./overflow-menu.css');
 exports.default = {
-  "divider": "pf-v5-c-divider",
   "modifiers": {
     "buttonGroup": "pf-m-button-group",
-    "iconButtonGroup": "pf-m-icon-button-group",
-    "vertical": "pf-m-vertical"
+    "iconButtonGroup": "pf-m-icon-button-group"
   },
   "overflowMenu": "pf-v5-c-overflow-menu",
   "overflowMenuContent": "pf-v5-c-overflow-menu__content",

package/css/components/OverflowMenu/overflow-menu.mjs

@@ -1,10 +1,8 @@
 import './overflow-menu.css';
 export default {
-  "divider": "pf-v5-c-divider",
   "modifiers": {
     "buttonGroup": "pf-m-button-group",
-    "iconButtonGroup": "pf-m-icon-button-group",
-    "vertical": "pf-m-vertical"
+    "iconButtonGroup": "pf-m-icon-button-group"
   },
   "overflowMenu": "pf-v5-c-overflow-menu",
   "overflowMenuContent": "pf-v5-c-overflow-menu__content",

package/css/components/Pagination/pagination.css

@@ -6,7 +6,8 @@
   appearance: none;
 }
 
-:root {
+:where(:root),
+:where(.pf-v5-c-pagination) {
   --pf-v5-c-pagination--inset: 0;
   --pf-v5-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
   --pf-v5-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--md);
@@ -46,7 +47,8 @@
   --pf-v5-c-pagination--m-display-full__page-menu--Display: inline-flex;
 }
 @media screen and (min-width: 768px) {
-  :root {
+  :where(:root),
+  :where(.pf-v5-c-pagination) {
     --pf-v5-c-pagination--m-bottom--BoxShadow: none;
     --pf-v5-c-pagination__page-menu--Display: inline-flex;
     --pf-v5-c-pagination__nav--Display: inline-flex;
@@ -54,7 +56,8 @@
   }
 }
 @media screen and (min-width: 1200px) {
-  :root {
+  :where(:root),
+  :where(.pf-v5-c-pagination) {
     --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
     --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
     --pf-v5-c-pagination__scroll-button--Width: var(--pf-v5-c-pagination__scroll-button--xl--Width);