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

package/docs/utilities/BackgroundColor/examples/BackgroundColor.md

@@ -6,66 +6,15 @@ section: utility-classes
 ### Standard background colors
 
 ```html
-<div class="pf-v5-u-background-color-100">Background color 100</div>
-<br />
-<div class="pf-v5-u-background-color-200">Background color 200</div>
-<br />
-<div class="pf-v5-u-background-color-active-color-100">
-  <div class="pf-v5-u-color-light-200">Active color 100</div>
-</div>
-<br />
-<div class="pf-v5-u-background-color-active-color-300">
-  <div class="pf-v5-u-color-light-200">Active color 300</div>
-</div>
-<br />
-<div class="pf-v5-u-background-color-primary-color-200">
-  <div class="pf-v5-u-color-light-200">Primary color 200</div>
-</div>
-
-```
-
-### Inverse background colors
-
-```html
-<div class="pf-v5-u-background-color-dark-100">
-  <div class="pf-v5-u-color-light-200">Background color dark 100</div>
-</div>
-<br />
-<div class="pf-v5-u-background-color-dark-200">
-  <div class="pf-v5-u-color-light-200">Background color dark 200</div>
-</div>
-<br />
-<div class="pf-v5-u-background-color-dark-300">
-  <div class="pf-v5-u-color-light-200">Background color dark 300</div>
+<div class="pf-v6-u-background-color-disabled">
+  <div class="pf-v6-u-text-color-on-disabled">Disabled background color</div>
 </div>
 <br />
-<div class="pf-v5-u-background-color-dark-400">
-  <div class="pf-v5-u-color-light-200">Background color dark 400</div>
+<div class="pf-v6-u-background-color-inverse">
+  <div class="pf-v6-u-text-color-inverse">Inverse background color</div>
 </div>
-
-```
-
-### Disabled background colors
-
-```html
-<div class="pf-v5-u-background-color-disabled-color-200">Disabled color 200</div>
-<br />
-<div class="pf-v5-u-background-color-disabled-color-300">Disabled color 300</div>
-
-```
-
-### Status and state background colors
-
-```html
-<div class="pf-v5-u-background-color-default">Default</div>
-<br />
-<div class="pf-v5-u-background-color-success">Success</div>
-<br />
-<div class="pf-v5-u-background-color-info">Info</div>
-<br />
-<div class="pf-v5-u-background-color-warning">Warning</div>
 <br />
-<div class="pf-v5-u-background-color-danger">Danger</div>
+<div class="pf-v6-u-background-color-highlight">Highlight background color</div>
 
 ```
 
@@ -79,19 +28,10 @@ Care should be taken especially when applying background colors, as this can hav
 
 Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utility-classes/text#inverse-colors).
 
-[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-background-color-200-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-background-color-disabled-on-lg**
 
 ### Usage
 
 | Class                             | Applied to | Outcome                            |
 | --------------------------------- | ---------- | ---------------------------------- |
-| `.pf-v6-u-background-color-{100, 200}{-on-[breakpoint]}`                | `*`        | Applies background color 100 or 200.      |
-| `.pf-v6-u-background-color-active-color-{100, 300}{-on-[breakpoint]}`   | `*`        | Applies background color active 100 or 300. |
-| `.pf-v6-u-background-color-primary-color-200{-on-[breakpoint]}`         | `*`        | Applies background color primary 200. |
-| `.pf-v6-u-background-color-dark-{100, 200, 300, 400}{-on-[breakpoint]}` | `*`        | Applies background color dark 100, 200, 300, or 400. |
-| `.pf-v6-u-background-color-disabled-color-{200, 300}{-on-[breakpoint]}` | `*`        | Applies background color disabled 200 or 300. |
-| `.pf-v6-u-background-color-default{-on-[breakpoint]}`  | `*`        | Applies the background color for the default state.  |
-| `.pf-v6-u-background-color-success{-on-[breakpoint]}`  | `*`        | Applies the background color for the success state.  |
-| `.pf-v6-u-background-color-info{-on-[breakpoint]}`     | `*`        | Applies the background color for the info state.     |
-| `.pf-v6-u-background-color-warning{-on-[breakpoint]}`  | `*`        | Applies the background color for the warning state.  |
-| `.pf-v6-u-background-color-danger{-on-[breakpoint]}`   | `*`        | Applies the background color for the danger state.   |
+| `.pf-v6-u-background-color-{disabled, inverse, highlight}{-on-[breakpoint]}`                | `*`        | Applies background color |

package/docs/utilities/BoxShadow/examples/box-shadow.css

@@ -1,20 +1,20 @@
-.ws-core-u-box-shadow [class*="pf-v5-u-box-shadow"] {
-  padding: var(--pf-v5-global--spacer--lg);
-  margin-block-end: var(--pf-v5-global--spacer--md);
+.ws-core-u-box-shadow [class*="pf-v6-u-box-shadow"] {
+  padding: var(--pf-v6-global--spacer--lg);
+  margin-block-end: var(--pf-v6-global--spacer--md);
 }
 
-#ws-core-u-box-shadow-small [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-block-end: var(--pf-v5-global--spacer--lg);
+#ws-core-u-box-shadow-small [class*="pf-v6-u-box-shadow"]:not(:last-child) {
+  margin-block-end: var(--pf-v6-global--spacer--lg);
 }
 
-#ws-core-u-box-shadow-medium [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-block-end: var(--pf-v5-global--spacer--xl);
+#ws-core-u-box-shadow-medium [class*="pf-v6-u-box-shadow"]:not(:last-child) {
+  margin-block-end: var(--pf-v6-global--spacer--xl);
 }
 
-#ws-core-u-box-shadow-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-block-end: var(--pf-v5-global--spacer--2xl);
+#ws-core-u-box-shadow-large [class*="pf-v6-u-box-shadow"]:not(:last-child) {
+  margin-block-end: var(--pf-v6-global--spacer--2xl);
 }
 
-#ws-core-u-box-shadow-extra-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-block-end: var(--pf-v5-global--spacer--3xl);
+#ws-core-u-box-shadow-extra-large [class*="pf-v6-u-box-shadow"]:not(:last-child) {
+  margin-block-end: var(--pf-v6-global--spacer--3xl);
 }

package/docs/utilities/BoxShadow/examples/box-shadow.md

@@ -8,51 +8,33 @@ section: utility-classes
 ### Small
 
 ```html
-<div class="pf-v5-u-box-shadow-sm">Regular</div>
-<div class="pf-v5-u-box-shadow-sm-top">Top</div>
-<div class="pf-v5-u-box-shadow-sm-right">Right</div>
-<div class="pf-v5-u-box-shadow-sm-bottom">Bottom</div>
-<div class="pf-v5-u-box-shadow-sm-left">Left</div>
+<div class="pf-v6-u-box-shadow-sm">Regular</div>
+<div class="pf-v6-u-box-shadow-sm-top">Top</div>
+<div class="pf-v6-u-box-shadow-sm-right">Right</div>
+<div class="pf-v6-u-box-shadow-sm-bottom">Bottom</div>
+<div class="pf-v6-u-box-shadow-sm-left">Left</div>
 
 ```
 
 ### Medium
 
 ```html
-<div class="pf-v5-u-box-shadow-md">Regular</div>
-<div class="pf-v5-u-box-shadow-md-top">Top</div>
-<div class="pf-v5-u-box-shadow-md-right">Right</div>
-<div class="pf-v5-u-box-shadow-md-bottom">Bottom</div>
-<div class="pf-v5-u-box-shadow-md-left">Left</div>
+<div class="pf-v6-u-box-shadow-md">Regular</div>
+<div class="pf-v6-u-box-shadow-md-top">Top</div>
+<div class="pf-v6-u-box-shadow-md-right">Right</div>
+<div class="pf-v6-u-box-shadow-md-bottom">Bottom</div>
+<div class="pf-v6-u-box-shadow-md-left">Left</div>
 
 ```
 
 ### Large
 
 ```html
-<div class="pf-v5-u-box-shadow-lg">Regular</div>
-<div class="pf-v5-u-box-shadow-lg-top">Top</div>
-<div class="pf-v5-u-box-shadow-lg-right">Right</div>
-<div class="pf-v5-u-box-shadow-lg-bottom">Bottom</div>
-<div class="pf-v5-u-box-shadow-lg-left">Left</div>
-
-```
-
-### Extra large
-
-```html
-<div class="pf-v5-u-box-shadow-xl">Regular</div>
-<div class="pf-v5-u-box-shadow-xl-top">Top</div>
-<div class="pf-v5-u-box-shadow-xl-right">Right</div>
-<div class="pf-v5-u-box-shadow-xl-bottom">Bottom</div>
-<div class="pf-v5-u-box-shadow-xl-left">Left</div>
-
-```
-
-### Inset
-
-```html
-<div class="pf-v5-u-box-shadow-inset">Regular</div>
+<div class="pf-v6-u-box-shadow-lg">Regular</div>
+<div class="pf-v6-u-box-shadow-lg-top">Top</div>
+<div class="pf-v6-u-box-shadow-lg-right">Right</div>
+<div class="pf-v6-u-box-shadow-lg-bottom">Bottom</div>
+<div class="pf-v6-u-box-shadow-lg-left">Left</div>
 
 ```
 
@@ -81,8 +63,3 @@ Box shadow utility
 | `.pf-v6-u-box-shadow-lg-right` | `*` |  Applies box-shadow large right. |
 | `.pf-v6-u-box-shadow-lg-bottom` | `*` |  Applies box-shadow large bottom. |
 | `.pf-v6-u-box-shadow-lg-left` | `*` |  Applies box-shadow large left. |
-| `.pf-v6-u-box-shadow-xl` | `*` |  Applies box-shadow x-large. |
-| `.pf-v6-u-box-shadow-xl-top` | `*` |  Applies box-shadow x-large top. |
-| `.pf-v6-u-box-shadow-xl-right` | `*` |  Applies box-shadow x-large right. |
-| `.pf-v6-u-box-shadow-xl-bottom` | `*` |  Applies box-shadow x-large bottom. |
-| `.pf-v6-u-box-shadow-xl-left` | `*` |  Applies box-shadow x-large left. |

package/docs/utilities/Display/examples/Display.css

@@ -1,11 +1,4 @@
-.ws-core-u-display .pf-v5-u-display-inline-block,
-.ws-core-u-display .pf-v5-u-display-block,
-.ws-core-u-display .pf-v5-u-display-flex,
-.ws-core-u-display .pf-v5-u-display-inline-flex,
-.ws-core-u-display .pf-v5-u-display-grid,
-.ws-core-u-display .pf-v5-u-display-inline,
-.ws-core-u-display .pf-v5-u-display-table,
-.ws-core-u-display .pf-v5-u-display-table-cell {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+.ws-core-u-display [class*="pf-v6-u-display-"] {
+  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/Display/examples/Display.md

@@ -5,49 +5,56 @@ section: utility-classes
 
 ## Examples
 
-### Inline block
+### Inline
 
 ```html
-<div class="pf-v6-u-display-inline-block">.pf-v5-u-display-inline-block</div>
+<div class="pf-v6-u-display-inline">.pf-v6-u-display-inline</div>
 
 ```
 
 ### Block
 
 ```html
-<div class="pf-v6-u-display-block">.pf-v5-u-display-block</div>
+<div class="pf-v6-u-display-block">.pf-v6-u-display-block</div>
+
+```
+
+### Inline block
+
+```html
+<div class="pf-v6-u-display-inline-block">.pf-v6-u-display-inline-block</div>
 
 ```
 
 ### Flex
 
 ```html
-<div class="pf-v6-u-display-flex">.pf-v5-u-display-flex</div>
+<div class="pf-v6-u-display-flex">.pf-v6-u-display-flex</div>
 
 ```
 
 ### Inline flex
 
 ```html
-<div class="pf-v6-u-display-inline-flex">.pf-v5-u-display-inline-flex</div>
+<div class="pf-v6-u-display-inline-flex">.pf-v6-u-display-inline-flex</div>
 
 ```
 
 ### Grid
 
 ```html
-<div class="pf-v6-u-display-grid">.pf-v5-u-display-grid</div>
+<div class="pf-v6-u-display-grid">.pf-v6-u-display-grid</div>
 
 ```
 
-### Inline
+### Inline grid
 
 ```html
-<div class="pf-v6-u-display-inline">.pf-v5-u-display-inline</div>
+<div class="pf-v6-u-display-inline-grid">.pf-v6-u-display-inline-grid</div>
 
 ```
 
-### Table
+### Table, table row, table cell
 
 ```html
 <div class="pf-v6-u-display-table">
@@ -76,17 +83,19 @@ 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-display-inline-block-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-display-inline-block-on-lg**
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v6-u-display-inline-block{-on-[breakpoint]}` | `*` |  Sets display: inline-block |
-| `.pf-v6-u-display-block{-on-[breakpoint]}` | `*` |  Sets display: block |
 | `.pf-v6-u-display-inline{-on-[breakpoint]}` | `*` |  Sets display: inline |
+| `.pf-v6-u-display-block{-on-[breakpoint]}` | `*` |  Sets display: block |
+| `.pf-v6-u-display-inline-block{-on-[breakpoint]}` | `*` |  Sets display: inline-block |
 | `.pf-v6-u-display-flex{-on-[breakpoint]}` | `*` |  Sets display: flex |
 | `.pf-v6-u-display-inline-flex{-on-[breakpoint]}` | `*` |  Sets display: inline-flex |
+| `.pf-v6-u-display-grid{-on-[breakpoint]}` | `*` |  Sets display: grid |
+| `.pf-v6-u-display-inline-grid{-on-[breakpoint]}` | `*` |  Sets display: inline-grid |
 | `.pf-v6-u-display-table{-on-[breakpoint]}` | `*` |  Sets display: table |
 | `.pf-v6-u-display-table-row{-on-[breakpoint]}` | `*` |  Sets display: table-row |
 | `.pf-v6-u-display-table-cell{-on-[breakpoint]}` | `*` |  Sets display: table-cell |

package/docs/utilities/Flex/examples/Flex.css

@@ -1,14 +1,14 @@
-.ws-core-u-flex .pf-v5-u-display-flex,
+.ws-core-u-flex .pf-v6-u-display-flex,
 .ws-core-u-flex .ws-example-flex-item,
-.ws-core-u-flex .pf-v5-u-display-inline-flex {
+.ws-core-u-flex .pf-v6-u-display-inline-flex {
   flex-wrap: wrap;
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+  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-u-flex-aligned-items .pf-v5-u-display-flex,
-#ws-core-u-flex-aligned-self .pf-v5-u-display-flex,
-#ws-core-u-flex-aligned-content .pf-v5-u-display-flex {
+#ws-core-u-flex-aligned-items .pf-v6-u-display-flex,
+#ws-core-u-flex-aligned-self .pf-v6-u-display-flex,
+#ws-core-u-flex-aligned-content .pf-v6-u-display-flex {
   min-height: 160px;
 }
 

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

@@ -17,7 +17,7 @@ section: utility-classes
 
 ```html
 <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="pf-v6-u-display-flex pf-v6-u-flex-direction-row">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -26,7 +26,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -35,7 +35,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-u-flex-direction-column">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -44,7 +44,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -58,7 +58,7 @@ section: utility-classes
 
 ```html
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -67,7 +67,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -76,7 +76,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-u-justify-content-center">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -85,7 +85,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -94,7 +94,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -108,7 +108,7 @@ section: utility-classes
 
 ```html
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -117,7 +117,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -126,7 +126,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -135,7 +135,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -144,7 +144,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-u-align-items-stretch">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -158,11 +158,11 @@ section: utility-classes
 
 ```html
 <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>
-  <div class="ws-example-flex-item pf-v5-u-align-self-baseline">baseline</div>
-  <div class="ws-example-flex-item pf-v5-u-align-self-stretch">stretch</div>
+  <div class="ws-example-flex-item pf-v6-u-align-self-flex-start">flex-start</div>
+  <div class="ws-example-flex-item pf-v6-u-align-self-center">center</div>
+  <div class="ws-example-flex-item pf-v6-u-align-self-flex-end">flex end</div>
+  <div class="ws-example-flex-item pf-v6-u-align-self-baseline">baseline</div>
+  <div class="ws-example-flex-item pf-v6-u-align-self-stretch">stretch</div>
 </div>
 
 ```
@@ -171,7 +171,7 @@ section: utility-classes
 
 ```html
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -184,7 +184,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -197,7 +197,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-u-align-content-center">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -210,7 +210,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -223,7 +223,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-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>
@@ -236,7 +236,7 @@ section: utility-classes
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-u-align-content-stretch">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
@@ -254,8 +254,8 @@ section: utility-classes
 
 ```html
 <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 class="ws-example-flex-item pf-v6-u-flex-shrink-0">Flex shrink 0</div>
+  <div class="ws-example-flex-item pf-v6-u-flex-shrink-1">Flex shrink 1</div>
 </div>
 
 ```
@@ -264,8 +264,8 @@ section: utility-classes
 
 ```html
 <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 class="ws-example-flex-item pf-v6-u-flex-grow-0">Flex grow 0</div>
+  <div class="ws-example-flex-item pf-v6-u-flex-grow-1">Flex grow 1</div>
 </div>
 
 ```
@@ -274,10 +274,10 @@ section: utility-classes
 
 ```html
 <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>
-  <div class="ws-example-flex-item pf-v5-u-flex-1">Flex 1</div>
+  <div class="ws-example-flex-item pf-v6-u-flex-basis-0">Flex basis 0</div>
+  <div class="ws-example-flex-item pf-v6-u-flex-basis-auto">Flex basis auto</div>
+  <div class="ws-example-flex-item pf-v6-u-flex-basis-none">Flex basis none</div>
+  <div class="ws-example-flex-item pf-v6-u-flex-1">Flex 1</div>
 </div>
 
 ```
@@ -286,8 +286,8 @@ section: utility-classes
 
 ```html
 <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 class="ws-example-flex-item pf-v6-u-flex-none">Flex none</div>
+  <div class="ws-example-flex-item pf-v6-u-flex-fill">Flex fill</div>
 </div>
 
 ```
@@ -296,30 +296,72 @@ section: utility-classes
 
 ```html
 <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="pf-v6-u-display-flex pf-v6-u-flex-wrap">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
 
   <div class="ws-example-flex-item">Flex item 3</div>
+
+  <div class="ws-example-flex-item">Flex item 4</div>
+
+  <div class="ws-example-flex-item">Flex item 5</div>
+
+  <div class="ws-example-flex-item">Flex item 6</div>
+
+  <div class="ws-example-flex-item">Flex item 7</div>
+
+  <div class="ws-example-flex-item">Flex item 8</div>
+
+  <div class="ws-example-flex-item">Flex item 9</div>
+
+  <div class="ws-example-flex-item">Flex item 10</div>
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-u-flex-nowrap">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
 
   <div class="ws-example-flex-item">Flex item 3</div>
+
+  <div class="ws-example-flex-item">Flex item 4</div>
+
+  <div class="ws-example-flex-item">Flex item 5</div>
+
+  <div class="ws-example-flex-item">Flex item 6</div>
+
+  <div class="ws-example-flex-item">Flex item 7</div>
+
+  <div class="ws-example-flex-item">Flex item 8</div>
+
+  <div class="ws-example-flex-item">Flex item 9</div>
+
+  <div class="ws-example-flex-item">Flex item 10</div>
 </div>
 <br />
 <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="pf-v6-u-display-flex pf-v6-u-flex-wrap-reverse">
   <div class="ws-example-flex-item">Flex item 1</div>
 
   <div class="ws-example-flex-item">Flex item 2</div>
 
   <div class="ws-example-flex-item">Flex item 3</div>
+
+  <div class="ws-example-flex-item">Flex item 4</div>
+
+  <div class="ws-example-flex-item">Flex item 5</div>
+
+  <div class="ws-example-flex-item">Flex item 6</div>
+
+  <div class="ws-example-flex-item">Flex item 7</div>
+
+  <div class="ws-example-flex-item">Flex item 8</div>
+
+  <div class="ws-example-flex-item">Flex item 9</div>
+
+  <div class="ws-example-flex-item">Flex item 10</div>
 </div>
 
 ```
@@ -328,13 +370,13 @@ section: utility-classes
 
 ### Overview
 
-For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [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-flex-row-on-lg**
+For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [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-flex-row-on-lg**
 
 <!-- ## Accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role` or `aria` | `pf-v5-u-flex` |  accessibility notes. |
+| `role` or `aria` | `pf-v6-u-flex` |  accessibility notes. |
  -->
 
 ### Usage