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

package/css/components/Label/label.d.ts

@@ -7,20 +7,21 @@ declare const _default: {
   "labelIcon": "pf-v5-c-label__icon",
   "labelText": "pf-v5-c-label__text",
   "modifiers": {
-    "compact": "pf-m-compact",
     "blue": "pf-m-blue",
-    "green": "pf-m-green",
-    "orange": "pf-m-orange",
     "red": "pf-m-red",
-    "purple": "pf-m-purple",
-    "cyan": "pf-m-cyan",
+    "orange": "pf-m-orange",
+    "orangered": "pf-m-orangered",
     "gold": "pf-m-gold",
+    "green": "pf-m-green",
+    "cyan": "pf-m-cyan",
+    "purple": "pf-m-purple",
+    "compact": "pf-m-compact",
     "outline": "pf-m-outline",
-    "overflow": "pf-m-overflow",
-    "add": "pf-m-add",
     "editable": "pf-m-editable",
-    "editableActive": "pf-m-editable-active"
-  },
-  "themeDark": "pf-v5-theme-dark"
+    "editableActive": "pf-m-editable-active",
+    "add": "pf-m-add",
+    "overflow": "pf-m-overflow",
+    "clickable": "pf-m-clickable"
+  }
 };
 export default _default;

package/css/components/Label/label.js

@@ -9,19 +9,20 @@ exports.default = {
   "labelIcon": "pf-v5-c-label__icon",
   "labelText": "pf-v5-c-label__text",
   "modifiers": {
-    "compact": "pf-m-compact",
     "blue": "pf-m-blue",
-    "green": "pf-m-green",
-    "orange": "pf-m-orange",
     "red": "pf-m-red",
-    "purple": "pf-m-purple",
-    "cyan": "pf-m-cyan",
+    "orange": "pf-m-orange",
+    "orangered": "pf-m-orangered",
     "gold": "pf-m-gold",
+    "green": "pf-m-green",
+    "cyan": "pf-m-cyan",
+    "purple": "pf-m-purple",
+    "compact": "pf-m-compact",
     "outline": "pf-m-outline",
-    "overflow": "pf-m-overflow",
-    "add": "pf-m-add",
     "editable": "pf-m-editable",
-    "editableActive": "pf-m-editable-active"
-  },
-  "themeDark": "pf-v5-theme-dark"
+    "editableActive": "pf-m-editable-active",
+    "add": "pf-m-add",
+    "overflow": "pf-m-overflow",
+    "clickable": "pf-m-clickable"
+  }
 };

package/css/components/Label/label.mjs

@@ -7,19 +7,20 @@ export default {
   "labelIcon": "pf-v5-c-label__icon",
   "labelText": "pf-v5-c-label__text",
   "modifiers": {
-    "compact": "pf-m-compact",
     "blue": "pf-m-blue",
-    "green": "pf-m-green",
-    "orange": "pf-m-orange",
     "red": "pf-m-red",
-    "purple": "pf-m-purple",
-    "cyan": "pf-m-cyan",
+    "orange": "pf-m-orange",
+    "orangered": "pf-m-orangered",
     "gold": "pf-m-gold",
+    "green": "pf-m-green",
+    "cyan": "pf-m-cyan",
+    "purple": "pf-m-purple",
+    "compact": "pf-m-compact",
     "outline": "pf-m-outline",
-    "overflow": "pf-m-overflow",
-    "add": "pf-m-add",
     "editable": "pf-m-editable",
-    "editableActive": "pf-m-editable-active"
-  },
-  "themeDark": "pf-v5-theme-dark"
+    "editableActive": "pf-m-editable-active",
+    "add": "pf-m-add",
+    "overflow": "pf-m-overflow",
+    "clickable": "pf-m-clickable"
+  }
 };

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/NumberInput/number-input.css

@@ -6,12 +6,12 @@
   appearance: none;
 }
 
+:root,
 .pf-v5-c-number-input {
-  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-number-input__icon--FontSize: var(--pf-v5-global--FontSize--xs);
-  --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
-  --pf-v5-c-number-input--c-form-control--width-icon: 0px;
-  --pf-v5-c-number-input--m-status--c-form-control--width-icon: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
+  --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
+  --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
   --pf-v5-c-number-input--c-form-control--width-chars: 4;
   --pf-v5-c-number-input--c-form-control--Width:
     calc(
@@ -19,12 +19,12 @@
         var(--pf-v5-c-number-input--c-form-control--width-base) + var(--pf-v5-c-number-input--c-form-control--width-chars) * 1ch
       ) + var(--pf-v5-c-number-input--c-form-control--width-icon)
     );
+}
+
+.pf-v5-c-number-input {
   display: inline-flex;
   align-items: center;
 }
-.pf-v5-c-number-input.pf-m-status {
-  --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
-}
 .pf-v5-c-number-input .pf-v5-c-form-control {
   width: var(--pf-v5-c-number-input--c-form-control--Width);
 }

package/css/components/NumberInput/number-input.d.ts

@@ -2,9 +2,6 @@ import './number-input.css';
 declare const _default: {
   "formControl": "pf-v5-c-form-control",
   "inputGroup": "pf-v5-c-input-group",
-  "modifiers": {
-    "status": "pf-m-status"
-  },
   "numberInput": "pf-v5-c-number-input",
   "numberInputIcon": "pf-v5-c-number-input__icon",
   "numberInputUnit": "pf-v5-c-number-input__unit"

package/css/components/NumberInput/number-input.js

@@ -4,9 +4,6 @@ require('./number-input.css');
 exports.default = {
   "formControl": "pf-v5-c-form-control",
   "inputGroup": "pf-v5-c-input-group",
-  "modifiers": {
-    "status": "pf-m-status"
-  },
   "numberInput": "pf-v5-c-number-input",
   "numberInputIcon": "pf-v5-c-number-input__icon",
   "numberInputUnit": "pf-v5-c-number-input__unit"

package/css/components/NumberInput/number-input.mjs

@@ -2,9 +2,6 @@ import './number-input.css';
 export default {
   "formControl": "pf-v5-c-form-control",
   "inputGroup": "pf-v5-c-input-group",
-  "modifiers": {
-    "status": "pf-m-status"
-  },
   "numberInput": "pf-v5-c-number-input",
   "numberInputIcon": "pf-v5-c-number-input__icon",
   "numberInputUnit": "pf-v5-c-number-input__unit"

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",