npm - @patternfly/patternfly - Versions diffs - 6.5.0-prerelease.45 → 6.5.0-prerelease.47 - Mend

@patternfly/patternfly 6.5.0-prerelease.45 → 6.5.0-prerelease.47

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 (94) hide show

package/components/Accordion/accordion.css +1 -1
package/components/Accordion/accordion.scss +1 -1
package/components/Card/card.css +1 -1
package/components/Card/card.scss +1 -1
package/components/ClipboardCopy/clipboard-copy.css +1 -1
package/components/ClipboardCopy/clipboard-copy.scss +1 -1
package/components/DataList/data-list.css +1 -1
package/components/DataList/data-list.scss +1 -1
package/components/DualListSelector/dual-list-selector.css +1 -1
package/components/DualListSelector/dual-list-selector.scss +1 -1
package/components/ExpandableSection/expandable-section.css +2 -2
package/components/ExpandableSection/expandable-section.scss +2 -2
package/components/Form/form.css +1 -1
package/components/Form/form.scss +1 -1
package/components/JumpLinks/jump-links.css +1 -1
package/components/JumpLinks/jump-links.scss +1 -1
package/components/Nav/nav.css +1 -1
package/components/Nav/nav.scss +1 -1
package/components/NotificationDrawer/notification-drawer.css +11 -3
package/components/NotificationDrawer/notification-drawer.scss +12 -5
package/components/Table/table.css +2 -2
package/components/Table/table.scss +2 -2
package/components/Tabs/tabs.css +2 -2
package/components/Tabs/tabs.scss +2 -2
package/components/Toolbar/toolbar.css +1 -1
package/components/Toolbar/toolbar.scss +1 -1
package/components/TreeView/tree-view.css +1 -1
package/components/TreeView/tree-view.scss +1 -1
package/components/Wizard/wizard.css +1 -1
package/components/Wizard/wizard.scss +1 -1
package/components/_index.css +28 -20
package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
package/docs/components/Accordion/examples/Accordion.md +390 -30
package/docs/components/ActionList/examples/ActionList.md +10 -10
package/docs/components/Alert/examples/Alert.md +30 -30
package/docs/components/Banner/examples/Banner.md +65 -5
package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
package/docs/components/CalendarMonth/examples/CalendarMonth.md +16 -16
package/docs/components/Card/examples/Card.md +52 -4
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +78 -6
package/docs/components/CodeBlock/examples/CodeBlock.md +26 -2
package/docs/components/DataList/examples/DataList.md +221 -17
package/docs/components/Drawer/examples/Drawer.md +42 -42
package/docs/components/DualListSelector/examples/DualListSelector.md +961 -85
package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
package/docs/components/Form/examples/Form.md +78 -6
package/docs/components/Icon/examples/Icon.md +91 -7
package/docs/components/InlineEdit/examples/InlineEdit.md +16 -16
package/docs/components/JumpLinks/examples/JumpLinks.md +52 -4
package/docs/components/Label/examples/Label.md +2812 -220
package/docs/components/Menu/examples/Menu.md +1456 -112
package/docs/components/MenuToggle/examples/MenuToggle.md +13 -1
package/docs/components/ModalBox/examples/ModalBox.md +121 -37
package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +57 -21
package/docs/components/Nav/examples/Navigation.md +710 -62
package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +576 -48
package/docs/components/Popover/examples/Popover.md +110 -38
package/docs/components/ProgressStepper/examples/ProgressStepper.md +273 -21
package/docs/components/Slider/examples/Slider.md +52 -4
package/docs/components/Table/examples/Table.md +819 -63
package/docs/components/Tabs/examples/Tabs.md +1959 -339
package/docs/components/TextInputGroup/examples/TextInputGroup.md +509 -41
package/docs/components/Toolbar/examples/Toolbar.md +48 -48
package/docs/components/TreeView/examples/TreeView.md +1300 -100
package/docs/components/Wizard/examples/Wizard.md +349 -85
package/docs/demos/AboutModal/examples/AboutModal.md +41 -5
package/docs/demos/Alert/examples/Alert.md +123 -15
package/docs/demos/BackToTop/examples/BackToTop.md +39 -3
package/docs/demos/Banner/examples/Banner.md +78 -6
package/docs/demos/Card/examples/Card.md +310 -34
package/docs/demos/CardView/examples/CardView.md +78 -6
package/docs/demos/Compass/examples/Compass.md +73 -37
package/docs/demos/Dashboard/examples/Dashboard.md +128 -14
package/docs/demos/DataList/examples/DataList.md +234 -18
package/docs/demos/DescriptionList/examples/DescriptionList.md +119 -11
package/docs/demos/Drawer/examples/Drawer.md +147 -21
package/docs/demos/Form/examples/BasicForms.md +169 -13
package/docs/demos/JumpLinks/examples/JumpLinks.md +220 -31
package/docs/demos/Masthead/examples/Masthead.md +370 -34
package/docs/demos/Modal/examples/Modal.md +246 -30
package/docs/demos/Nav/examples/Nav.md +320 -32
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1063 -115
package/docs/demos/Page/examples/Page.md +548 -44
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +371 -47
package/docs/demos/Skeleton/examples/Skeleton.md +39 -3
package/docs/demos/Table/examples/Table.md +934 -73
package/docs/demos/Tabs/examples/Tabs.md +261 -27
package/docs/demos/Toolbar/examples/Toolbar.md +102 -30
package/docs/demos/Wizard/examples/Wizard.md +641 -92
package/package.json +1 -1
package/patternfly-no-globals.css +28 -20
package/patternfly.css +28 -20
package/patternfly.min.css +1 -1
package/patternfly.min.css.map +1 -1

package/docs/demos/Card/examples/Card.md CHANGED Viewed

@@ -21,7 +21,19 @@ wrapperTag: div
       >
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-card__header-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>
           </span>
         </span>
       </button>
@@ -122,7 +134,19 @@ wrapperTag: div
       >
         <span class="pf-v6-c-button__icon pf-m-start">
           <span class="pf-v6-c-card__header-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>
           </span>
         </span>
       </button>
@@ -1115,7 +1139,19 @@ wrapperTag: div
             </div>
           </div>
           <span class="pf-v6-c-notification-drawer__group-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>
           </span>
         </button>
         <ul class="pf-v6-c-notification-drawer__list" role="list" hidden>
@@ -1125,7 +1161,19 @@ wrapperTag: div
           >
             <div class="pf-v6-c-notification-drawer__list-item-header">
               <span class="pf-v6-c-notification-drawer__list-item-header-icon">
-                <i class="fas fa-exclamation-circle" 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="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
+                  />
+                </svg>
               </span>
               <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
                 <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1142,7 +1190,19 @@ wrapperTag: div
           >
             <div class="pf-v6-c-notification-drawer__list-item-header">
               <span class="pf-v6-c-notification-drawer__list-item-header-icon">
-                <i class="fas fa-exclamation-triangle" 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="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
+                  />
+                </svg>
               </span>
               <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
                 <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1304,7 +1364,19 @@ wrapperTag: div
             </div>
           </div>
           <span class="pf-v6-c-notification-drawer__group-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>
           </span>
         </button>
         <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -1314,7 +1386,19 @@ wrapperTag: div
           >
             <div class="pf-v6-c-notification-drawer__list-item-header">
               <span class="pf-v6-c-notification-drawer__list-item-header-icon">
-                <i class="fas fa-exclamation-circle" 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="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
+                  />
+                </svg>
               </span>
               <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
                 <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1331,7 +1415,19 @@ wrapperTag: div
           >
             <div class="pf-v6-c-notification-drawer__list-item-header">
               <span class="pf-v6-c-notification-drawer__list-item-header-icon">
-                <i class="fas fa-exclamation-triangle" 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="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
+                  />
+                </svg>
               </span>
               <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
                 <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1404,7 +1500,7 @@ wrapperTag: div
                       <span class="pf-v6-c-button__icon">
                         <svg
                           class="pf-v6-svg"
-                          viewBox="0 0 352 512"
+                          viewBox="0 0 20 20"
                           fill="currentColor"
                           aria-hidden="true"
                           role="img"
@@ -1412,7 +1508,7 @@ wrapperTag: div
                           height="1em"
                         >
                           <path
-                            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                           />
                         </svg>
                       </span>
@@ -1475,10 +1571,19 @@ wrapperTag: div
                             >
                               <span class="pf-v6-c-button__icon">
                                 <div class="pf-v6-c-table__toggle-icon">
-                                  <i
-                                    class="fas fa-angle-down"
+                                  <svg
+                                    class="pf-v6-svg"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
                                     aria-hidden="true"
-                                  ></i>
+                                    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>
@@ -1557,10 +1662,19 @@ wrapperTag: div
                             >
                               <span class="pf-v6-c-button__icon">
                                 <div class="pf-v6-c-table__toggle-icon">
-                                  <i
-                                    class="fas fa-angle-down"
+                                  <svg
+                                    class="pf-v6-svg"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
                                     aria-hidden="true"
-                                  ></i>
+                                    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>
@@ -1625,10 +1739,19 @@ wrapperTag: div
                             >
                               <span class="pf-v6-c-button__icon">
                                 <div class="pf-v6-c-table__toggle-icon">
-                                  <i
-                                    class="fas fa-angle-down"
+                                  <svg
+                                    class="pf-v6-svg"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
                                     aria-hidden="true"
-                                  ></i>
+                                    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>
@@ -1691,10 +1814,19 @@ wrapperTag: div
                             >
                               <span class="pf-v6-c-button__icon">
                                 <div class="pf-v6-c-table__toggle-icon">
-                                  <i
-                                    class="fas fa-angle-down"
+                                  <svg
+                                    class="pf-v6-svg"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
                                     aria-hidden="true"
-                                  ></i>
+                                    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>
@@ -1851,7 +1983,19 @@ wrapperTag: div
             </div>
           </div>
           <span class="pf-v6-c-notification-drawer__group-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>
           </span>
         </button>
         <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -1861,7 +2005,19 @@ wrapperTag: div
           >
             <div class="pf-v6-c-notification-drawer__list-item-header">
               <span class="pf-v6-c-notification-drawer__list-item-header-icon">
-                <i class="fas fa-exclamation-circle" 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="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
+                  />
+                </svg>
               </span>
               <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
                 <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1878,7 +2034,19 @@ wrapperTag: div
           >
             <div class="pf-v6-c-notification-drawer__list-item-header">
               <span class="pf-v6-c-notification-drawer__list-item-header-icon">
-                <i class="fas fa-exclamation-triangle" 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="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
+                  />
+                </svg>
               </span>
               <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
                 <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -2094,7 +2262,19 @@ wrapperTag: div
         >
           <span class="pf-v6-c-button__icon pf-m-start">
             <span class="pf-v6-c-card__header-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>
             </span>
           </span>
         </button>
@@ -2207,7 +2387,19 @@ wrapperTag: div
         >
           <span class="pf-v6-c-button__icon pf-m-start">
             <span class="pf-v6-c-card__header-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>
             </span>
           </span>
         </button>
@@ -2237,7 +2429,19 @@ wrapperTag: div
         >
           <span class="pf-v6-c-button__icon pf-m-start">
             <span class="pf-v6-c-card__header-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>
             </span>
           </span>
         </button>
@@ -2282,7 +2486,19 @@ wrapperTag: div
         >
           <span class="pf-v6-c-button__icon pf-m-start">
             <span class="pf-v6-c-card__header-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>
             </span>
           </span>
         </button>
@@ -2392,7 +2608,19 @@ wrapperTag: div
         >
           <span class="pf-v6-c-button__icon pf-m-start">
             <span class="pf-v6-c-card__header-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>
             </span>
           </span>
         </button>
@@ -2419,7 +2647,19 @@ wrapperTag: div
         >
           <span class="pf-v6-c-button__icon pf-m-start">
             <span class="pf-v6-c-card__header-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>
             </span>
           </span>
         </button>
@@ -2459,7 +2699,19 @@ wrapperTag: div
         >
           <span class="pf-v6-c-accordion__toggle-text">CPU 1</span>
           <span class="pf-v6-c-accordion__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>
           </span>
         </button>
       </h3>
@@ -2555,7 +2807,19 @@ wrapperTag: div
         >
           <span class="pf-v6-c-accordion__toggle-text">CPU 2</span>
           <span class="pf-v6-c-accordion__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>
           </span>
         </button>
       </h3>
@@ -2649,7 +2913,19 @@ wrapperTag: div
         >
           <span class="pf-v6-c-accordion__toggle-text">CPU 3</span>
           <span class="pf-v6-c-accordion__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>
           </span>
         </button>
       </h3>

package/docs/demos/CardView/examples/CardView.md CHANGED Viewed

@@ -210,7 +210,19 @@ section: patterns
               <span class="pf-v6-c-nav__link-text">System panel</span>
               <span class="pf-v6-c-nav__toggle">
                 <span class="pf-v6-c-nav__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>
                 </span>
               </span>
             </button>
@@ -265,7 +277,19 @@ section: patterns
               <span class="pf-v6-c-nav__link-text">Policy</span>
               <span class="pf-v6-c-nav__toggle">
                 <span class="pf-v6-c-nav__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>
                 </span>
               </span>
             </button>
@@ -298,7 +322,19 @@ section: patterns
               <span class="pf-v6-c-nav__link-text">Authentication</span>
               <span class="pf-v6-c-nav__toggle">
                 <span class="pf-v6-c-nav__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>
                 </span>
               </span>
             </button>
@@ -341,21 +377,57 @@ section: patterns
               </li>
               <li class="pf-v6-c-breadcrumb__item">
                 <span class="pf-v6-c-breadcrumb__item-divider">
-                  <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="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                    />
+                  </svg>
                 </span>
                 <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
               </li>
               <li class="pf-v6-c-breadcrumb__item">
                 <span class="pf-v6-c-breadcrumb__item-divider">
-                  <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="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                    />
+                  </svg>
                 </span>
                 <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
               </li>
               <li class="pf-v6-c-breadcrumb__item">
                 <span class="pf-v6-c-breadcrumb__item-divider">
-                  <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="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                    />
+                  </svg>
                 </span>
                 <a