@patternfly/react-core 6.6.0-prerelease.5 → 6.6.0-prerelease.7

package/dist/styles/base.css

@@ -158,9 +158,9 @@ button) {
   inset-block-start: 0;
   inset-inline-start: 0;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
+  clip-path: inset(50%);
 }
 
 .pf-v6-screen-reader.pf-m-full-size {
@@ -271,8 +271,8 @@ button) {
 }
 
 :root {
-  container-type: inline-size;
   container-name: pf-v6-contain-viewport pf-v6-contain-table;
+  container-type: inline-size;
 }
 
 @property --pf-v6-global--danger-jiggle--TranslateX {
@@ -1158,12 +1158,12 @@ button) {
   --pf-t--color--yellow--60: #96640f;
   --pf-t--color--yellow--70: #73480b;
   --pf-t--color--yellow--80: #54330b;
-  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
-  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
-  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
-  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
+  --pf-t--global--background--color--600: rgb(199, 199, 199, 0.2500);
+  --pf-t--global--background--color--700: rgb(199, 199, 199, 0.1000);
+  --pf-t--global--background--color--action--plain--default: rgb(255, 255, 255, 0.0000);
   --pf-t--global--background--filter--glass--blur--primary: initial;
-  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
+  --pf-t--global--border--color--high-contrast: rgb(255, 255, 255, 0.0000);
   --pf-t--global--border--radius--0: 0px;
   --pf-t--global--border--radius--100: 4px;
   --pf-t--global--border--radius--200: 6px;
@@ -1201,8 +1201,8 @@ button) {
   --pf-t--global--box-shadow--blur--100: 6px;
   --pf-t--global--box-shadow--blur--200: 10px;
   --pf-t--global--box-shadow--blur--300: 20px;
-  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
-  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+  --pf-t--global--box-shadow--color--100: rgb(41, 41, 41, 0.1500);
+  --pf-t--global--box-shadow--color--200: rgb(41, 41, 41, 0.2000);
   --pf-t--global--box-shadow--spread--100: 0px;
   --pf-t--global--box-shadow--spread--200: -4px;
   --pf-t--global--box-shadow--spread--300: -8px;
@@ -2060,10 +2060,10 @@ button) {
 }
 
 :root:where(.pf-v6-theme-high-contrast) {
-  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
-  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
-  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
-  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
+  --pf-t--global--background--color--600: rgb(199, 199, 199, 0.2500);
+  --pf-t--global--background--color--700: rgb(199, 199, 199, 0.1000);
+  --pf-t--global--background--color--action--plain--default: rgb(255, 255, 255, 0.0000);
   --pf-t--global--background--filter--glass--blur--primary: initial;
   --pf-t--global--border--radius--0: 0px;
   --pf-t--global--border--radius--100: 4px;
@@ -2097,8 +2097,8 @@ button) {
   --pf-t--global--box-shadow--blur--100: 6px;
   --pf-t--global--box-shadow--blur--200: 10px;
   --pf-t--global--box-shadow--blur--300: 20px;
-  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
-  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+  --pf-t--global--box-shadow--color--100: rgb(41, 41, 41, 0.1500);
+  --pf-t--global--box-shadow--color--200: rgb(41, 41, 41, 0.2000);
   --pf-t--global--box-shadow--spread--100: 0px;
   --pf-t--global--box-shadow--spread--200: -4px;
   --pf-t--global--box-shadow--spread--300: -8px;
@@ -2815,13 +2815,13 @@ button) {
 }
 
 :root:where(.pf-v6-theme-glass) {
-  --pf-t--global--background--color--glass--primary--default: rgba(255, 255, 255, 0.5000);
-  --pf-t--global--background--color--primary--clicked: rgba(199, 199, 199, 0.3000);
-  --pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.6000);
-  --pf-t--global--background--color--primary--hover: rgba(199, 199, 199, 0.3000);
-  --pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
-  --pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
-  --pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
+  --pf-t--global--background--color--glass--primary--default: rgb(255, 255, 255, 0.5000);
+  --pf-t--global--background--color--primary--clicked: rgb(199, 199, 199, 0.3000);
+  --pf-t--global--background--color--primary--default: rgb(255, 255, 255, 0.6000);
+  --pf-t--global--background--color--primary--hover: rgb(199, 199, 199, 0.3000);
+  --pf-t--global--background--color--secondary--clicked: rgb(163, 163, 163, 0.3000);
+  --pf-t--global--background--color--secondary--default: rgb(199, 199, 199, 0.3000);
+  --pf-t--global--background--color--secondary--hover: rgb(163, 163, 163, 0.3000);
   --pf-t--global--background--filter--glass--blur--primary: blur(16px);
   --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--100);
   --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
@@ -2829,6 +2829,7 @@ button) {
   --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
   --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
   --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
+  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
   --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
   --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("./assets/images/PF-Bkg-Generic-Light.svg"));
   --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
@@ -2960,13 +2961,13 @@ button) {
 }
 
 :root:where(.pf-v6-theme-felt.pf-v6-theme-glass) {
-  --pf-t--global--background--color--glass--primary--default: rgba(255, 255, 255, 0.5000);
-  --pf-t--global--background--color--primary--clicked: rgba(199, 199, 199, 0.3000);
-  --pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.6000);
-  --pf-t--global--background--color--primary--hover: rgba(199, 199, 199, 0.3000);
-  --pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
-  --pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
-  --pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
+  --pf-t--global--background--color--glass--primary--default: rgb(255, 255, 255, 0.5000);
+  --pf-t--global--background--color--primary--clicked: rgb(199, 199, 199, 0.3000);
+  --pf-t--global--background--color--primary--default: rgb(255, 255, 255, 0.6000);
+  --pf-t--global--background--color--primary--hover: rgb(199, 199, 199, 0.3000);
+  --pf-t--global--background--color--secondary--clicked: rgb(163, 163, 163, 0.3000);
+  --pf-t--global--background--color--secondary--default: rgb(199, 199, 199, 0.3000);
+  --pf-t--global--background--color--secondary--hover: rgb(163, 163, 163, 0.3000);
   --pf-t--global--background--filter--glass--blur--primary: blur(16px);
   --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--100);
   --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
@@ -2982,20 +2983,21 @@ button) {
   --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
   --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
   --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
+  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
   --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
   --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("./assets/images/Felt-Bkg-Generic-Light.svg"));
 }
 
 :root:where(.pf-v6-theme-dark) {
-  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
-  --pf-t--global--background--color--striped--row--default: rgba(21, 21, 21, 0.3000);
+  --pf-t--global--background--color--action--plain--default: rgb(0, 0, 0, 0.0000);
+  --pf-t--global--background--color--striped--row--default: rgb(21, 21, 21, 0.3000);
   --pf-t--global--background--filter--glass--blur--primary: initial;
-  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
-  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
-  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
-  --pf-t--global--dark--background--color--700: rgba(199, 199, 199, 0.2500);
-  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
-  --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.6000);
+  --pf-t--global--border--color--high-contrast: rgb(255, 255, 255, 0.0000);
+  --pf-t--global--dark--background--color--500: rgb(21, 21, 21, 0.8000);
+  --pf-t--global--dark--background--color--600: rgb(199, 199, 199, 0.1500);
+  --pf-t--global--dark--background--color--700: rgb(199, 199, 199, 0.2500);
+  --pf-t--global--dark--box-shadow--color--100: rgb(0, 0, 0, 0.5000);
+  --pf-t--global--dark--box-shadow--color--200: rgb(0, 0, 0, 0.6000);
   --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
   --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
   --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
@@ -3445,14 +3447,14 @@ button) {
 }
 
 :root:where(.pf-v6-theme-dark.pf-v6-theme-high-contrast) {
-  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
-  --pf-t--global--background--color--striped--row--default: rgba(21, 21, 21, 0.3000);
+  --pf-t--global--background--color--action--plain--default: rgb(0, 0, 0, 0.0000);
+  --pf-t--global--background--color--striped--row--default: rgb(21, 21, 21, 0.3000);
   --pf-t--global--background--filter--glass--blur--primary: initial;
-  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
-  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
-  --pf-t--global--dark--background--color--700: rgba(199, 199, 199, 0.2500);
-  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
-  --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.6000);
+  --pf-t--global--dark--background--color--500: rgb(21, 21, 21, 0.8000);
+  --pf-t--global--dark--background--color--600: rgb(199, 199, 199, 0.1500);
+  --pf-t--global--dark--background--color--700: rgb(199, 199, 199, 0.2500);
+  --pf-t--global--dark--box-shadow--color--100: rgb(0, 0, 0, 0.5000);
+  --pf-t--global--dark--box-shadow--color--200: rgb(0, 0, 0, 0.6000);
   --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
   --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
   --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
@@ -3886,13 +3888,13 @@ button) {
 }
 
 :root:where(.pf-v6-theme-dark.pf-v6-theme-glass) {
-  --pf-t--global--background--color--glass--primary--default: rgba(41, 41, 41, 0.5000);
-  --pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
-  --pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
-  --pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
-  --pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
-  --pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
-  --pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
+  --pf-t--global--background--color--glass--primary--default: rgb(41, 41, 41, 0.5000);
+  --pf-t--global--background--color--primary--clicked: rgb(56, 56, 56, 0.5000);
+  --pf-t--global--background--color--primary--default: rgb(41, 41, 41, 0.5000);
+  --pf-t--global--background--color--primary--hover: rgb(56, 56, 56, 0.5000);
+  --pf-t--global--background--color--secondary--clicked: rgb(41, 41, 41, 0.6000);
+  --pf-t--global--background--color--secondary--default: rgb(21, 21, 21, 0.6000);
+  --pf-t--global--background--color--secondary--hover: rgb(41, 41, 41, 0.6000);
   --pf-t--global--background--filter--glass--blur--primary: blur(16px);
   --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
   --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--500);
@@ -3955,13 +3957,13 @@ button) {
 }
 
 :root:where(.pf-v6-theme-dark.pf-v6-theme-felt.pf-v6-theme-glass) {
-  --pf-t--global--background--color--glass--primary--default: rgba(41, 41, 41, 0.5000);
-  --pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
-  --pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
-  --pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
-  --pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
-  --pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
-  --pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
+  --pf-t--global--background--color--glass--primary--default: rgb(41, 41, 41, 0.5000);
+  --pf-t--global--background--color--primary--clicked: rgb(56, 56, 56, 0.5000);
+  --pf-t--global--background--color--primary--default: rgb(41, 41, 41, 0.5000);
+  --pf-t--global--background--color--primary--hover: rgb(56, 56, 56, 0.5000);
+  --pf-t--global--background--color--secondary--clicked: rgb(41, 41, 41, 0.6000);
+  --pf-t--global--background--color--secondary--default: rgb(21, 21, 21, 0.6000);
+  --pf-t--global--background--color--secondary--hover: rgb(41, 41, 41, 0.6000);
   --pf-t--global--background--filter--glass--blur--primary: blur(16px);
   --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
   --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--500);

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.0-prerelease.7","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.0-prerelease.7","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.0-prerelease.7","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.0-prerelease.5",
+  "version": "6.6.0-prerelease.7",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.6.0-prerelease.1",
-    "@patternfly/react-styles": "^6.6.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.6.0-prerelease.1",
+    "@patternfly/react-icons": "workspace:^",
+    "@patternfly/react-styles": "workspace:^",
+    "@patternfly/react-tokens": "workspace:^",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.2",
+    "@patternfly/patternfly": "6.6.0-prerelease.9",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -62,6 +62,5 @@
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
-  },
-  "gitHead": "8b528bb83a30506a9b0f19398811c4a586f13e00"
+  }
 }

package/src/components/ActionList/examples/ActionList.md

@@ -8,7 +8,7 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 import { Fragment, useState } from 'react';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-close-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 ## Examples
 

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -11,7 +11,7 @@ import {
   MenuToggleElement,
   Divider
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -84,7 +84,7 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
                   variant="plain"
                   isExpanded={isOpen}
                   aria-label="Action list single group kebab"
-                  icon={<EllipsisVIcon />}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
                 />
               )}
               isOpen={isOpen}

package/src/components/Alert/examples/Alert.md

@@ -8,10 +8,10 @@ ouia: true
 
 import './alert.css';
 import { Fragment, useEffect, useState } from 'react';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
-import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 

package/src/components/Alert/examples/AlertCustomIcons.tsx

@@ -1,17 +1,17 @@
 import { Fragment } from 'react';
 import { Alert } from '@patternfly/react-core';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
-import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 
 export const AlertCustomIcons: React.FunctionComponent = () => (
   <Fragment>
-    <Alert customIcon={<UsersIcon />} title="Default alert title" />
-    <Alert customIcon={<BoxIcon />} variant="info" title="Info alert title" />
+    <Alert customIcon={<RhUiUsersFillIcon />} title="Default alert title" />
+    <Alert customIcon={<RhUiContainerFillIcon />} variant="info" title="Info alert title" />
     <Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
-    <Alert customIcon={<ServerIcon />} variant="warning" title="Warning alert title" />
+    <Alert customIcon={<RhUiServerStackFillIcon />} variant="warning" title="Warning alert title" />
     <Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
   </Fragment>
 );

package/src/components/Avatar/Avatar.tsx

@@ -5,31 +5,59 @@ export interface AvatarProps extends React.DetailedHTMLProps<
   React.ImgHTMLAttributes<HTMLImageElement>,
   HTMLImageElement
 > {
+  /** Content rendered inside the avatar, such as custom svgs or icons. */
+  children?: React.ReactNode;
   /** Additional classes added to the avatar. */
   className?: string;
-  /** Attribute that specifies the URL of the image for the avatar. */
+  /** Specifies the URL of the image for the avatar. */
   src?: string;
-  /** Attribute that specifies the alternate text of the image for the avatar. */
+  /** Specifies the alternate text of the image for the avatar. Will instead set the aria-label when using children or initials; to hide the avatar
+   * from assistive technologies when passing children or initials, pass an empty string to the alt prop.
+   */
   alt: string;
   /** Flag to indicate the avatar should have a border. */
   isBordered?: boolean;
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Color of the avatar. */
+  color?: 'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'gray';
+  /** Initials of the avatar. */
+  initials?: string;
 }
 
 export const Avatar: React.FunctionComponent<AvatarProps> = ({
+  children,
   className,
   src = '',
   alt,
   isBordered,
   size,
+  color,
+  initials,
   ...props
-}: AvatarProps) => (
-  <img
-    src={src}
-    alt={alt}
-    className={css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className)}
-    {...props}
-  />
-);
+}: AvatarProps) => {
+  const avatarClasses = css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className);
+  const isAltEmptyString = alt === '';
+
+  if (initials || children) {
+    return (
+      <div
+        className={css(avatarClasses, color && styles.modifiers.colorful, color && styles.modifiers[color])}
+        role="img"
+        aria-hidden={isAltEmptyString || undefined}
+        {...(!isAltEmptyString && { 'aria-label': alt })}
+        {...props}
+      >
+        {initials && (
+          <span className="pf-v6-c-avatar__initials" aria-hidden="true">
+            {initials}
+          </span>
+        )}
+        {children && children}
+      </div>
+    );
+  }
+
+  return <img src={src} alt={alt} className={avatarClasses} {...props} />;
+};
 Avatar.displayName = 'Avatar';

package/src/components/Avatar/__tests__/Avatar.test.tsx

@@ -62,6 +62,67 @@ test('Renders with passed aria-label prop', () => {
   expect(screen.getByRole('img')).toHaveAccessibleName('Avatar test');
 });
 
+test('Renders with passed initials prop', () => {
+  render(<Avatar alt="avatar" initials="AB" />);
+  expect(screen.getByText('AB')).toBeVisible();
+});
+
+test('Renders with passed children prop', () => {
+  render(<Avatar alt="avatar">Test</Avatar>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test(`Renders with class name ${styles.modifiers.colorful} when color prop is passed`, () => {
+  render(
+    <Avatar alt="avatar" color="red">
+      Test
+    </Avatar>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.colorful);
+});
+
+const colors = ['red', 'orangered', 'orange', 'yellow', 'green', 'teal', 'blue', 'purple', 'gray'] as const;
+test.each(colors)('Renders with passed color prop: %s', (color) => {
+  render(
+    <Avatar alt="avatar" color={color}>
+      Test
+    </Avatar>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers[color]);
+});
+
+test('Passes alt prop as aria-label when initials are passed', () => {
+  render(<Avatar alt="User avatar" initials="AB" />);
+  expect(screen.getByRole('img')).toHaveAccessibleName('User avatar');
+});
+
+test('Passes alt prop as aria-label when children are passed', () => {
+  render(<Avatar alt="User avatar">Test</Avatar>);
+  expect(screen.getByRole('img')).toHaveAccessibleName('User avatar');
+});
+
+test('Applies aria-hidden="true" when alt is empty string and initials are passed', () => {
+  render(<Avatar alt="" initials="AB" />);
+  expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+});
+
+test('Applies aria-hidden="true" when alt is empty string and children are passed', () => {
+  render(<Avatar alt="">Test</Avatar>);
+  expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+});
+
+test('Does not apply aria-label attribute when alt is empty string and initials are passed', () => {
+  render(<Avatar alt="" initials="AB" />);
+  const avatar = screen.getByRole('img', { hidden: true });
+  expect(avatar).not.toHaveAttribute('aria-label');
+});
+
+test('Does not apply aria-label attribute when alt is empty string and children are passed', () => {
+  render(<Avatar alt="">Test</Avatar>);
+  const avatar = screen.getByRole('img', { hidden: true });
+  expect(avatar).not.toHaveAttribute('aria-label');
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Avatar alt="avatar" aria-label="Avatar test" src="test.png" className="test-class" />);
 

package/src/components/Avatar/examples/Avatar.md

@@ -5,22 +5,49 @@ cssPrefix: pf-v6-c-avatar
 propComponents: ['Avatar']
 ---
 
+import './avatar.css';
 import { Fragment } from 'react';
-import avatarImg from '../../assets/avatarImg.svg';
+import avatarImg from '../../assets/img_avatar-light.svg';
+import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
 
 ## Examples
 
-### Basic
+### Basic usage
+
+Pass in the `src` property to apply an image for the avatar, or pass `children` for custom content such as icons or svg elements.
 
 ```ts file="./AvatarBasic.tsx"
+
+```
+
+### Color modifiers
+
+Color modifiers add visual interest and automatically include a border. The available colors are: "red," "orangered," "orange," "yellow," "green," "teal," "blue," "purple," and "gray".
+
+```ts file="./AvatarColorModifiers.tsx"
+
+```
+
+### With initials
+
+An avatar can display initials by using the `initials` property. It's recommended to pass only a single initial to ensure the text fits inside of the avatar.
+
+```ts file="./AvatarInitials.tsx"
+
 ```
 
-### Bordered 
+### Bordered
+
+A border can be applied by passing the `isBordered` property to a non-colorful avatar.
 
 ```ts file="./AvatarBordered.tsx"
+
 ```
 
 ### Size variations
 
+An avatar can be rendered at different sizes by passing the `size` property. The available sizes are: "sm," "md" (the default size), "lg," and "xl".
+
 ```ts file="./AvatarSizeVariations.tsx"
+
 ```

package/src/components/Avatar/examples/AvatarBasic.tsx

@@ -1,4 +1,34 @@
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+import avatarImg from '../../assets/img_avatar-light.svg';
 
-<Avatar src={avatarImg} alt="avatar" />;
+const rhdsLogo = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <g>
+      <rect width="48" height="48" fill="#147878"></rect>
+      <rect x="36" y="42" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="42" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="36" width="24" height="6" fill="#004D4D"></rect>
+      <rect x="18" y="30" width="12" height="6" fill="#004D4D"></rect>
+      <rect width="6" height="24" transform="matrix(-1 0 0 1 48 12)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 30)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 36 24)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 18)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 36 12)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 6)" fill="#004D4D"></rect>
+      <rect x="18" width="12" height="12" fill="#004D4D"></rect>
+      <rect x="6" y="30" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="24" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="18" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="12" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="6" width="6" height="6" fill="#004D4D"></rect>
+      <rect y="12" width="6" height="24" fill="#004D4D"></rect>
+    </g>
+  </svg>
+);
+
+export const AvatarBasic: React.FunctionComponent = () => (
+  <>
+    <Avatar src={avatarImg} alt="Basic avatar with image" />
+    <Avatar alt="Basic avatar with children">{rhdsLogo}</Avatar>
+  </>
+);

package/src/components/Avatar/examples/AvatarBordered.tsx

@@ -1,4 +1,8 @@
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
 
-<Avatar src={avatarImg} alt="avatar" isBordered />;
+export const AvatarBordered: React.FunctionComponent = () => (
+  <Avatar alt="Avatar with border" isBordered>
+    <RhUiAiChatbotIcon />
+  </Avatar>
+);

package/src/components/Avatar/examples/AvatarColorModifiers.tsx

@@ -0,0 +1,43 @@
+import { Avatar } from '@patternfly/react-core';
+
+const profileSvg = (
+  <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>
+);
+
+export const AvatarColorModifiers: React.FunctionComponent = () => (
+  <>
+    <Avatar color="red" alt="red avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="orangered" alt="orangered avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="orange" alt="orange avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="yellow" alt="yellow avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="green" alt="green avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="teal" alt="teal avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="blue" alt="blue avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="purple" alt="purple avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="gray" alt="gray avatar">
+      {profileSvg}
+    </Avatar>
+  </>
+);