@patternfly/patternfly 4.210.1 → 4.212.0

package/docs/demos/Wizard/examples/Wizard.md

@@ -50,17 +50,6 @@ wrapperTag: div
             <div
               class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
-              <div class="pf-c-toolbar__item">
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-label="Notifications"
-                >
-                  <span class="pf-c-notification-badge">
-                    <i class="pf-icon-bell" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
@@ -68,7 +57,7 @@ wrapperTag: div
                   <nav
                     class="pf-c-app-launcher"
                     aria-label="Application launcher"
-                    id="wizard-basic-example-masthead-icon-group--app-launcher"
+                    id="wizard-basic-example-masthead-application-launcher"
                   >
                     <button
                       class="pf-c-app-launcher__toggle"
@@ -1212,17 +1201,6 @@ wrapperTag: div
             <div
               class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
-              <div class="pf-c-toolbar__item">
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-label="Notifications"
-                >
-                  <span class="pf-c-notification-badge">
-                    <i class="pf-icon-bell" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
@@ -1230,7 +1208,7 @@ wrapperTag: div
                   <nav
                     class="pf-c-app-launcher"
                     aria-label="Application launcher"
-                    id="wizard-nav-expanded-example-masthead-icon-group--app-launcher"
+                    id="wizard-nav-expanded-example-masthead-application-launcher"
                   >
                     <button
                       class="pf-c-app-launcher__toggle"
@@ -2374,17 +2352,6 @@ wrapperTag: div
             <div
               class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
-              <div class="pf-c-toolbar__item">
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-label="Notifications"
-                >
-                  <span class="pf-c-notification-badge">
-                    <i class="pf-icon-bell" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
@@ -2392,7 +2359,7 @@ wrapperTag: div
                   <nav
                     class="pf-c-app-launcher"
                     aria-label="Application launcher"
-                    id="wizard-with-drawer-closed-example-masthead-icon-group--app-launcher"
+                    id="wizard-with-drawer-closed-example-masthead-application-launcher"
                   >
                     <button
                       class="pf-c-app-launcher__toggle"
@@ -3593,17 +3560,6 @@ wrapperTag: div
             <div
               class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
-              <div class="pf-c-toolbar__item">
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-label="Notifications"
-                >
-                  <span class="pf-c-notification-badge">
-                    <i class="pf-icon-bell" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
@@ -3611,7 +3567,7 @@ wrapperTag: div
                   <nav
                     class="pf-c-app-launcher"
                     aria-label="Application launcher"
-                    id="wizard-with-drawer-expanded-example-masthead-icon-group--app-launcher"
+                    id="wizard-with-drawer-expanded-example-masthead-application-launcher"
                   >
                     <button
                       class="pf-c-app-launcher__toggle"
@@ -4806,17 +4762,6 @@ wrapperTag: div
             <div
               class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
-              <div class="pf-c-toolbar__item">
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-label="Notifications"
-                >
-                  <span class="pf-c-notification-badge">
-                    <i class="pf-icon-bell" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
@@ -4824,7 +4769,7 @@ wrapperTag: div
                   <nav
                     class="pf-c-app-launcher"
                     aria-label="Application launcher"
-                    id="wizard-with-drawer-info-example-masthead-icon-group--app-launcher"
+                    id="wizard-with-drawer-info-example-masthead-application-launcher"
                   >
                     <button
                       class="pf-c-app-launcher__toggle"
@@ -5892,17 +5837,6 @@ wrapperTag: div
             <div
               class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
-              <div class="pf-c-toolbar__item">
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-label="Notifications"
-                >
-                  <span class="pf-c-notification-badge">
-                    <i class="pf-icon-bell" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
@@ -5910,7 +5844,7 @@ wrapperTag: div
                   <nav
                     class="pf-c-app-launcher"
                     aria-label="Application launcher"
-                    id="wizard-in-page-example-masthead-icon-group--app-launcher"
+                    id="wizard-in-page-example-masthead-application-launcher"
                   >
                     <button
                       class="pf-c-app-launcher__toggle"
@@ -6998,17 +6932,6 @@ wrapperTag: div
             <div
               class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
-              <div class="pf-c-toolbar__item">
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-label="Notifications"
-                >
-                  <span class="pf-c-notification-badge">
-                    <i class="pf-icon-bell" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
@@ -7016,7 +6939,7 @@ wrapperTag: div
                   <nav
                     class="pf-c-app-launcher"
                     aria-label="Application launcher"
-                    id="in-page-nav-expanded-example-masthead-icon-group--app-launcher"
+                    id="in-page-nav-expanded-example-masthead-application-launcher"
                   >
                     <button
                       class="pf-c-app-launcher__toggle"
@@ -8107,17 +8030,6 @@ wrapperTag: div
             <div
               class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
-              <div class="pf-c-toolbar__item">
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-label="Notifications"
-                >
-                  <span class="pf-c-notification-badge">
-                    <i class="pf-icon-bell" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
@@ -8125,7 +8037,7 @@ wrapperTag: div
                   <nav
                     class="pf-c-app-launcher"
                     aria-label="Application launcher"
-                    id="wizard-with-drawer-in-page-example-masthead-icon-group--app-launcher"
+                    id="wizard-with-drawer-in-page-example-masthead-application-launcher"
                   >
                     <button
                       class="pf-c-app-launcher__toggle"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.210.1",
+  "version": "4.212.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -34,8 +34,8 @@
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^16.40.1",
     "@patternfly/patternfly-a11y": "4.3.1",
-    "@patternfly/react-charts": "6.84.8",
-    "@patternfly/react-code-editor": "4.72.8",
+    "@patternfly/react-charts": "6.88.7",
+    "@patternfly/react-code-editor": "4.76.7",
     "@patternfly/react-table": "4.100.8",
     "@starptech/prettyhtml": "^0.10.0",
     "babel-eslint": "^8.2.3",

package/patternfly-no-reset.css

@@ -17065,18 +17065,19 @@ ul.pf-c-list {
   --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
   --pf-c-log-viewer__list--Height: auto;
   --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
+  --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__index--Display: none;
   --pf-c-log-viewer__index--Width: 4.0625rem;
   --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
   --pf-c-log-viewer__index--BackgroundColor: transparent;
+  --pf-c-log-viewer--line-number-chars: 4.4;
+  --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
   --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
   --pf-c-log-viewer__text--WordBreak: break-all;
   --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -17133,6 +17134,10 @@ ul.pf-c-list {
   content: "";
   background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
 }
+.pf-c-log-viewer.pf-m-line-number-chars {
+  --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
+  --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
+}
 .pf-c-log-viewer .pf-c-toolbar {
   --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
   --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
@@ -17173,6 +17178,8 @@ ul.pf-c-list {
 .pf-c-log-viewer__list {
   position: relative;
   height: var(--pf-c-log-viewer__list--Height);
+  font-family: var(--pf-c-log-viewer__list--FontFamily);
+  font-size: var(--pf-c-log-viewer__list--FontSize);
 }
 
 .pf-c-log-viewer__list-item {
@@ -17196,8 +17203,8 @@ ul.pf-c-list {
   width: var(--pf-c-log-viewer__index--Width);
   padding-right: var(--pf-c-log-viewer__index--PaddingRight);
   padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
-  font-family: var(--pf-c-log-viewer__index--FontFamily);
-  font-size: var(--pf-c-log-viewer__index--FontSize);
+  font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
+  font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
   color: var(--pf-c-log-viewer__index--Color);
   user-select: none;
   background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -17207,8 +17214,8 @@ ul.pf-c-list {
   display: block;
   padding-right: var(--pf-c-log-viewer__text--PaddingRight);
   padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
-  font-family: var(--pf-c-log-viewer__text--FontFamily);
-  font-size: var(--pf-c-log-viewer__text--FontSize);
+  font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
+  font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
   color: var(--pf-c-log-viewer__text--Color);
   word-break: var(--pf-c-log-viewer__text--WordBreak);
   white-space: var(--pf-c-log-viewer__text--WhiteSpace);
@@ -17756,7 +17763,7 @@ ul.pf-c-list {
   align-self: stretch;
 }
 .pf-c-masthead .pf-c-button.pf-m-plain {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-c-button--m-plain--Color);
 }
 
 .pf-c-masthead__main {
@@ -20707,12 +20714,15 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-notification-badge__i--Height: auto;
   --pf-c-notification-badge--m-read--after--BorderColor: transparent;
   --pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
+  --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
   --pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
   --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
   --pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
   --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
   --pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
+  --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
   --pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-notification-badge--pf-icon-attention-bell--LineHeight: var(--pf-global--LineHeight--sm);
   position: relative;
@@ -20754,6 +20764,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 .pf-c-notification-badge.pf-m-read {
   --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
   --pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);
+  color: var(--pf-c-notification-badge--m-read--Color, inherit);
 }
 .pf-c-notification-badge.pf-m-unread {
   --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--after--BackgroundColor);
@@ -20767,7 +20778,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   color: var(--pf-c-notification-badge--m-attention--Color);
 }
 .pf-c-notification-badge.pf-m-attention:hover {
-  --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
+  --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
+}
+.pf-c-notification-badge.pf-m-expanded {
+  --pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
+  --pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
+  --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
+  --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
 }
 
 .pf-c-notification-badge__count {
@@ -20811,7 +20828,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 }
 
 :where(.pf-theme-dark) .pf-c-notification-badge {
+  --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
   --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
 }
 
 .pf-c-notification-drawer {
@@ -21657,6 +21676,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 .pf-c-page.pf-m-full-height {
   height: 100vh;
   height: 100dvh;
+  max-height: 100%;
 }
 
 .pf-c-page__header,

package/patternfly.css

@@ -17192,18 +17192,19 @@ ul.pf-c-list {
   --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
   --pf-c-log-viewer__list--Height: auto;
   --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
+  --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__index--Display: none;
   --pf-c-log-viewer__index--Width: 4.0625rem;
   --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
   --pf-c-log-viewer__index--BackgroundColor: transparent;
+  --pf-c-log-viewer--line-number-chars: 4.4;
+  --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
   --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
   --pf-c-log-viewer__text--WordBreak: break-all;
   --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -17260,6 +17261,10 @@ ul.pf-c-list {
   content: "";
   background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
 }
+.pf-c-log-viewer.pf-m-line-number-chars {
+  --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
+  --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
+}
 .pf-c-log-viewer .pf-c-toolbar {
   --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
   --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
@@ -17300,6 +17305,8 @@ ul.pf-c-list {
 .pf-c-log-viewer__list {
   position: relative;
   height: var(--pf-c-log-viewer__list--Height);
+  font-family: var(--pf-c-log-viewer__list--FontFamily);
+  font-size: var(--pf-c-log-viewer__list--FontSize);
 }
 
 .pf-c-log-viewer__list-item {
@@ -17323,8 +17330,8 @@ ul.pf-c-list {
   width: var(--pf-c-log-viewer__index--Width);
   padding-right: var(--pf-c-log-viewer__index--PaddingRight);
   padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
-  font-family: var(--pf-c-log-viewer__index--FontFamily);
-  font-size: var(--pf-c-log-viewer__index--FontSize);
+  font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
+  font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
   color: var(--pf-c-log-viewer__index--Color);
   user-select: none;
   background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -17334,8 +17341,8 @@ ul.pf-c-list {
   display: block;
   padding-right: var(--pf-c-log-viewer__text--PaddingRight);
   padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
-  font-family: var(--pf-c-log-viewer__text--FontFamily);
-  font-size: var(--pf-c-log-viewer__text--FontSize);
+  font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
+  font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
   color: var(--pf-c-log-viewer__text--Color);
   word-break: var(--pf-c-log-viewer__text--WordBreak);
   white-space: var(--pf-c-log-viewer__text--WhiteSpace);
@@ -17883,7 +17890,7 @@ ul.pf-c-list {
   align-self: stretch;
 }
 .pf-c-masthead .pf-c-button.pf-m-plain {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-c-button--m-plain--Color);
 }
 
 .pf-c-masthead__main {
@@ -20834,12 +20841,15 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-notification-badge__i--Height: auto;
   --pf-c-notification-badge--m-read--after--BorderColor: transparent;
   --pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
+  --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
   --pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
   --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
   --pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
   --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
   --pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
+  --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
   --pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-notification-badge--pf-icon-attention-bell--LineHeight: var(--pf-global--LineHeight--sm);
   position: relative;
@@ -20881,6 +20891,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 .pf-c-notification-badge.pf-m-read {
   --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
   --pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);
+  color: var(--pf-c-notification-badge--m-read--Color, inherit);
 }
 .pf-c-notification-badge.pf-m-unread {
   --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--after--BackgroundColor);
@@ -20894,7 +20905,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   color: var(--pf-c-notification-badge--m-attention--Color);
 }
 .pf-c-notification-badge.pf-m-attention:hover {
-  --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
+  --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
+}
+.pf-c-notification-badge.pf-m-expanded {
+  --pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
+  --pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
+  --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
+  --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
 }
 
 .pf-c-notification-badge__count {
@@ -20938,7 +20955,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 }
 
 :where(.pf-theme-dark) .pf-c-notification-badge {
+  --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
   --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
 }
 
 .pf-c-notification-drawer {
@@ -21784,6 +21803,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 .pf-c-page.pf-m-full-height {
   height: 100vh;
   height: 100dvh;
+  max-height: 100%;
 }
 
 .pf-c-page__header,