@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/docs/layouts/Bullseye/examples/Bullseye.css

@@ -1,5 +1,5 @@
-.ws-core-l-bullseye .pf-v5-l-bullseye,
-.ws-core-l-bullseye .pf-v5-l-bullseye__item {
-  padding: .5rem;
-  border: 2px dashed #393f44;
+.ws-core-l-bullseye .pf-v6-l-bullseye,
+.ws-core-l-bullseye .pf-v6-l-bullseye__item {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Flex/examples/Flex.css

@@ -1,6 +1,6 @@
 .ws-core-l-flex-border,
-.ws-core-l-flex .pf-v5-l-flex .pf-v5-l-flex,
-.ws-core-l-flex .pf-v5-l-flex__item {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+.ws-core-l-flex .pf-v6-l-flex .pf-v6-l-flex,
+.ws-core-l-flex .pf-v6-l-flex__item {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Flex/examples/Flex.md

@@ -364,15 +364,15 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-m-inline-flex{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout display property to inline-flex. |
-| `.pf-m-grow{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1. |
-| `.pf-m-shrink{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1. |
-| `.pf-m-full-width{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex item to full width of parent. |
-| `.pf-m-flex-1{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0. |
-| `.pf-m-flex-2{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0. |
-| `.pf-m-flex-3{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0. |
-| `.pf-m-flex-4{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0. |
-| `.pf-m-flex-default{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Resets a nested flex layout or flex item flex shorthand property to 0 1 auto. |
-| `.pf-m-flex-none{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none. |
+| `.pf-m-grow{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1. |
+| `.pf-m-shrink{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1. |
+| `.pf-m-full-width{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex item to full width of parent. |
+| `.pf-m-flex-1{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0. |
+| `.pf-m-flex-2{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0. |
+| `.pf-m-flex-3{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0. |
+| `.pf-m-flex-4{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0. |
+| `.pf-m-flex-default{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Resets a nested flex layout or flex item flex shorthand property to 0 1 auto. |
+| `.pf-m-flex-none{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none. |
 
 ## Column layout modifiers
 
@@ -627,13 +627,13 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies margin-inline-start property to auto. |
-| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Resets margin-inline-start property 0. |
-| `.pf-m-align-self-flex-start{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to flex-start. |
-| `.pf-m-align-self-flex-end{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to flex-end. |
-| `.pf-m-align-self-flex-center{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to center. |
-| `.pf-m-align-self-flex-baseline{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to baseline. |
-| `.pf-m-align-self-flex-stretch{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to stretch. |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies margin-inline-start property to auto. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Resets margin-inline-start property 0. |
+| `.pf-m-align-self-flex-start{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to flex-start. |
+| `.pf-m-align-self-flex-end{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to flex-end. |
+| `.pf-m-align-self-flex-center{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to center. |
+| `.pf-m-align-self-flex-baseline{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to baseline. |
+| `.pf-m-align-self-flex-stretch{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to stretch. |
 
 ## Justification
 
@@ -683,7 +683,7 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
 
 ## Ordering
 
-Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex__item`s. Spacing may need to be managed based on how items are ordered. Because order could apply to an innumerable number of elements, order is set inline as `--pf-v5-l-flex--item--Order{-on-[breakpoint]}: {order}`.
+Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex__item`s. Spacing may need to be managed based on how items are ordered. Because order could apply to an innumerable number of elements, order is set inline as `--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}`.
 
 ### Basic ordering example
 
@@ -691,15 +691,15 @@ Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex_
 <div class="pf-v6-l-flex">
   <div
     class="pf-v6-l-flex pf-m-spacer-none"
-    style="--pf-v5-l-flex--item--Order: 1;"
+    style="--pf-v6-l-flex--item--Order: 1;"
   >
     <div
       class="pf-v6-l-flex__item pf-m-spacer-none"
-      style="--pf-v5-l-flex--item--Order: 3;"
+      style="--pf-v6-l-flex--item--Order: 3;"
     >Set 1, Item A</div>
     <div
       class="pf-v6-l-flex__item"
-      style="--pf-v5-l-flex--item--Order: 1;"
+      style="--pf-v6-l-flex--item--Order: 1;"
     >Set 1, Item B</div>
     <div class="pf-v6-l-flex__item">Set 1, Item C</div>
     <div class="pf-v6-l-flex__item pf-m-order-2 pf-m-spacer-md">Set 1, Item D</div>
@@ -707,16 +707,16 @@ Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex_
   <div class="pf-v6-l-flex pf-m-spacer-md">
     <div
       class="pf-v6-l-flex__item pf-m-spacer-none"
-      style="--pf-v5-l-flex--item--Order: 3;"
+      style="--pf-v6-l-flex--item--Order: 3;"
     >Set 2, Item A</div>
     <div
       class="pf-v6-l-flex__item"
-      style="--pf-v5-l-flex--item--Order-on-lg: 1;"
+      style="--pf-v6-l-flex--item--Order-on-lg: 1;"
     >Set 2, Item B</div>
     <div class="pf-v6-l-flex__item">Set 2, Item C</div>
     <div
       class="pf-v6-l-flex__item pf-m-spacer-md"
-      style="--pf-v5-l-flex--item--Order: 2;"
+      style="--pf-v6-l-flex--item--Order: 2;"
     >Set 2, Item D</div>
   </div>
 </div>
@@ -729,12 +729,12 @@ Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex_
 <div class="pf-v6-l-flex">
   <div
     class="pf-v6-l-flex__item pf-m-spacer-none"
-    style="--pf-v5-l-flex--item--Order: 2;"
+    style="--pf-v6-l-flex--item--Order: 2;"
   >Item A</div>
   <div class="pf-v6-l-flex__item">Item B</div>
   <div
     class="pf-v6-l-flex__item pf-m-spacer-md"
-    style="--pf-v5-l-flex--item--Order: -1;"
+    style="--pf-v6-l-flex--item--Order: -1;"
   >Item C</div>
 </div>
 
@@ -746,15 +746,15 @@ Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex_
 <div class="pf-v6-l-flex">
   <div
     class="pf-v6-l-flex__item pf-m-spacer-none-on-lg"
-    style="--pf-v5-l-flex--item--Order-on-lg: 2;"
+    style="--pf-v6-l-flex--item--Order-on-lg: 2;"
   >Item A</div>
   <div
     class="pf-v6-l-flex__item pf-m-spacer-none-on-md pf-m-spacer-md-on-lg"
-    style="--pf-v5-l-flex--item--Order: -1; --pf-v5-l-flex--item--Order-on-md: 1;"
+    style="--pf-v6-l-flex--item--Order: -1; --pf-v6-l-flex--item--Order-on-md: 1;"
   >Item B</div>
   <div
     class="pf-v6-l-flex__item pf-m-spacer-md"
-    style="--pf-v5-l-flex--item--Order-on-md: -1;"
+    style="--pf-v6-l-flex--item--Order-on-md: -1;"
   >Item C</div>
 </div>
 
@@ -766,38 +766,38 @@ Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex_
 <div class="pf-v6-l-flex">
   <div
     class="pf-v6-l-flex pf-m-spacer-none"
-    style="--pf-v5-l-flex--item--Order-on-lg: 1;"
+    style="--pf-v6-l-flex--item--Order-on-lg: 1;"
   >
     <div
       class="pf-v6-l-flex__item"
-      style="--pf-v5-l-flex--item--Order-on-md: 2;"
+      style="--pf-v6-l-flex--item--Order-on-md: 2;"
     >Set 1, Item A</div>
     <div
       class="pf-v6-l-flex__item"
-      style="--pf-v5-l-flex--item--Order-on-md: -1;"
+      style="--pf-v6-l-flex--item--Order-on-md: -1;"
     >Set 1, Item B</div>
     <div
       class="pf-v6-l-flex__item"
-      style="--pf-v5-l-flex--item--Order-on-xl: 1;"
+      style="--pf-v6-l-flex--item--Order-on-xl: 1;"
     >Set 1, Item C</div>
     <div
       class="pf-v6-l-flex__item pf-m-spacer-none-on-xl"
-      style="--pf-v5-l-flex--item--Order-on-xl: 2;"
+      style="--pf-v6-l-flex--item--Order-on-xl: 2;"
     >Set 1, Item D</div>
   </div>
   <div class="pf-v6-l-flex pf-m-spacer-md-on-lg">
     <div
       class="pf-v6-l-flex__item pf-m-spacer-none"
-      style="--pf-v5-l-flex--item--Order: 3;"
+      style="--pf-v6-l-flex--item--Order: 3;"
     >Set 2, Item A</div>
     <div
       class="pf-v6-l-flex__item"
-      style="--pf-v5-l-flex--item--Order: 1;"
+      style="--pf-v6-l-flex--item--Order: 1;"
     >Set 2, Item B</div>
     <div class="pf-v6-l-flex__item">Set 2, Item C</div>
     <div
       class="pf-v6-l-flex__item pf-m-spacer-md"
-      style="--pf-v5-l-flex--item--Order: 2;"
+      style="--pf-v6-l-flex--item--Order: 2;"
     >Set 2, Item D</div>
   </div>
 </div>
@@ -808,7 +808,7 @@ Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex_
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies the flex layout element order property. |
+| `--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies the flex layout element order property. |
 
 ## Flex layout as list
 
@@ -832,15 +832,15 @@ Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex_
 | `.pf-v6-l-flex__item` | `.pf-v6-l-flex > *` | Initiates a flex item. **Required** |
 | `.pf-m-flex{-on-[breakpoint]}` | `.pf-v6-l-flex` | Initializes or resets the flex layout display property to flex. |
 | `.pf-m-inline-flex{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout display property to inline-flex. |
-| `.pf-m-grow{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1. |
-| `.pf-m-shrink{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1. |
-| `.pf-m-full-width{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex item to full width of parent. |
-| `.pf-m-flex-1{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0. |
-| `.pf-m-flex-2{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0. |
-| `.pf-m-flex-3{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0. |
-| `.pf-m-flex-4{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0. |
-| `.pf-m-flex-default{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Resets a nested flex layout or flex item flex shorthand property to 0 1 auto. |
-| `.pf-m-flex-none{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none. |
+| `.pf-m-grow{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1. |
+| `.pf-m-shrink{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1. |
+| `.pf-m-full-width{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex item to full width of parent. |
+| `.pf-m-flex-1{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0. |
+| `.pf-m-flex-2{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0. |
+| `.pf-m-flex-3{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0. |
+| `.pf-m-flex-4{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0. |
+| `.pf-m-flex-default{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Resets a nested flex layout or flex item flex shorthand property to 0 1 auto. |
+| `.pf-m-flex-none{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none. |
 | `.pf-m-column-reverse{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout flex-direction property to column-reverse. |
 | `.pf-m-row-reverse{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout flex-direction property to row-reverse. |
 | `.pf-m-wrap{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout flex-wrap property to wrap. |
@@ -863,16 +863,16 @@ Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex_
 | `.pf-m-align-content-stretch{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-content property to stretch. |
 | `.pf-m-align-content-space-between{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-content property to space-between. |
 | `.pf-m-align-content-space-around{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-content property to space-around. |
-| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Resets the flex layout element margin-inline-start property to 0. |
-| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies the flex layout element margin-inline-start property to auto. |
-| `--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-flex > .pf-v5-l-flex`, `.pf-v6-l-flex__item` | Modifies the flex layout element order property. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Resets the flex layout element margin-inline-start property to 0. |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies the flex layout element margin-inline-start property to auto. |
+| `--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies the flex layout element order property. |
 
 ### Spacer system usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}` | `.pf-v6-l-flex` |  Modifies the flex layout to add space between items on the main axis. |
-| `.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}` | `.pf-v6-l-flex`, `.pf-v6-l-flex > .pf-v5-l-flex__item` |  Modifies the spacer for any direct child along the main axis of a flex layout. |
+| `.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}` | `.pf-v6-l-flex`, `.pf-v6-l-flex > .pf-v6-l-flex__item` |  Modifies the spacer for any direct child along the main axis of a flex layout. |
 
 ### Gap spacing usage
 

package/docs/layouts/Gallery/examples/Gallery.css

@@ -1,5 +1,5 @@
-.ws-core-l-gallery .pf-v5-l-gallery,
-.ws-core-l-gallery .pf-v5-l-gallery__item {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+.ws-core-l-gallery .pf-v6-l-gallery,
+.ws-core-l-gallery .pf-v6-l-gallery__item {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Gallery/examples/Gallery.md

@@ -42,14 +42,14 @@ cssPrefix: pf-v6-l-gallery
 
 ### Grid template minmax() width customization
 
-Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.  Min-width is set inline as `--pf-v5-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}`.
+Grid template columms min value can be applied to <code>.pf-v6-l-gallery</code>.  Min-width is set inline as `--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}`.
 
 ### Min width modified gallery
 
 ```html
 <div
   class="pf-v6-l-gallery pf-m-gutter"
-  style="--pf-v5-l-gallery--GridTemplateColumns--min: 150px;"
+  style="--pf-v6-l-gallery--GridTemplateColumns--min: 150px;"
 >
   <div class="pf-v6-l-gallery__item">content</div>
 
@@ -69,7 +69,7 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
 ```html
 <div
   class="pf-v6-l-gallery pf-m-gutter"
-  style="--pf-v5-l-gallery--GridTemplateColumns--max: 300px;"
+  style="--pf-v6-l-gallery--GridTemplateColumns--max: 300px;"
 >
   <div class="pf-v6-l-gallery__item">content</div>
 
@@ -89,7 +89,7 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
 ```html
 <div
   class="pf-v6-l-gallery pf-m-gutter"
-  style="--pf-v5-l-gallery--GridTemplateColumns--min-on-md: 100px; --pf-v5-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v5-l-gallery--GridTemplateColumns--min-on-xl: 200px; --pf-v5-l-gallery--GridTemplateColumns--min-on-2xl: 300px;"
+  style="--pf-v6-l-gallery--GridTemplateColumns--min-on-md: 100px; --pf-v6-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v6-l-gallery--GridTemplateColumns--min-on-xl: 200px; --pf-v6-l-gallery--GridTemplateColumns--min-on-2xl: 300px;"
 >
   <div class="pf-v6-l-gallery__item">content</div>
 
@@ -109,7 +109,7 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
 ```html
 <div
   class="pf-v6-l-gallery pf-m-gutter"
-  style="--pf-v5-l-gallery--GridTemplateColumns--max-on-md: 280px; --pf-v5-l-gallery--GridTemplateColumns--max-on-lg: 320px; --pf-v5-l-gallery--GridTemplateColumns--max-on-2xl: 400px;"
+  style="--pf-v6-l-gallery--GridTemplateColumns--max-on-md: 280px; --pf-v6-l-gallery--GridTemplateColumns--max-on-lg: 320px; --pf-v6-l-gallery--GridTemplateColumns--max-on-2xl: 400px;"
 >
   <div class="pf-v6-l-gallery__item">content</div>
 
@@ -129,7 +129,7 @@ Grid template columms min value can be applied to <code>.pf-v5-l-gallery</code>.
 ```html
 <div
   class="pf-v6-l-gallery pf-m-gutter"
-  style="--pf-v5-l-gallery--GridTemplateColumns--min: 100%; --pf-v5-l-gallery--GridTemplateColumns--min-on-md: 100px; --pf-v5-l-gallery--GridTemplateColumns--max-on-md: 200px; --pf-v5-l-gallery--GridTemplateColumns--min-on-xl: 300px; --pf-v5-l-gallery--GridTemplateColumns--max-on-xl: 1fr;"
+  style="--pf-v6-l-gallery--GridTemplateColumns--min: 100%; --pf-v6-l-gallery--GridTemplateColumns--min-on-md: 100px; --pf-v6-l-gallery--GridTemplateColumns--max-on-md: 200px; --pf-v6-l-gallery--GridTemplateColumns--min-on-xl: 300px; --pf-v6-l-gallery--GridTemplateColumns--max-on-xl: 1fr;"
 >
   <div class="pf-v6-l-gallery__item">content</div>
 

package/docs/layouts/Grid/examples/Grid.css

@@ -1,4 +1,4 @@
-.ws-core-l-grid .pf-v5-l-grid__item {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+.ws-core-l-grid .pf-v6-l-grid__item {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Grid/examples/Grid.md

@@ -179,19 +179,31 @@ cssPrefix: pf-v6-l-grid
 
 ```
 
-### Ordering
+### As a list
 
-Ordering - Ordering can be applied to nested <code>.pf-v5-l-grid</code> and <code>.pf-v5-l-grid\_\_item</code>s. Spacing may need to be managed based on how items are ordered. Because order could apply to an innumerable number of elements, order is set inline as `--pf-v5-l-grid--item--Order{-on-[breakpoint]}: {order}`.
+```html
+<ul class="pf-v6-l-grid pf-m-all-6-col-on-sm">
+  <li class="pf-v6-l-grid__item">item 1</li>
+  <li class="pf-v6-l-grid__item">item 2</li>
+  <li class="pf-v6-l-grid__item">item 3</li>
+  <li class="pf-v6-l-grid__item">item 4</li>
+</ul>
+
+```
+
+## Ordering
+
+Ordering - Ordering can be applied to nested <code>.pf-v6-l-grid</code> and <code>.pf-v6-l-grid\_\_item</code>s. Spacing may need to be managed based on how items are ordered. Because order could apply to an innumerable number of elements, order is set inline as `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}`.
 
 ### Ordering example
 
 ```html
 <div class="pf-v6-l-grid pf-m-all-4-col pf-m-gutter">
-  <div class="pf-v6-l-grid__item" style="--pf-v5-l-grid--item--Order: 2;">Item A</div>
+  <div class="pf-v6-l-grid__item" style="--pf-v6-l-grid--item--Order: 2;">Item A</div>
   <div class="pf-v6-l-grid__item">Item B</div>
   <div
     class="pf-v6-l-grid__item"
-    style="--pf-v5-l-grid--item--Order: -1;"
+    style="--pf-v6-l-grid--item--Order: -1;"
   >Item C</div>
 </div>
 
@@ -203,12 +215,12 @@ Ordering - Ordering can be applied to nested <code>.pf-v5-l-grid</code> and <cod
 <div class="pf-v6-l-grid pf-m-all-4-col pf-m-gutter">
   <div
     class="pf-v6-l-grid__item"
-    style="--pf-v5-l-grid--item--Order-on-lg: 2;"
+    style="--pf-v6-l-grid--item--Order-on-lg: 2;"
   >Item A</div>
   <div class="pf-v6-l-grid__item">Item B</div>
   <div
     class="pf-v6-l-grid__item"
-    style="--pf-v5-l-grid--item--Order: -1; --pf-v5-l-grid--item--Order-on-md: 1;"
+    style="--pf-v6-l-grid--item--Order: -1; --pf-v6-l-grid--item--Order-on-md: 1;"
   >Item C</div>
 </div>
 
@@ -218,34 +230,34 @@ Ordering - Ordering can be applied to nested <code>.pf-v5-l-grid</code> and <cod
 
 ```html
 <div class="pf-v6-l-grid pf-m-all-6-col-on-md pf-m-gutter">
-  <div class="pf-v6-l-grid pf-m-gutter" style="--pf-v5-l-grid--item--Order: 2;">
+  <div class="pf-v6-l-grid pf-m-gutter" style="--pf-v6-l-grid--item--Order: 2;">
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order: 3;"
+      style="--pf-v6-l-grid--item--Order: 3;"
     >Set 1, Item A</div>
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order: 1;"
+      style="--pf-v6-l-grid--item--Order: 1;"
     >Set 1, Item B</div>
     <div class="pf-v6-l-grid__item">Set 1, Item C</div>
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order: 2;"
+      style="--pf-v6-l-grid--item--Order: 2;"
     >Set 1, Item D</div>
   </div>
   <div class="pf-v6-l-grid pf-m-gutter">
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order: 3;"
+      style="--pf-v6-l-grid--item--Order: 3;"
     >Set 2, Item A</div>
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order: 1;"
+      style="--pf-v6-l-grid--item--Order: 1;"
     >Set 2, Item B</div>
     <div class="pf-v6-l-grid__item">Set 2, Item C</div>
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order: 2;"
+      style="--pf-v6-l-grid--item--Order: 2;"
     >Set 2, Item D</div>
   </div>
 </div>
@@ -258,53 +270,41 @@ Ordering - Ordering can be applied to nested <code>.pf-v5-l-grid</code> and <cod
 <div class="pf-v6-l-grid pf-m-all-6-col-on-md pf-m-gutter">
   <div
     class="pf-v6-l-grid pf-m-gutter"
-    style="--pf-v5-l-grid--item--Order-on-lg: 2;"
+    style="--pf-v6-l-grid--item--Order-on-lg: 2;"
   >
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order-on-md: 3;"
+      style="--pf-v6-l-grid--item--Order-on-md: 3;"
     >Set 1, Item A</div>
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order-on-md: 1;"
+      style="--pf-v6-l-grid--item--Order-on-md: 1;"
     >Set 1, Item B</div>
     <div class="pf-v6-l-grid__item">Set 1, Item C</div>
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order-on-xl: 2;"
+      style="--pf-v6-l-grid--item--Order-on-xl: 2;"
     >Set 1, Item D</div>
   </div>
   <div class="pf-v6-l-grid pf-m-gutter">
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order: 3;"
+      style="--pf-v6-l-grid--item--Order: 3;"
     >Set 2, Item A</div>
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order: 1;"
+      style="--pf-v6-l-grid--item--Order: 1;"
     >Set 2, Item B</div>
     <div class="pf-v6-l-grid__item">Set 2, Item C</div>
     <div
       class="pf-v6-l-grid__item"
-      style="--pf-v5-l-grid--item--Order: 2;"
+      style="--pf-v6-l-grid--item--Order: 2;"
     >Set 2, Item D</div>
   </div>
 </div>
 
 ```
 
-### List type
-
-```html
-<ul class="pf-v6-l-grid pf-m-all-6-col-on-sm">
-  <li class="pf-v6-l-grid__item">item 1</li>
-  <li class="pf-v6-l-grid__item">item 2</li>
-  <li class="pf-v6-l-grid__item">item 3</li>
-  <li class="pf-v6-l-grid__item">item 4</li>
-</ul>
-
-```
-
 ## Documentation
 
 ### Overview
@@ -321,4 +321,4 @@ The grid layout is based on CSS Grid’s two-dimensional system of columns and r
 | `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid` | Defines grid item size on grid container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item size at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
 | `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item row span at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: .pf-m-8-col.pf-m-2-row + .pf-m-4-col + .pf-m-4-col. There is no limit to number of spanned rows. |
-| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v5-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v6-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/layouts/Level/examples/Level.css

@@ -3,11 +3,11 @@
   flex-wrap: wrap;
   min-height: 160px;
 }
-.ws-core-l-level .pf-v5-l-level__item,
-.ws-core-l-level .pf-v5-l-level {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+.ws-core-l-level .pf-v6-l-level__item,
+.ws-core-l-level .pf-v6-l-level {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }
-.ws-core-l-level .pf-v5-l-level {
+.ws-core-l-level .pf-v6-l-level {
   width: 100%;
 }

package/docs/layouts/Split/examples/Split.css

@@ -1,5 +1,5 @@
-.ws-core-l-split .pf-v5-l-split,
-.ws-core-l-split .pf-v5-l-split__item {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+.ws-core-l-split .pf-v6-l-split,
+.ws-core-l-split .pf-v6-l-split__item {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Stack/examples/Stack.css

@@ -1,7 +1,7 @@
-.ws-core-l-stack .pf-v5-l-stack,
-.ws-core-l-stack .pf-v5-l-stack__item {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+.ws-core-l-stack .pf-v6-l-stack,
+.ws-core-l-stack .pf-v6-l-stack__item {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }
 
 .ws-core-l-stack .ws-preview-html {
@@ -11,6 +11,6 @@
   width: 100%;
 }
 
-.ws-core-l-stack .pf-v5-l-stack {
+.ws-core-l-stack .pf-v6-l-stack {
   flex-grow: 1;
 }

package/docs/utilities/Accessibility/examples/Accessibility.md

@@ -18,7 +18,7 @@ Content available only to screen reader, open inspector to investigate
 ```html
 <span
   class="pf-v6-u-visible"
->This unsets .pf-v5-u-screen-reader and .pf-v5-screen-reader. It will be visible.</span>
+>This unsets .pf-v6-u-screen-reader and .pf-v6-screen-reader. It will be visible.</span>
 
 ```
 
@@ -34,7 +34,7 @@ The text underneath is hidden.
 
 ### Overview
 
-[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-screen-reader-on-lg**
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-screen-reader-on-lg**
 
 ### Usage
 

package/docs/utilities/Alignment/examples/Alignment.css

@@ -1,7 +1,7 @@
-.ws-core-u-alignment .pf-v5-u-text-align-left,
-.ws-core-u-alignment .pf-v5-u-text-align-center,
-.ws-core-u-alignment .pf-v5-u-text-align-right,
-.ws-core-u-alignment .pf-v5-u-text-align-justify {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+.ws-core-u-alignment .pf-v6-u-text-align-start,
+.ws-core-u-alignment .pf-v6-u-text-align-center,
+.ws-core-u-alignment .pf-v6-u-text-align-end,
+.ws-core-u-alignment .pf-v6-u-text-align-justify {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/utilities/Alignment/examples/Alignment.md

@@ -8,9 +8,9 @@ section: utility-classes
 ### Basic
 
 ```html
-<div class="pf-v6-u-text-align-left">Text left</div>
+<div class="pf-v6-u-text-align-start">Text start</div>
 <div class="pf-v6-u-text-align-center">Text center</div>
-<div class="pf-v6-u-text-align-right">Text right</div>
+<div class="pf-v6-u-text-align-end">Text end</div>
 <div class="pf-v6-u-text-align-justify">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -23,13 +23,13 @@ section: utility-classes
 
 ### Overview
 
-[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-text-left-on-lg**
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-text-align-start-on-lg**
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v6-u-text-align-left{-on-[breakpoint]}` | `*` |  Aligns text left |
+| `.pf-v6-u-text-align-start{-on-[breakpoint]}` | `*` |  Aligns text start |
 | `.pf-v6-u-text-align-center{-on-[breakpoint]}` | `*` |  Aligns text center |
-| `.pf-v6-u-text-align-right{-on-[breakpoint]}` | `*` |  Aligns text right |
+| `.pf-v6-u-text-align-end{-on-[breakpoint]}` | `*` |  Aligns text end |
 | `.pf-v6-u-text-align-justify{-on-[breakpoint]}` | `*` |  Aligns text justify |