@patternfly/patternfly 6.3.0-prerelease.13 → 6.3.0-prerelease.15

package/components/_index.css

@@ -371,7 +371,12 @@
   scale: -1 1;
 }
 
+.pf-v6-c-accordion__expandable-content:where([hidden]) {
+  display: revert;
+}
+
 .pf-v6-c-accordion__expandable-content {
+  display: none;
   margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
@@ -381,14 +386,24 @@
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
   transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
-  transition-property: opacity, translate;
+  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
   translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
 }
 .pf-v6-c-accordion__expandable-content.pf-m-fixed {
   max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
   overflow-y: auto;
 }
+.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
+  display: revert;
+}
+@starting-style {
+  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
+    --pf-v6-c-accordion__expandable-content--Opacity: 0;
+    --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-accordion__expandable-content-body {
   padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);
@@ -1757,6 +1772,11 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
   --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
   --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-button__icon--favorite--Opacity: 1;
+  --pf-v6-c-button__icon--favorited--Opacity: 0;
+  --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0;
+  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
+  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button__progress--Opacity: 0;
   --pf-v6-c-button__progress--TranslateY: -50%;
@@ -2067,6 +2087,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
 }
 .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
+  display: grid;
   transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
   transition-property: color;
@@ -2074,6 +2095,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-button.pf-m-favorited {
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
   --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
+  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
+  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
 }
 .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
   animation-name: pf-v6-c-button-icon-favorited;
@@ -2153,6 +2176,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
 }
 
+.pf-v6-c-button__icon-favorite,
+.pf-v6-c-button__icon-favorited {
+  grid-area: 1/1/1/1;
+  transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
+  transition-property: opacity;
+}
+
+.pf-v6-c-button__icon-favorite {
+  opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
+}
+
+.pf-v6-c-button__icon-favorited {
+  opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
+}
+
 .pf-v6-c-button__progress {
   position: absolute;
   inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
@@ -2165,6 +2203,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-spinner--Color: currentcolor;
 }
 
+.pf-v6-c-button__text {
+  text-decoration: inherit;
+}
+
 .pf-v6-c-button__count {
   display: inline-flex;
   align-items: center;
@@ -6381,8 +6423,8 @@ ul) {
   --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
   --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-expandable-section__content--Opacity: 0;
-  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
   --pf-v6-c-expandable-section__content--TranslateY: 0;
+  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
   --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
   --pf-v6-c-expandable-section__content--MaxWidth: auto;
   --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
@@ -6468,12 +6510,28 @@ ul) {
   max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
   padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
   padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
+}
+.pf-v6-c-expandable-section__content:where([hidden]) {
+  display: revert;
+}
+.pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
+  display: none;
   opacity: var(--pf-v6-c-expandable-section__content--Opacity);
   transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
-  transition-property: opacity, translate;
+  transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
   translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
 }
+.pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
+  display: revert;
+}
+@starting-style {
+  .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
+    --pf-v6-c-expandable-section__content--Opacity: 0;
+    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-file-upload {
   --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -16785,6 +16843,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-table__expandable-row--TransitionDuration--slide: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide);
+  --pf-v6-c-table__expandable-row--TransitionDuration--fade: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
+  --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-table__expandable-row--Opacity: 0;
+  --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
+  --pf-v6-c-table__expandable-row--TranslateY: 0;
+  --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
   --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -16845,6 +16914,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
   --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-table {
+    --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-table {
   width: 100%;
@@ -17413,6 +17489,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 .pf-v6-c-table__expandable-row {
   position: relative;
   border-block-end: 0 solid transparent;
+  opacity: var(--pf-v6-c-table__expandable-row--Opacity);
+  transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
+  translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
 }
 :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
 :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
@@ -17441,6 +17523,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 .pf-v6-c-table__expandable-row.pf-m-expanded {
   border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
   border-block-end-width: var(--pf-v6-c-table--border-width--base);
+  opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
+  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade);
+  translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
+}
+@starting-style {
+  .pf-v6-c-table__expandable-row.pf-m-expanded {
+    opacity: var(--pf-v6-c-table__expandable-row--Opacity);
+    translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
+  }
 }
 .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
   display: none;
@@ -19681,6 +19772,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
 }
 
+.pf-v6-c-timestamp__text {
+  text-decoration: inherit;
+}
+
 .pf-v6-c-title {
   --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
@@ -21955,6 +22050,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   grid-auto-flow: column;
   align-items: baseline;
   min-width: var(--pf-v6-c-truncate--MinWidth);
+  text-decoration: inherit;
 }
 .pf-v6-c-truncate.pf-m-fixed {
   display: inline;

package/docs/components/Button/examples/Button.md

@@ -2022,7 +2022,36 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
   aria-label="not starred"
 >
   <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>
 <button
@@ -2031,7 +2060,36 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
   aria-label="starred"
 >
   <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>
 

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

@@ -5648,7 +5648,36 @@ cssPrefix: pf-v6-c-menu
               aria-label="Starred"
             >
               <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>
@@ -5674,7 +5703,36 @@ cssPrefix: pf-v6-c-menu
               aria-label="Starred"
             >
               <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>
@@ -5706,7 +5764,36 @@ cssPrefix: pf-v6-c-menu
               disabled
             >
               <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>
@@ -5734,7 +5821,36 @@ cssPrefix: pf-v6-c-menu
               aria-label="Not starred"
             >
               <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>