@patternfly/patternfly 5.0.0-alpha.66 → 5.0.0-alpha.68

package/components/Page/page.css

@@ -949,9 +949,9 @@
   flex: 1 0 auto;
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
+:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
+:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
+:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -961,38 +961,38 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page {
+:where(.pf-v5-theme-dark) .pf-v5-c-page {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
   --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
+:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
   color: var(--pf-v5-global--Color--100);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
+:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
   background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
+:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
   border-right: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
+:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
   --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
+:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
   --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
+:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
   --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
+:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
-:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
+:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
+:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
+:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
   color: var(--pf-v5-global--Color--100);
 }

package/components/Pagination/pagination.css

@@ -1,7 +1,7 @@
-.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
+.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input) {
   appearance: textfield;
 }
-.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-outer-spin-button {
+.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
@@ -149,6 +149,9 @@
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
     display: block;
   }
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
+    display: inline-flex;
+  }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-options-menu {
     position: relative;
   }
@@ -214,7 +217,6 @@
 .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
   width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
 }
-
 .pf-v5-c-pagination__total-items {
   display: var(--pf-v5-c-pagination__total-items--Display);
 }
@@ -398,6 +400,6 @@
   }
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-pagination {
+:where(.pf-v5-theme-dark) .pf-v5-c-pagination {
   --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Pagination/pagination.scss

@@ -179,6 +179,10 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
         display: block;
       }
 
+      .#{$pagination}__nav-page-select {
+        display: inline-flex;
+      }
+
       .#{$options-menu} {
         position: relative;
       }
@@ -260,7 +264,9 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   .#{$form-control} {
     width: var(--#{$pagination}__nav-page-select--c-form-control--Width);
 
-    @extend %pf-v5-remove-num-arrows;
+    > :is(input) {
+      @extend %pf-v5-remove-num-arrows;
+    }
   }
 }
 

package/components/Panel/panel.css

@@ -79,6 +79,6 @@
   box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-panel {
+:where(.pf-v5-theme-dark) .pf-v5-c-panel {
   --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Popover/popover.css

@@ -170,7 +170,7 @@
   margin-top: var(--pf-v5-c-popover__footer--MarginTop);
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-popover {
+:where(.pf-v5-theme-dark) .pf-v5-c-popover {
   --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);

package/components/Progress/progress.css

@@ -165,7 +165,7 @@
   margin-top: var(--pf-v5-c-progress__helper-text--MarginTop);
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-progress {
+:where(.pf-v5-theme-dark) .pf-v5-c-progress {
   --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
   --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
   --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);

package/components/Select/select.css

@@ -580,7 +580,7 @@
   box-shadow: var(--pf-v5-c-select__menu-footer--BoxShadow);
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-select {
+:where(.pf-v5-theme-dark) .pf-v5-c-select {
   --pf-v5-c-select__toggle--disabled--BackgroundColor: var(--pf-v5-global--palette--black-500);
   --pf-v5-c-select__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-select__toggle--before--BorderTopColor: transparent;
@@ -592,6 +592,6 @@
   --pf-v5-c-select__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-select__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-select__toggle:disabled, :root:where(.pf-v5-theme-dark) .pf-v5-c-select__toggle.pf-m-disabled {
+:where(.pf-v5-theme-dark) .pf-v5-c-select__toggle:disabled, :where(.pf-v5-theme-dark) .pf-v5-c-select__toggle.pf-m-disabled {
   color: var(--pf-v5-global--palette--black-100);
 }

package/components/SimpleList/simple-list.css

@@ -71,7 +71,7 @@
   margin-top: var(--pf-v5-c-simple-list__section--section--MarginTop);
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
+:where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
   --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--active-color--100);
   --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);

package/components/Skeleton/skeleton.css

@@ -160,7 +160,7 @@
     transform: translateX(100%);
   }
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
+:where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
   --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-600);
   --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-600);
   --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-v5-global--palette--black-500);

package/components/Switch/switch.css

@@ -135,7 +135,7 @@
   vertical-align: top;
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-switch {
+:where(.pf-v5-theme-dark) .pf-v5-c-switch {
   --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);

package/components/Table/table.css

@@ -1062,9 +1062,9 @@
   --pf-v5-c-table--cell--Width: 100%;
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-table {
+:where(.pf-v5-theme-dark) .pf-v5-c-table {
   --pf-v5-c-table--m-striped__tr--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:hover, :root:where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:focus {
+:where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:hover, :where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:focus {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--palette--gold-100);
 }

package/components/Tabs/tabs.css

@@ -834,7 +834,7 @@
   }
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-tabs {
+:where(.pf-v5-theme-dark) .pf-v5-c-tabs {
   --pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
   --pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   --pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);

package/components/TextInputGroup/text-input-group.css

@@ -148,7 +148,7 @@
   display: flex;
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
+:where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
   --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);

package/components/Tile/tile.css

@@ -136,7 +136,7 @@
   color: var(--pf-v5-c-tile__icon--Color);
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-tile {
+:where(.pf-v5-theme-dark) .pf-v5-c-tile {
   --pf-v5-c-tile--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   --pf-v5-c-tile--m-disabled__title--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-tile--m-disabled__icon--Color: var(--pf-v5-global--disabled-color--300);

package/components/ToggleGroup/toggle-group.css

@@ -104,7 +104,7 @@
   margin-left: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
+:where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
   --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--palette--black-700);
   --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--palette--black-700);
   --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);

package/components/Tooltip/tooltip.css

@@ -85,7 +85,7 @@
   box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
+:where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
   --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/TreeView/tree-view.css

@@ -447,7 +447,7 @@ label.pf-v5-c-tree-view__node-text {
   --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-tree-view {
+:where(.pf-v5-theme-dark) .pf-v5-c-tree-view {
   --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-tree-view__node--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Wizard/wizard.css

@@ -497,7 +497,7 @@
   margin-left: var(--pf-v5-c-wizard__footer-cancel--MarginLeft);
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
+:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -507,10 +507,10 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:root:where(.pf-v5-theme-dark) .pf-v5-c-wizard {
+:where(.pf-v5-theme-dark) .pf-v5-c-wizard {
   --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   --pf-v5-c-wizard__nav-link--before--BackgroundColor: var(--pf-v5-global--palette--black-500);
 }
-:root:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
+:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
   color: var(--pf-v5-global--Color--100);
 }

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -31,7 +31,7 @@ cssPrefix: pf-v5-c-clipboard-copy
 <br />
 <div class="pf-v5-c-clipboard-copy">
   <div class="pf-v5-c-clipboard-copy__group">
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -109,7 +109,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -149,7 +149,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -188,7 +188,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"

package/docs/components/DatePicker/examples/DatePicker.md

@@ -85,7 +85,7 @@ cssPrefix: pf-v5-c-date-picker
   <div class="pf-v5-c-date-picker__input">
     <div class="pf-v5-c-input-group">
       <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-error">
           <input
             aria-invalid="true"
             type="text"
@@ -94,6 +94,11 @@ cssPrefix: pf-v5-c-date-picker
             name="invalid-input"
             aria-label="Date picker"
           />
+          <div class="pf-v5-c-form-control__utilities">
+            <div class="pf-v5-c-form-control__icon pf-m-status">
+              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+            </div>
+          </div>
         </div>
       </div>
       <div class="pf-v5-c-input-group__item">

package/docs/components/FileUpload/examples/FileUpload.md

@@ -12,12 +12,12 @@ cssPrefix: pf-v5-c-file-upload
   <div class="pf-v5-c-file-upload__file-select">
     <div class="pf-v5-c-input-group">
       <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="basic-file-upload-text-input"
             name="basic-file-upload-text-input"
             aria-label="Drag and drop a file or upload one"
-            readonly
             placeholder="Drag and drop a file or upload one"
             aria-describedby="basic-file-upload-browse"
           />
@@ -55,12 +55,12 @@ cssPrefix: pf-v5-c-file-upload
   <div class="pf-v5-c-file-upload__file-select">
     <div class="pf-v5-c-input-group">
       <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="browsed-file-upload-complete-text-input"
             name="browsed-file-upload-complete-text-input"
             aria-label="Read only filename"
-            readonly
             value="Read only filename"
             aria-describedby="browsed-file-upload-complete-browse"
           />
@@ -78,13 +78,13 @@ cssPrefix: pf-v5-c-file-upload
       </div>
     </div>
   </div>
-  <div class="pf-v5-c-file-upload__file-details" readonly>
-    <div class="pf-v5-c-form-control pf-m-resize-vertical">
+  <div class="pf-v5-c-file-upload__file-details">
+    <div class="pf-v5-c-form-control pf-m-readonly pf-m-resize-vertical">
       <textarea
+        readonly
         id="browsed-file-upload-complete-file-details"
         name="browsed-file-upload-complete-file-details"
         aria-label="Text area"
-        readonly
       >Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc
   
   </textarea>
@@ -101,12 +101,12 @@ cssPrefix: pf-v5-c-file-upload
   <div class="pf-v5-c-file-upload__file-select">
     <div class="pf-v5-c-input-group">
       <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="drop-file-text-input"
             name="drop-file-text-input"
             aria-label="Read only filename"
-            readonly
             value="Sample.txt"
             aria-describedby="drop-file-browse"
           />
@@ -146,12 +146,12 @@ cssPrefix: pf-v5-c-file-upload
   <div class="pf-v5-c-file-upload__file-select">
     <div class="pf-v5-c-input-group">
       <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="drag-file-hover-component-text-input"
             name="drag-file-hover-component-text-input"
             aria-label="Drag and drop a file or upload one"
-            readonly
             placeholder="Drag and drop a file or upload one"
             aria-describedby="drag-file-hover-component-browse"
           />
@@ -191,12 +191,12 @@ cssPrefix: pf-v5-c-file-upload
       <div class="pf-v5-c-file-upload__file-select">
         <div class="pf-v5-c-input-group">
           <div class="pf-v5-c-input-group__item pf-m-fill">
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
+                required
                 id="file-upload-error-text-input"
                 name="file-upload-error-text-input"
                 aria-label="File upload error"
-                required
                 value="Sample.png"
                 aria-describedby="file-upload-error-browse"
               />
@@ -219,7 +219,7 @@ cssPrefix: pf-v5-c-file-upload
         aria-describedby="textAreaHelperText1"
         aria-invalid="true"
       >
-        <div class="pf-v5-c-form-control pf-m-resize-vertical">
+        <div class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
           <textarea
             id="file-upload-error-file-details"
             name="file-upload-error-file-details"
@@ -227,6 +227,11 @@ cssPrefix: pf-v5-c-file-upload
             aria-describedby="textAreaHelperText1"
             aria-invalid="true"
           ></textarea>
+          <div class="pf-v5-c-form-control__utilities">
+            <div class="pf-v5-c-form-control__icon pf-m-status">
+              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -254,12 +259,12 @@ cssPrefix: pf-v5-c-file-upload
   <div class="pf-v5-c-file-upload__file-select">
     <div class="pf-v5-c-input-group">
       <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="file-upload-loading-text-input"
             name="file-upload-loading"
             aria-label="Read only filename"
-            readonly
             value="Sample.png"
             aria-describedby="file-upload-loading-browse"
           />