@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.11

package/docs/components/DualListSelector/examples/DualListSelector.md

@@ -38,7 +38,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -252,7 +255,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -367,7 +373,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -575,7 +584,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -690,7 +702,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -898,7 +913,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1013,7 +1031,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1221,7 +1242,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1349,7 +1373,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1556,7 +1583,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1684,7 +1714,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2160,7 +2193,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2275,7 +2311,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2732,7 +2771,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2914,7 +2956,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -3099,7 +3144,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button

package/docs/components/Label/examples/Label.md

@@ -3265,7 +3265,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-label-group__close > button] [id value of .pf-v5-c-label-group__label]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
 | `aria-label="[label text]"` | `.pf-v5-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |

package/docs/components/LogViewer/examples/LogViewer.css

@@ -6,8 +6,8 @@
   display: none;
   position: absolute;
   z-index: 9999;
-  top: 52px;
-  right: 78px;
+ inset-block-start: 52px;
+ inset-inline-end: 78px;
 }
 
 @media screen and (min-width: 992px) {

package/docs/components/LogViewer/examples/LogViewer.md

@@ -365,7 +365,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-basic-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -382,7 +385,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-basic-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -399,7 +405,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-basic-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>
@@ -926,7 +935,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-line-number-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -943,7 +955,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-line-number-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -960,7 +975,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-line-number-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>
@@ -1487,7 +1505,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-line-number-chars-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -1504,7 +1525,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-line-number-chars-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -1521,7 +1545,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-line-number-chars-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>
@@ -2048,7 +2075,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-text-wrap-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -2065,7 +2095,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-text-wrap-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -2082,7 +2115,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-text-wrap-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>
@@ -2609,7 +2645,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-text-nowrap-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -2626,7 +2665,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-text-nowrap-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -2643,7 +2685,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-text-nowrap-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>
@@ -3197,7 +3242,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-search-results-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -3214,7 +3262,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-search-results-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -3231,7 +3282,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-search-results-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>
@@ -3801,7 +3855,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-max-height-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -3818,7 +3875,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-max-height-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -3835,7 +3895,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-max-height-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>
@@ -4360,7 +4423,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-dropdowns-expanded-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -4377,7 +4443,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-dropdowns-expanded-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -4394,7 +4463,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-dropdowns-expanded-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>
@@ -4921,7 +4993,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-popover-expanded-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -4938,7 +5013,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-popover-expanded-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -4955,7 +5033,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-popover-expanded-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>
@@ -5542,7 +5623,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-dark-example-check-wrap-lines"
                         />
 
-                        <span class="pf-v5-c-check__label">Wrap lines</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Wrap lines</span>
                       </label>
                     </div>
                   </li>
@@ -5559,7 +5643,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-dark-example-check-show-timestamps"
                         />
 
-                        <span class="pf-v5-c-check__label">Show timestamps</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Show timestamps</span>
                       </label>
                     </div>
                   </li>
@@ -5576,7 +5663,10 @@ cssPrefix: pf-v5-c-log-viewer
                           name="log-viewer-dark-example-check-line-number"
                         />
 
-                        <span class="pf-v5-c-check__label">Display line number</span>
+                        <span
+                          class="pf-v5-c-check__label"
+                          for="-input"
+                        >Display line number</span>
                       </label>
                     </div>
                   </li>

package/docs/components/Masthead/examples/masthead.md

@@ -44,12 +44,13 @@ cssPrefix: pf-v5-c-masthead
     <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
   </div>
   <div class="pf-v5-c-masthead__content">
-    <div class="pf-v5-l-flex">
-      <span>Content</span>
-      <button class="pf-v5-c-button pf-m-primary" type="button">Primary</button>
-      <button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
-      <button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
-    </div>
+    <span>Content</span>
+    <button
+      class="pf-v5-c-button pf-m-primary pf-v5-u-text-align-right"
+      type="button"
+    >Primary</button>
+    <button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
+    <button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
   </div>
 </header>
 
@@ -127,52 +128,6 @@ cssPrefix: pf-v5-c-masthead
 
 ```
 
-### Light variant
-
-```html
-<header class="pf-v5-c-masthead pf-m-light" id="light-masthead">
-  <span class="pf-v5-c-masthead__toggle">
-    <button
-      class="pf-v5-c-button pf-m-plain"
-      type="button"
-      aria-label="Global navigation"
-    >
-      <i class="fas fa-bars" aria-hidden="true"></i>
-    </button>
-  </span>
-  <div class="pf-v5-c-masthead__main">
-    <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
-  </div>
-  <div class="pf-v5-c-masthead__content">
-    <span>Content</span>
-  </div>
-</header>
-
-```
-
-### Light 200 variant
-
-```html
-<header class="pf-v5-c-masthead pf-m-light-200" id="light-200-masthead">
-  <span class="pf-v5-c-masthead__toggle">
-    <button
-      class="pf-v5-c-button pf-m-plain"
-      type="button"
-      aria-label="Global navigation"
-    >
-      <i class="fas fa-bars" aria-hidden="true"></i>
-    </button>
-  </span>
-  <div class="pf-v5-c-masthead__main">
-    <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
-  </div>
-  <div class="pf-v5-c-masthead__content">
-    <span>Content</span>
-  </div>
-</header>
-
-```
-
 ### Insets
 
 ```html
@@ -208,5 +163,3 @@ cssPrefix: pf-v5-c-masthead
 | `.pf-v5-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component. |
 | `.pf-v5-c-masthead__content` | `<div>` | Initiates the masthead content component. |
 | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v5-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-light` | `.pf-v5-c-masthead` |  Modifies a masthead component to have a light theme with a background color of `--pf-v5-global--BackgroundColor--100`. |
-| `.pf-m-light-200` | `.pf-v5-c-masthead` |  Modifies a masthead component to have a light theme with a background color of `--pf-v5-global--BackgroundColor--200`. |

package/docs/components/Menu/examples/Menu.css

@@ -16,3 +16,11 @@
   align-items: flex-end;
   justify-content: flex-end;
 }
+
+:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) {
+  position: relative;
+}
+
+:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) .pf-v5-c-breadcrumb__dropdown .pf-v5-c-menu {
+  position: absolute;
+}