@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/docs/components/DataList/examples/DataList.md

@@ -78,7 +78,7 @@ cssPrefix: pf-v6-c-data-list
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-content">
         <div class="pf-v6-c-data-list__cell">
-          <h2 id="data-list-with-headings-item-1">Primary content</h2>
+          <h4 id="data-list-with-headings-item-1">Primary content</h4>
         </div>
         <div class="pf-v6-c-data-list__cell">Secondary content</div>
       </div>
@@ -89,9 +89,9 @@ cssPrefix: pf-v6-c-data-list
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-content">
         <div class="pf-v6-c-data-list__cell pf-m-no-fill">
-          <h2
+          <h4
             id="data-list-with-headings-item-2"
-          >Secondary content (pf-m-no-fill)</h2>
+          >Secondary content (pf-m-no-fill)</h4>
         </div>
         <div
           class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
@@ -164,7 +164,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -208,7 +220,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -262,7 +286,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -305,8 +341,8 @@ When a list item includes more than one block of content, it can be difficult fo
 | `.pf-v6-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-v6-c-data-list__action` here. **Required** |
 | `.pf-v6-c-data-list__check`  | `<div>` | Initiates a data list check cell. **Required** |
 | `.pf-v6-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/tokens/all-patternfly-tokens), or hides it at all breakpoints with `.pf-m-hidden`. |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens), or hides it at all breakpoints with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ## Exandable data list
 
@@ -334,7 +370,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -365,7 +413,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-expandable-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -396,7 +456,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -423,7 +495,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-expandable-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -455,7 +539,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -485,7 +581,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-expandable-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -528,7 +636,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -559,7 +679,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-expandable-compact-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -590,7 +722,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -620,7 +764,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-expandable-compact-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -652,7 +808,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -682,7 +850,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-expandable-compact-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -725,7 +905,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -756,7 +948,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-expandable-nested-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -788,7 +992,19 @@ When a list item includes more than one block of content, it can be difficult fo
                   >
                     <span class="pf-v6-c-button__icon pf-m-start">
                       <div class="pf-v6-c-data-list__toggle-icon">
-                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                        <svg
+                          class="pf-v6-svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          aria-hidden="true"
+                          role="img"
+                          width="1em"
+                          height="1em"
+                        >
+                          <path
+                            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                          />
+                        </svg>
                       </div>
                     </span>
                   </button>
@@ -828,7 +1044,19 @@ When a list item includes more than one block of content, it can be difficult fo
                   >
                     <span class="pf-v6-c-button__icon pf-m-start">
                       <div class="pf-v6-c-data-list__toggle-icon">
-                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                        <svg
+                          class="pf-v6-svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          aria-hidden="true"
+                          role="img"
+                          width="1em"
+                          height="1em"
+                        >
+                          <path
+                            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                          />
+                        </svg>
                       </div>
                     </span>
                   </button>
@@ -869,7 +1097,19 @@ When a list item includes more than one block of content, it can be difficult fo
                   >
                     <span class="pf-v6-c-button__icon pf-m-start">
                       <div class="pf-v6-c-data-list__toggle-icon">
-                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                        <svg
+                          class="pf-v6-svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          aria-hidden="true"
+                          role="img"
+                          width="1em"
+                          height="1em"
+                        >
+                          <path
+                            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                          />
+                        </svg>
                       </div>
                     </span>
                   </button>
@@ -913,7 +1153,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -940,7 +1192,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-expandable-nested-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -972,7 +1236,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -1002,7 +1278,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-expandable-nested-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -1076,7 +1364,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-compact-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -1118,7 +1418,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-compact-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -1170,7 +1482,19 @@ When a list item includes more than one block of content, it can be difficult fo
           id="data-list-compact-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -1226,12 +1550,11 @@ When a list item includes more than one block of content, it can be difficult fo
 ### Data list flex modifiers example
 
 ```html
-<h2 class="Preview__section-title">Default fitting - example 1</h2>
 <ul
   class="pf-v6-c-data-list"
   role="list"
   aria-label="Width modifier data list example 1"
-  id="data-list-default-fitting"
+  id="data-list-modifiers"
 >
   <li class="pf-v6-c-data-list__item">
     <div class="pf-v6-c-data-list__item-row">
@@ -1239,13 +1562,13 @@ When a list item includes more than one block of content, it can be difficult fo
         <div class="pf-v6-c-data-list__check">
           <label
             class="pf-v6-c-check pf-m-standalone"
-            for="data-list-default-fitting-item-1&quot;-input"
+            for="data-list-modifiers-item-1&quot;-input"
           >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              id="data-list-default-fitting-item-1&quot;-input"
-              name="data-list-default-fitting-item-1&quot;-input"
+              id="data-list-modifiers-item-1&quot;-input"
+              name="data-list-modifiers-item-1&quot;-input"
               aria-label="Standalone check"
             />
           </label>
@@ -1254,7 +1577,7 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-v6-c-data-list__item-content">
         <div class="pf-v6-c-data-list__cell">
           <div class="Preview__placeholder">
-            <b id="data-list-default-fitting-item-1">default</b>
+            <b id="data-list-modifiers-item-1">default</b>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
           </div>
         </div>
@@ -1267,28 +1590,19 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
     </div>
   </li>
-</ul>
-
-<h2 class="Preview__section-title">Flex modifiers - example 2</h2>
-<ul
-  class="pf-v6-c-data-list"
-  role="list"
-  aria-label="Width modifier data list example 2"
-  id="data-list-flex-modifiers"
->
   <li class="pf-v6-c-data-list__item">
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
         <div class="pf-v6-c-data-list__check">
           <label
             class="pf-v6-c-check pf-m-standalone"
-            for="data-list-flex-modifiers-item-1&quot;-input"
+            for="data-list-modifiers-item-2&quot;-input"
           >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              id="data-list-flex-modifiers-item-1&quot;-input"
-              name="data-list-flex-modifiers-item-1&quot;-input"
+              id="data-list-modifiers-item-2&quot;-input"
+              name="data-list-modifiers-item-2&quot;-input"
               aria-label="Standalone check"
             />
           </label>
@@ -1297,7 +1611,7 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-v6-c-data-list__item-content">
         <div class="pf-v6-c-data-list__cell pf-m-flex-2">
           <div class="Preview__placeholder">
-            <b id="data-list-flex-modifiers-item-1">.pf-m-flex-2</b>
+            <b id="data-list-modifiers-item-2">.pf-m-flex-2</b>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
           </div>
         </div>
@@ -1314,24 +1628,27 @@ When a list item includes more than one block of content, it can be difficult fo
           type="button"
           aria-expanded="false"
           aria-label="Data list item menu toggle"
-          id="data-list-flex-modifiers-item-1-menu-toggle"
+          id="data-list-modifiers-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
     </div>
   </li>
-</ul>
-
-<h2 class="Preview__section-title">Flex modifiers - example 3</h2>
-<ul
-  class="pf-v6-c-data-list"
-  role="list"
-  aria-label="Width modifier data list example 3"
-  id="data-list-flex-modifiers-2"
->
   <li class="pf-v6-c-data-list__item pf-m-expanded">
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
@@ -1339,15 +1656,27 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-v6-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-flex-modifiers-2-toggle1 data-list-flex-modifiers-2-item-1"
-            id="data-list-flex-modifiers-2-toggle1"
+            aria-labelledby="data-list-modifiers-toggle1 data-list-modifiers-item-1"
+            id="data-list-modifiers-toggle1"
             aria-label="Toggle details for"
             aria-expanded="true"
-            aria-controls="data-list-flex-modifiers-2-content1"
+            aria-controls="data-list-modifiers-content1"
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -1356,13 +1685,13 @@ When a list item includes more than one block of content, it can be difficult fo
         <div class="pf-v6-c-data-list__check">
           <label
             class="pf-v6-c-check pf-m-standalone"
-            for="data-list-flex-modifiers-2-item-1&quot;-input"
+            for="data-list-modifiers-item-3&quot;-input"
           >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              id="data-list-flex-modifiers-2-item-1&quot;-input"
-              name="data-list-flex-modifiers-2-item-1&quot;-input"
+              id="data-list-modifiers-item-3&quot;-input"
+              name="data-list-modifiers-item-3&quot;-input"
               aria-label="Standalone check"
             />
           </label>
@@ -1371,7 +1700,7 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-v6-c-data-list__item-content">
         <div class="pf-v6-c-data-list__cell pf-m-flex-5">
           <div class="Preview__placeholder">
-            <b id="data-list-flex-modifiers-2-item-1">.pf-m-flex-5</b>
+            <b id="data-list-modifiers-item-3">.pf-m-flex-5</b>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
           </div>
         </div>
@@ -1400,17 +1729,29 @@ When a list item includes more than one block of content, it can be difficult fo
           type="button"
           aria-expanded="false"
           aria-label="Data list item menu toggle"
-          id="data-list-flex-modifiers-2-item-1-menu-toggle"
+          id="data-list-modifiers-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
     </div>
     <section
       class="pf-v6-c-data-list__expandable-content"
-      id="data-list-flex-modifiers-2-content1"
+      id="data-list-modifiers-content1"
       aria-label="Flex modifier expandable primary content details"
     >
       <div
@@ -1587,7 +1928,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -1627,7 +1980,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -1668,7 +2033,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -1708,7 +2085,19 @@ When a list item includes more than one block of content, it can be difficult fo
           >
             <span class="pf-v6-c-button__icon pf-m-start">
               <div class="pf-v6-c-data-list__toggle-icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -2005,6 +2394,7 @@ When a list item includes more than one block of content, it can be difficult fo
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-m-plain` | `.pf-v6-c-data-list` | Modifies a data list to have a transparent background. |
+| `.pf-m-no-plain-on-glass` | `.pf-v6-c-data-list` | Prevents the data list from automatically applying plain styling when glass theme is enabled. |
 
 ## Data list as grid
 
@@ -2135,7 +2525,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/tokens/all-patternfly-tokens). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
+| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
 
 ## Documentation