@patternfly/patternfly 6.6.0-prerelease.6 → 6.6.0-prerelease.8

package/components/_index.css

@@ -888,21 +888,74 @@
   --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-avatar--Width: 2.25rem;
   --pf-v6-c-avatar--Height: 2.25rem;
+  --pf-v6-c-avatar--FontSize: 2.25rem;
   --pf-v6-c-avatar--m-sm--Width: 1.5rem;
   --pf-v6-c-avatar--m-sm--Height: 1.5rem;
+  --pf-v6-c-avatar--m-sm--FontSize: 1.5rem;
   --pf-v6-c-avatar--m-md--Width: 2.25rem;
   --pf-v6-c-avatar--m-md--Height: 2.25rem;
+  --pf-v6-c-avatar--m-md--FontSize: 2.25rem;
   --pf-v6-c-avatar--m-lg--Width: 4.5rem;
   --pf-v6-c-avatar--m-lg--Height: 4.5rem;
+  --pf-v6-c-avatar--m-lg--FontSize: 4.5rem;
   --pf-v6-c-avatar--m-xl--Width: 8rem;
   --pf-v6-c-avatar--m-xl--Height: 8rem;
+  --pf-v6-c-avatar--m-xl--FontSize: 8rem;
   --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
+  --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
+  --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
+  --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
+  --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
+  --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
+  --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
+  --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+  --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
+  --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
+  --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
+  --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+  --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
+  --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
+  --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
+  --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
+  --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
+  --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
+  --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
+  --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+  --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+  --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
 
 .pf-v6-c-avatar {
   width: var(--pf-v6-c-avatar--Width);
   height: var(--pf-v6-c-avatar--Height);
+  font-size: var(--pf-v6-c-avatar--FontSize);
   border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
   border-radius: var(--pf-v6-c-avatar--BorderRadius);
 }
@@ -1134,6 +1187,94 @@
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
   }
 }
+.pf-v6-c-avatar.pf-m-sm {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
+}
+.pf-v6-c-avatar.pf-m-lg {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
+  --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
+}
+.pf-v6-c-avatar.pf-m-xl {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
+  --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
+}
+.pf-v6-c-avatar.pf-m-colorful {
+  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: clip;
+  vertical-align: middle;
+  color: var(--pf-v6-c-avatar--m-colorful--Color, inherit);
+  background-color: var(--pf-v6-c-avatar--m-colorful--BackgroundColor, transparent);
+  border-color: var(--pf-v6-c-avatar--m-colorful--BorderColor, transparent);
+}
+.pf-v6-c-avatar.pf-m-colorful.pf-m-red {
+  --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
+  --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-red--Color);
+  --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-colorful.pf-m-orangered {
+  --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
+  --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orangered--Color);
+  --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-colorful.pf-m-orange {
+  --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
+  --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orange--Color);
+  --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-colorful.pf-m-yellow {
+  --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
+  --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-yellow--Color);
+  --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-colorful.pf-m-green {
+  --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
+  --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-green--Color);
+  --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-colorful.pf-m-teal {
+  --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
+  --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-teal--Color);
+  --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-colorful.pf-m-blue {
+  --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
+  --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-blue--Color);
+  --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-colorful.pf-m-purple {
+  --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
+  --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-purple--Color);
+  --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-colorful.pf-m-gray {
+  --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
+  --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-gray--Color);
+  --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
+}
+.pf-v6-c-avatar .pf-v6-c-avatar__initials {
+  font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
+  font-size: var(--pf-v6-c-avatar__initials--FontSize);
+  font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
+  color: var(--pf-v6-c-avatar__initials--Color);
+}
 
 .pf-v6-c-backdrop {
   --pf-v6-c-backdrop--Position: fixed;
@@ -19477,6 +19618,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
   --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
+  --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-table {
   --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
@@ -19546,6 +19689,26 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
 }
+.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
+  position: sticky;
+  inset-block-end: 0;
+  z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
+  background: var(--pf-v6-c-table--BackgroundColor);
+}
+.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
+  position: absolute;
+  inset: 0;
+  z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
+  pointer-events: none;
+  content: "";
+  border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+}
+.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
+  border-block-end: 0;
+}
+.pf-v6-c-table.pf-m-plain {
+  --pf-v6-c-table--BackgroundColor: transparent;
+}
 .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
 .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
 .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -20280,6 +20443,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
 }
 
+.pf-v6-c-table__tfoot {
+  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
+  vertical-align: top;
+}
+
 .pf-v6-c-table__icon-inline {
   display: flex;
   align-items: center;

package/docs/components/Avatar/examples/Avatar.md

@@ -7,11 +7,8 @@ cssPrefix: pf-v6-c-avatar
 ### Basic
 
 ```html
-<img
-  class="pf-v6-c-avatar"
-  alt="Avatar image"
-  src="/assets/images/img_avatar-light.svg"
-/>
+<img class="pf-v6-c-avatar" alt src="/assets/images/img_avatar-light.svg" />
+<img class="pf-v6-c-avatar" alt src="/assets/images/img_avatar-rhds.svg" />
 
 ```
 
@@ -23,6 +20,11 @@ cssPrefix: pf-v6-c-avatar
   alt="Avatar image bordered"
   src="/assets/images/img_avatar-light.svg"
 />
+<img
+  class="pf-v6-c-avatar pf-m-bordered"
+  alt="Avatar image bordered"
+  src="/assets/images/img_avatar-rhds.svg"
+/>
 
 ```
 
@@ -34,6 +36,11 @@ cssPrefix: pf-v6-c-avatar
   alt="Avatar image small"
   src="/assets/images/img_avatar-light.svg"
 />
+<img
+  class="pf-v6-c-avatar pf-m-sm"
+  alt="Avatar image small"
+  src="/assets/images/img_avatar-rhds.svg"
+/>
 
 ```
 
@@ -45,6 +52,11 @@ cssPrefix: pf-v6-c-avatar
   alt="Avatar image medium"
   src="/assets/images/img_avatar-light.svg"
 />
+<img
+  class="pf-v6-c-avatar pf-m-md"
+  alt="Avatar image medium"
+  src="/assets/images/img_avatar-rhds.svg"
+/>
 
 ```
 
@@ -56,6 +68,11 @@ cssPrefix: pf-v6-c-avatar
   alt="Avatar image large"
   src="/assets/images/img_avatar-light.svg"
 />
+<img
+  class="pf-v6-c-avatar pf-m-lg"
+  alt="Avatar image large"
+  src="/assets/images/img_avatar-rhds.svg"
+/>
 
 ```
 
@@ -67,6 +84,288 @@ cssPrefix: pf-v6-c-avatar
   alt="Avatar image extra large"
   src="/assets/images/img_avatar-light.svg"
 />
+<img
+  class="pf-v6-c-avatar pf-m-xl"
+  alt="Avatar image extra large"
+  src="/assets/images/img_avatar-rhds.svg"
+/>
+
+```
+
+### Colorful default
+
+Use a color modifier to add visual interest to the default avatar icon.
+
+```html
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-red"
+  role="img"
+  aria-label="Red avatar with icon"
+>
+  <svg
+    aria-hidden="true"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
+    />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-orangered"
+  role="img"
+  aria-label="Orange-red avatar with icon"
+>
+  <svg
+    aria-hidden="true"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
+    />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-orange"
+  role="img"
+  aria-label="Orange avatar with icon"
+>
+  <svg
+    aria-hidden="true"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
+    />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-yellow"
+  role="img"
+  aria-label="Yellow avatar with icon"
+>
+  <svg
+    aria-hidden="true"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
+    />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-green"
+  role="img"
+  aria-label="Green avatar with icon"
+>
+  <svg
+    aria-hidden="true"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
+    />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-teal"
+  role="img"
+  aria-label="Teal avatar with icon"
+>
+  <svg
+    aria-hidden="true"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
+    />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-blue"
+  role="img"
+  aria-label="Blue avatar with icon"
+>
+  <svg
+    aria-hidden="true"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
+    />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-purple"
+  role="img"
+  aria-label="Purple avatar with icon"
+>
+  <svg
+    aria-hidden="true"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
+    />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-gray"
+  role="img"
+  aria-label="Gray avatar with icon"
+>
+  <svg
+    aria-hidden="true"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
+    />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+</div>
+
+```
+
+### Colorful initials
+
+Use a color modifier with a user's initial to add visual interest when no image is available.
+
+```html
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-red"
+  role="img"
+  aria-label="Red avatar with initial"
+>
+  <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-orangered"
+  role="img"
+  aria-label="Orange-red avatar with initial"
+>
+  <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-orange"
+  role="img"
+  aria-label="Orange avatar with initial"
+>
+  <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-yellow"
+  role="img"
+  aria-label="Yellow avatar with initial"
+>
+  <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-green"
+  role="img"
+  aria-label="Green avatar with initial"
+>
+  <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-teal"
+  role="img"
+  aria-label="Teal avatar with initial"
+>
+  <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-blue"
+  role="img"
+  aria-label="Blue avatar with initial"
+>
+  <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-purple"
+  role="img"
+  aria-label="Purple avatar with initial"
+>
+  <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
+</div>
+<div
+  class="pf-v6-c-avatar pf-m-colorful pf-m-gray"
+  role="img"
+  aria-label="Gray avatar with initial"
+>
+  <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
+</div>
 
 ```
 
@@ -80,15 +379,29 @@ The avatar component provides a default SVG icon. If an image is used it should
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `alt` | `.pf-v6-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
+| `alt` | `.pf-v6-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required for image avatars** |
+| `role="img"` | `.pf-v6-c-avatar` | Indicates the element represents an image. **Required for colorful avatars** |
+| `aria-label` | `.pf-v6-c-avatar` | Provides an accessible name for the avatar. **Required for colorful avatars** |
+| `aria-hidden="true"` | `.pf-v6-c-avatar__initials`, `<svg>` | Hides decorative content from screen readers when the container has `aria-label`. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v6-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
+| `.pf-v6-c-avatar` | `<img>`, `<div>` |  Initiates an avatar. **Required** |
+| `.pf-v6-c-avatar--colorful` | `.pf-v6-c-avatar` | Modifies an avatar to use colorful styling with a border. |
+| `.pf-v6-c-avatar__initials` | `<span>` | Contains the user's initials in a colorful avatar. |
 | `.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border. |
 | `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 | `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). **Note:** This is the default size. |
 | `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 | `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-red` | `.pf-v6-c-avatar` |  Modifies avatar for red styling. |
+| `.pf-m-orangered` | `.pf-v6-c-avatar` |  Modifies avatar for orangered styling. |
+| `.pf-m-orange` | `.pf-v6-c-avatar` |  Modifies avatar for orange styling. |
+| `.pf-m-yellow` | `.pf-v6-c-avatar` |  Modifies avatar for yellow styling. |
+| `.pf-m-green` | `.pf-v6-c-avatar` |  Modifies avatar for green styling. |
+| `.pf-m-teal` | `.pf-v6-c-avatar` |  Modifies avatar for teal styling. |
+| `.pf-m-blue` | `.pf-v6-c-avatar` |  Modifies avatar for blue styling. |
+| `.pf-m-purple` | `.pf-v6-c-avatar` |  Modifies avatar for purple styling. |
+| `.pf-m-gray` | `.pf-v6-c-avatar` |  Modifies avatar for gray styling. |

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -1112,7 +1112,7 @@ cssPrefix: pf-v6-c-menu-toggle
   <span class="pf-v6-c-menu-toggle__icon">
     <img
       class="pf-v6-c-avatar pf-m-sm"
-      alt="Avatar image"
+      alt
       src="/assets/images/img_avatar-light.svg"
     />
   </span>
@@ -1145,7 +1145,7 @@ cssPrefix: pf-v6-c-menu-toggle
   <span class="pf-v6-c-menu-toggle__icon">
     <img
       class="pf-v6-c-avatar pf-m-sm"
-      alt="Avatar image"
+      alt
       src="/assets/images/img_avatar-light.svg"
     />
   </span>
@@ -1179,7 +1179,7 @@ cssPrefix: pf-v6-c-menu-toggle
   <span class="pf-v6-c-menu-toggle__icon">
     <img
       class="pf-v6-c-avatar pf-m-sm"
-      alt="Avatar image"
+      alt
       src="/assets/images/img_avatar-light.svg"
     />
   </span>

package/docs/components/Table/examples/Table.css

@@ -12,10 +12,16 @@
 #ws-core-c-table-sticky-columns-and-header .ws-preview-html,
 #ws-core-c-table-nested-column-headers-sticky-header .ws-preview-html,
 #ws-core-c-table-sticky-header .ws-preview-html,
+#ws-core-c-table-sticky-footer .ws-preview-html,
 #ws-core-c-table-sticky-header-with-base-and-stuck .ws-preview-html {
   height: 400px;
 }
 
+#ws-core-c-table-sticky-header .ws-preview-html,
+#ws-core-c-table-sticky-footer .ws-preview-html {
+  overflow: auto;
+}
+
 .pf-v6-c-overflow-menu .pf-v6-c-menu {
   position: absolute;
   inset-inline-end: 0;