@patternfly/patternfly 5.1.0-prerelease.9 → 5.2.0-prerelease.1

package/docs/components/Menu/examples/Menu.md

@@ -4778,37 +4778,41 @@ cssPrefix: pf-v5-c-menu
             <i class="fas fa-angle-right" aria-hidden="true"></i>
           </span>
           <span class="pf-v5-c-breadcrumb__dropdown">
-            <div class="pf-v5-c-dropdown pf-m-expanded">
-              <button
-                class="pf-v5-c-dropdown__toggle pf-m-plain"
-                id="drilldown-with-breadcrumbs-level-3-breadcrumb-breadcrumb-dropdown-button"
-                aria-expanded="true"
-                type="button"
-              >
-                <span class="pf-v5-c-badge pf-m-read">
-                  1
-                  <span class="pf-v5-c-dropdown__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-              <ul
-                class="pf-v5-c-dropdown__menu"
-                aria-labelledby="drilldown-with-breadcrumbs-level-3-breadcrumb-breadcrumb-dropdown-button"
-                role="menu"
-              >
-                <li role="none">
-                  <button
-                    class="pf-v5-c-dropdown__menu-item"
-                    role="menuitem"
-                    type="button"
-                  >
-                    <span class="pf-v5-c-dropdown__menu-item-icon">
-                      <i class="fas fa-angle-left" aria-hidden="true"></i>
-                    </span>Edit
-                  </button>
-                </li>
-              </ul>
+            <button
+              class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
+              type="button"
+              aria-expanded="true"
+            >
+              <span class="pf-v5-c-badge pf-m-read">
+                1
+                <i class="fas fa-caret-down" aria-hidden="true"></i>
+              </span>
+            </button>
+            <div class="pf-v5-c-menu">
+              <div class="pf-v5-c-menu__content">
+                <ul class="pf-v5-c-menu__list" role="menu">
+                  <li class="pf-v5-c-menu__list-item" role="none">
+                    <button
+                      class="pf-v5-c-menu__item"
+                      type="button"
+                      role="menuitem"
+                    >
+                      <span class="pf-v5-c-menu__item-main">
+                        <span class="pf-v5-c-menu__item-icon">
+                          <span class="pf-v5-c-icon">
+                            <span
+                              class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+                            >
+                              <i class="fas fa-angle-left" aria-hidden="true"></i>
+                            </span>
+                          </span>
+                        </span>
+                        <span class="pf-v5-c-menu__item-text">Edit</span>
+                      </span>
+                    </button>
+                  </li>
+                </ul>
+              </div>
             </div>
           </span>
         </li>
@@ -5027,48 +5031,61 @@ cssPrefix: pf-v5-c-menu
             <i class="fas fa-angle-right" aria-hidden="true"></i>
           </span>
           <span class="pf-v5-c-breadcrumb__dropdown">
-            <div class="pf-v5-c-dropdown pf-m-expanded">
-              <button
-                class="pf-v5-c-dropdown__toggle pf-m-plain"
-                id="drilldown-with-breadcrumbs-level-4-breadcrumb-breadcrumb-dropdown-button"
-                aria-expanded="true"
-                type="button"
-              >
-                <span class="pf-v5-c-badge pf-m-read">
-                  2
-                  <span class="pf-v5-c-dropdown__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-              <ul
-                class="pf-v5-c-dropdown__menu"
-                aria-labelledby="drilldown-with-breadcrumbs-level-4-breadcrumb-breadcrumb-dropdown-button"
-                role="menu"
-              >
-                <li role="none">
-                  <button
-                    class="pf-v5-c-dropdown__menu-item"
-                    role="menuitem"
-                    type="button"
-                  >
-                    <span class="pf-v5-c-dropdown__menu-item-icon">
-                      <i class="fas fa-angle-left" aria-hidden="true"></i>
-                    </span>Edit
-                  </button>
-                </li>
-                <li role="none">
-                  <button
-                    class="pf-v5-c-dropdown__menu-item"
-                    role="menuitem"
-                    type="button"
-                  >
-                    <span class="pf-v5-c-dropdown__menu-item-icon">
-                      <i class="fas fa-angle-left" aria-hidden="true"></i>
-                    </span>Deployment
-                  </button>
-                </li>
-              </ul>
+            <button
+              class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
+              type="button"
+              aria-expanded="true"
+            >
+              <span class="pf-v5-c-badge pf-m-read">
+                2
+                <i class="fas fa-caret-down" aria-hidden="true"></i>
+              </span>
+            </button>
+            <div class="pf-v5-c-menu">
+              <div class="pf-v5-c-menu__content">
+                <ul class="pf-v5-c-menu__list" role="menu">
+                  <li class="pf-v5-c-menu__list-item" role="none">
+                    <button
+                      class="pf-v5-c-menu__item"
+                      type="button"
+                      role="menuitem"
+                    >
+                      <span class="pf-v5-c-menu__item-main">
+                        <span class="pf-v5-c-menu__item-icon">
+                          <span class="pf-v5-c-icon">
+                            <span
+                              class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+                            >
+                              <i class="fas fa-angle-left" aria-hidden="true"></i>
+                            </span>
+                          </span>
+                        </span>
+                        <span class="pf-v5-c-menu__item-text">Edit</span>
+                      </span>
+                    </button>
+                  </li>
+                  <li class="pf-v5-c-menu__list-item" role="none">
+                    <button
+                      class="pf-v5-c-menu__item"
+                      type="button"
+                      role="menuitem"
+                    >
+                      <span class="pf-v5-c-menu__item-main">
+                        <span class="pf-v5-c-menu__item-icon">
+                          <span class="pf-v5-c-icon">
+                            <span
+                              class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+                            >
+                              <i class="fas fa-angle-left" aria-hidden="true"></i>
+                            </span>
+                          </span>
+                        </span>
+                        <span class="pf-v5-c-menu__item-text">Deployment</span>
+                      </span>
+                    </button>
+                  </li>
+                </ul>
+              </div>
             </div>
           </span>
         </li>

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -275,14 +275,18 @@ cssPrefix: pf-v5-c-menu-toggle
 
 ```html
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
-  <label class="pf-v5-c-check pf-m-standalone">
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    id="split-button-checkbox-disabled-example-check"
+    for="split-button-checkbox-disabled-example-check-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-disabled-example-check-input"
+      name="split-button-checkbox-disabled-example-check-input"
+      aria-label="Standalone check"
       disabled
-      id="split-button-checkbox-disabled-example-input"
-      name="split-button-checkbox-disabled-example-input"
-      aria-label="Standalone input"
     />
   </label>
   <button
@@ -302,13 +306,17 @@ cssPrefix: pf-v5-c-menu-toggle
 </div>
 &nbsp;
 <div class="pf-v5-c-menu-toggle pf-m-split-button">
-  <label class="pf-v5-c-check pf-m-standalone">
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    id="split-button-checkbox-example-check"
+    for="split-button-checkbox-example-check-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-example-input"
-      name="split-button-checkbox-example-input"
-      aria-label="Standalone input"
+      id="split-button-checkbox-example-check-input"
+      name="split-button-checkbox-example-check-input"
+      aria-label="Standalone check"
     />
   </label>
   <button
@@ -327,13 +335,17 @@ cssPrefix: pf-v5-c-menu-toggle
 </div>
 &nbsp;
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
-  <label class="pf-v5-c-check pf-m-standalone">
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    id="split-button-checkbox-expanded-example-check"
+    for="split-button-checkbox-expanded-example-check-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-expanded-example-input"
-      name="split-button-checkbox-expanded-example-input"
-      aria-label="Standalone input"
+      id="split-button-checkbox-expanded-example-check-input"
+      name="split-button-checkbox-expanded-example-check-input"
+      aria-label="Standalone check"
     />
   </label>
   <button
@@ -359,14 +371,15 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-with-toggle-text-disabled-example-input"
+    id="split-button-checkbox-with-toggle-text-disabled-example-check"
+    for="split-button-checkbox-with-toggle-text-disabled-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-with-toggle-text-disabled-example-check-input"
+      name="split-button-checkbox-with-toggle-text-disabled-example-check-input"
       disabled
-      id="split-button-checkbox-with-toggle-text-disabled-example-input"
-      name="split-button-checkbox-with-toggle-text-disabled-example-input"
     />
     <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -389,13 +402,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-with-toggle-text-example-input"
+    id="split-button-checkbox-with-toggle-text-example-check"
+    for="split-button-checkbox-with-toggle-text-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-with-toggle-text-example-input"
-      name="split-button-checkbox-with-toggle-text-example-input"
+      id="split-button-checkbox-with-toggle-text-example-check-input"
+      name="split-button-checkbox-with-toggle-text-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -417,13 +431,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-with-toggle-text-expanded-example-input"
+    id="split-button-checkbox-with-toggle-text-expanded-example-check"
+    for="split-button-checkbox-with-toggle-text-expanded-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-with-toggle-text-expanded-example-input"
-      name="split-button-checkbox-with-toggle-text-expanded-example-input"
+      id="split-button-checkbox-with-toggle-text-expanded-example-check-input"
+      name="split-button-checkbox-with-toggle-text-expanded-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -450,14 +465,15 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-primary-disabled-example-input"
+    id="split-button-checkbox-primary-disabled-example-check"
+    for="split-button-checkbox-primary-disabled-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-primary-disabled-example-check-input"
+      name="split-button-checkbox-primary-disabled-example-check-input"
       disabled
-      id="split-button-checkbox-primary-disabled-example-input"
-      name="split-button-checkbox-primary-disabled-example-input"
     />
     <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -480,13 +496,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-primary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-primary-example-input"
+    id="split-button-checkbox-primary-example-check"
+    for="split-button-checkbox-primary-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-primary-example-input"
-      name="split-button-checkbox-primary-example-input"
+      id="split-button-checkbox-primary-example-check-input"
+      name="split-button-checkbox-primary-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -508,13 +525,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-primary-expanded-example-input"
+    id="split-button-checkbox-primary-expanded-example-check"
+    for="split-button-checkbox-primary-expanded-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-primary-expanded-example-input"
-      name="split-button-checkbox-primary-expanded-example-input"
+      id="split-button-checkbox-primary-expanded-example-check-input"
+      name="split-button-checkbox-primary-expanded-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -541,14 +559,15 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-secondary-disabled-example-input"
+    id="split-button-checkbox-secondary-disabled-example-check"
+    for="split-button-checkbox-secondary-disabled-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-secondary-disabled-example-check-input"
+      name="split-button-checkbox-secondary-disabled-example-check-input"
       disabled
-      id="split-button-checkbox-secondary-disabled-example-input"
-      name="split-button-checkbox-secondary-disabled-example-input"
     />
     <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -571,13 +590,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-secondary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-secondary-example-input"
+    id="split-button-checkbox-secondary-example-check"
+    for="split-button-checkbox-secondary-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-secondary-example-input"
-      name="split-button-checkbox-secondary-example-input"
+      id="split-button-checkbox-secondary-example-check-input"
+      name="split-button-checkbox-secondary-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -599,13 +619,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-secondary-expanded-example-input"
+    id="split-button-checkbox-secondary-expanded-example-check"
+    for="split-button-checkbox-secondary-expanded-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-secondary-expanded-example-input"
-      name="split-button-checkbox-secondary-expanded-example-input"
+      id="split-button-checkbox-secondary-expanded-example-check-input"
+      name="split-button-checkbox-secondary-expanded-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>

package/docs/components/ModalBox/examples/ModalBox.css

@@ -1,10 +1,5 @@
 .ws-core-c-modal .ws-preview-html {
-  position: relative;
-}
-
-.ws-core-c-modal .pf-v5-c-modal-box {
-  position: absolute;
- inset-block-start: 50%;
- inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

package/docs/components/Nav/examples/Navigation.css

@@ -1,32 +1,9 @@
-#ws-core-c-navigation-default,
-#ws-core-c-navigation-basic,
-#ws-core-c-navigation-grouped,
-#ws-core-c-navigation-grouped-nav,
-#ws-core-c-navigation-grouped-nav-no-titles,
-#ws-core-c-navigation-expanded,
-#ws-core-c-navigation-expanded-with-subnav-titles,
-#ws-core-c-navigation-mixed,
-#ws-core-c-navigation-horizontal,
-#ws-core-c-navigation-horizontal-overflow,
-#ws-core-c-navigation-horizontal-subnav,
-#ws-core-c-navigation-horizontal-subnav-overflow,
-#ws-core-c-navigation-drilldown,
-#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
-#ws-core-c-navigation-level-2-drilldown,
-#ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
-#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
-  padding: 0;
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
-#ws-core-c-navigation-expandable-third-level .pf-v5-c-nav {
+.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav{
   background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
 #ws-core-c-navigation-horizontal-in-masthead,
 #ws-core-c-navigation-horizontal-in-masthead-overflow {
-  padding: 0;
   grid-template-rows: auto;
 }
 
@@ -58,6 +35,6 @@
 
 #ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
- inset-block-start: 168px;
- inset-inline-start: 256px;
+  inset-block-start: 168px;
+  inset-inline-start: 256px;
 }

package/docs/components/Nav/examples/Navigation.md

@@ -2483,6 +2483,104 @@ cssPrefix: pf-v5-c-nav
 
 ```
 
+### Nav link text
+
+When using anything other than a text node for the link text, wrap the link text in an element with `.pf-v5-c-nav__link-text`.
+
+```html isBeta
+<nav class="pf-v5-c-nav" aria-label="Global">
+  <ul class="pf-v5-c-nav__list" role="list">
+    <li class="pf-v5-c-nav__item">
+      <a href="#" class="pf-v5-c-nav__link">
+        <span class="pf-v5-c-nav__link-text">
+          Link 1
+          <i class="fas fa-arrow-right" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
+      <button
+        class="pf-v5-c-nav__link"
+        id="nav-link-text-link2"
+        aria-expanded="true"
+      >
+        <span class="pf-v5-c-nav__link-text">
+          Link 2
+          <small>(small text)</small>
+        </span>
+        <span class="pf-v5-c-nav__toggle">
+          <span class="pf-v5-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-v5-c-nav__subnav"
+        aria-labelledby="nav-link-text-link2"
+      >
+        <ul class="pf-v5-c-nav__list" role="list">
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">
+              <span class="pf-v5-c-nav__link-text">
+                <i class="fas fa-user" aria-hidden="true"></i>
+                Subnav link 1
+              </span>
+            </a>
+          </li>
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">
+              <span class="pf-v5-c-nav__link-text">
+                <i class="fas fa-user" aria-hidden="true"></i>
+                Subnav link 2
+              </span>
+            </a>
+          </li>
+        </ul>
+      </section>
+    </li>
+    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-current">
+      <button
+        class="pf-v5-c-nav__link"
+        id="nav-link-text-link4"
+        aria-expanded="false"
+      >
+        <span class="pf-v5-c-nav__link-text">
+          Link 3
+          <strong>(strong text)</strong>
+        </span>
+        <span class="pf-v5-c-nav__toggle">
+          <span class="pf-v5-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-v5-c-nav__subnav"
+        aria-labelledby="nav-link-text-link4"
+        hidden
+      >
+        <ul class="pf-v5-c-nav__list" role="list">
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
+          </li>
+          <li class="pf-v5-c-nav__item">
+            <a
+              href="#"
+              class="pf-v5-c-nav__link pf-m-current"
+              aria-current="page"
+            >Subnav link 2</a>
+          </li>
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">Subnav link 3</a>
+          </li>
+        </ul>
+      </section>
+    </li>
+  </ul>
+</nav>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2514,6 +2612,7 @@ The navigation system relies on several different sub-components:
 | `.pf-v5-c-nav__list` | `<ul>` | Initiates nav list. |
 | `.pf-v5-c-nav__item` | `<li>` | Initiates nav list item. |
 | `.pf-v5-c-nav__link` | `<a>` | Initiates nav list link. |
+| `.pf-v5-c-nav__link-text` | `<span>` | Initiates nav list link text. |
 | `.pf-v5-c-nav__section` | `<section>` | Initiates a nav section element. |
 | `.pf-v5-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
 | `.pf-v5-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |

package/docs/components/OptionsMenu/deprecated/options-menu.md

@@ -314,7 +314,10 @@ deprecated: true
     disabled
     aria-label="Sort by"
   >
-    <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+    <i
+      class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+      aria-hidden="true"
+    ></i>
   </button>
   <ul
     class="pf-v5-c-options-menu__menu"
@@ -360,7 +363,10 @@ deprecated: true
     aria-expanded="false"
     aria-label="Sort by"
   >
-    <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+    <i
+      class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+      aria-hidden="true"
+    ></i>
   </button>
   <ul
     class="pf-v5-c-options-menu__menu"
@@ -406,7 +412,10 @@ deprecated: true
     aria-expanded="true"
     aria-label="Sort by"
   >
-    <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+    <i
+      class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+      aria-hidden="true"
+    ></i>
   </button>
   <ul
     class="pf-v5-c-options-menu__menu"

package/docs/components/Popover/examples/Popover.css

@@ -1,10 +1,5 @@
 .ws-core-c-popover .ws-preview-html {
-  position: relative;
- }
-
- .ws-core-c-popover .pf-v5-c-popover {
-   position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-   transform: translate(-50%, -50%);
- }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}