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

package/docs/utilities/Float/examples/Float.css

@@ -1,5 +1,5 @@
-.ws-core-u-float .pf-v5-u-float-left,
-.ws-core-u-float .pf-v5-u-float-right {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
-}
+.ws-core-u-float .pf-v6-u-float-inline-start,
+.ws-core-u-float .pf-v6-u-float-inline-end {
+  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/Float/examples/Float.md

@@ -8,9 +8,9 @@ section: utility-classes
 ### Basic
 
 ```html
-<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>
+<div class="pf-v6-u-float-inline-start">Float inline-start</div>
+<div class="pf-v6-u-float-inline-end">Float inline-end</div>
+<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum, odit fugit eaque ad assuminline-enda fuga alias aut ipsum repudiandae enim pariatur ullam distinctio omnis dolorem at voluptatum saepe, beatae officiis?</p>
 
 ```
 
@@ -18,11 +18,11 @@ 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-float-inline-start-on-lg**
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v6-u-float-left{-on-[breakpoint]}` | `*` |  Float element left |
-| `.pf-v6-u-float-right{-on-[breakpoint]}` | `*` |  Float element right |
+| `.pf-v6-u-float-inline-start{-on-[breakpoint]}` | `*` |  Float element inline-start |
+| `.pf-v6-u-float-inline-end{-on-[breakpoint]}` | `*` |  Float element inline-end |

package/docs/utilities/Sizing/examples/Sizing.css

@@ -1,8 +1,8 @@
-.pf-v5-u-min-width,
-.pf-v5-u-max-width,
-.pf-v5-u-min-height,
-.pf-v5-u-max-height,
+.pf-v6-u-min-width,
+.pf-v6-u-max-width,
+.pf-v6-u-min-height,
+.pf-v6-u-max-height,
 .ws-example-u-sizing-item {
-  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);
 }

package/docs/utilities/Sizing/examples/Sizing.md

@@ -8,21 +8,21 @@ section: utility-classes
 ### Width base and percentage units
 
 ```html
-<div class="ws-example-u-sizing-item pf-v5-u-w-0">.pf-v5-u-w-0</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-25">.pf-v5-u-w-25</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-50">.pf-v5-u-w-50</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-75">.pf-v5-u-w-75</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-100">.pf-v5-u-w-100</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-0">.pf-v6-u-w-0</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-25">.pf-v6-u-w-25</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-50">.pf-v6-u-w-50</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-75">.pf-v6-u-w-75</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-100">.pf-v6-u-w-100</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-w-initial"
->.pf-v5-u-w-initial (auto)</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-inherit">.pf-v5-u-w-inherit</div>
+  class="ws-example-u-sizing-item pf-v6-u-w-initial"
+>.pf-v6-u-w-initial (auto)</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-inherit">.pf-v6-u-w-inherit</div>
 
 ```
 
 ### Usage
 
-[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-w-initial-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-w-initial-on-lg**
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -39,18 +39,18 @@ section: utility-classes
 ### Width viewport units
 
 ```html isFullscreen
-<div class="ws-example-u-sizing-item pf-v5-u-w-25vw">.pf-v5-u-w-25vw</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-33vw">.pf-v5-u-w-33vw</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-50vw">.pf-v5-u-w-50vw</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-66vw">.pf-v5-u-w-66vw</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-75vw">.pf-v5-u-w-75vw</div>
-<div class="ws-example-u-sizing-item pf-v5-u-w-100vw">.pf-v5-u-w-100vw</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-25vw">.pf-v6-u-w-25vw</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-33vw">.pf-v6-u-w-33vw</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-50vw">.pf-v6-u-w-50vw</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-66vw">.pf-v6-u-w-66vw</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-75vw">.pf-v6-u-w-75vw</div>
+<div class="ws-example-u-sizing-item pf-v6-u-w-100vw">.pf-v6-u-w-100vw</div>
 
 ```
 
 ### Usage
 
-[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v5-u-w-25vw-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, -on-xl. **Example .pf-v6-u-w-25vw-on-lg**
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -65,32 +65,32 @@ section: utility-classes
 
 ```html
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-0 pf-v5-u-display-inline-block"
->.pf-v5-u-h-0</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-0 pf-v6-u-display-inline-block"
+>.pf-v6-u-h-0</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-25 pf-v5-u-display-inline-block"
->.pf-v5-u-h-25</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-25 pf-v6-u-display-inline-block"
+>.pf-v6-u-h-25</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-50 pf-v5-u-display-inline-block"
->.pf-v5-u-h-50</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-50 pf-v6-u-display-inline-block"
+>.pf-v6-u-h-50</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-75 pf-v5-u-display-inline-block"
->.pf-v5-u-h-75</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-75 pf-v6-u-display-inline-block"
+>.pf-v6-u-h-75</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-100 pf-v5-u-display-inline-block"
->.pf-v5-u-h-100</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-100 pf-v6-u-display-inline-block"
+>.pf-v6-u-h-100</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-initial pf-v5-u-display-inline-block"
->.pf-v5-u-h-initial (auto)</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-initial pf-v6-u-display-inline-block"
+>.pf-v6-u-h-initial</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-inherit pf-v5-u-display-inline-block"
->.pf-v5-u-h-inherit</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-inherit pf-v6-u-display-inline-block"
+>.pf-v6-u-h-inherit</div>
 
 ```
 
 ### Usage
 
-[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v5-u-h-initial-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, -on-xl. **Example .pf-v6-u-h-initial-on-lg**
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -108,29 +108,29 @@ section: utility-classes
 
 ```html isFullscreen
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-25vh pf-v5-u-display-inline-block"
->.pf-v5-u-h-25vh</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-25vh pf-v6-u-display-inline-block"
+>.pf-v6-u-h-25vh</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-33vh pf-v5-u-display-inline-block"
->.pf-v5-u-h-33vh</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-33vh pf-v6-u-display-inline-block"
+>.pf-v6-u-h-33vh</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-50vh pf-v5-u-display-inline-block"
->.pf-v5-u-h-50vh</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-50vh pf-v6-u-display-inline-block"
+>.pf-v6-u-h-50vh</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-66vh pf-v5-u-display-inline-block"
->.pf-v5-u-h-66vh</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-66vh pf-v6-u-display-inline-block"
+>.pf-v6-u-h-66vh</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-75vh pf-v5-u-display-inline-block"
->.pf-v5-u-h-75vh</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-75vh pf-v6-u-display-inline-block"
+>.pf-v6-u-h-75vh</div>
 <div
-  class="ws-example-u-sizing-item pf-v5-u-h-100vh pf-v5-u-display-inline-block"
->.pf-v5-u-h-100vh</div>
+  class="ws-example-u-sizing-item pf-v6-u-h-100vh pf-v6-u-display-inline-block"
+>.pf-v6-u-h-100vh</div>
 
 ```
 
 ### Usage
 
-[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v5-u-h-25vh-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, -on-xl. **Example .pf-v6-u-h-25vh-on-lg**
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -145,8 +145,8 @@ section: utility-classes
 
 ```html
 <div
-  class="pf-v5-u-min-width"
-  style="--pf-v5-u-min-width--MinWidth: 50ch;"
+  class="pf-v6-u-min-width"
+  style="--pf-v6-u-min-width--MinWidth: 50ch;"
 >Min-width 50ch example</div>
 
 ```
@@ -155,8 +155,8 @@ section: utility-classes
 
 ```html
 <div
-  class="pf-v5-u-max-width"
-  style="--pf-v5-u-max-width--MaxWidth: 50ch;"
+  class="pf-v6-u-max-width"
+  style="--pf-v6-u-max-width--MaxWidth: 50ch;"
 >Max-width 50ch example</div>
 
 ```
@@ -165,8 +165,8 @@ section: utility-classes
 
 ```html
 <div
-  class="pf-v5-u-min-width pf-v5-u-max-width"
-  style="--pf-v5-u-min-width--MinWidth: 30ch; --pf-v5-u-max-width--MaxWidth: 50ch;"
+  class="pf-v6-u-min-width pf-v6-u-max-width"
+  style="--pf-v6-u-min-width--MinWidth: 30ch; --pf-v6-u-max-width--MaxWidth: 50ch;"
 >Min-width 30ch, max-width 50ch example</div>
 
 ```
@@ -175,8 +175,8 @@ section: utility-classes
 
 ```html
 <div
-  class="pf-v5-u-min-width pf-v5-u-max-width"
-  style="--pf-v5-u-min-width--MinWidth: 20ch; --pf-v5-u-max-width--MaxWidth: 30ch; --pf-v5-u-max-width--MaxWidth-on-md: 50ch; --pf-v5-u-max-width--MaxWidth-on-xl: 70ch;"
+  class="pf-v6-u-min-width pf-v6-u-max-width"
+  style="--pf-v6-u-min-width--MinWidth: 20ch; --pf-v6-u-max-width--MaxWidth: 30ch; --pf-v6-u-max-width--MaxWidth-on-md: 50ch; --pf-v6-u-max-width--MaxWidth-on-xl: 70ch;"
 >Min-width 20ch, max-width 30ch, max-width-on-md 50ch, max-width-on-xl 70ch example</div>
 
 ```
@@ -199,8 +199,8 @@ section: utility-classes
 
 ```html
 <div
-  class="pf-v5-u-min-height"
-  style="--pf-v5-u-min-height--MinHeight: 50ch;"
+  class="pf-v6-u-min-height"
+  style="--pf-v6-u-min-height--MinHeight: 50ch;"
 >Min-height 50ch example</div>
 
 ```
@@ -209,8 +209,8 @@ section: utility-classes
 
 ```html
 <div
-  class="pf-v5-u-max-height"
-  style="--pf-v5-u-max-height--MaxHeight: 50ch;"
+  class="pf-v6-u-max-height"
+  style="--pf-v6-u-max-height--MaxHeight: 50ch;"
 >Max-height 50ch example</div>
 
 ```
@@ -219,8 +219,8 @@ section: utility-classes
 
 ```html
 <div
-  class="pf-v5-u-min-height pf-v5-u-max-height"
-  style="--pf-v5-u-min-height--MinHeight: 30ch; --pf-v5-u-max-height--MaxHeight: 50ch;"
+  class="pf-v6-u-min-height pf-v6-u-max-height"
+  style="--pf-v6-u-min-height--MinHeight: 30ch; --pf-v6-u-max-height--MaxHeight: 50ch;"
 >Min-height 30ch, max-height 50ch example</div>
 
 ```
@@ -229,8 +229,8 @@ section: utility-classes
 
 ```html
 <div
-  class="pf-v5-u-min-height pf-v5-u-max-height"
-  style="--pf-v5-u-min-height--MinHeight: 20ch; --pf-v5-u-max-height--MaxHeight: 30ch; --pf-v6-u-max-height--MaxHeight-on-md: 50ch; --pf-v6-u-max-height--MaxHeight-on-xl: 70ch;"
+  class="pf-v6-u-min-height pf-v6-u-max-height"
+  style="--pf-v6-u-min-height--MinHeight: 20ch; --pf-v6-u-max-height--MaxHeight: 30ch; --pf-v6-u-max-height--MaxHeight-on-md: 50ch; --pf-v6-u-max-height--MaxHeight-on-xl: 70ch;"
 >Min-height 20ch, max-height 30ch, max-height-on-md 50ch, max-height-on-xl 70ch example</div>
 
 ```

package/docs/utilities/Spacing/examples/Spacing.css

@@ -1,5 +1,5 @@
 .ws-core-u-spacing .ws-example-flex-item,
-.ws-core-u-spacing .pf-v5-u-display-flex {
-  padding: .5rem;
-  border: 2px dashed #393f44;
+.ws-core-u-spacing .pf-v6-u-display-flex {
+  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/Spacing/examples/Spacing.md

@@ -13,34 +13,34 @@ pf: 'test'
 ```html
 <h2 class="pf-v6-c-title pf-m-lg">Margin, marginX, marginY</h2>
 <div
-  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-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>
-  <div class="ws-example-flex-item pf-v5-u-my-xl">Margin y axis - pf-v5-u-my-xl</div>
+  <div class="ws-example-flex-item pf-v6-u-m-xl">Margin - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-mx-xl">Margin x axis - pf-v6-u-mx-xl</div>
+  <div class="ws-example-flex-item pf-v6-u-my-xl">Margin y axis - pf-v6-u-my-xl</div>
 </div>
 <br />
 <h2
   class="pf-v6-c-title pf-m-lg"
 >Margin top, margin right, margin bottom, margin left</h2>
 <div
-  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-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>
-  <div class="ws-example-flex-item pf-v5-u-mb-xl">Margin-bottom - xl</div>
-  <div class="ws-example-flex-item pf-v5-u-ml-xl">Margin-left - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-mt-xl">Margin-top - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-mr-xl">Margin-right - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-mb-xl">Margin-bottom - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-ml-xl">Margin-left - xl</div>
 </div>
 <br />
 <h2 class="pf-v6-c-title pf-m-lg">Responsive margin</h2>
 <div
-  class="pf-v6-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-v6-u-align-items-flex-start pf-v6-u-flex-column pf-v6-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>
-  <div class="ws-example-flex-item pf-v5-u-mt-xl-on-md">Margin-top - xl on-md</div>
-  <div class="ws-example-flex-item pf-v5-u-mt-xl-on-lg">Margin-top - xl on-lg</div>
-  <div class="ws-example-flex-item pf-v5-u-mt-xl-on-xl">Margin-top - xl on-xl</div>
+  <div class="ws-example-flex-item pf-v6-u-mt-xl">Margin-top - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-mt-xl-on-sm">Margin-top - xl on-sm</div>
+  <div class="ws-example-flex-item pf-v6-u-mt-xl-on-md">Margin-top - xl on-md</div>
+  <div class="ws-example-flex-item pf-v6-u-mt-xl-on-lg">Margin-top - xl on-lg</div>
+  <div class="ws-example-flex-item pf-v6-u-mt-xl-on-xl">Margin-top - xl on-xl</div>
 </div>
 
 ```
@@ -50,34 +50,34 @@ pf: 'test'
 ```html
 <h2 class="pf-v6-c-title pf-m-lg">Padding, paddingX, paddingY</h2>
 <div
-  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-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>
-  <div class="ws-example-flex-item pf-v5-u-py-xl">Padding y axis - pf-v5-u-py-xl</div>
+  <div class="ws-example-flex-item pf-v6-u-p-xl">Padding - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-px-xl">Padding x axis - pf-v6-u-px-xl</div>
+  <div class="ws-example-flex-item pf-v6-u-py-xl">Padding y axis - pf-v6-u-py-xl</div>
 </div>
 <br />
 <h2
   class="pf-v6-c-title pf-m-lg"
 >Padding top, padding right, padding bottom, padding left</h2>
 <div
-  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-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>
-  <div class="ws-example-flex-item pf-v5-u-pb-xl">Padding-bottom - xl</div>
-  <div class="ws-example-flex-item pf-v5-u-pl-xl">Padding-left - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-pt-xl">Padding-top - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-pr-xl">Padding-right - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-pb-xl">Padding-bottom - xl</div>
+  <div class="ws-example-flex-item pf-v6-u-pl-xl">Padding-left - xl</div>
 </div>
 <br />
 <h2 class="pf-v6-c-title pf-m-lg">Responsive padding</h2>
 <div
-  class="pf-v6-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-v6-u-align-items-flex-start pf-v6-u-flex-column pf-v6-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>
-  <div class="ws-example-flex-item pf-v5-u-pt-xl-on-md">Padding-top - xl on-md</div>
-  <div class="ws-example-flex-item pf-v5-u-pt-xl-on-lg">Padding-top - xl on-lg</div>
-  <div class="ws-example-flex-item pf-v5-u-pt-xl-on-xl">Padding-top - xl on-xl</div>
+  <div class="ws-example-flex-item pf-v6-u-pt-xl">Padding-top</div>
+  <div class="ws-example-flex-item pf-v6-u-pt-xl-on-sm">Padding-top - xl on-sm</div>
+  <div class="ws-example-flex-item pf-v6-u-pt-xl-on-md">Padding-top - xl on-md</div>
+  <div class="ws-example-flex-item pf-v6-u-pt-xl-on-lg">Padding-top - xl on-lg</div>
+  <div class="ws-example-flex-item pf-v6-u-pt-xl-on-xl">Padding-top - xl on-xl</div>
 </div>
 
 ```
@@ -87,28 +87,28 @@ pf: 'test'
 ```html
 <h2 class="pf-v6-c-title pf-m-lg">Combined spacers</h2>
 <div
-  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-u-flex-wrap"
 >
   <div
-    class="ws-example-flex-item pf-v5-u-p-lg pf-v5-u-m-lg"
+    class="ws-example-flex-item pf-v6-u-p-lg pf-v6-u-m-lg"
   >Padding lg, margin lg</div>
   <div
-    class="ws-example-flex-item pf-v5-u-p-lg-on-lg pf-v5-u-m-lg"
+    class="ws-example-flex-item pf-v6-u-p-lg-on-lg pf-v6-u-m-lg"
   >Padding lg on-lg, margin lg</div>
 </div>
 <br />
 <h2 class="pf-v6-c-title pf-m-lg">Combined spacers (responsive)</h2>
 <div
-  class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start pf-v5-u-flex-wrap"
+  class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-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"
+    class="ws-example-flex-item pf-v6-u-p-sm pf-v6-u-p-lg-on-md pf-v6-u-mr-lg"
   >Item 1</div>
   <div
-    class="ws-example-flex-item pf-v5-u-p-sm pf-v5-u-p-lg-on-md pf-v5-u-mr-lg"
+    class="ws-example-flex-item pf-v6-u-p-sm pf-v6-u-p-lg-on-md pf-v6-u-mr-lg"
   >Item 2</div>
   <div
-    class="ws-example-flex-item pf-v5-u-p-sm pf-v5-u-p-lg-on-md pf-v5-u-ml-auto-on-xl"
+    class="ws-example-flex-item pf-v6-u-p-sm pf-v6-u-p-lg-on-md pf-v6-u-ml-auto-on-xl"
   >Item 3</div>
 </div>