@patternfly/react-core 6.0.0-alpha.35 → 6.0.0-alpha.36

package/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Masthead verify basic 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
@@ -13,7 +13,7 @@ exports[`Masthead verify basic 1`] = `
 exports[`Masthead verify custom class 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md custom-css"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md custom-css"
   >
     test
   </header>
@@ -23,24 +23,24 @@ exports[`Masthead verify custom class 1`] = `
 exports[`Masthead verify full structure 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md"
   >
     <span
-      class="pf-v5-c-masthead__toggle"
+      class="pf-v6-c-masthead__toggle"
     >
       Toggle
     </span>
     <div
-      class="pf-v5-c-masthead__main"
+      class="pf-v6-c-masthead__main"
     >
       <span
-        class="pf-v5-c-masthead__brand"
+        class="pf-v6-c-masthead__brand"
       >
         Logo
       </span>
     </div>
     <div
-      class="pf-v5-c-masthead__content"
+      class="pf-v6-c-masthead__content"
     >
       <span>
         Content
@@ -53,7 +53,7 @@ exports[`Masthead verify full structure 1`] = `
 exports[`Masthead verify inline display breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline pf-m-display-inline-on-sm pf-m-display-inline-on-md pf-m-display-inline-on-lg pf-m-display-inline-on-xl pf-m-display-inline-on-2xl"
+    class="pf-v6-c-masthead pf-m-display-inline pf-m-display-inline-on-sm pf-m-display-inline-on-md pf-m-display-inline-on-lg pf-m-display-inline-on-xl pf-m-display-inline-on-2xl"
   >
     test
   </header>
@@ -63,7 +63,7 @@ exports[`Masthead verify inline display breakpoints 1`] = `
 exports[`Masthead verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl"
   >
     test
   </header>
@@ -73,7 +73,7 @@ exports[`Masthead verify inset2xl inset breakpoints 1`] = `
 exports[`Masthead verify inset3xl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
@@ -83,7 +83,7 @@ exports[`Masthead verify inset3xl inset breakpoints 1`] = `
 exports[`Masthead verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-lg"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md pf-m-inset-lg"
   >
     test
   </header>
@@ -93,7 +93,7 @@ exports[`Masthead verify insetLg inset breakpoints 1`] = `
 exports[`Masthead verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-md"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md pf-m-inset-md"
   >
     test
   </header>
@@ -103,7 +103,7 @@ exports[`Masthead verify insetMd inset breakpoints 1`] = `
 exports[`Masthead verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-none"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md pf-m-inset-none"
   >
     test
   </header>
@@ -113,7 +113,7 @@ exports[`Masthead verify insetNone inset breakpoints 1`] = `
 exports[`Masthead verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-sm"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md pf-m-inset-sm"
   >
     test
   </header>
@@ -123,7 +123,7 @@ exports[`Masthead verify insetSm inset breakpoints 1`] = `
 exports[`Masthead verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-xl"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md pf-m-inset-xl"
   >
     test
   </header>
@@ -133,7 +133,7 @@ exports[`Masthead verify insetXl inset breakpoints 1`] = `
 exports[`Masthead verify insetXs inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md"
+    class="pf-v6-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
@@ -143,7 +143,7 @@ exports[`Masthead verify insetXs inset breakpoints 1`] = `
 exports[`Masthead verify stack display breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-stack pf-m-display-stack-on-sm pf-m-display-stack-on-md pf-m-display-stack-on-lg pf-m-display-stack-on-xl pf-m-display-stack-on-2xl"
+    class="pf-v6-c-masthead pf-m-display-stack pf-m-display-stack-on-sm pf-m-display-stack-on-md pf-m-display-stack-on-lg pf-m-display-stack-on-xl pf-m-display-stack-on-2xl"
   >
     test
   </header>
@@ -153,7 +153,7 @@ exports[`Masthead verify stack display breakpoints 1`] = `
 exports[`MastheadBrand verify anchor component with href 1`] = `
 <DocumentFragment>
   <a
-    class="pf-v5-c-masthead__brand"
+    class="pf-v6-c-masthead__brand"
     href="#"
     tabindex="0"
   >
@@ -165,7 +165,7 @@ exports[`MastheadBrand verify anchor component with href 1`] = `
 exports[`MastheadBrand verify basic 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-masthead__brand"
+    class="pf-v6-c-masthead__brand"
   >
     test
   </span>
@@ -175,7 +175,7 @@ exports[`MastheadBrand verify basic 1`] = `
 exports[`MastheadBrand verify custom class 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-masthead__brand custom-css"
+    class="pf-v6-c-masthead__brand custom-css"
   >
     test
   </span>
@@ -185,7 +185,7 @@ exports[`MastheadBrand verify custom class 1`] = `
 exports[`MastheadBrand verify custom component 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-masthead__brand"
+    class="pf-v6-c-masthead__brand"
   >
     test
   </div>
@@ -195,7 +195,7 @@ exports[`MastheadBrand verify custom component 1`] = `
 exports[`MastheadBrand verify default component 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-masthead__brand"
+    class="pf-v6-c-masthead__brand"
   >
     test
   </span>
@@ -205,7 +205,7 @@ exports[`MastheadBrand verify default component 1`] = `
 exports[`MastheadContent verify basic 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-masthead__content"
+    class="pf-v6-c-masthead__content"
   >
     test
   </div>
@@ -215,7 +215,7 @@ exports[`MastheadContent verify basic 1`] = `
 exports[`MastheadContent verify custom class 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-masthead__content custom-css"
+    class="pf-v6-c-masthead__content custom-css"
   >
     test
   </div>
@@ -225,7 +225,7 @@ exports[`MastheadContent verify custom class 1`] = `
 exports[`MastheadMain verify basic 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-masthead__main"
+    class="pf-v6-c-masthead__main"
   >
     test
   </div>
@@ -235,7 +235,7 @@ exports[`MastheadMain verify basic 1`] = `
 exports[`MastheadMain verify custom class 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-masthead__main custom-css"
+    class="pf-v6-c-masthead__main custom-css"
   >
     test
   </div>
@@ -245,7 +245,7 @@ exports[`MastheadMain verify custom class 1`] = `
 exports[`MastheadToggle verify basic 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-masthead__toggle"
+    class="pf-v6-c-masthead__toggle"
   >
     test
   </span>
@@ -255,7 +255,7 @@ exports[`MastheadToggle verify basic 1`] = `
 exports[`MastheadToggle verify custom class 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-masthead__toggle custom-css"
+    class="pf-v6-c-masthead__toggle custom-css"
   >
     test
   </span>

package/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Menu should render Menu successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-menu"
+    class="pf-v6-c-menu"
     data-ouia-component-id="OUIA-Generated-Menu-1"
     data-ouia-component-type="PF5/Menu"
     data-ouia-safe="true"

package/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap

@@ -4,23 +4,23 @@ exports[`menu toggle passes additional classes 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-v5-c-menu-toggle test-class"
+    class="pf-v6-c-menu-toggle test-class"
     type="button"
   >
     <span
-      class="pf-v5-c-menu-toggle__text"
+      class="pf-v6-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-v5-c-menu-toggle__controls"
+      class="pf-v6-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__toggle-icon"
+        class="pf-v6-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-v5-svg"
+          class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"
@@ -41,23 +41,23 @@ exports[`menu toggle renders successfully 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-v5-c-menu-toggle"
+    class="pf-v6-c-menu-toggle"
     type="button"
   >
     <span
-      class="pf-v5-c-menu-toggle__text"
+      class="pf-v6-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-v5-c-menu-toggle__controls"
+      class="pf-v6-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__toggle-icon"
+        class="pf-v6-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-v5-svg"
+          class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"
@@ -78,32 +78,32 @@ exports[`menu toggle shows badge 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-v5-c-menu-toggle"
+    class="pf-v6-c-menu-toggle"
     type="button"
   >
     <span
-      class="pf-v5-c-menu-toggle__text"
+      class="pf-v6-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-v5-c-menu-toggle__count"
+      class="pf-v6-c-menu-toggle__count"
     >
       <span
-        class="pf-v5-c-badge pf-m-unread"
+        class="pf-v6-c-badge pf-m-unread"
       >
         badge
       </span>
     </span>
     <span
-      class="pf-v5-c-menu-toggle__controls"
+      class="pf-v6-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__toggle-icon"
+        class="pf-v6-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-v5-svg"
+          class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"
@@ -124,15 +124,15 @@ exports[`menu toggle shows icon 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-v5-c-menu-toggle"
+    class="pf-v6-c-menu-toggle"
     type="button"
   >
     <span
-      class="pf-v5-c-menu-toggle__icon"
+      class="pf-v6-c-menu-toggle__icon"
     >
       <svg
         aria-hidden="true"
-        class="pf-v5-svg"
+        class="pf-v6-svg"
         fill="currentColor"
         height="1em"
         role="img"
@@ -145,19 +145,19 @@ exports[`menu toggle shows icon 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-c-menu-toggle__text"
+      class="pf-v6-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-v5-c-menu-toggle__controls"
+      class="pf-v6-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__toggle-icon"
+        class="pf-v6-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-v5-svg"
+          class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"
@@ -178,24 +178,24 @@ exports[`menu toggle shows isDisabled 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-v5-c-menu-toggle pf-m-disabled"
+    class="pf-v6-c-menu-toggle pf-m-disabled"
     disabled=""
     type="button"
   >
     <span
-      class="pf-v5-c-menu-toggle__text"
+      class="pf-v6-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-v5-c-menu-toggle__controls"
+      class="pf-v6-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__toggle-icon"
+        class="pf-v6-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-v5-svg"
+          class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"
@@ -216,23 +216,23 @@ exports[`menu toggle shows isExpanded 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="true"
-    class="pf-v5-c-menu-toggle pf-m-expanded"
+    class="pf-v6-c-menu-toggle pf-m-expanded"
     type="button"
   >
     <span
-      class="pf-v5-c-menu-toggle__text"
+      class="pf-v6-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-v5-c-menu-toggle__controls"
+      class="pf-v6-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__toggle-icon"
+        class="pf-v6-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-v5-svg"
+          class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"
@@ -253,12 +253,12 @@ exports[`menu toggle shows isPlain 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-v5-c-menu-toggle pf-m-plain"
+    class="pf-v6-c-menu-toggle pf-m-plain"
     type="button"
   >
     <svg
       aria-hidden="true"
-      class="pf-v5-svg"
+      class="pf-v6-svg"
       fill="currentColor"
       height="1em"
       role="img"
@@ -277,23 +277,23 @@ exports[`menu toggle shows isPrimary 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-v5-c-menu-toggle pf-m-primary"
+    class="pf-v6-c-menu-toggle pf-m-primary"
     type="button"
   >
     <span
-      class="pf-v5-c-menu-toggle__text"
+      class="pf-v6-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-v5-c-menu-toggle__controls"
+      class="pf-v6-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__toggle-icon"
+        class="pf-v6-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-v5-svg"
+          class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"
@@ -314,23 +314,23 @@ exports[`menu toggle shows plain text 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+    class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
     type="button"
   >
     <span
-      class="pf-v5-c-menu-toggle__text"
+      class="pf-v6-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-v5-c-menu-toggle__controls"
+      class="pf-v6-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__toggle-icon"
+        class="pf-v6-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-v5-svg"
+          class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"

package/src/components/MenuToggle/examples/MenuToggle.css

@@ -1,4 +1,4 @@
-#ws-react-c-menu-toggle-primary .pf-v5-c-menu-toggle,
-#ws-react-c-menu-toggle-secondary .pf-v5-c-menu-toggle {
+#ws-react-c-menu-toggle-primary .pf-v6-c-menu-toggle,
+#ws-react-c-menu-toggle-secondary .pf-v6-c-menu-toggle {
   vertical-align: bottom;
 }

package/src/components/Modal/ModalBoxTitle.tsx

@@ -63,7 +63,7 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
           {isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : <CustomIcon />}
         </span>
       )}
-      {label && <span className="pf-v5-screen-reader">{label}</span>}
+      {label && <span className="pf-v6-screen-reader">{label}</span>}
       <span className={css(modalStyles.modalBoxTitleText)}>{title}</span>
     </h1>
   );

package/src/components/Modal/ModalContent.tsx

@@ -188,9 +188,9 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
       {...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
       style={
         {
-          ...(width && { '--pf-v5-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` }),
+          ...(width && { '--pf-v6-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` }),
           ...(maxWidth && {
-            '--pf-v5-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
+            '--pf-v6-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
           })
         } as React.CSSProperties
       }

package/src/components/Modal/__tests__/__snapshots__/ModalBox.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`ModalBox Test 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-v5-c-modal-box"
+    class="pf-v6-c-modal-box"
     id="boxId"
     role="dialog"
   >
@@ -19,7 +19,7 @@ exports[`ModalBox Test large 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-v5-c-modal-box pf-m-lg"
+    class="pf-v6-c-modal-box pf-m-lg"
     id="boxId"
     role="dialog"
   >
@@ -33,7 +33,7 @@ exports[`ModalBox Test medium 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-v5-c-modal-box pf-m-md"
+    class="pf-v6-c-modal-box pf-m-md"
     id="boxId"
     role="dialog"
   >
@@ -47,7 +47,7 @@ exports[`ModalBox Test small 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-v5-c-modal-box pf-m-sm"
+    class="pf-v6-c-modal-box pf-m-sm"
     id="boxId"
     role="dialog"
   >
@@ -61,7 +61,7 @@ exports[`ModalBox Test top aligned 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-v5-c-modal-box pf-m-align-top"
+    class="pf-v6-c-modal-box pf-m-align-top"
     id="boxId"
     role="dialog"
   >
@@ -75,10 +75,10 @@ exports[`ModalBox Test top aligned distance 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-v5-c-modal-box pf-m-align-top"
+    class="pf-v6-c-modal-box pf-m-align-top"
     id="boxId"
     role="dialog"
-    style="--pf-v5-c-modal-box--m-align-top--spacer: 50px;"
+    style="--pf-v6-c-modal-box--m-align-top--spacer: 50px;"
   >
     This is a ModalBox
   </div>

package/src/components/Modal/__tests__/__snapshots__/ModalBoxBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ModalBoxBody Test 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-modal-box__body test-box-class"
+    class="pf-v6-c-modal-box__body test-box-class"
     id="id"
   >
     This is a ModalBox header

package/src/components/Modal/__tests__/__snapshots__/ModalBoxDescription.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ModalBoxDescription Test 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-modal-box__description"
+    class="pf-v6-c-modal-box__description"
     id=""
   >
     This is a ModalBox Description

package/src/components/Modal/__tests__/__snapshots__/ModalBoxFooter.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ModalBoxFooter Test 1`] = `
 <DocumentFragment>
   <footer
-    class="pf-v5-c-modal-box__footer test-box-footer-class"
+    class="pf-v6-c-modal-box__footer test-box-footer-class"
   >
     This is a ModalBox Footer
   </footer>

package/src/components/Modal/__tests__/__snapshots__/ModalBoxHeader.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ModalBoxHeader Test 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-modal-box__header"
+    class="pf-v6-c-modal-box__header"
   >
     This is a ModalBox header
   </header>
@@ -13,15 +13,15 @@ exports[`ModalBoxHeader Test 1`] = `
 exports[`ModalBoxHeader help renders 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-modal-box__header pf-m-help"
+    class="pf-v6-c-modal-box__header pf-m-help"
   >
     <div
-      class="pf-v5-c-modal-box__header-main"
+      class="pf-v6-c-modal-box__header-main"
     >
       This is a ModalBox header
     </div>
     <div
-      class="pf-v5-c-modal-box__header-help"
+      class="pf-v6-c-modal-box__header-help"
     >
       <div>
         test