npm - @patternfly/patternfly - Versions diffs - 6.3.0-prerelease.2 → 6.3.0-prerelease.20 - Mend

@patternfly/patternfly 6.3.0-prerelease.2 → 6.3.0-prerelease.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/README.md +1 -1
package/assets/images/icon-help.hbs +3 -0
package/assets/images/icon-outlined-star.hbs +3 -0
package/assets/images/icon-star.hbs +3 -0
package/base/patternfly-common.css +11 -11
package/base/patternfly-common.scss +12 -12
package/components/Accordion/accordion.css +71 -1
package/components/Accordion/accordion.scss +75 -4
package/components/Alert/alert-group.css +52 -31
package/components/Alert/alert-group.scss +77 -46
package/components/Button/button.css +27 -0
package/components/Button/button.scss +30 -1
package/components/CodeEditor/code-editor.css +3 -0
package/components/CodeEditor/code-editor.scss +3 -1
package/components/Drawer/drawer.css +28 -14
package/components/Drawer/drawer.scss +28 -9
package/components/DualListSelector/dual-list-selector.css +36 -0
package/components/DualListSelector/dual-list-selector.scss +43 -0
package/components/ExpandableSection/expandable-section.css +47 -1
package/components/ExpandableSection/expandable-section.scss +50 -1
package/components/MenuToggle/menu-toggle.css +8 -4
package/components/MenuToggle/menu-toggle.scss +15 -3
package/components/Page/page.css +4 -3
package/components/Page/page.scss +4 -2
package/components/ProgressStepper/progress-stepper.scss +1 -0
package/components/Skeleton/skeleton.css +22 -2
package/components/Skeleton/skeleton.scss +25 -3
package/components/Spinner/spinner.css +5 -0
package/components/Spinner/spinner.scss +6 -0
package/components/Table/table-grid.css +6 -5
package/components/Table/table-grid.scss +2 -1
package/components/Table/table.css +33 -0
package/components/Table/table.scss +33 -0
package/components/Tabs/tabs.css +25 -15
package/components/Tabs/tabs.scss +26 -13
package/components/Timestamp/timestamp.css +4 -0
package/components/Timestamp/timestamp.scss +7 -0
package/components/TreeView/tree-view.css +33 -0
package/components/TreeView/tree-view.scss +36 -2
package/components/Truncate/truncate.css +6 -0
package/components/Truncate/truncate.scss +9 -0
package/components/_index.css +410 -76
package/docs/components/Button/examples/Button.md +73 -3
package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
package/docs/components/Divider/examples/Divider.md +1 -1
package/docs/components/Drawer/examples/Drawer.md +4 -0
package/docs/components/DualListSelector/examples/DualListSelector.md +518 -0
package/docs/components/Form/examples/Form.md +156 -12
package/docs/components/Menu/examples/Menu.md +120 -4
package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
package/docs/components/ModalBox/examples/ModalBox.md +13 -1
package/docs/components/Page/examples/Page.md +1 -0
package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
package/docs/components/Spinner/examples/Spinner.md +10 -0
package/docs/components/Table/examples/Table.md +330 -16
package/docs/components/Tabs/examples/Tabs.md +1214 -6729
package/docs/components/Truncate/examples/Truncate.md +53 -10
package/docs/demos/Card/examples/Card.md +0 -57
package/docs/demos/DescriptionList/examples/DescriptionList.md +0 -38
package/docs/demos/Drawer/examples/Drawer.md +0 -38
package/docs/demos/Form/examples/BasicForms.md +130 -10
package/docs/demos/Masthead/examples/Masthead.md +1 -1
package/docs/demos/Modal/examples/Modal.md +39 -3
package/docs/demos/Nav/examples/Nav.md +2 -2
package/docs/demos/Page/examples/Page.md +355 -0
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -76
package/docs/demos/Table/examples/Table.md +67 -23
package/docs/demos/Tabs/examples/Tabs.md +0 -570
package/package.json +6 -6
package/patternfly-base-no-globals.css +11 -11
package/patternfly-base.css +11 -11
package/patternfly-no-globals.css +421 -87
package/patternfly.css +421 -87
package/patternfly.min.css +1 -1
package/patternfly.min.css.map +1 -1

package/docs/components/Table/examples/Table.md CHANGED Viewed

@@ -190,7 +190,19 @@ These classes can be used to ensure that the table changes between the tabular a
               aria-label="aria-label&#x3D;&quot;More info&quot;"
             >
               <span class="pf-v6-c-button__icon">
-                <i class="fas fa-question-circle" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 1024 1024"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
+                  />
+                </svg>
               </span>
             </button>
           </span>
@@ -225,7 +237,19 @@ These classes can be used to ensure that the table changes between the tabular a
               aria-label="aria-label&#x3D;&quot;More info&quot;"
             >
               <span class="pf-v6-c-button__icon">
-                <i class="fas fa-question-circle" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 1024 1024"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
+                  />
+                </svg>
               </span>
             </button>
           </span>
@@ -1150,7 +1174,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
           class="pf-v6-c-button pf-m-plain"
           id="table-expandable-expandable-toggle-thead"
           type="button"
-          aria-controls="table-expandable-content-thead"
+          aria-controls="table-expandable-content-1 table-expandable-content-2 table-expandable-content-3 table-expandable-content-4"
           aria-labelledby="table-expandable-node-thead"
           aria-label="Toggle all rows"
         >
@@ -1620,7 +1644,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
           id="expandable-set-width-columns-example-expandable-toggle-thead"
           type="button"
           aria-expanded="true"
-          aria-controls="expandable-set-width-columns-example-content-thead"
+          aria-controls="expandable-set-width-columns-example-content-1 expandable-set-width-columns-example-content-2 expandable-set-width-columns-example-content-3 expandable-set-width-columns-example-content-4"
           aria-labelledby="expandable-set-width-columns-example-node-thead"
           aria-label="Toggle all rows"
           aria-describedby="true"
@@ -2096,7 +2120,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
           class="pf-v6-c-button pf-m-plain"
           id="table-expandable-nested-table-expandable-toggle-thead"
           type="button"
-          aria-controls="table-expandable-nested-table-content-thead"
+          aria-controls="table-expandable-nested-table-content-1 table-expandable-nested-table-content-2 table-expandable-nested-table-content-3 table-expandable-nested-table-content-4"
           aria-labelledby="table-expandable-nested-table-node-thead"
           aria-label="Toggle all rows"
         >
@@ -5285,7 +5309,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
           class="pf-v6-c-button pf-m-small pf-m-plain"
           id="table-compact-expandable-expandable-toggle-thead"
           type="button"
-          aria-controls="table-compact-expandable-content-thead"
+          aria-controls="table-compact-expandable-content-1 table-compact-expandable-content-2 table-compact-expandable-content-3 table-compact-expandable-content-4"
           aria-labelledby="table-compact-expandable-node-thead"
           aria-label="Toggle all rows"
         >
@@ -20231,7 +20255,36 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-favorites-node1 table-favorites-favorite-button1"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-star" aria-hidden="true"></i>
+            <span class="pf-v6-c-button__icon-favorite">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                />
+              </svg>
+            </span>
+            <span class="pf-v6-c-button__icon-favorited">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </td>
@@ -20288,7 +20341,36 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-favorites-node2 table-favorites-favorite-button2"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-star" aria-hidden="true"></i>
+            <span class="pf-v6-c-button__icon-favorite">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                />
+              </svg>
+            </span>
+            <span class="pf-v6-c-button__icon-favorited">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </td>
@@ -20343,7 +20425,36 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-favorites-node3 table-favorites-favorite-button3"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-star" aria-hidden="true"></i>
+            <span class="pf-v6-c-button__icon-favorite">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                />
+              </svg>
+            </span>
+            <span class="pf-v6-c-button__icon-favorited">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </td>
@@ -20398,7 +20509,36 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-favorites-node4 table-favorites-favorite-button4"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-star" aria-hidden="true"></i>
+            <span class="pf-v6-c-button__icon-favorite">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                />
+              </svg>
+            </span>
+            <span class="pf-v6-c-button__icon-favorited">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </td>
@@ -20458,7 +20598,36 @@ For sticky columns to function correctly, the parent table's width must be contr
               aria-label="Favorite all"
             >
               <span class="pf-v6-c-button__icon">
-                <i class="fas fa-star" aria-hidden="true"></i>
+                <span class="pf-v6-c-button__icon-favorite">
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 576 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                    />
+                  </svg>
+                </span>
+                <span class="pf-v6-c-button__icon-favorited">
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 576 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                    />
+                  </svg>
+                </span>
               </span>
             </button>
           </div>
@@ -20505,7 +20674,36 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-favorites-sortable-node1 table-favorites-sortable-favorite-button1"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-star" aria-hidden="true"></i>
+            <span class="pf-v6-c-button__icon-favorite">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                />
+              </svg>
+            </span>
+            <span class="pf-v6-c-button__icon-favorited">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </td>
@@ -20534,7 +20732,36 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-favorites-sortable-node3 table-favorites-sortable-favorite-button3"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-star" aria-hidden="true"></i>
+            <span class="pf-v6-c-button__icon-favorite">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                />
+              </svg>
+            </span>
+            <span class="pf-v6-c-button__icon-favorited">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </td>
@@ -20561,7 +20788,36 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-favorites-sortable-node2 table-favorites-sortable-favorite-button2"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-star" aria-hidden="true"></i>
+            <span class="pf-v6-c-button__icon-favorite">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                />
+              </svg>
+            </span>
+            <span class="pf-v6-c-button__icon-favorited">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </td>
@@ -20588,7 +20844,36 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-favorites-sortable-node4 table-favorites-sortable-favorite-button4"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-star" aria-hidden="true"></i>
+            <span class="pf-v6-c-button__icon-favorite">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                />
+              </svg>
+            </span>
+            <span class="pf-v6-c-button__icon-favorited">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </td>
@@ -20615,7 +20900,36 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-favorites-sortable-node5 table-favorites-sortable-favorite-button5"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-star" aria-hidden="true"></i>
+            <span class="pf-v6-c-button__icon-favorite">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+                />
+              </svg>
+            </span>
+            <span class="pf-v6-c-button__icon-favorited">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </td>