@patternfly/patternfly 5.1.0-prerelease.8 → 5.1.0

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -212,6 +212,112 @@ cssPrefix: pf-v5-c-clipboard-copy
     id="expandable-expanded-readonly-content"
   >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
 </div>
+<br />
+<h4>Code</h4>
+<div class="pf-v5-c-clipboard-copy">
+  <div class="pf-v5-c-clipboard-copy__group">
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      id="expandable-not-expanded-code-toggle"
+      aria-labelledby="expandable-not-expanded-code-toggle expandable-not-expanded-code-text-input"
+      aria-controls="expandable-not-expanded-code-content"
+    >
+      <div class="pf-v5-c-clipboard-copy__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </div>
+    </button>
+    <span class="pf-v5-c-form-control">
+      <input
+        dir="ltr"
+        type="text"
+        value="{ &quot;menu&quot;: {     &quot;id&quot;: &quot;file&quot;,     &quot;value&quot;: &quot;File&quot;,     &quot;popup&quot;: {       &quot;menuitem&quot;: [         {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;},         {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;},         {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;}       ]     }   }} "
+        id="expandable-not-expanded-code-text-input"
+        aria-label="Copyable input"
+      />
+    </span>
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      aria-label="Copy to clipboard"
+      id="expandable-not-expanded-code-copy-button"
+      aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input"
+    >
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div
+    class="pf-v5-c-clipboard-copy__expandable-content"
+    hidden
+    id="expandable-not-expanded-code-content"
+  >
+    <pre dir="ltr">{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }} 
+  </pre>
+  </div>
+</div>
+<br />
+<div class="pf-v5-c-clipboard-copy pf-m-expanded">
+  <div class="pf-v5-c-clipboard-copy__group">
+    <button
+      class="pf-v5-c-button pf-m-control pf-m-expanded"
+      type="button"
+      id="expandable-expanded-code-toggle"
+      aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input"
+      aria-controls="expandable-expanded-code-content"
+    >
+      <div class="pf-v5-c-clipboard-copy__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </div>
+    </button>
+    <span class="pf-v5-c-form-control pf-m-readonly">
+      <input
+        readonly
+        dir="ltr"
+        type="text"
+        value="{ &quot;menu&quot;: {     &quot;id&quot;: &quot;file&quot;,     &quot;value&quot;: &quot;File&quot;,     &quot;popup&quot;: {       &quot;menuitem&quot;: [         {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;},         {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;},         {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;}       ]     }   }} "
+        id="expandable-expanded-code-text-input"
+        aria-label="Copyable input"
+      />
+    </span>
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      aria-label="Copy to clipboard"
+      id="expandable-expanded-code-copy-button"
+      aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input"
+    >
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div
+    class="pf-v5-c-clipboard-copy__expandable-content"
+    contenteditable="true"
+    id="expandable-expanded-code-content"
+  >
+    <pre dir="ltr">{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }}
+  </pre>
+  </div>
+</div>
 
 ```
 

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -41,7 +41,7 @@ cssPrefix: pf-v5-c-code-editor
     </div>
   </div>
   <div class="pf-v5-c-code-editor__main">
-    <code class="pf-v5-c-code-editor__code">
+    <code dir="ltr" class="pf-v5-c-code-editor__code">
       <pre class="pf-v5-c-code-editor__code-pre">
                 code goes here
       </pre>
@@ -89,7 +89,7 @@ cssPrefix: pf-v5-c-code-editor
     </div>
   </div>
   <div class="pf-v5-c-code-editor__main">
-    <code class="pf-v5-c-code-editor__code">
+    <code dir="ltr" class="pf-v5-c-code-editor__code">
       <pre class="pf-v5-c-code-editor__code-pre">
                 code goes here
       </pre>
@@ -238,7 +238,7 @@ cssPrefix: pf-v5-c-code-editor
     </div>
   </div>
   <div class="pf-v5-c-code-editor__main">
-    <code class="pf-v5-c-code-editor__code">
+    <code dir="ltr" class="pf-v5-c-code-editor__code">
       <pre class="pf-v5-c-code-editor__code-pre">
                 code goes here
       </pre>

package/docs/components/DragDrop/examples/DragDrop.css

@@ -6,8 +6,8 @@
   --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
 
   position: absolute;
- inset-block-start: 23%;
- inset-inline-start: .5em;
+  inset-block-start: 23%;
+  inset-inline-start: .5em;
   z-index: 9999;
   width: 100%;
 }

package/docs/components/DualListSelector/examples/DualListSelector.md

@@ -38,7 +38,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -252,7 +255,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -367,7 +373,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -575,7 +584,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -690,7 +702,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -898,7 +913,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1013,7 +1031,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1221,7 +1242,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1349,7 +1373,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1556,7 +1583,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1684,7 +1714,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2160,7 +2193,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2275,7 +2311,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2732,7 +2771,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2914,7 +2956,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button
@@ -3099,7 +3144,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <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>
         <div class="pf-v5-c-dropdown">
           <button

package/docs/components/Label/examples/Label.md

@@ -3265,7 +3265,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-label-group__close > button] [id value of .pf-v5-c-label-group__label]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
 | `aria-label="[label text]"` | `.pf-v5-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |

package/docs/components/Menu/examples/Menu.css

@@ -16,3 +16,11 @@
   align-items: flex-end;
   justify-content: flex-end;
 }
+
+:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) {
+  position: relative;
+}
+
+:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) .pf-v5-c-breadcrumb__dropdown .pf-v5-c-menu {
+  position: absolute;
+}

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/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;
 }