@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92

package/docs/layouts/Split/examples/Split.md

@@ -9,10 +9,10 @@ cssPrefix: pf-v5-l-split
 ### Basic
 
 ```html
-<div class="pf-v5-l-split">
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item pf-m-fill">pf-m-fill</div>
-  <div class="pf-v5-l-split__item">content</div>
+<div class="pf-v6-l-split">
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item pf-m-fill">pf-m-fill</div>
+  <div class="pf-v6-l-split__item">content</div>
 </div>
 
 ```
@@ -20,10 +20,10 @@ cssPrefix: pf-v5-l-split
 ### With gutter
 
 ```html
-<div class="pf-v5-l-split pf-m-gutter">
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item pf-m-fill">pf-m-fill</div>
-  <div class="pf-v5-l-split__item">content</div>
+<div class="pf-v6-l-split pf-m-gutter">
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item pf-m-fill">pf-m-fill</div>
+  <div class="pf-v6-l-split__item">content</div>
 </div>
 
 ```
@@ -31,21 +31,21 @@ cssPrefix: pf-v5-l-split
 ### Wrappable
 
 ```html
-<div class="pf-v5-l-split pf-m-gutter pf-m-wrap">
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
-  <div class="pf-v5-l-split__item">content</div>
+<div class="pf-v6-l-split pf-m-gutter pf-m-wrap">
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
+  <div class="pf-v6-l-split__item">content</div>
 </div>
 
 ```

package/docs/layouts/Stack/examples/Stack.md

@@ -9,10 +9,10 @@ cssPrefix: pf-v5-l-stack
 ### Basic
 
 ```html
-<div class="pf-v5-l-stack">
-  <div class="pf-v5-l-stack__item">content</div>
-  <div class="pf-v5-l-stack__item pf-m-fill">pf-m-fill</div>
-  <div class="pf-v5-l-stack__item">content</div>
+<div class="pf-v6-l-stack">
+  <div class="pf-v6-l-stack__item">content</div>
+  <div class="pf-v6-l-stack__item pf-m-fill">pf-m-fill</div>
+  <div class="pf-v6-l-stack__item">content</div>
 </div>
 
 ```
@@ -20,10 +20,10 @@ cssPrefix: pf-v5-l-stack
 ### With gutter
 
 ```html
-<div class="pf-v5-l-stack pf-m-gutter">
-  <div class="pf-v5-l-stack__item">content</div>
-  <div class="pf-v5-l-stack__item pf-m-fill">pf-m-fill</div>
-  <div class="pf-v5-l-stack__item">content</div>
+<div class="pf-v6-l-stack pf-m-gutter">
+  <div class="pf-v6-l-stack__item">content</div>
+  <div class="pf-v6-l-stack__item pf-m-fill">pf-m-fill</div>
+  <div class="pf-v6-l-stack__item">content</div>
 </div>
 
 ```

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

@@ -8,7 +8,7 @@ section: utility-classes
 ```html
 Content available only to screen reader, open inspector to investigate
 <span
-  class="pf-v5-u-screen-reader"
+  class="pf-v6-u-screen-reader"
 >This content is intended to be announced by assistive technologies, but not visually presented.</span>
 
 ```
@@ -17,7 +17,7 @@ Content available only to screen reader, open inspector to investigate
 
 ```html
 <span
-  class="pf-v5-u-visible"
+  class="pf-v6-u-visible"
 >This unsets .pf-v5-u-screen-reader and .pf-v5-screen-reader. It will be visible.</span>
 
 ```
@@ -26,7 +26,7 @@ Content available only to screen reader, open inspector to investigate
 
 ```html
 The text underneath is hidden.
-<span class="pf-v5-u-hidden">This text is hidden.</span>
+<span class="pf-v6-u-hidden">This text is hidden.</span>
 
 ```
 

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

@@ -8,10 +8,10 @@ section: utility-classes
 ### Basic
 
 ```html
-<div class="pf-v5-u-text-align-left">Text left</div>
-<div class="pf-v5-u-text-align-center">Text center</div>
-<div class="pf-v5-u-text-align-right">Text right</div>
-<div class="pf-v5-u-text-align-justify">
+<div class="pf-v6-u-text-align-left">Text left</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-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,
   quis nostrud exercitation ullamco laboris.

package/docs/utilities/Display/examples/Display.md

@@ -8,58 +8,58 @@ section: utility-classes
 ### Inline block
 
 ```html
-<div class="pf-v5-u-display-inline-block">.pf-v5-u-display-inline-block</div>
+<div class="pf-v6-u-display-inline-block">.pf-v5-u-display-inline-block</div>
 
 ```
 
 ### Block
 
 ```html
-<div class="pf-v5-u-display-block">.pf-v5-u-display-block</div>
+<div class="pf-v6-u-display-block">.pf-v5-u-display-block</div>
 
 ```
 
 ### Flex
 
 ```html
-<div class="pf-v5-u-display-flex">.pf-v5-u-display-flex</div>
+<div class="pf-v6-u-display-flex">.pf-v5-u-display-flex</div>
 
 ```
 
 ### Inline flex
 
 ```html
-<div class="pf-v5-u-display-inline-flex">.pf-v5-u-display-inline-flex</div>
+<div class="pf-v6-u-display-inline-flex">.pf-v5-u-display-inline-flex</div>
 
 ```
 
 ### Grid
 
 ```html
-<div class="pf-v5-u-display-grid">.pf-v5-u-display-grid</div>
+<div class="pf-v6-u-display-grid">.pf-v5-u-display-grid</div>
 
 ```
 
 ### Inline
 
 ```html
-<div class="pf-v5-u-display-inline">.pf-v5-u-display-inline</div>
+<div class="pf-v6-u-display-inline">.pf-v5-u-display-inline</div>
 
 ```
 
 ### Table
 
 ```html
-<div class="pf-v5-u-display-table">
-  <div class="pf-v5-u-display-table-row">
-    <div class="pf-v5-u-display-table-cell">table-cell</div>
-    <div class="pf-v5-u-display-table-cell">table-cell</div>
-    <div class="pf-v5-u-display-table-cell">table-cell</div>
+<div class="pf-v6-u-display-table">
+  <div class="pf-v6-u-display-table-row">
+    <div class="pf-v6-u-display-table-cell">table-cell</div>
+    <div class="pf-v6-u-display-table-cell">table-cell</div>
+    <div class="pf-v6-u-display-table-cell">table-cell</div>
   </div>
-  <div class="pf-v5-u-display-table-row">
-    <div class="pf-v5-u-display-table-cell">table-cell</div>
-    <div class="pf-v5-u-display-table-cell">table-cell</div>
-    <div class="pf-v5-u-display-table-cell">table-cell</div>
+  <div class="pf-v6-u-display-table-row">
+    <div class="pf-v6-u-display-table-cell">table-cell</div>
+    <div class="pf-v6-u-display-table-cell">table-cell</div>
+    <div class="pf-v6-u-display-table-cell">table-cell</div>
   </div>
 </div>
 
@@ -68,7 +68,7 @@ section: utility-classes
 ### None
 
 ```html
-<div class="pf-v5-u-display-none-on-sm">Hidden on sm breakpoint</div>
+<div class="pf-v6-u-display-none-on-sm">Hidden on sm breakpoint</div>
 
 ```
 

package/docs/utilities/Flex/examples/Flex.md

@@ -8,16 +8,16 @@ section: utility-classes
 ### Basic
 
 ```html
-<div class="pf-v5-u-display-flex">Display flex</div>
-<div class="pf-v5-u-display-inline-flex">Display inline flex</div>
+<div class="pf-v6-u-display-flex">Display flex</div>
+<div class="pf-v6-u-display-inline-flex">Display inline flex</div>
 
 ```
 
 ### Direction
 
 ```html
-<h2 class="pf-v5-c-title pf-m-lg">Flex row</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-flex-direction-row">
+<h2 class="pf-v6-c-title pf-m-lg">Flex row</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-flex-direction-row">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -25,8 +25,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Flex row-reverse</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-flex-direction-row-reverse">
+<h2 class="pf-v6-c-title pf-m-lg">Flex row-reverse</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-flex-direction-row-reverse">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -34,8 +34,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Flex column</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-flex-direction-column">
+<h2 class="pf-v6-c-title pf-m-lg">Flex column</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-flex-direction-column">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -43,8 +43,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Flex column-reverse</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-flex-direction-column-reverse">
+<h2 class="pf-v6-c-title pf-m-lg">Flex column-reverse</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-flex-direction-column-reverse">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -57,8 +57,8 @@ section: utility-classes
 ### Justified content
 
 ```html
-<h2 class="pf-v5-c-title pf-m-lg">Justify content flex-start</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-justify-content-flex-start">
+<h2 class="pf-v6-c-title pf-m-lg">Justify content flex-start</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-justify-content-flex-start">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -66,8 +66,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Justify content flex-end</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-justify-content-flex-end">
+<h2 class="pf-v6-c-title pf-m-lg">Justify content flex-end</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-justify-content-flex-end">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -75,8 +75,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Justify content center</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-justify-content-center">
+<h2 class="pf-v6-c-title pf-m-lg">Justify content center</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-justify-content-center">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -84,8 +84,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Justify content space-around</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-justify-content-space-around">
+<h2 class="pf-v6-c-title pf-m-lg">Justify content space-around</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-justify-content-space-around">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -93,8 +93,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Justify content space-between</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-justify-content-space-between">
+<h2 class="pf-v6-c-title pf-m-lg">Justify content space-between</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-justify-content-space-between">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -107,8 +107,8 @@ section: utility-classes
 ### Aligned items
 
 ```html
-<h2 class="pf-v5-c-title pf-m-lg">Align items flex-start</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-items-flex-start">
+<h2 class="pf-v6-c-title pf-m-lg">Align items flex-start</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item ws-example-u-flex-md">Flex item 2</div>
@@ -116,8 +116,8 @@ section: utility-classes
   <div class="ws-example-flex-item ws-example-u-flex-lg">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Align items flex-end</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-items-flex-end">
+<h2 class="pf-v6-c-title pf-m-lg">Align items flex-end</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-items-flex-end">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item ws-example-u-flex-md">Flex item 2</div>
@@ -125,8 +125,8 @@ section: utility-classes
   <div class="ws-example-flex-item ws-example-u-flex-lg">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Align items center</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-items-center">
+<h2 class="pf-v6-c-title pf-m-lg">Align items center</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-items-center">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item ws-example-u-flex-md">Flex item 2</div>
@@ -134,8 +134,8 @@ section: utility-classes
   <div class="ws-example-flex-item ws-example-u-flex-lg">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Align items baseline</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-items-baseline">
+<h2 class="pf-v6-c-title pf-m-lg">Align items baseline</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-items-baseline">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item ws-example-u-flex-md">Flex item 2</div>
@@ -143,8 +143,8 @@ section: utility-classes
   <div class="ws-example-flex-item ws-example-u-flex-lg">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Align items stretch</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-items-stretch">
+<h2 class="pf-v6-c-title pf-m-lg">Align items stretch</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-items-stretch">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -157,7 +157,7 @@ section: utility-classes
 ### Aligned self
 
 ```html
-<div class="pf-v5-u-display-flex">
+<div class="pf-v6-u-display-flex">
   <div class="ws-example-flex-item pf-v5-u-align-self-flex-start">flex-start</div>
   <div class="ws-example-flex-item pf-v5-u-align-self-center">center</div>
   <div class="ws-example-flex-item pf-v5-u-align-self-flex-end">flex end</div>
@@ -170,8 +170,8 @@ section: utility-classes
 ### Aligned content
 
 ```html
-<h2 class="pf-v5-c-title pf-m-lg">Align content flex-start</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-content-flex-start">
+<h2 class="pf-v6-c-title pf-m-lg">Align content flex-start</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-content-flex-start">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -183,8 +183,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 5</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Align content flex-end</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-content-flex-end">
+<h2 class="pf-v6-c-title pf-m-lg">Align content flex-end</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-content-flex-end">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -196,8 +196,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 5</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Align content center</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-content-center">
+<h2 class="pf-v6-c-title pf-m-lg">Align content center</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-content-center">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -209,8 +209,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 5</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Align content space-around</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-content-space-around">
+<h2 class="pf-v6-c-title pf-m-lg">Align content space-around</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-content-space-around">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -222,8 +222,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 5</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Align content space-between</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-content-space-between">
+<h2 class="pf-v6-c-title pf-m-lg">Align content space-between</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-content-space-between">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -235,8 +235,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 5</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Align content stretch</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-align-content-stretch">
+<h2 class="pf-v6-c-title pf-m-lg">Align content stretch</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-align-content-stretch">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -253,7 +253,7 @@ section: utility-classes
 ### Shrink
 
 ```html
-<div class="pf-v5-u-display-flex">
+<div class="pf-v6-u-display-flex">
   <div class="ws-example-flex-item pf-v5-u-flex-shrink-0">Flex shrink 0</div>
   <div class="ws-example-flex-item pf-v5-u-flex-shrink-1">Flex shrink 1</div>
 </div>
@@ -263,7 +263,7 @@ section: utility-classes
 ### Grow
 
 ```html
-<div class="pf-v5-u-display-flex">
+<div class="pf-v6-u-display-flex">
   <div class="ws-example-flex-item pf-v5-u-flex-grow-0">Flex grow 0</div>
   <div class="ws-example-flex-item pf-v5-u-flex-grow-1">Flex grow 1</div>
 </div>
@@ -273,7 +273,7 @@ section: utility-classes
 ### Basis and none
 
 ```html
-<div class="pf-v5-u-display-flex">
+<div class="pf-v6-u-display-flex">
   <div class="ws-example-flex-item pf-v5-u-flex-basis-0">Flex basis 0</div>
   <div class="ws-example-flex-item pf-v5-u-flex-basis-auto">Flex basis auto</div>
   <div class="ws-example-flex-item pf-v5-u-flex-basis-none">Flex basis none</div>
@@ -285,7 +285,7 @@ section: utility-classes
 ### Fill
 
 ```html
-<div class="pf-v5-u-display-flex">
+<div class="pf-v6-u-display-flex">
   <div class="ws-example-flex-item pf-v5-u-flex-none">Flex none</div>
   <div class="ws-example-flex-item pf-v5-u-flex-fill">Flex fill</div>
 </div>
@@ -295,8 +295,8 @@ section: utility-classes
 ### Wrap
 
 ```html
-<h2 class="pf-v5-c-title pf-m-lg">Flex wrap</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-flex-wrap">
+<h2 class="pf-v6-c-title pf-m-lg">Flex wrap</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-flex-wrap">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -304,8 +304,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Flex no wrap</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-flex-nowrap">
+<h2 class="pf-v6-c-title pf-m-lg">Flex no wrap</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-flex-nowrap">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -313,8 +313,8 @@ section: utility-classes
   <div class="ws-example-flex-item">Flex item 3</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Flex wrap reverse</h2>
-<div class="pf-v5-u-display-flex pf-v5-u-flex-wrap-reverse">
+<h2 class="pf-v6-c-title pf-m-lg">Flex wrap reverse</h2>
+<div class="pf-v6-u-display-flex pf-v5-u-flex-wrap-reverse">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>

package/docs/utilities/Float/examples/Float.md

@@ -8,8 +8,8 @@ section: utility-classes
 ### Basic
 
 ```html
-<div class="pf-v5-u-float-left">Float left</div>
-<div class="pf-v5-u-float-right">Float right</div>
+<div class="pf-v6-u-float-left">Float left</div>
+<div class="pf-v6-u-float-right">Float right</div>
 <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum, odit fugit eaque ad assumenda fuga alias aut ipsum repudiandae enim pariatur ullam distinctio omnis dolorem at voluptatum saepe, beatae officiis?</p>
 
 ```

package/docs/utilities/Spacing/examples/Spacing.md

@@ -11,9 +11,9 @@ pf: 'test'
 ### Margin
 
 ```html
-<h2 class="pf-v5-c-title pf-m-lg">Margin, marginX, marginY</h2>
+<h2 class="pf-v6-c-title pf-m-lg">Margin, marginX, marginY</h2>
 <div
-  class="pf-v5-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
 >
   <div class="ws-example-flex-item pf-v5-u-m-xl">Margin - xl</div>
   <div class="ws-example-flex-item pf-v5-u-mx-xl">Margin x axis - pf-v5-u-mx-xl</div>
@@ -21,10 +21,10 @@ pf: 'test'
 </div>
 <br />
 <h2
-  class="pf-v5-c-title pf-m-lg"
+  class="pf-v6-c-title pf-m-lg"
 >Margin top, margin right, margin bottom, margin left</h2>
 <div
-  class="pf-v5-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
 >
   <div class="ws-example-flex-item pf-v5-u-mt-xl">Margin-top - xl</div>
   <div class="ws-example-flex-item pf-v5-u-mr-xl">Margin-right - xl</div>
@@ -32,9 +32,9 @@ pf: 'test'
   <div class="ws-example-flex-item pf-v5-u-ml-xl">Margin-left - xl</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Responsive margin</h2>
+<h2 class="pf-v6-c-title pf-m-lg">Responsive margin</h2>
 <div
-  class="pf-v5-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-column pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-column pf-v5-u-flex-wrap"
 >
   <div class="ws-example-flex-item pf-v5-u-mt-xl">Margin-top - xl</div>
   <div class="ws-example-flex-item pf-v5-u-mt-xl-on-sm">Margin-top - xl on-sm</div>
@@ -48,9 +48,9 @@ pf: 'test'
 ### Padding
 
 ```html
-<h2 class="pf-v5-c-title pf-m-lg">Padding, paddingX, paddingY</h2>
+<h2 class="pf-v6-c-title pf-m-lg">Padding, paddingX, paddingY</h2>
 <div
-  class="pf-v5-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
 >
   <div class="ws-example-flex-item pf-v5-u-p-xl">Padding - xl</div>
   <div class="ws-example-flex-item pf-v5-u-px-xl">Padding x axis - pf-v5-u-px-xl</div>
@@ -58,10 +58,10 @@ pf: 'test'
 </div>
 <br />
 <h2
-  class="pf-v5-c-title pf-m-lg"
+  class="pf-v6-c-title pf-m-lg"
 >Padding top, padding right, padding bottom, padding left</h2>
 <div
-  class="pf-v5-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
 >
   <div class="ws-example-flex-item pf-v5-u-pt-xl">Padding-top - xl</div>
   <div class="ws-example-flex-item pf-v5-u-pr-xl">Padding-right - xl</div>
@@ -69,9 +69,9 @@ pf: 'test'
   <div class="ws-example-flex-item pf-v5-u-pl-xl">Padding-left - xl</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Responsive padding</h2>
+<h2 class="pf-v6-c-title pf-m-lg">Responsive padding</h2>
 <div
-  class="pf-v5-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-column pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-column pf-v5-u-flex-wrap"
 >
   <div class="ws-example-flex-item pf-v5-u-pt-xl">Padding-top</div>
   <div class="ws-example-flex-item pf-v5-u-pt-xl-on-sm">Padding-top - xl on-sm</div>
@@ -85,9 +85,9 @@ pf: 'test'
 ### Combined
 
 ```html
-<h2 class="pf-v5-c-title pf-m-lg">Combined spacers</h2>
+<h2 class="pf-v6-c-title pf-m-lg">Combined spacers</h2>
 <div
-  class="pf-v5-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
 >
   <div
     class="ws-example-flex-item pf-v5-u-p-lg pf-v5-u-m-lg"
@@ -97,9 +97,9 @@ pf: 'test'
   >Padding lg on-lg, margin lg</div>
 </div>
 <br />
-<h2 class="pf-v5-c-title pf-m-lg">Combined spacers (responsive)</h2>
+<h2 class="pf-v6-c-title pf-m-lg">Combined spacers (responsive)</h2>
 <div
-  class="pf-v5-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
 >
   <div
     class="ws-example-flex-item pf-v5-u-p-sm pf-v5-u-p-lg-on-md pf-v5-u-mr-lg"

package/layouts/Bullseye/bullseye.css

@@ -1,9 +1,9 @@
-.pf-v5-l-bullseye {
-  --pf-v5-l-bullseye--Padding: 0;
+.pf-v6-l-bullseye {
+  --pf-v6-l-bullseye--Padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: var(--pf-v5-l-bullseye--Padding);
+  padding: var(--pf-v6-l-bullseye--Padding);
   margin: 0;
 }