@patternfly/patternfly 6.3.0 → 6.4.0-prerelease.1

package/base/tokens/tokens-local.scss

@@ -123,4 +123,5 @@
 
   // stylelint-disable custom-property-pattern
   --pf-t--temp--dev--tbd: #BC11E0;
+
 }

package/base/tokens/tokens-palette.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 23 Sep 2024 22:48:17 GMT
+// Generated on Wed, 10 Sep 2025 19:58:14 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--color--black: #000000;
@@ -11,6 +11,7 @@
   --pf-t--color--blue--50: #0066cc;
   --pf-t--color--blue--60: #004d99;
   --pf-t--color--blue--70: #003366;
+  --pf-t--color--blue--80: #032142;
   --pf-t--color--gray--10: #f2f2f2;
   --pf-t--color--gray--20: #e0e0e0;
   --pf-t--color--gray--30: #c7c7c7;
@@ -28,6 +29,7 @@
   --pf-t--color--green--50: #63993d;
   --pf-t--color--green--60: #3d7317;
   --pf-t--color--green--70: #204d00;
+  --pf-t--color--green--80: #183301;
   --pf-t--color--orange--10: #ffe8cc;
   --pf-t--color--orange--20: #fccb8f;
   --pf-t--color--orange--30: #f8ae54;
@@ -35,6 +37,7 @@
   --pf-t--color--orange--50: #ca6c0f;
   --pf-t--color--orange--60: #9e4a06;
   --pf-t--color--orange--70: #732e00;
+  --pf-t--color--orange--80: #4d1f00;
   --pf-t--color--purple--10: #ece6ff;
   --pf-t--color--purple--20: #d0c5f4;
   --pf-t--color--purple--30: #b6a6e9;
@@ -42,6 +45,7 @@
   --pf-t--color--purple--50: #5e40be;
   --pf-t--color--purple--60: #3d2785;
   --pf-t--color--purple--70: #21134d;
+  --pf-t--color--purple--80: #1b0d33;
   --pf-t--color--red--10: #fce3e3;
   --pf-t--color--red--20: #fbc5c5;
   --pf-t--color--red--30: #f9a8a8;
@@ -49,6 +53,7 @@
   --pf-t--color--red--50: #ee0000;
   --pf-t--color--red--60: #a60000;
   --pf-t--color--red--70: #5f0000;
+  --pf-t--color--red--80: #3f0000;
   --pf-t--color--red-orange--10: #ffe3d9;
   --pf-t--color--red-orange--20: #fbbea8;
   --pf-t--color--red-orange--30: #f89b78;
@@ -56,6 +61,7 @@
   --pf-t--color--red-orange--50: #f0561d;
   --pf-t--color--red-orange--60: #b1380b;
   --pf-t--color--red-orange--70: #731f00;
+  --pf-t--color--red-orange--80: #4c1405;
   --pf-t--color--teal--10: #daf2f2;
   --pf-t--color--teal--20: #b9e5e5;
   --pf-t--color--teal--30: #9ad8d8;
@@ -63,6 +69,7 @@
   --pf-t--color--teal--50: #37a3a3;
   --pf-t--color--teal--60: #147878;
   --pf-t--color--teal--70: #004d4d;
+  --pf-t--color--teal--80: #003333;
   --pf-t--color--white: #ffffff;
   --pf-t--color--yellow--10: #fff4cc;
   --pf-t--color--yellow--20: #ffe072;
@@ -71,4 +78,5 @@
   --pf-t--color--yellow--50: #b98412;
   --pf-t--color--yellow--60: #96640f;
   --pf-t--color--yellow--70: #73480b;
+  --pf-t--color--yellow--80: #54330b;
 }

package/components/Accordion/accordion.css

@@ -13,6 +13,9 @@
   --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-accordion__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-accordion__toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -21,15 +24,22 @@
   --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
+  --pf-v6-c-accordion__toggle-icon--Rotate: 0;
   --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
   --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: 0;
   --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
+  --pf-v6-c-accordion__expandable-content--MaxHeight: 0;
+  --pf-v6-c-accordion__expandable-content--Visibility: hidden;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
   --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
@@ -66,6 +76,12 @@
   --pf-v6-c-accordion--m-bordered--RowGap: 0;
   --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-accordion__item--BorderWidth: 0;
+  --pf-v6-c-accordion__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-accordion__expandable-content--BorderWidth: 0;
+  --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 {
@@ -104,6 +120,7 @@
   --pf-v6-c-accordion--RowGap: var(--pf-v6-c-accordion--m-bordered--RowGap);
   --pf-v6-c-accordion__item--BorderRadius: 0;
   --pf-v6-c-accordion__toggle--BorderRadius: 0;
+  --pf-v6-c-accordion__item--BorderWidth: 0;
 }
 .pf-v6-c-accordion.pf-m-bordered .pf-v6-c-accordion__item {
   border-block-end: var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth) solid var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor);
@@ -118,6 +135,7 @@
   pointer-events: none;
   content: "";
   background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
+  border: var(--pf-v6-c-accordion__item--BorderWidth) solid var(--pf-v6-c-accordion__item--BorderColor);
   border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
   opacity: var(--pf-v6-c-accordion__item--before--Opacity);
   transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
@@ -127,17 +145,22 @@
 .pf-v6-c-accordion__item.pf-m-expanded {
   --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
+  --pf-v6-c-accordion__toggle-icon--Rotate: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate);
   --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
   --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
   --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
   --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
+  --pf-v6-c-accordion__item--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded--BorderWidth);
   --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
   --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
   --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
   --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
-}
-.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
-  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
+  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd);
+  --pf-v6-c-accordion__expandable-content--MaxHeight: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight);
+  --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility);
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
+  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
+  --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth);
 }
 
 .pf-v6-c-accordion__toggle {
@@ -158,8 +181,17 @@
   border: 0;
   border-radius: var(--pf-v6-c-accordion__toggle--BorderRadius);
 }
+.pf-v6-c-accordion__toggle::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-accordion__toggle--BorderWidth) solid var(--pf-v6-c-accordion__toggle--BorderColor);
+  border-radius: inherit;
+}
 .pf-v6-c-accordion__toggle:is(:hover, :focus) {
   --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-v6-c-accordion__toggle--hover--BackgroundColor);
+  --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-v6-c-accordion__toggle--hover--BorderWidth);
 }
 
 .pf-v6-c-accordion__toggle-text {
@@ -173,6 +205,7 @@
 
 .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;
@@ -183,13 +216,15 @@
 }
 
 .pf-v6-c-accordion__expandable-content {
-  max-height: 0;
+  max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight);
+  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
-  visibility: hidden;
+  visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
+  border: var(--pf-v6-c-accordion__expandable-content--BorderWidth) solid var(--pf-v6-c-accordion__expandable-content--BorderColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
   transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
@@ -199,17 +234,9 @@
   translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
 }
 .pf-v6-c-accordion__expandable-content.pf-m-fixed {
+  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base);
   overflow-y: auto;
 }
-.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
-  max-height: 99999px;
-  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
-  visibility: revert;
-  transition-delay: 0s;
-}
-.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
-  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
-}
 
 .pf-v6-c-accordion__expandable-content-body {
   padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);

package/components/Accordion/accordion.scss

@@ -20,6 +20,9 @@
   --#{$accordion}__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$accordion}__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$accordion}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
+  --#{$accordion}__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --#{$accordion}__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$accordion}__toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
 
   // Accordion toggle toggle-start modifier
   // This decreases the gap between icon and text, alternative is calc it to * 2 the token or create a new token
@@ -35,17 +38,24 @@
   --#{$accordion}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$accordion}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$accordion}__toggle-icon--Transition: transform var(--#{$accordion}__toggle-icon--TransitionDuration) var(--#{$accordion}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
+  --#{$accordion}__toggle-icon--Rotate: 0;
   --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
 
   // accordion expandable content
   --#{$accordion}__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --#{$accordion}__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$accordion}__expandable-content--MarginBlockEnd: 0;
   --#{$accordion}__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
   --#{$accordion}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$accordion}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$accordion}__expandable-content--Color: var(--pf-t--global--text--color--regular);
   --#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$accordion}__expandable-content--m-fixed--MaxHeight--base: 0;
   --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
+  --#{$accordion}__expandable-content--MaxHeight: 0;
+  --#{$accordion}__expandable-content--Visibility: hidden;
+  --#{$accordion}__item--m-expanded__expandable-content--Visibility: visible;
+  --#{$accordion}__item--m-expanded__expandable-content--MaxHeight: 99999px;
+  --#{$accordion}__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
 
   // expand animation
   --#{$accordion}__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
@@ -99,6 +109,16 @@
   --#{$accordion}--m-bordered--RowGap: 0;
   --#{$accordion}__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --#{$accordion}__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+  
+  // accordion item border for high contrast
+  --#{$accordion}__item--BorderWidth: 0;
+  --#{$accordion}__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$accordion}__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+
+  // expandable content border for high contrast
+  --#{$accordion}__expandable-content--BorderWidth: 0;
+  --#{$accordion}__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$accordion}__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 }
 
 .#{$accordion} {
@@ -129,7 +149,8 @@
     --#{$accordion}--RowGap: var(--#{$accordion}--m-bordered--RowGap);
     --#{$accordion}__item--BorderRadius: 0;
     --#{$accordion}__toggle--BorderRadius: 0;
-
+    --#{$accordion}__item--BorderWidth: 0;
+  
     .#{$accordion}__item {
       border-block-end: var(--#{$accordion}__item--m-bordered--BorderBlockEndWidth) solid var(--#{$accordion}__item--m-bordered--BorderBlockEndColor);
     }
@@ -145,6 +166,7 @@
     pointer-events: none;
     content: "";
     background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
+    border: var(--#{$accordion}__item--BorderWidth) solid var(--#{$accordion}__item--BorderColor);
     border-radius: var(--#{$accordion}__item--BorderRadius);
     opacity: var(--#{$accordion}__item--before--Opacity);
     transition-timing-function: var(--#{$accordion}__item--before--TransitionTimingFunction);
@@ -155,18 +177,23 @@
   &.pf-m-expanded {
     --#{$accordion}__toggle--PaddingBlockEnd: var(--#{$accordion}__toggle--m-expanded--PaddingBlockEnd);
     --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
+    --#{$accordion}__toggle-icon--Rotate: var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate);
     --#{$accordion}__item--before--TransitionDuration--slide: var(--#{$accordion}__item--before--TransitionDuration--expand--slide);
     --#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--expand--fade);
     --#{$accordion}__item--before--Opacity: var(--#{$accordion}__item--m-expanded--before--Opacity);
     --#{$accordion}__item--before--TranslateY: var(--#{$accordion}__item--m-expanded--before--TranslateY);
+    --#{$accordion}__item--BorderWidth: var(--#{$accordion}__item--m-expanded--BorderWidth);
     --#{$accordion}__expandable-content--TransitionDuration--slide: var(--#{$accordion}__expandable-content--TransitionDuration--expand--slide);
     --#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--expand--fade);
     --#{$accordion}__expandable-content--Opacity: var(--#{$accordion}__item--m-expanded__expandable-content--Opacity);
     --#{$accordion}__expandable-content--TranslateY: var(--#{$accordion}__item--m-expanded__expandable-content--TranslateY);
+    --#{$accordion}__expandable-content--MarginBlockEnd: var(--#{$accordion}__item--m-expanded__expandable-content--MarginBlockEnd);
+    --#{$accordion}__expandable-content--MaxHeight: var(--#{$accordion}__item--m-expanded__expandable-content--MaxHeight);
+    --#{$accordion}__expandable-content--Visibility: var(--#{$accordion}__item--m-expanded__expandable-content--Visibility);
+    --#{$accordion}__expandable-content--TransitionDuration--fade: 0s;
+    --#{$accordion}__expandable-content--m-fixed--MaxHeight--base: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
+    --#{$accordion}__expandable-content--BorderWidth: var(--#{$accordion}__item--m-expanded__expandable-content--BorderWidth);
 
-    .#{$accordion}__toggle-icon {
-      transform: rotate(var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate));
-    }
   }
 }
 
@@ -188,8 +215,18 @@
   border: 0;
   border-radius: var(--#{$accordion}__toggle--BorderRadius);
 
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--#{$accordion}__toggle--BorderWidth) solid var(--#{$accordion}__toggle--BorderColor);
+    border-radius: inherit;
+  }
+
   &:is(:hover, :focus) {
     --#{$accordion}__toggle--BackgroundColor: var(--#{$accordion}__toggle--hover--BackgroundColor);
+    --#{$accordion}__toggle--BorderWidth: var(--#{$accordion}__toggle--hover--BorderWidth);
   }
 }
 
@@ -205,6 +242,7 @@
   @include pf-v6-mirror-inline-on-rtl;
 
   transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
+  transform: rotate(var(--#{$accordion}__toggle-icon--Rotate));
 }
 
 .#{$accordion}__expandable-content:where([hidden]) {
@@ -212,13 +250,15 @@
 }
 
 .#{$accordion}__expandable-content {
-  max-height: 0;
+  max-height:  var(--#{$accordion}__expandable-content--MaxHeight);
+  margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--#{$accordion}__expandable-content--MarginInlineStart);
   margin-inline-end: var(--#{$accordion}__expandable-content--MarginInlineEnd);
   font-size: var(--#{$accordion}__expandable-content--FontSize);
   color: var(--#{$accordion}__expandable-content--Color);
-  visibility: hidden;
+  visibility:  var(--#{$accordion}__expandable-content--Visibility);
   background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
+  border: var(--#{$accordion}__expandable-content--BorderWidth) solid var(--#{$accordion}__expandable-content--BorderColor);
   border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
   opacity: var(--#{$accordion}__expandable-content--Opacity);
   transition-delay: 0s, 0s, var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade);
@@ -228,19 +268,9 @@
   translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
 
   &.pf-m-fixed {
+    max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight--base);
     overflow-y: auto;
   }
-
-  .#{$accordion}__item.pf-m-expanded & {
-    max-height: 99999px;
-    margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
-    visibility: revert;
-    transition-delay: 0s;
-
-    &.pf-m-fixed {
-      max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
-    }
-  }
 }
 
 .#{$accordion}__expandable-content-body {

package/components/Alert/alert-group.css

@@ -64,7 +64,8 @@
   --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
   --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
   --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
-  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
+  --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-alert-group__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert-group__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -73,6 +74,7 @@
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
   --pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
   --pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
   --pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
@@ -103,10 +105,23 @@
   padding-inline-end: var(--pf-v6-c-alert-group__overflow-button--PaddingInlineEnd);
   color: var(--pf-v6-c-alert-group__overflow-button--Color);
   background-color: var(--pf-v6-c-alert-group__overflow-button--BackgroundColor);
-  border-width: var(--pf-v6-c-alert-group__overflow-button--BorderWidth);
+  border: 0;
   border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
   box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
 }
+.pf-v6-c-alert-group__overflow-button::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-alert-group__overflow-button--BorderWidth) solid var(--pf-v6-c-alert-group__overflow-button--BorderColor);
+  border-radius: inherit;
+}
+.pf-v6-c-alert-group__overflow-button:hover, .pf-v6-c-alert-group__overflow-button:focus {
+  --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-v6-c-alert-group__overflow-button--hover--BorderWidth);
+  --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
+  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
+}
 
 .pf-v6-c-alert-group__item {
   display: grid;
@@ -161,17 +176,4 @@
   .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
     transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
   }
-}
-.pf-v6-c-alert-group__item:hover {
-  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
-  --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
-  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
-}
-.pf-v6-c-alert-group__item:focus {
-  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
-  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
-}
-.pf-v6-c-alert-group__item:active {
-  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
-  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
 }

package/components/Alert/alert-group.scss

@@ -90,7 +90,8 @@
   --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: initial;
 
     // Overflow button
-  --#{$alert-group}__overflow-button--BorderWidth: 0;
+  --#{$alert-group}__overflow-button--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$alert-group}__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$alert-group}__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$alert-group}__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -99,8 +100,11 @@
   --#{$alert-group}__overflow-button--Color: var(--pf-t--global--text--color--link--default);
   --#{$alert-group}__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --#{$alert-group}__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --#{$alert-group}__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
   --#{$alert-group}__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
   --#{$alert-group}__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
+
+  // TODO - remove this block in breaking change, not used
   --#{$alert-group}__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
   --#{$alert-group}__overflow-button--focus--Color: var(--pf-t--global--text--color--link--hover);
   --#{$alert-group}__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
@@ -134,9 +138,25 @@
   padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingInlineEnd);
   color: var(--#{$alert-group}__overflow-button--Color);
   background-color: var(--#{$alert-group}__overflow-button--BackgroundColor);
-  border-width: var(--#{$alert-group}__overflow-button--BorderWidth);
+  border: 0;
   border-radius: var(--#{$alert-group}__overflow-button--BorderRadius);
   box-shadow: var(--#{$alert-group}__overflow-button--BoxShadow);
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--#{$alert-group}__overflow-button--BorderWidth) solid var(--#{$alert-group}__overflow-button--BorderColor);
+    border-radius: inherit;
+  }
+
+  &:hover,
+  &:focus {
+    --#{$alert-group}__overflow-button--BorderWidth: var(--#{$alert-group}__overflow-button--hover--BorderWidth);
+    --#{$alert-group}__overflow-button--BackgroundColor: var(--#{$alert-group}__overflow-button--hover--BackgroundColor);
+    --#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--hover--Color);
+  }
 }
 
 .#{$alert-group}__item {
@@ -262,20 +282,4 @@
         }
     }
   }
-
-  &:hover {
-    --#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--hover--Color);
-    --#{$alert-group}__overflow-button--BackgroundColor: var(--#{$alert-group}__overflow-button--hover--BackgroundColor);
-    --#{$alert-group}__overflow-button--BoxShadow: var(--#{$alert-group}__overflow-button--hover--BoxShadow);
-  }
-
-  &:focus {
-    --#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--focus--Color);
-    --#{$alert-group}__overflow-button--BoxShadow: var(--#{$alert-group}__overflow-button--focus--BoxShadow);
-  }
-
-  &:active {
-    --#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--active--Color);
-    --#{$alert-group}__overflow-button--BoxShadow: var(--#{$alert-group}__overflow-button--active--BoxShadow);
-  }
 }

package/components/Badge/badge.css

@@ -12,6 +12,7 @@
   --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
   --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
   --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);
@@ -44,6 +45,7 @@
   border-radius: inherit;
 }
 .pf-v6-c-badge.pf-m-read {
+  --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
   --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);
   --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);

package/components/Badge/badge.scss

@@ -19,6 +19,7 @@
   // Modifiers
   --#{$badge}--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --#{$badge}--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --#{$badge}--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$badge}--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
   --#{$badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$badge}--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -52,6 +53,7 @@
   }
 
   &.pf-m-read {
+    --#{$badge}--BorderColor: var(--#{$badge}--m-read--BorderColor);
     --#{$badge}--Color: var(--#{$badge}--m-read--Color);
     --#{$badge}--BackgroundColor: var(--#{$badge}--m-read--BackgroundColor);
     --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-read__toggle-icon--Color);

package/components/Banner/banner.css

@@ -8,6 +8,8 @@
   --pf-v6-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --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);
   --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);
@@ -58,6 +60,8 @@
   color: var(--pf-v6-c-banner--Color);
   white-space: nowrap;
   background-color: var(--pf-v6-c-banner--BackgroundColor);
+  border-block-start: var(--pf-v6-c-banner--BorderWidth) solid var(--pf-v6-c-banner--BorderColor);
+  border-block-end: var(--pf-v6-c-banner--BorderWidth) solid var(--pf-v6-c-banner--BorderColor);
 }
 .pf-v6-c-banner.pf-m-danger {
   --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-danger--BackgroundColor);

package/components/Banner/banner.scss

@@ -10,6 +10,8 @@
   --#{$banner}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+  --#{$banner}--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$banner}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   @media (min-width: $pf-v6-global--breakpoint--md) {
     --#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd);
@@ -67,6 +69,8 @@
   color: var(--#{$banner}--Color);
   white-space: nowrap;
   background-color: var(--#{$banner}--BackgroundColor);
+  border-block-start: var(--#{$banner}--BorderWidth) solid var(--#{$banner}--BorderColor);
+  border-block-end: var(--#{$banner}--BorderWidth) solid var(--#{$banner}--BorderColor);
 
   &.pf-m-danger {
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-danger--BackgroundColor);