@patternfly/react-styles 6.0.0-alpha.23 → 6.0.0-alpha.25

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.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.24...@patternfly/react-styles@6.0.0-alpha.25) (2024-06-25)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [6.0.0-alpha.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.23...@patternfly/react-styles@6.0.0-alpha.24) (2024-06-05)
+
+### Bug Fixes
+
+- **charts:** renamed cyan to teal, gold to yellow ([#10518](https://github.com/patternfly/patternfly-react/issues/10518)) ([d407554](https://github.com/patternfly/patternfly-react/commit/d4075543aa02e6987abacde96011df2d0347e54a))
+
 # [6.0.0-alpha.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.22...@patternfly/react-styles@6.0.0-alpha.23) (2024-05-31)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Badge/badge.css

@@ -1,4 +1,6 @@
 :where(:root, .pf-v6-c-badge) {
+  --pf-v6-c-badge--BorderColor: transparent;
+  --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -14,9 +16,13 @@
   --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+  --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
+  --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 }
 
 .pf-v6-c-badge {
+  position: relative;
   display: inline-block;
   min-width: var(--pf-v6-c-badge--MinWidth);
   padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
@@ -29,6 +35,14 @@
   background-color: var(--pf-v6-c-badge--BackgroundColor);
   border-radius: var(--pf-v6-c-badge--BorderRadius);
 }
+.pf-v6-c-badge::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
+  border-radius: inherit;
+}
 .pf-v6-c-badge.pf-m-read {
   --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
   --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
@@ -39,6 +53,13 @@
   --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
   --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
 }
+.pf-v6-c-badge.pf-m-disabled {
+  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
+  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
+}
+.pf-v6-c-badge.pf-m-disabled::after {
+  border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
+}
 
 .pf-v6-c-badge__toggle-icon {
   margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);

package/css/components/Badge/badge.d.ts

@@ -4,7 +4,8 @@ declare const _default: {
   "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
   "modifiers": {
     "read": "pf-m-read",
-    "unread": "pf-m-unread"
+    "unread": "pf-m-unread",
+    "disabled": "pf-m-disabled"
   }
 };
 export default _default;

package/css/components/Badge/badge.js

@@ -6,6 +6,7 @@ exports.default = {
   "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
   "modifiers": {
     "read": "pf-m-read",
-    "unread": "pf-m-unread"
+    "unread": "pf-m-unread",
+    "disabled": "pf-m-disabled"
   }
 };

package/css/components/Badge/badge.mjs

@@ -4,6 +4,7 @@ export default {
   "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
   "modifiers": {
     "read": "pf-m-read",
-    "unread": "pf-m-unread"
+    "unread": "pf-m-unread",
+    "disabled": "pf-m-disabled"
   }
 };

package/css/components/Breadcrumb/breadcrumb.css

@@ -15,10 +15,9 @@
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
   --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
-  --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-breadcrumb {
@@ -89,9 +88,6 @@ button.pf-v6-c-breadcrumb__link {
   margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
 }
-.pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
-  line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
-}
 
 .pf-v6-c-breadcrumb__heading {
   display: inline;

package/css/components/Breadcrumb/breadcrumb.d.ts

@@ -8,7 +8,6 @@ declare const _default: {
   "breadcrumbLink": "pf-v6-c-breadcrumb__link",
   "breadcrumbList": "pf-v6-c-breadcrumb__list",
   "dirRtl": "pf-v6-m-dir-rtl",
-  "menuToggle": "pf-v6-c-menu-toggle",
   "modifiers": {
     "current": "pf-m-current"
   }

package/css/components/Breadcrumb/breadcrumb.js

@@ -10,7 +10,6 @@ exports.default = {
   "breadcrumbLink": "pf-v6-c-breadcrumb__link",
   "breadcrumbList": "pf-v6-c-breadcrumb__list",
   "dirRtl": "pf-v6-m-dir-rtl",
-  "menuToggle": "pf-v6-c-menu-toggle",
   "modifiers": {
     "current": "pf-m-current"
   }

package/css/components/Breadcrumb/breadcrumb.mjs

@@ -8,7 +8,6 @@ export default {
   "breadcrumbLink": "pf-v6-c-breadcrumb__link",
   "breadcrumbList": "pf-v6-c-breadcrumb__list",
   "dirRtl": "pf-v6-m-dir-rtl",
-  "menuToggle": "pf-v6-c-menu-toggle",
   "modifiers": {
     "current": "pf-m-current"
   }

package/css/components/Button/button.css

@@ -13,6 +13,9 @@
   --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
   --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-button--TextDecoration: none;
+  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -205,8 +208,6 @@
   --pf-v6-c-button__progress--InsetBlockStart: 50%;
   --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
-  --pf-v6-c-button--m-progress--TransitionProperty: padding;
-  --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
   --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
   --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
   --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -215,10 +216,7 @@
   --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
   --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
-  --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
 }
 
 .pf-v6-c-button {
@@ -246,6 +244,9 @@
   border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
   border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
   border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
+  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-button--TransitionDuration);
+  transition-property: var(--pf-v6-c-button--TransitionProperty);
 }
 .pf-v6-c-button::after {
   position: absolute;
@@ -255,6 +256,7 @@
   border: var(--pf-v6-c-button--BorderWidth) solid;
   border-color: var(--pf-v6-c-button--BorderColor);
   border-radius: inherit;
+  transition: inherit;
 }
 .pf-v6-c-button.pf-m-primary {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -268,7 +270,7 @@
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
 }
 .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
-  border: var(--pf-v6-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
+  --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
 }
 .pf-v6-c-button.pf-m-secondary {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -499,9 +501,6 @@
   pointer-events: none;
 }
 .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
-  --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
-  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
-  --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
   color: var(--pf-v6-c-button--disabled--Color);
   background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
 }
@@ -518,7 +517,6 @@
 .pf-v6-c-button.pf-m-progress {
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
-  transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
 }
 .pf-v6-c-button.pf-m-in-progress {
   --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);

package/css/components/Card/card.css

@@ -174,7 +174,7 @@
 }
 
 .pf-v6-c-card__header-main {
-  flex: 1;
+  flex-grow: 1;
 }
 
 .pf-v6-c-card__header-toggle {

package/css/components/Hint/hint.css

@@ -18,6 +18,7 @@
   --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 }
 
 .pf-v6-c-hint {
@@ -44,11 +45,14 @@
   grid-column: 2;
   grid-auto-flow: column;
   align-self: start;
+  margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
   text-align: end;
 }
-.pf-v6-c-hint__actions .pf-v6-c-menu-toggle.pf-m-plain {
-  margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
+.pf-v6-c-hint__actions.pf-m-no-offset {
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
 }
 .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
   grid-column: 1;

package/css/components/Hint/hint.d.ts

@@ -6,11 +6,10 @@ declare const _default: {
   "hintBody": "pf-v6-c-hint__body",
   "hintFooter": "pf-v6-c-hint__footer",
   "hintTitle": "pf-v6-c-hint__title",
-  "menuToggle": "pf-v6-c-menu-toggle",
   "modifiers": {
     "link": "pf-m-link",
     "inline": "pf-m-inline",
-    "plain": "pf-m-plain"
+    "noOffset": "pf-m-no-offset"
   }
 };
 export default _default;

package/css/components/Hint/hint.js

@@ -8,10 +8,9 @@ exports.default = {
   "hintBody": "pf-v6-c-hint__body",
   "hintFooter": "pf-v6-c-hint__footer",
   "hintTitle": "pf-v6-c-hint__title",
-  "menuToggle": "pf-v6-c-menu-toggle",
   "modifiers": {
     "link": "pf-m-link",
     "inline": "pf-m-inline",
-    "plain": "pf-m-plain"
+    "noOffset": "pf-m-no-offset"
   }
 };

package/css/components/Hint/hint.mjs

@@ -6,10 +6,9 @@ export default {
   "hintBody": "pf-v6-c-hint__body",
   "hintFooter": "pf-v6-c-hint__footer",
   "hintTitle": "pf-v6-c-hint__title",
-  "menuToggle": "pf-v6-c-menu-toggle",
   "modifiers": {
     "link": "pf-m-link",
     "inline": "pf-m-inline",
-    "plain": "pf-m-plain"
+    "noOffset": "pf-m-no-offset"
   }
 };

package/css/components/Icon/icon.css

@@ -35,11 +35,11 @@
   --pf-v6-c-icon--m-inline--Height: 1em;
   --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
   --pf-v6-c-icon__content--Color: initial;
-  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
-  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
-  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
-  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
-  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
+  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v6-c-icon--m-inline__content--Color: initial;
   --pf-v6-c-icon__content--FontSize: 1em;
   --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);

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

@@ -106,6 +106,9 @@
   --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
   --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
+  --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + 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);
@@ -243,6 +246,9 @@
 .pf-v6-c-menu-toggle.pf-m-small {
   --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
   --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
+  --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
+  --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
+  --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
 }
 .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
   background-color: transparent;

package/css/components/ModalBox/modal-box.css

@@ -20,6 +20,7 @@
   --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -36,7 +37,7 @@
   --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
   --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
   --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -116,6 +117,7 @@
   flex-shrink: 0;
   gap: var(--pf-v6-c-modal-box__header--Gap);
   padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
 }

package/css/components/MultipleFileUpload/multiple-file-upload.css

@@ -61,7 +61,7 @@
   --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
   --pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;

package/css/components/Nav/nav.css

@@ -40,6 +40,8 @@
   --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
   --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
   --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
+  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
@@ -182,10 +184,15 @@
   background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor);
 }
 .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
+  --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link--m-current__link-icon--Color);
   color: var(--pf-v6-c-nav__link--m-current--Color);
   background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
 }
 
+.pf-v6-c-nav__link-icon {
+  color: var(--pf-v6-c-nav__link-icon--Color);
+}
+
 .pf-v6-c-nav__toggle {
   flex: none;
   align-self: start;

package/css/components/Nav/nav.d.ts

@@ -18,6 +18,7 @@ declare const _default: {
   "nav": "pf-v6-c-nav",
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
+  "navLinkIcon": "pf-v6-c-nav__link-icon",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",

package/css/components/Nav/nav.js

@@ -20,6 +20,7 @@ exports.default = {
   "nav": "pf-v6-c-nav",
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
+  "navLinkIcon": "pf-v6-c-nav__link-icon",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",

package/css/components/Nav/nav.mjs

@@ -18,6 +18,7 @@ export default {
   "nav": "pf-v6-c-nav",
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
+  "navLinkIcon": "pf-v6-c-nav__link-icon",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",

package/css/components/Tabs/tabs.css

@@ -17,8 +17,6 @@
   --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth: 0;
   --pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth: 0;
   --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--before--border-width--base);
-  --pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
-  --pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
   --pf-v6-c-tabs__list--Display: flex;
   --pf-v6-c-tabs__item--BackgroundColor: transparent;
   --pf-v6-c-tabs__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -210,12 +208,6 @@
   --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
   --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
 }
-.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
-  border-inline-start-width: var(--pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth);
-}
-.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current:last-child .pf-v6-c-tabs__link::before {
-  border-inline-end-width: var(--pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth);
-}
 .pf-v6-c-tabs.pf-m-box.pf-m-scrollable .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
   inset-inline-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
 }

package/css/components/_index.css

@@ -971,6 +971,8 @@
 }
 
 :where(:root, .pf-v6-c-badge) {
+  --pf-v6-c-badge--BorderColor: transparent;
+  --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -986,9 +988,13 @@
   --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+  --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
+  --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 }
 
 .pf-v6-c-badge {
+  position: relative;
   display: inline-block;
   min-width: var(--pf-v6-c-badge--MinWidth);
   padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
@@ -1001,6 +1007,14 @@
   background-color: var(--pf-v6-c-badge--BackgroundColor);
   border-radius: var(--pf-v6-c-badge--BorderRadius);
 }
+.pf-v6-c-badge::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
+  border-radius: inherit;
+}
 .pf-v6-c-badge.pf-m-read {
   --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
   --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
@@ -1011,6 +1025,13 @@
   --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
   --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
 }
+.pf-v6-c-badge.pf-m-disabled {
+  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
+  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
+}
+.pf-v6-c-badge.pf-m-disabled::after {
+  border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
+}
 
 .pf-v6-c-badge__toggle-icon {
   margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
@@ -1246,10 +1267,9 @@
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
   --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
-  --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-breadcrumb {
@@ -1320,9 +1340,6 @@ button.pf-v6-c-breadcrumb__link {
   margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
 }
-.pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
-  line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
-}
 
 .pf-v6-c-breadcrumb__heading {
   display: inline;
@@ -1353,6 +1370,9 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
   --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-button--TextDecoration: none;
+  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -1545,8 +1565,6 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button__progress--InsetBlockStart: 50%;
   --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
-  --pf-v6-c-button--m-progress--TransitionProperty: padding;
-  --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
   --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
   --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
   --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -1555,10 +1573,7 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
   --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
-  --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
 }
 
 .pf-v6-c-button {
@@ -1586,6 +1601,9 @@ button.pf-v6-c-breadcrumb__link {
   border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
   border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
   border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
+  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-button--TransitionDuration);
+  transition-property: var(--pf-v6-c-button--TransitionProperty);
 }
 .pf-v6-c-button::after {
   position: absolute;
@@ -1595,6 +1613,7 @@ button.pf-v6-c-breadcrumb__link {
   border: var(--pf-v6-c-button--BorderWidth) solid;
   border-color: var(--pf-v6-c-button--BorderColor);
   border-radius: inherit;
+  transition: inherit;
 }
 .pf-v6-c-button.pf-m-primary {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -1608,7 +1627,7 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
 }
 .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
-  border: var(--pf-v6-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
+  --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
 }
 .pf-v6-c-button.pf-m-secondary {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -1839,9 +1858,6 @@ button.pf-v6-c-breadcrumb__link {
   pointer-events: none;
 }
 .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
-  --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
-  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
-  --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
   color: var(--pf-v6-c-button--disabled--Color);
   background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
 }
@@ -1858,7 +1874,6 @@ button.pf-v6-c-breadcrumb__link {
 .pf-v6-c-button.pf-m-progress {
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
-  transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
 }
 .pf-v6-c-button.pf-m-in-progress {
   --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
@@ -2284,7 +2299,7 @@ button.pf-v6-c-breadcrumb__link {
 }
 
 .pf-v6-c-card__header-main {
-  flex: 1;
+  flex-grow: 1;
 }
 
 .pf-v6-c-card__header-toggle {
@@ -6972,6 +6987,7 @@ select ~ .pf-v6-c-form-control__utilities {
   --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 }
 
 .pf-v6-c-hint {
@@ -6998,11 +7014,14 @@ select ~ .pf-v6-c-form-control__utilities {
   grid-column: 2;
   grid-auto-flow: column;
   align-self: start;
+  margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
   text-align: end;
 }
-.pf-v6-c-hint__actions .pf-v6-c-menu-toggle.pf-m-plain {
-  margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
+.pf-v6-c-hint__actions.pf-m-no-offset {
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
 }
 .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
   grid-column: 1;
@@ -7138,11 +7157,11 @@ select ~ .pf-v6-c-form-control__utilities {
   --pf-v6-c-icon--m-inline--Height: 1em;
   --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
   --pf-v6-c-icon__content--Color: initial;
-  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
-  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
-  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
-  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
-  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
+  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v6-c-icon--m-inline__content--Color: initial;
   --pf-v6-c-icon__content--FontSize: 1em;
   --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
@@ -10019,6 +10038,9 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
   --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
+  --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + 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);
@@ -10156,6 +10178,9 @@ ul.pf-v6-c-list {
 .pf-v6-c-menu-toggle.pf-m-small {
   --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
   --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
+  --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
+  --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
+  --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
 }
 .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
   background-color: transparent;
@@ -10341,6 +10366,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -10357,7 +10383,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
   --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
   --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -10437,6 +10463,7 @@ ul.pf-v6-c-list {
   flex-shrink: 0;
   gap: var(--pf-v6-c-modal-box__header--Gap);
   padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
 }
@@ -10581,7 +10608,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
   --pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
@@ -10770,6 +10797,8 @@ ul.pf-v6-c-list {
   --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
   --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
   --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
+  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
@@ -10912,10 +10941,15 @@ ul.pf-v6-c-list {
   background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor);
 }
 .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
+  --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link--m-current__link-icon--Color);
   color: var(--pf-v6-c-nav__link--m-current--Color);
   background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
 }
 
+.pf-v6-c-nav__link-icon {
+  color: var(--pf-v6-c-nav__link-icon--Color);
+}
+
 .pf-v6-c-nav__toggle {
   flex: none;
   align-self: start;
@@ -18119,8 +18153,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth: 0;
   --pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth: 0;
   --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--before--border-width--base);
-  --pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
-  --pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
   --pf-v6-c-tabs__list--Display: flex;
   --pf-v6-c-tabs__item--BackgroundColor: transparent;
   --pf-v6-c-tabs__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -18312,12 +18344,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
   --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
 }
-.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
-  border-inline-start-width: var(--pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth);
-}
-.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current:last-child .pf-v6-c-tabs__link::before {
-  border-inline-end-width: var(--pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth);
-}
 .pf-v6-c-tabs.pf-m-box.pf-m-scrollable .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
   inset-inline-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
 }

package/css/components/_index.d.ts

@@ -374,6 +374,7 @@ declare const _default: {
     "hidden": "pf-m-hidden",
     "read": "pf-m-read",
     "unread": "pf-m-unread",
+    "disabled": "pf-m-disabled",
     "red": "pf-m-red",
     "orangered": "pf-m-orangered",
     "orange": "pf-m-orange",
@@ -383,7 +384,6 @@ declare const _default: {
     "blue": "pf-m-blue",
     "purple": "pf-m-purple",
     "sticky": "pf-m-sticky",
-    "disabled": "pf-m-disabled",
     "picture": "pf-m-picture",
     "current": "pf-m-current",
     "primary": "pf-m-primary",
@@ -1239,6 +1239,7 @@ declare const _default: {
   "nav": "pf-v6-c-nav",
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
+  "navLinkIcon": "pf-v6-c-nav__link-icon",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",

package/css/components/_index.js

@@ -376,6 +376,7 @@ exports.default = {
     "hidden": "pf-m-hidden",
     "read": "pf-m-read",
     "unread": "pf-m-unread",
+    "disabled": "pf-m-disabled",
     "red": "pf-m-red",
     "orangered": "pf-m-orangered",
     "orange": "pf-m-orange",
@@ -385,7 +386,6 @@ exports.default = {
     "blue": "pf-m-blue",
     "purple": "pf-m-purple",
     "sticky": "pf-m-sticky",
-    "disabled": "pf-m-disabled",
     "picture": "pf-m-picture",
     "current": "pf-m-current",
     "primary": "pf-m-primary",
@@ -1241,6 +1241,7 @@ exports.default = {
   "nav": "pf-v6-c-nav",
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
+  "navLinkIcon": "pf-v6-c-nav__link-icon",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",

package/css/components/_index.mjs

@@ -374,6 +374,7 @@ export default {
     "hidden": "pf-m-hidden",
     "read": "pf-m-read",
     "unread": "pf-m-unread",
+    "disabled": "pf-m-disabled",
     "red": "pf-m-red",
     "orangered": "pf-m-orangered",
     "orange": "pf-m-orange",
@@ -383,7 +384,6 @@ export default {
     "blue": "pf-m-blue",
     "purple": "pf-m-purple",
     "sticky": "pf-m-sticky",
-    "disabled": "pf-m-disabled",
     "picture": "pf-m-picture",
     "current": "pf-m-current",
     "primary": "pf-m-primary",
@@ -1239,6 +1239,7 @@ export default {
   "nav": "pf-v6-c-nav",
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
+  "navLinkIcon": "pf-v6-c-nav__link-icon",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "6.0.0-alpha.23",
+  "version": "6.0.0-alpha.25",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -15,17 +15,14 @@
     "tag": "alpha"
   },
   "scripts": {
-    "generate": "rimraf css && node scripts/writeClassMaps.js && node scripts/copyStyles.js",
+    "generate": "rimraf css && node scripts/writeClassMaps.mjs && node scripts/copyStyles.mjs",
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.139",
-    "camel-case": "^3.0.0",
-    "css": "^2.2.3",
-    "fs-extra": "^11.1.1",
-    "glob": "^7.1.2",
-    "jsdom": "^15.1.0"
+    "@patternfly/patternfly": "6.0.0-alpha.150",
+    "change-case": "^5.4.4",
+    "fs-extra": "^11.2.0"
   },
   "license": "MIT",
-  "gitHead": "7b22ff230948cf8b4142e0f8d7a3d4b76835026f"
+  "gitHead": "0df6094898bc94f9b0881e1ab97e6d0941df90af"
 }

package/scripts/copyStyles.mjs

@@ -0,0 +1,8 @@
+import { copySync } from 'fs-extra/esm';
+import path from 'node:path';
+import url from 'node:url';
+
+const toDir = path.resolve(import.meta.dirname, '../css');
+const fromDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/package.json')));
+
+copySync(path.join(fromDir, 'assets/images'), path.join(toDir, 'assets/images'));

package/scripts/{generateClassMaps.js → generateClassMaps.mjs}

@@ -1,7 +1,8 @@
-const path = require('path');
-const fs = require('fs-extra');
-const glob = require('glob');
-const camelcase = require('camel-case');
+import { camelCase } from 'change-case';
+import { glob } from 'glob';
+import fs from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
 
 /**
  * @param {string} cssString - CSS string
@@ -14,7 +15,7 @@ function getCSSClasses(cssString) {
  * @param {string} className - Class name
  */
 function formatClassName(className) {
-  return camelcase(className.replace(/pf-(v6-)?((c|l|m|u|is|has)-)?/g, ''));
+  return camelCase(className.replace(/pf-(v6-)?((c|l|m|u|is|has)-)?/g, ''));
 }
 
 /**
@@ -53,8 +54,8 @@ function getClassMaps(cssString) {
 /**
  * @returns {any} Map of file names to classMaps
  */
-function generateClassMaps() {
-  const pfStylesDir = path.dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
+export function generateClassMaps() {
+  const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/patternfly.css')));
 
   const patternflyCSSFiles = glob.sync('**/*.css', {
     cwd: pfStylesDir,
@@ -73,7 +74,3 @@ function generateClassMaps() {
 
   return res;
 }
-
-module.exports = {
-  generateClassMaps
-};

package/scripts/{writeClassMaps.js → writeClassMaps.mjs}

@@ -1,34 +1,36 @@
-const { join, basename, resolve, relative, dirname } = require('path');
-const { outputFileSync, copyFileSync } = require('fs-extra');
-const { generateClassMaps } = require('./generateClassMaps');
+import { outputFileSync } from 'fs-extra/esm';
+import fs from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+import { generateClassMaps } from './generateClassMaps.mjs';
 
-const outDir = resolve(__dirname, '../css');
+const outDir = path.resolve(import.meta.dirname, '../css');
 
 const writeCJSExport = (file, classMap) =>
   outputFileSync(
-    join(outDir, file.replace(/.css$/, '.js')),
+    path.join(outDir, file.replace(/.css$/, '.js')),
     `
 "use strict";
 exports.__esModule = true;
-require('./${basename(file, '.css.js')}');
+require('./${path.basename(file, '.css.js')}');
 exports.default = ${JSON.stringify(classMap, null, 2)};
 `.trim()
   );
 
 const writeESMExport = (file, classMap) =>
   outputFileSync(
-    join(outDir, file.replace(/.css$/, '.mjs')),
+    path.join(outDir, file.replace(/.css$/, '.mjs')),
     `
-import './${basename(file, '.css.js')}';
+import './${path.basename(file, '.css.js')}';
 export default ${JSON.stringify(classMap, null, 2)};
 `.trim()
   );
 
 const writeDTSExport = (file, classMap) =>
   outputFileSync(
-    join(outDir, file.replace(/.css$/, '.d.ts')),
+    path.join(outDir, file.replace(/.css$/, '.d.ts')),
     `
-import './${basename(file, '.css.js')}';
+import './${path.basename(file, '.css.js')}';
 declare const _default: ${JSON.stringify(classMap, null, 2)};
 export default _default;
 `.trim()
@@ -38,15 +40,15 @@ export default _default;
  * @param {any} classMaps Map of file names to classMaps
  */
 function writeClassMaps(classMaps) {
-  const pfStylesDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
+  const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/patternfly.css')));
 
   Object.entries(classMaps).forEach(([file, classMap]) => {
-    const outPath = file.includes(pfStylesDir) ? relative(pfStylesDir, file) : relative('src/css', file);
+    const outPath = file.includes(pfStylesDir) ? path.relative(pfStylesDir, file) : path.relative('src/css', file);
 
     writeCJSExport(outPath, classMap);
     writeDTSExport(outPath, classMap);
     writeESMExport(outPath, classMap);
-    copyFileSync(file, join(outDir, outPath));
+    fs.copyFileSync(file, path.join(outDir, outPath));
   });
 
   // eslint-disable-next-line no-console

package/scripts/copyStyles.js

@@ -1,7 +0,0 @@
-const { copySync } = require('fs-extra');
-const { resolve, dirname, join } = require('path');
-
-const toDir = resolve(__dirname, '../css');
-const fromDir = dirname(require.resolve('@patternfly/patternfly/package.json'));
-
-copySync(join(fromDir, 'assets/images'), join(toDir, 'assets/images'));