@patternfly/react-styles 6.5.0-prerelease.1 → 6.5.0-prerelease.11

package/CHANGELOG.md

@@ -3,6 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.10...@patternfly/react-styles@6.5.0-prerelease.11) (2026-02-05)
+
+### Features
+
+- **TreeView:** add support for disabled TreeViewListItems ([#12140](https://github.com/patternfly/patternfly-react/issues/12140)) ([3514831](https://github.com/patternfly/patternfly-react/commit/35148312f5d9ce4e706ad36b801455fc987842bb))
+
+# [6.5.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.9...@patternfly/react-styles@6.5.0-prerelease.10) (2026-01-09)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [6.5.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.6...@patternfly/react-styles@6.5.0-prerelease.9) (2025-12-16)
+
+### Features
+
+- **docked nav:** add support for docked nav layout ([#12175](https://github.com/patternfly/patternfly-react/issues/12175)) ([5519389](https://github.com/patternfly/patternfly-react/commit/55193896b899aa1e2b8dfbbddd644507988ee31f))
+
+# [6.5.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.5...@patternfly/react-styles@6.5.0-prerelease.6) (2025-11-14)
+
+### Bug Fixes
+
+- Moves items to new nav. ([#12013](https://github.com/patternfly/patternfly-react/issues/12013)) ([ddd0696](https://github.com/patternfly/patternfly-react/commit/ddd0696796134c7d0f9583ce56e26b0df47156cb))
+
+### Features
+
+- **Compass:** updated mainheader structure to be composable ([#12135](https://github.com/patternfly/patternfly-react/issues/12135)) ([6bcdcaf](https://github.com/patternfly/patternfly-react/commit/6bcdcaf116645aad4c9c0d98ca61045976a84946))
+
+# [6.5.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.4...@patternfly/react-styles@6.5.0-prerelease.5) (2025-11-12)
+
+### Features
+
+- **Hero:** added component ([#12131](https://github.com/patternfly/patternfly-react/issues/12131)) ([8da87a2](https://github.com/patternfly/patternfly-react/commit/8da87a2615bb6cfc350a52677ec6bdae335bb6f8))
+
+# [6.5.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.3...@patternfly/react-styles@6.5.0-prerelease.4) (2025-11-06)
+
+### Features
+
+- **drawer:** add no-glass panel variant, test ([#12125](https://github.com/patternfly/patternfly-react/issues/12125)) ([a10ca34](https://github.com/patternfly/patternfly-react/commit/a10ca34069d25caa2954ef464d5b82a9057e0316))
+
+# [6.5.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.2...@patternfly/react-styles@6.5.0-prerelease.3) (2025-11-05)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [6.5.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.1...@patternfly/react-styles@6.5.0-prerelease.2) (2025-10-31)
+
+### Features
+
+- **Drawer:** Add pill version ([#12091](https://github.com/patternfly/patternfly-react/issues/12091)) ([b0a9dd8](https://github.com/patternfly/patternfly-react/commit/b0a9dd8fce6266e838ebca33ae16d1f2e0c33cbd))
+
 # [6.5.0-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.4.0...@patternfly/react-styles@6.5.0-prerelease.1) (2025-10-30)
 
 ### Features

package/README.md

@@ -4,7 +4,7 @@ Library that provides CSS-in-JS capabilities
 
 #### Example 
 
-```jsx
+```tsx
 import { css } from '@patternfly/react-styles';
 import styles from './Button.css';
 

package/css/components/AboutModalBox/about-modal-box.css

@@ -17,31 +17,6 @@
   --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
-  --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
-  --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
-  --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
 }
 @media screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
@@ -50,6 +25,14 @@
     --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
+  --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+}
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
     --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
@@ -60,17 +43,42 @@
     --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
+  --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
+  --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+}
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
     --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
     --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+}
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
     --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
+}
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
     --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
@@ -94,7 +102,6 @@
   background-repeat: no-repeat;
   background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
-  --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
 }
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
@@ -110,6 +117,9 @@
     grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
+}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box {
   --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
 }

package/css/components/Accordion/accordion.css

@@ -58,6 +58,18 @@
   --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
   --pf-v6-c-accordion__expandable-content--TranslateY: 0;
   --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-accordion {
+    --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
+    --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-accordion {
   --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -83,16 +95,6 @@
   --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-accordion {
-    --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
-    --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
-  }
-}
 
 .pf-v6-c-accordion {
   display: flex;
@@ -203,13 +205,14 @@
   color: var(--pf-v6-c-accordion__toggle-text--Color);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-accordion__toggle-icon {
   transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
-  scale: -1 1;
-}
 
 .pf-v6-c-accordion__expandable-content:where([hidden]) {
   display: revert;

package/css/components/Alert/alert.css

@@ -140,14 +140,15 @@
   margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-alert__toggle-icon {
   display: inline-block;
   transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
-  scale: -1 1;
-}
 
 .pf-v6-c-alert__icon {
   grid-area: icon;
@@ -164,9 +165,9 @@
 }
 .pf-v6-c-alert__title.pf-m-truncate {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
-  overflow: hidden;
 }
 
 .pf-v6-c-alert__description {

package/css/components/Avatar/avatar.css

@@ -28,7 +28,6 @@
 }
 .pf-v6-c-avatar.pf-m-sm {
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width);
-  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-sm {
@@ -55,6 +54,9 @@
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))));
   }
 }
+.pf-v6-c-avatar.pf-m-sm {
+  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height));
@@ -82,7 +84,6 @@
 }
 .pf-v6-c-avatar.pf-m-md {
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width);
-  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-md {
@@ -109,6 +110,9 @@
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-2xl, var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))))));
   }
 }
+.pf-v6-c-avatar.pf-m-md {
+  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height));
@@ -136,7 +140,6 @@
 }
 .pf-v6-c-avatar.pf-m-lg {
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width);
-  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-lg {
@@ -163,6 +166,9 @@
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-2xl, var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))))));
   }
 }
+.pf-v6-c-avatar.pf-m-lg {
+  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height));
@@ -190,7 +196,6 @@
 }
 .pf-v6-c-avatar.pf-m-xl {
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width);
-  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-xl {
@@ -217,6 +222,9 @@
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-2xl, var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))))));
   }
 }
+.pf-v6-c-avatar.pf-m-xl {
+  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height));

package/css/components/BackgroundImage/background-image.css

@@ -9,6 +9,12 @@
 
 .pf-v6-c-background-image {
   --pf-v6-c-background-image--BackgroundPosition: bottom right;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
+  --pf-v6-c-background-image--BackgroundPosition: bottom left;
+}
+
+.pf-v6-c-background-image {
   position: fixed;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -20,7 +26,4 @@
   background-repeat: no-repeat;
   background-position: var(--pf-v6-c-background-image--BackgroundPosition);
   background-size: var(--pf-v6-c-background-image--BackgroundSize);
-}
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
-  --pf-v6-c-background-image--BackgroundPosition: bottom left;
 }

package/css/components/Banner/banner.css

@@ -10,6 +10,14 @@
   --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+}
+@media (min-width: 48rem) {
+  .pf-v6-c-banner {
+    --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
+    --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
+  }
+}
+.pf-v6-c-banner {
   --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
   --pf-v6-c-banner--link--TextDecoration: underline;
   --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
@@ -43,12 +51,6 @@
   --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
   --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
-@media (min-width: 48rem) {
-  .pf-v6-c-banner {
-    --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
-    --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
-  }
-}
 
 .pf-v6-c-banner {
   flex-shrink: 0;

package/css/components/Brand/brand.css

@@ -7,7 +7,6 @@
   width: var(--pf-v6-c-brand--Width--base);
   height: var(--pf-v6-c-brand--Height--base);
   --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
-  --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-brand {
@@ -34,6 +33,9 @@
     --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
   }
 }
+.pf-v6-c-brand {
+  --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));

package/css/components/Breadcrumb/breadcrumb.css

@@ -48,15 +48,16 @@
   margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
+  scale: -1 1;
+}
+
 .pf-v6-c-breadcrumb__item-divider {
   margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
   font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
   line-height: 1;
   color: var(--pf-v6-c-breadcrumb__item-divider--Color);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
-  scale: -1 1;
-}
 
 .pf-v6-c-breadcrumb__link {
   padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);

package/css/components/Button/button.css

@@ -113,10 +113,17 @@
   --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
   --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
   --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
+  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
   --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
   --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
   --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
   --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
+  --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
+  --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -126,10 +133,8 @@
   --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
-  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
   --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
-  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
   --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -444,6 +449,12 @@
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
   --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
 }
+span.pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
+  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
+  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
+}
+
 .pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
   --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
@@ -454,12 +465,13 @@
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
+  --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
+  --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
+  --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
   --pf-v6-c-button--BackgroundColor: transparent;
   --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
   --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
   --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
-  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
-  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -468,6 +480,8 @@
   --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
   --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
   --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
+  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
+  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
   --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
   --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
   --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -475,16 +489,14 @@
   --pf-v6-c-button--hover--BorderWidth: 0;
   --pf-v6-c-button--m-clicked--BorderWidth: 0;
   text-align: start;
+  text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
   white-space: normal;
   background: transparent;
   outline-offset: 0.125rem;
 }
-span.pf-v6-c-button.pf-m-link.pf-m-inline {
-  --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
-  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
-  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
+.pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
+  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
 }
-
 .pf-v6-c-button.pf-m-link.pf-m-danger {
   --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
   --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);

package/css/components/CalendarMonth/calendar-month.css

@@ -87,13 +87,14 @@
   margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
+  scale: -1 1;
+}
+
 .pf-v6-c-calendar-month__header-nav-control {
   margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
-  scale: -1 1;
-}
 
 .pf-v6-c-calendar-month__header-month {
   flex-grow: 1;

package/css/components/Card/card.css

@@ -207,12 +207,12 @@
   flex-wrap: wrap;
   row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
 }
-.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
-  margin-inline-start: 0;
-}
 .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
   margin-inline-end: auto;
 }
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;
@@ -226,15 +226,16 @@
   margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-card__header-toggle-icon {
   display: inline-block;
   transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
   transition-property: transform;
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
-  scale: -1 1;
-}
 
 .pf-v6-c-card__title-text {
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
@@ -245,6 +246,12 @@
   overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
 }
 
+.pf-v6-c-card__subtitle {
+  padding-block-start: var(--pf-t--global--spacer--sm);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 .pf-v6-c-card__actions {
   display: flex;
   gap: var(--pf-v6-c-card__actions--Gap);

package/css/components/Card/card.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
   "cardHeaderToggle": "pf-v6-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
   "cardSelectableActions": "pf-v6-c-card__selectable-actions",
+  "cardSubtitle": "pf-v6-c-card__subtitle",
   "cardTitle": "pf-v6-c-card__title",
   "cardTitleText": "pf-v6-c-card__title-text",
   "check": "pf-v6-c-check",

package/css/components/Card/card.js

@@ -14,6 +14,7 @@ exports.default = {
   "cardHeaderToggle": "pf-v6-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
   "cardSelectableActions": "pf-v6-c-card__selectable-actions",
+  "cardSubtitle": "pf-v6-c-card__subtitle",
   "cardTitle": "pf-v6-c-card__title",
   "cardTitleText": "pf-v6-c-card__title-text",
   "check": "pf-v6-c-check",

package/css/components/Card/card.mjs

@@ -12,6 +12,7 @@ export default {
   "cardHeaderToggle": "pf-v6-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
   "cardSelectableActions": "pf-v6-c-card__selectable-actions",
+  "cardSubtitle": "pf-v6-c-card__subtitle",
   "cardTitle": "pf-v6-c-card__title",
   "cardTitleText": "pf-v6-c-card__title-text",
   "check": "pf-v6-c-check",

package/css/components/ClipboardCopy/clipboard-copy.css

@@ -50,13 +50,14 @@
   gap: var(--pf-v6-c-clipboard-copy__group--Gap);
 }
 
-.pf-v6-c-clipboard-copy__toggle-icon {
-  transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
-}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
   scale: -1 1;
 }
 
+.pf-v6-c-clipboard-copy__toggle-icon {
+  transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
+}
+
 .pf-v6-c-clipboard-copy__expandable-content {
   padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);

package/css/components/CodeEditor/code-editor.css

@@ -70,8 +70,8 @@
 
 .pf-v6-c-code-editor__container {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .pf-v6-c-code-editor__header {