@patternfly/react-styles 6.0.0-alpha.16 → 6.0.0-alpha.18

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.0.0-alpha.18 (2024-03-27)
+
+### Features
+
+- **Page,Drawer:** core bump and updates ([#10211](https://github.com/patternfly/patternfly-react/issues/10211)) ([8210248](https://github.com/patternfly/patternfly-react/commit/82102488317d9b263f8075179f8fecfc365cc647))
+
+# [6.0.0-alpha.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.16...@patternfly/react-styles@6.0.0-alpha.17) (2024-03-22)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 # 6.0.0-alpha.16 (2024-03-18)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Check/check.css

@@ -2,7 +2,7 @@
 .pf-v6-c-check {
   --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-check--Height: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
+  --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
   --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
@@ -25,7 +25,7 @@
 .pf-v6-c-check.pf-m-standalone {
   display: inline-grid;
   grid-template-columns: auto;
-  height: var(--pf-v6-c-check--Height);
+  min-height: var(--pf-v6-c-check--MinHeight);
 }
 .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
   align-self: center;

package/css/components/Divider/divider.css

@@ -85,25 +85,25 @@
   --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
 }
 .pf-v6-c-divider.pf-m-inset-xs {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-sm {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-md {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-lg {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-xl {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-2xl {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-3xl {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
 }
 
 @media (min-width: 576px) {
@@ -125,25 +125,25 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 768px) {
@@ -165,25 +165,25 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 992px) {
@@ -205,25 +205,25 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 1200px) {
@@ -245,25 +245,25 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 1450px) {
@@ -285,24 +285,24 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }

package/css/components/Drawer/drawer.css

@@ -3,7 +3,8 @@
   --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--FlexBasis: 100%;
-  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-drawer__content--BackgroundColor: transparent;
+  --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v6-c-drawer__panel--MinWidth: 50%;
@@ -204,12 +205,12 @@
   order: 0;
   background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
 }
+.pf-v6-c-drawer__content.pf-m-primary {
+  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
+}
 .pf-v6-c-drawer__content.pf-m-secondary {
   --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
 }
-.pf-v6-c-drawer__content.pf-m-no-background {
-  --pf-v6-c-drawer__content--BackgroundColor: transparent;
-}
 .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
   padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingTop);
   padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBottom);

package/css/components/Drawer/drawer.d.ts

@@ -25,6 +25,7 @@ declare const _default: {
     "resizing": "pf-m-resizing",
     "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
+    "primary": "pf-m-primary",
     "noPadding": "pf-m-no-padding",
     "padding": "pf-m-padding",
     "vertical": "pf-m-vertical",

package/css/components/Drawer/drawer.js

@@ -27,6 +27,7 @@ exports.default = {
     "resizing": "pf-m-resizing",
     "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
+    "primary": "pf-m-primary",
     "noPadding": "pf-m-no-padding",
     "padding": "pf-m-padding",
     "vertical": "pf-m-vertical",

package/css/components/Drawer/drawer.mjs

@@ -25,6 +25,7 @@ export default {
     "resizing": "pf-m-resizing",
     "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
+    "primary": "pf-m-primary",
     "noPadding": "pf-m-no-padding",
     "padding": "pf-m-padding",
     "vertical": "pf-m-vertical",

package/css/components/FormControl/form-control.css

@@ -200,6 +200,7 @@
 .pf-v6-c-form-control > select {
   --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control__select--PaddingRight);
   --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control__select--PaddingLeft);
+  background-color: var(--pf-v6-c-form-control--BackgroundColor);
 }
 @-moz-document url-prefix() {
   .pf-v6-c-form-control > select {
@@ -211,7 +212,7 @@
   --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
 }
 .pf-v6-c-form-control.pf-m-placeholder > select * {
-  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--child--Color);
+  color: var(--pf-v6-c-form-control--m-placeholder--child--Color);
 }
 .pf-v6-c-form-control.pf-m-placeholder > select *:disabled {
   color: revert;

package/css/components/Label/label.css

@@ -186,6 +186,10 @@
   --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
+  --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+  --pf-v6-c-label--m-disabled--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
 }
 
 .pf-v6-c-label {
@@ -420,6 +424,16 @@
 .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
   --pf-v6-c-label--m-filled__actions--c-button--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
 }
+.pf-v6-c-label.pf-m-disabled {
+  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
+  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
+  --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
+  --pf-v6-c-label--BorderWidth: 0;
+  pointer-events: none;
+}
+.pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
+  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled--Color);
+}
 
 .pf-v6-c-label,
 .pf-v6-c-label__content {

package/css/components/Label/label.d.ts

@@ -27,7 +27,8 @@ declare const _default: {
     "editableActive": "pf-m-editable-active",
     "overflow": "pf-m-overflow",
     "add": "pf-m-add",
-    "clickable": "pf-m-clickable"
+    "clickable": "pf-m-clickable",
+    "disabled": "pf-m-disabled"
   }
 };
 export default _default;

package/css/components/Label/label.js

@@ -29,6 +29,7 @@ exports.default = {
     "editableActive": "pf-m-editable-active",
     "overflow": "pf-m-overflow",
     "add": "pf-m-add",
-    "clickable": "pf-m-clickable"
+    "clickable": "pf-m-clickable",
+    "disabled": "pf-m-disabled"
   }
 };

package/css/components/Label/label.mjs

@@ -27,6 +27,7 @@ export default {
     "editableActive": "pf-m-editable-active",
     "overflow": "pf-m-overflow",
     "add": "pf-m-add",
-    "clickable": "pf-m-clickable"
+    "clickable": "pf-m-clickable",
+    "disabled": "pf-m-disabled"
   }
 };

package/css/components/Masthead/masthead.css

@@ -100,24 +100,24 @@
   padding-inline-end: 0;
 }
 .pf-v6-c-masthead.pf-m-inset-sm {
-  padding-inline-start: var(--pf-v6-global--spacer--sm);
-  padding-inline-end: var(--pf-v6-global--spacer--sm);
+  padding-inline-start: var(--pf-t--global--spacer--sm);
+  padding-inline-end: var(--pf-t--global--spacer--sm);
 }
 .pf-v6-c-masthead.pf-m-inset-md {
-  padding-inline-start: var(--pf-v6-global--spacer--md);
-  padding-inline-end: var(--pf-v6-global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
+  padding-inline-end: var(--pf-t--global--spacer--md);
 }
 .pf-v6-c-masthead.pf-m-inset-lg {
-  padding-inline-start: var(--pf-v6-global--spacer--lg);
-  padding-inline-end: var(--pf-v6-global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  padding-inline-end: var(--pf-t--global--spacer--lg);
 }
 .pf-v6-c-masthead.pf-m-inset-xl {
-  padding-inline-start: var(--pf-v6-global--spacer--xl);
-  padding-inline-end: var(--pf-v6-global--spacer--xl);
+  padding-inline-start: var(--pf-t--global--spacer--xl);
+  padding-inline-end: var(--pf-t--global--spacer--xl);
 }
 .pf-v6-c-masthead.pf-m-inset-2xl {
-  padding-inline-start: var(--pf-v6-global--spacer--2xl);
-  padding-inline-end: var(--pf-v6-global--spacer--2xl);
+  padding-inline-start: var(--pf-t--global--spacer--2xl);
+  padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 
 .pf-v6-c-masthead,
@@ -196,24 +196,24 @@
   padding-inline-end: 0;
 }
 .pf-v6-c-masthead.pf-m-inset-sm {
-  padding-inline-start: var(--pf-v6-global--spacer--sm);
-  padding-inline-end: var(--pf-v6-global--spacer--sm);
+  padding-inline-start: var(--pf-t--global--spacer--sm);
+  padding-inline-end: var(--pf-t--global--spacer--sm);
 }
 .pf-v6-c-masthead.pf-m-inset-md {
-  padding-inline-start: var(--pf-v6-global--spacer--md);
-  padding-inline-end: var(--pf-v6-global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
+  padding-inline-end: var(--pf-t--global--spacer--md);
 }
 .pf-v6-c-masthead.pf-m-inset-lg {
-  padding-inline-start: var(--pf-v6-global--spacer--lg);
-  padding-inline-end: var(--pf-v6-global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  padding-inline-end: var(--pf-t--global--spacer--lg);
 }
 .pf-v6-c-masthead.pf-m-inset-xl {
-  padding-inline-start: var(--pf-v6-global--spacer--xl);
-  padding-inline-end: var(--pf-v6-global--spacer--xl);
+  padding-inline-start: var(--pf-t--global--spacer--xl);
+  padding-inline-end: var(--pf-t--global--spacer--xl);
 }
 .pf-v6-c-masthead.pf-m-inset-2xl {
-  padding-inline-start: var(--pf-v6-global--spacer--2xl);
-  padding-inline-end: var(--pf-v6-global--spacer--2xl);
+  padding-inline-start: var(--pf-t--global--spacer--2xl);
+  padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 @media (min-width: 576px) {
   .pf-v6-c-masthead.pf-m-display-stack-on-sm {
@@ -240,24 +240,24 @@
   padding-inline-end: 0;
 }
 .pf-v6-c-masthead.pf-m-inset-sm {
-  padding-inline-start: var(--pf-v6-global--spacer--sm);
-  padding-inline-end: var(--pf-v6-global--spacer--sm);
+  padding-inline-start: var(--pf-t--global--spacer--sm);
+  padding-inline-end: var(--pf-t--global--spacer--sm);
 }
 .pf-v6-c-masthead.pf-m-inset-md {
-  padding-inline-start: var(--pf-v6-global--spacer--md);
-  padding-inline-end: var(--pf-v6-global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
+  padding-inline-end: var(--pf-t--global--spacer--md);
 }
 .pf-v6-c-masthead.pf-m-inset-lg {
-  padding-inline-start: var(--pf-v6-global--spacer--lg);
-  padding-inline-end: var(--pf-v6-global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  padding-inline-end: var(--pf-t--global--spacer--lg);
 }
 .pf-v6-c-masthead.pf-m-inset-xl {
-  padding-inline-start: var(--pf-v6-global--spacer--xl);
-  padding-inline-end: var(--pf-v6-global--spacer--xl);
+  padding-inline-start: var(--pf-t--global--spacer--xl);
+  padding-inline-end: var(--pf-t--global--spacer--xl);
 }
 .pf-v6-c-masthead.pf-m-inset-2xl {
-  padding-inline-start: var(--pf-v6-global--spacer--2xl);
-  padding-inline-end: var(--pf-v6-global--spacer--2xl);
+  padding-inline-start: var(--pf-t--global--spacer--2xl);
+  padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 @media (min-width: 768px) {
   .pf-v6-c-masthead.pf-m-display-stack-on-md {
@@ -284,24 +284,24 @@
   padding-inline-end: 0;
 }
 .pf-v6-c-masthead.pf-m-inset-sm {
-  padding-inline-start: var(--pf-v6-global--spacer--sm);
-  padding-inline-end: var(--pf-v6-global--spacer--sm);
+  padding-inline-start: var(--pf-t--global--spacer--sm);
+  padding-inline-end: var(--pf-t--global--spacer--sm);
 }
 .pf-v6-c-masthead.pf-m-inset-md {
-  padding-inline-start: var(--pf-v6-global--spacer--md);
-  padding-inline-end: var(--pf-v6-global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
+  padding-inline-end: var(--pf-t--global--spacer--md);
 }
 .pf-v6-c-masthead.pf-m-inset-lg {
-  padding-inline-start: var(--pf-v6-global--spacer--lg);
-  padding-inline-end: var(--pf-v6-global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  padding-inline-end: var(--pf-t--global--spacer--lg);
 }
 .pf-v6-c-masthead.pf-m-inset-xl {
-  padding-inline-start: var(--pf-v6-global--spacer--xl);
-  padding-inline-end: var(--pf-v6-global--spacer--xl);
+  padding-inline-start: var(--pf-t--global--spacer--xl);
+  padding-inline-end: var(--pf-t--global--spacer--xl);
 }
 .pf-v6-c-masthead.pf-m-inset-2xl {
-  padding-inline-start: var(--pf-v6-global--spacer--2xl);
-  padding-inline-end: var(--pf-v6-global--spacer--2xl);
+  padding-inline-start: var(--pf-t--global--spacer--2xl);
+  padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 @media (min-width: 992px) {
   .pf-v6-c-masthead.pf-m-display-stack-on-lg {
@@ -328,24 +328,24 @@
   padding-inline-end: 0;
 }
 .pf-v6-c-masthead.pf-m-inset-sm {
-  padding-inline-start: var(--pf-v6-global--spacer--sm);
-  padding-inline-end: var(--pf-v6-global--spacer--sm);
+  padding-inline-start: var(--pf-t--global--spacer--sm);
+  padding-inline-end: var(--pf-t--global--spacer--sm);
 }
 .pf-v6-c-masthead.pf-m-inset-md {
-  padding-inline-start: var(--pf-v6-global--spacer--md);
-  padding-inline-end: var(--pf-v6-global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
+  padding-inline-end: var(--pf-t--global--spacer--md);
 }
 .pf-v6-c-masthead.pf-m-inset-lg {
-  padding-inline-start: var(--pf-v6-global--spacer--lg);
-  padding-inline-end: var(--pf-v6-global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  padding-inline-end: var(--pf-t--global--spacer--lg);
 }
 .pf-v6-c-masthead.pf-m-inset-xl {
-  padding-inline-start: var(--pf-v6-global--spacer--xl);
-  padding-inline-end: var(--pf-v6-global--spacer--xl);
+  padding-inline-start: var(--pf-t--global--spacer--xl);
+  padding-inline-end: var(--pf-t--global--spacer--xl);
 }
 .pf-v6-c-masthead.pf-m-inset-2xl {
-  padding-inline-start: var(--pf-v6-global--spacer--2xl);
-  padding-inline-end: var(--pf-v6-global--spacer--2xl);
+  padding-inline-start: var(--pf-t--global--spacer--2xl);
+  padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 @media (min-width: 1200px) {
   .pf-v6-c-masthead.pf-m-display-stack-on-xl {
@@ -372,24 +372,24 @@
   padding-inline-end: 0;
 }
 .pf-v6-c-masthead.pf-m-inset-sm {
-  padding-inline-start: var(--pf-v6-global--spacer--sm);
-  padding-inline-end: var(--pf-v6-global--spacer--sm);
+  padding-inline-start: var(--pf-t--global--spacer--sm);
+  padding-inline-end: var(--pf-t--global--spacer--sm);
 }
 .pf-v6-c-masthead.pf-m-inset-md {
-  padding-inline-start: var(--pf-v6-global--spacer--md);
-  padding-inline-end: var(--pf-v6-global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
+  padding-inline-end: var(--pf-t--global--spacer--md);
 }
 .pf-v6-c-masthead.pf-m-inset-lg {
-  padding-inline-start: var(--pf-v6-global--spacer--lg);
-  padding-inline-end: var(--pf-v6-global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  padding-inline-end: var(--pf-t--global--spacer--lg);
 }
 .pf-v6-c-masthead.pf-m-inset-xl {
-  padding-inline-start: var(--pf-v6-global--spacer--xl);
-  padding-inline-end: var(--pf-v6-global--spacer--xl);
+  padding-inline-start: var(--pf-t--global--spacer--xl);
+  padding-inline-end: var(--pf-t--global--spacer--xl);
 }
 .pf-v6-c-masthead.pf-m-inset-2xl {
-  padding-inline-start: var(--pf-v6-global--spacer--2xl);
-  padding-inline-end: var(--pf-v6-global--spacer--2xl);
+  padding-inline-start: var(--pf-t--global--spacer--2xl);
+  padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 @media (min-width: 1450px) {
   .pf-v6-c-masthead.pf-m-display-stack-on-2xl {
@@ -416,22 +416,22 @@
   padding-inline-end: 0;
 }
 .pf-v6-c-masthead.pf-m-inset-sm {
-  padding-inline-start: var(--pf-v6-global--spacer--sm);
-  padding-inline-end: var(--pf-v6-global--spacer--sm);
+  padding-inline-start: var(--pf-t--global--spacer--sm);
+  padding-inline-end: var(--pf-t--global--spacer--sm);
 }
 .pf-v6-c-masthead.pf-m-inset-md {
-  padding-inline-start: var(--pf-v6-global--spacer--md);
-  padding-inline-end: var(--pf-v6-global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
+  padding-inline-end: var(--pf-t--global--spacer--md);
 }
 .pf-v6-c-masthead.pf-m-inset-lg {
-  padding-inline-start: var(--pf-v6-global--spacer--lg);
-  padding-inline-end: var(--pf-v6-global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  padding-inline-end: var(--pf-t--global--spacer--lg);
 }
 .pf-v6-c-masthead.pf-m-inset-xl {
-  padding-inline-start: var(--pf-v6-global--spacer--xl);
-  padding-inline-end: var(--pf-v6-global--spacer--xl);
+  padding-inline-start: var(--pf-t--global--spacer--xl);
+  padding-inline-end: var(--pf-t--global--spacer--xl);
 }
 .pf-v6-c-masthead.pf-m-inset-2xl {
-  padding-inline-start: var(--pf-v6-global--spacer--2xl);
-  padding-inline-end: var(--pf-v6-global--spacer--2xl);
+  padding-inline-start: var(--pf-t--global--spacer--2xl);
+  padding-inline-end: var(--pf-t--global--spacer--2xl);
 }

package/css/components/MenuToggle/menu-toggle.css

@@ -107,6 +107,13 @@
   --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
   --pf-v6-c-menu-toggle--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
   --pf-v6-c-menu-toggle--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
+  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
+  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
 }
 
 .pf-v6-c-menu-toggle {
@@ -241,6 +248,18 @@
 .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
   background-color: transparent;
 }
+.pf-v6-c-menu-toggle.pf-m-success {
+  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
+  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
+}
+.pf-v6-c-menu-toggle.pf-m-warning {
+  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
+  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
+}
+.pf-v6-c-menu-toggle.pf-m-danger {
+  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
+  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
+}
 
 .pf-v6-c-menu-toggle.pf-m-split-button {
   --pf-v6-c-menu-toggle--ColumnGap: 0;
@@ -381,4 +400,9 @@
 .pf-v6-c-menu-toggle__toggle-icon {
   min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
   color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
+}
+
+.pf-v6-c-menu-toggle__status-icon {
+  margin-inline-end: var(--pf-v6-c-menu-toggle__status-icon--MarginInlineEnd);
+  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
 }