@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60

package/components/Button/button.scss

@@ -21,9 +21,13 @@
   --#{$button}--TextDecorationLine: none;
   --#{$button}--TextDecorationStyle: none;
   --#{$button}--TextDecorationColor: currentcolor;
+  --#{$button}--TransitionDelay: 0s;
   --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
-  --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
-  --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
+  --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$button}--TransitionProperty: color, background, border-width, border-color;
+  --#{$button}--ScaleX: 1;
+  --#{$button}--ScaleY: 1;
+  --#{$button}--border--offset: 0;
 
   // Hover
   --#{$button}--hover--BackgroundColor: transparent;
@@ -32,6 +36,8 @@
   --#{$button}--hover--TextDecorationLine: none;
   --#{$button}--hover--TextDecorationStyle: none;
   --#{$button}--hover--TextDecorationColor: currentcolor;
+  --#{$button}--hover--ScaleX: 1;
+  --#{$button}--hover--ScaleY: 1;
 
   // Clicked
   --#{$button}--m-clicked--BackgroundColor: transparent;
@@ -97,6 +103,12 @@
   --#{$button}--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
   --#{$button}--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --#{$button}--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --#{$button}--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --#{$button}--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
+  --#{$button}--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --#{$button}--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$button}--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$button}--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
 
   // Link danger
   --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
@@ -153,6 +165,12 @@
   --#{$button}--m-plain--disabled--BackgroundColor: transparent;
   --#{$button}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --#{$button}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --#{$button}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --#{$button}--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
+  --#{$button}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --#{$button}--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$button}--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$button}--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
 
   // Plain no padding
   --#{$button}--m-plain--m-no-padding--MinWidth: auto;
@@ -167,7 +185,7 @@
   --#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-plain--m-no-padding--hover--BackgroundColor: transparent;
   --#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
-  --#{$button}__progress--Color: var(--#{$button}__icon--Color);
+  --#{$button}--m-plain--m-no-padding--border--offset: calc(#{pf-size-prem(2px)} * -1);
 
   // Control
   --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -271,7 +289,7 @@
   --#{$button}--disabled--BorderColor: transparent;
   --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
 
-  // Icons
+  // Icon
   --#{$button}__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -281,6 +299,19 @@
   --#{$button}__icon--m-end--MarginInlineStart: 0;
   --#{$button}--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
   --#{$button}--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
+  --#{$button}__icon--TransitionDelay: 0s;
+  --#{$button}__icon--TransitionTimingFunction: auto;
+  --#{$button}__icon--TransitionDuration: 0s;
+  --#{$button}__icon--TransitionProperty: none;
+  --#{$button}__icon--Rotate: 0deg;
+  --#{$button}--hover__icon--TransitionTimingFunction: auto;
+  --#{$button}--hover__icon--TransitionDuration: 0s;
+  --#{$button}--hover__icon--TransitionProperty: none;
+  --#{$button}--hover__icon--Rotate: 0deg;
+  --#{$button}__icon--ScaleX: 1;
+  --#{$button}__icon--ScaleY: 1;
+  --#{$button}--hover__icon--ScaleX: 1;
+  --#{$button}--hover__icon--ScaleY: 1;
 
   // Favorite button
   --#{$button}--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -289,6 +320,11 @@
   --#{$button}--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
   --#{$button}--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
   --#{$button}--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$button}__icon--favorite--Opacity: 1;
+  --#{$button}__icon--favorited--Opacity: 0;
+  --#{$button}--m-favorited__icon--favorite--Opacity: 0;
+  --#{$button}--m-favorited__icon--favorited--Opacity: 1;
+  --#{$button}__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
 
   // Progress
   --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
@@ -306,12 +342,35 @@
   --#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
 
+  // Settings
+  --#{$button}--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$button}--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$button}--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$button}--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$button}--m-settings--hover__icon--Rotate: 60deg;
+
   // Count
-  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt);
 
   // Block
   --#{$button}--m-block--Display: flex;
   --#{$button}--m-block--Width: 100%;
+
+  // Hamburger
+  --#{$button}--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$button}--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --#{$button}--hamburger-icon--top--path--base: path("M1,1 L9,1");
+  --#{$button}--hamburger-icon--middle--path--base: path("M1,5 L9,5");
+  --#{$button}--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
+  --#{$button}--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
+  --#{$button}--hamburger-icon--top--path: var(--#{$button}--hamburger-icon--top--path--base);
+  --#{$button}--hamburger-icon--middle--path: var(--#{$button}--hamburger-icon--middle--path--base);
+  --#{$button}--hamburger-icon--arrow--path: var(--#{$button}--hamburger-icon--arrow--path--base);
+  --#{$button}--hamburger-icon--bottom--path: var(--#{$button}--hamburger-icon--bottom--path--base);
+  --#{$button}--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
+  --#{$button}--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
+  --#{$button}--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
+  --#{$button}--m-hamburger__icon--m-expand--ScaleX: -1;
 }
 
 .#{$button} {
@@ -335,20 +394,25 @@
   text-decoration-color: var(--#{$button}--TextDecorationColor);
   white-space: nowrap;
   cursor: pointer; // needed for when a button does not use <button> - eg, <span>
+  // stylelint-disable property-no-vendor-prefix
+  -webkit-user-select: none;
   user-select: none;
-  background-color: var(--#{$button}--BackgroundColor);
+  // stylelint-enable property-no-vendor-prefix
+  background: var(--#{$button}--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
   border: 0;
   border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
   border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
   border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
   border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
+  transition-delay: var(--#{$button}--TransitionDelay);
   transition-timing-function: var(--#{$button}--TransitionTimingFunction);
   transition-duration: var(--#{$button}--TransitionDuration);
   transition-property: var(--#{$button}--TransitionProperty);
+  scale: var(--#{$button}--ScaleX) var(--#{$button}--ScaleY);
 
   &::after {
     position: absolute;
-    inset: 0;
+    inset: var(--#{$button}--border--offset);
     pointer-events: none;
     content: "";
     border: var(--#{$button}--BorderWidth) solid;
@@ -422,6 +486,12 @@
     --#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--PaddingInlineEnd);
     --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--PaddingInlineStart);
     --#{$button}--Color: var(--#{$button}--m-link--Color);
+    --#{$button}--BorderWidth: var(--#{$button}--m-link--BorderWidth);
+    --#{$button}--hover--BorderColor: var(--#{$button}--m-link--hover--BorderColor);
+    --#{$button}--hover--BorderWidth: var(--#{$button}--m-link--hover--BorderWidth);
+    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-link--m-clicked--BorderColor);
+    --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-link--m-clicked--BorderWidth);
+    --#{$button}--BorderColor: var(--#{$button}--m-link--BorderColor);
     --#{$button}--BorderRadius: var(--#{$button}--m-link--BorderRadius);
     --#{$button}--BackgroundColor: var(--#{$button}--m-link--BackgroundColor);
     --#{$button}__icon--Color: var(--#{$button}--m-link__icon--Color);
@@ -433,7 +503,7 @@
     --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
     --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-link--m-small--PaddingInlineEnd);
     --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-link--m-small--PaddingInlineStart);
-
+  
     &.pf-m-inline {
       @at-root span#{&} {
         --#{$button}--m-link--m-inline--Display: var(--#{$button}--span--m-link--m-inline--Display);
@@ -467,9 +537,13 @@
       --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
       --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
       --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
+      --#{$button}--BorderWidth: 0;
+      --#{$button}--hover--BorderWidth: 0;
+      --#{$button}--m-clicked--BorderWidth: 0;
 
       text-align: start;
       white-space: normal;
+      background: transparent; // don't show the ripple effect for inline links
       outline-offset: #{pf-size-prem(2px)};
     }
 
@@ -587,6 +661,12 @@
 
   // Icon buttons
   &.pf-m-plain {
+    --#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth);
+    --#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor);
+    --#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth);
+    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor);
+    --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth);
+    --#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor);
     --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
     --#{$button}--Color: var(--#{$button}--m-plain--Color);
     --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
@@ -615,14 +695,16 @@
       --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
       --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
       --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
-  
+      --#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset);
+
       min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
+      background: var(--#{$button}--BackgroundColor); // override the ripple background
     }
   }
 
   &.pf-m-block {
     --#{$button}--Display: var(--#{$button}--m-block--Display);
-
+ 
     width: var(--#{$button}--m-block--Width);
   }
 
@@ -641,8 +723,8 @@
     --#{$button}--FontSize: var(--#{$button}--m-display-lg--FontSize);
   }
 
-  // Favorite button icon will transition color
   &.pf-m-favorite .#{$button}__icon {
+    display: grid;
     transition-timing-function: var(--#{$button}--m-favorite__icon--TransitionTimingFunction);
     transition-duration: var(--#{$button}--m-favorite__icon--TransitionDuration);
     transition-property: color;
@@ -651,7 +733,11 @@
   // Favorite button when favorited
   &.pf-m-favorited {
     --#{$button}__icon--Color: var(--#{$button}--m-favorited__icon--Color);
+    --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-favorited__icon--Color);
     --#{$button}--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
+    --#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
+    --#{$button}__icon--favorite--Opacity: var(--#{$button}--m-favorited__icon--favorite--Opacity);
+    --#{$button}__icon--favorited--Opacity: var(--#{$button}--m-favorited__icon--favorited--Opacity);
   }
 
   // Favorite button will run an animation when favorited
@@ -661,20 +747,57 @@
     animation-timing-function: var(--#{$button}--m-favorited__icon--AnimationTimingFunction);
   }
 
+  &.pf-m-settings {
+    --#{$button}__icon--TransitionProperty: rotate;
+    --#{$button}__icon--TransitionDuration: var(--#{$button}--m-settings__icon--TransitionDuration);
+    --#{$button}__icon--TransitionTimingFunction: var(--#{$button}--m-settings__icon--TransitionTimingFunction);
+    --#{$button}--hover__icon--TransitionProperty: rotate;
+    --#{$button}--hover__icon--TransitionDuration: var(--#{$button}--m-settings--hover__icon--TransitionDuration);
+    --#{$button}--hover__icon--TransitionTimingFunction: var(--#{$button}--m-settings--hover__icon--TransitionTimingFunction);
+    --#{$button}--hover__icon--Rotate: var(--#{$button}--m-settings--hover__icon--Rotate);
+  }
+
+  &.pf-m-hamburger {
+    --#{$button}__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+    --#{$button}__icon--TransitionDuration: 0s;
+    --#{$button}__icon--TransitionProperty: scale;
+    --#{$button}--hover__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+    --#{$button}--hover__icon--TransitionDuration: 0s;
+    --#{$button}--hover__icon--TransitionProperty: scale;
+
+    &.pf-m-expand {
+      @include pf-v6-hamburger;
+    }
+
+    &.pf-m-collapse {
+      @include pf-v6-hamburger($collapse: true);
+    }
+  }
+
   &:hover,
   &:focus {
     --#{$button}--Color: var(--#{$button}--hover--Color);
     --#{$button}--BackgroundColor: var(--#{$button}--hover--BackgroundColor);
     --#{$button}--BorderColor: var(--#{$button}--hover--BorderColor);
     --#{$button}--BorderWidth: var(--#{$button}--hover--BorderWidth);
+    --#{$button}--ScaleX: var(--#{$button}--hover--ScaleX);
+    --#{$button}--ScaleY: var(--#{$button}--hover--ScaleY);
     --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-plain--m-no-padding--hover__icon--Color);
     --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
+    --#{$button}__icon--TransitionTimingFunction: var(--#{$button}--hover__icon--TransitionTimingFunction);
+    --#{$button}__icon--TransitionDuration: var(--#{$button}--hover__icon--TransitionDuration);
+    --#{$button}__icon--TransitionProperty: var(--#{$button}--hover__icon--TransitionProperty);
+    --#{$button}__icon--Rotate: var(--#{$button}--hover__icon--Rotate);
+    --#{$button}__icon--ScaleX: var(--#{$button}--hover__icon--ScaleX);
+    --#{$button}__icon--ScaleY: var(--#{$button}--hover__icon--ScaleY);
 
     text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
     text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
     text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
+    outline-offset: var(--pf-t--global--focus-ring--position--offset);
   }
 
+  &:active,
   &.pf-m-clicked {
     --#{$button}--Color: var(--#{$button}--m-clicked--Color);
     --#{$button}--BackgroundColor: var(--#{$button}--m-clicked--BackgroundColor);
@@ -683,6 +806,11 @@
     --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
   }
 
+  &:active {
+    background-size: 100% 100%; // apply the background surface for ripple
+    transition-duration: 0s; // transition immediately
+  }
+
   // Disabled buttons
   // These styles need to go after the button types because they need to override some of the type styling
   &:disabled,
@@ -695,7 +823,7 @@
   &.pf-m-aria-disabled {
     color: var(--#{$button}--disabled--Color);
     text-decoration-color: var(--#{$button}--disabled--TextDecorationColor);
-    background-color: var(--#{$button}--disabled--BackgroundColor);
+    background: var(--#{$button}--disabled--BackgroundColor);
 
     &::after {
       border-color: transparent;
@@ -747,6 +875,12 @@
   margin-inline-start: var(--#{$button}__icon--MarginInlineStart);
   margin-inline-end: var(--#{$button}__icon--MarginInlineEnd);
   color: var(--#{$button}__icon--Color);
+  transition-delay: var(--#{$button}__icon--TransitionDelay);
+  transition-timing-function: var(--#{$button}__icon--TransitionTimingFunction);
+  transition-duration: var(--#{$button}__icon--TransitionDuration);
+  transition-property: var(--#{$button}__icon--TransitionProperty);
+  rotate: var(--#{$button}__icon--Rotate);
+  scale: var(--#{$button}__icon--ScaleX) var(--#{$button}__icon--ScaleY);
 
   &.pf-m-start {
     --#{$button}__icon--MarginInlineEnd: var(--#{$button}__icon--m-start--MarginInlineEnd);
@@ -757,6 +891,21 @@
   }
 }
 
+.#{$button}__icon-favorite,
+.#{$button}__icon-favorited {
+  grid-area: 1 / 1 / 1 / 1;
+  transition-duration: var(--#{$button}__icon--favorite--TransitionDuration);
+  transition-property: opacity;
+}
+
+.#{$button}__icon-favorite {
+  opacity: var(--#{$button}__icon--favorite--Opacity);
+}
+
+.#{$button}__icon-favorited {
+  opacity: var(--#{$button}__icon--favorited--Opacity);
+}
+
 .#{$button}__progress {
   position: absolute;
   inset-block-start: var(--#{$button}__progress--InsetBlockStart);
@@ -770,11 +919,44 @@
   }
 }
 
+// enable inline link to have underline when used with truncate
+.#{$button}__text {
+  // stylelint-disable property-disallowed-list
+  text-decoration: inherit;
+  // stylelint-enable property-disallowed-list
+}
+
 .#{$button}__count {
   display: inline-flex;
   align-items: center;
 }
 
+.#{$button}--hamburger-icon {
+  path {
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: d var(--#{$button}--hamburger-icon--TransitionDuration) var(--#{$button}--hamburger-icon--TransitionTimingFunction);
+  }
+}
+
+.#{$button}--hamburger-icon--top {
+  d: var(--#{$button}--hamburger-icon--top--path);
+}
+
+.#{$button}--hamburger-icon--middle {
+  d: var(--#{$button}--hamburger-icon--middle--path);
+}
+
+.#{$button}--hamburger-icon--arrow {
+  d: var(--#{$button}--hamburger-icon--arrow--path);
+}
+
+.#{$button}--hamburger-icon--bottom {
+  d: var(--#{$button}--hamburger-icon--bottom--path);
+}
+
 @keyframes #{$button}-icon-notify {
   33% {
     transform: rotate(30deg);
@@ -787,6 +969,6 @@
 
 @keyframes #{$button}-icon-favorited {
   50% {
-    transform: scale(1.5);
+    scale: 1.5;
   }
 }

package/components/CalendarMonth/calendar-month.css

@@ -31,6 +31,9 @@
   --pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd: 0;
   --pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd);
   --pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart: 0;
+  --pf-v6-c-calendar-month__dates-cell--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0;
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0;
   --pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-calendar-month__dates-cell--m-in-range--m-start-range--before--InsetInlineStart: 50%;
   --pf-v6-c-calendar-month__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd: 50%;
@@ -38,6 +41,8 @@
   --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
   --pf-v6-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-calendar-month__date--Width: 4ch;
   --pf-v6-c-calendar-month__date--Height: 4ch;
@@ -56,6 +61,8 @@
   --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
   --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
+  --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
 }
 
 .pf-v6-c-calendar-month {
@@ -128,13 +135,20 @@
   inset-block-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd);
   inset-inline-start: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart);
   inset-inline-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd);
+  pointer-events: none;
   content: "";
   background-color: var(--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor);
+  border: solid var(--pf-v6-c-calendar-month__dates-cell--after--BorderColor);
+  border-width: var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth) 0 var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth);
 }
 .pf-v6-c-calendar-month__dates-cell.pf-m-current {
   --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
+  --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
+  --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
 }
 .pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth);
   --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
   --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
   --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth);
@@ -161,6 +175,8 @@
 }
 .pf-v6-c-calendar-month__dates-cell.pf-m-disabled {
   --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0;
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0;
   --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
 }
 

package/components/CalendarMonth/calendar-month.scss

@@ -41,6 +41,9 @@
   --#{$calendar-month}__dates-cell--before--InsetInlineEnd: 0;
   --#{$calendar-month}__dates-cell--before--InsetBlockEnd: var(--#{$calendar-month}__dates-cell--PaddingBlockEnd);
   --#{$calendar-month}__dates-cell--before--InsetInlineStart: 0;
+  --#{$calendar-month}__dates-cell--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$calendar-month}__dates-cell--after--BorderBlockStartWidth: 0;
+  --#{$calendar-month}__dates-cell--after--BorderBlockEndWidth: 0;
   --#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$calendar-month}__dates-cell--m-in-range--m-start-range--before--InsetInlineStart: 50%;
   --#{$calendar-month}__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd: 50%;
@@ -48,6 +51,8 @@
   --#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
   --#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
   --#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$calendar-month}__dates-cell--m-in-range--after--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$calendar-month}__dates-cell--m-in-range--after--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$calendar-month}__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
 
   // date button
@@ -68,6 +73,8 @@
   --#{$calendar-month}__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$calendar-month}__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
   --#{$calendar-month}__date--after--focus--OutlineOffset: -2px;
+  --#{$calendar-month}__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$calendar-month}__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
 }
 
 .#{$calendar-month} {
@@ -142,15 +149,22 @@
     inset-block-end: var(--#{$calendar-month}__dates-cell--before--InsetBlockEnd);
     inset-inline-start: var(--#{$calendar-month}__dates-cell--before--InsetInlineStart);
     inset-inline-end: var(--#{$calendar-month}__dates-cell--before--InsetInlineEnd);
+    pointer-events: none;
     content: "";
     background-color: var(--#{$calendar-month}__dates-cell--before--BackgroundColor);
+    border: solid var(--#{$calendar-month}__dates-cell--after--BorderColor);
+    border-width: var(--#{$calendar-month}__dates-cell--after--BorderBlockStartWidth) 0 var(--#{$calendar-month}__dates-cell--after--BorderBlockEndWidth);
   }
 
   &.pf-m-current {
     --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-current__date--BackgroundColor);
+    --#{$calendar-month}__date--after--BorderWidth: var(--#{$calendar-month}__dates-cell--m-current__date--after--BorderWidth);
+    --#{$calendar-month}__date--after--BorderColor: var(--#{$calendar-month}__dates-cell--m-current__date--after--BorderColor);
   }
 
   &.pf-m-in-range {
+    --#{$calendar-month}__dates-cell--after--BorderBlockStartWidth: var(--#{$calendar-month}__dates-cell--m-in-range--after--BorderBlockStartWidth);
+    --#{$calendar-month}__dates-cell--after--BorderBlockEndWidth: var(--#{$calendar-month}__dates-cell--m-in-range--after--BorderBlockEndWidth);
     --#{$calendar-month}__dates-cell--before--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor);
     --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor);
     --#{$calendar-month}__date--hover--BorderWidth: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderWidth);
@@ -186,6 +200,8 @@
 
   &.pf-m-disabled {
     --#{$calendar-month}__dates-cell--before--BackgroundColor: transparent;
+    --#{$calendar-month}__dates-cell--after--BorderBlockStartWidth: 0;
+    --#{$calendar-month}__dates-cell--after--BorderBlockEndWidth: 0;
     --#{$calendar-month}__date--BackgroundColor: transparent;
   }
 }

package/components/Card/card.css

@@ -39,6 +39,7 @@
   --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
   --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v6-c-card--m-selectable--hover--BorderWidth: var(--pf-t--global--border--width--box--hover);
   --pf-v6-c-card--m-selectable--focus--BorderColor: var(--pf-t--global--border--color--hover);
   --pf-v6-c-card--m-selectable--focus--BorderWidth: var(--pf-t--global--border--width--box--hover);
   --pf-v6-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -69,7 +70,7 @@
   --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-card--m-secondary--BorderColor: transparent;
+  --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
@@ -228,7 +229,6 @@
 }
 
 .pf-v6-c-card__title-text {
-  overflow: auto;
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
   font-size: var(--pf-v6-c-card__title-text--FontSize);
   font-weight: var(--pf-v6-c-card__title-text--FontWeight);
@@ -270,17 +270,18 @@
   z-index: -1;
   content: "";
   background-color: var(--pf-v6-c-card--BackgroundColor, transparent);
-  border: var(--pf-v6-c-card--m-selectable--BorderWidth) solid var(--pf-v6-c-card--BorderColor, transparent);
+  border: var(--pf-v6-c-card--BorderWidth) solid var(--pf-v6-c-card--BorderColor, transparent);
   border-radius: var(--pf-v6-c-card--BorderRadius);
 }
 .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--hover--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--hover--BorderWidth);
 }
 
 .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-radio__label, .pf-v6-c-check__label),
 .pf-v6-c-card.pf-m-selected {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--BorderColor);
-  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--BorderWidth);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--BorderWidth);
 }
 
 .pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible),

package/components/Card/card.scss

@@ -51,6 +51,7 @@
 
   // Hover on selectable card
   --#{$card}--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --#{$card}--m-selectable--hover--BorderWidth: var(--pf-t--global--border--width--box--hover);
 
   // Focus on selectable card (label)
   --#{$card}--m-selectable--focus--BorderColor: var(--pf-t--global--border--color--hover);
@@ -96,7 +97,7 @@
 
   // Secondary
   --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$card}--m-secondary--BorderColor: transparent;
+  --#{$card}--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
 
   // Full height
   --#{$card}--m-full-height--Height: 100%;
@@ -312,7 +313,6 @@
 }
 
 .#{$card}__title-text {
-  overflow: auto;
   font-family: var(--#{$card}__title-text--FontFamily);
   font-size: var(--#{$card}__title-text--FontSize);
   font-weight: var(--#{$card}__title-text--FontWeight);
@@ -357,12 +357,13 @@
     z-index: -1;
     content: '';
     background-color: var(--#{$card}--BackgroundColor, transparent);
-    border: var(--#{$card}--m-selectable--BorderWidth) solid var(--#{$card}--BorderColor, transparent);
+    border: var(--#{$card}--BorderWidth) solid var(--#{$card}--BorderColor, transparent);
     border-radius: var(--#{$card}--BorderRadius);
   }
 
   &:hover {
     --#{$card}--BorderColor: var(--#{$card}--m-selectable--hover--BorderColor);
+    --#{$card}--BorderWidth: var(--#{$card}--m-selectable--hover--BorderWidth);
   }
 }
 
@@ -370,7 +371,7 @@
 .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:checked) ~ :is(.#{$radio}__label, .#{$check}__label),
 .#{$card}.pf-m-selected {
   --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-selected--BorderColor);
-  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--m-selectable--m-selected--BorderWidth); // this line used to be just BorderWidth, not m-selectable
+  --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-selected--BorderWidth);
 }
 
 // Focus on the card (focus on label but not checked)

package/components/CodeBlock/code-block.css

@@ -1,4 +1,6 @@
 .pf-v6-c-code-block {
+  --pf-v6-c-code-block--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -17,6 +19,7 @@
 
 .pf-v6-c-code-block {
   background-color: var(--pf-v6-c-code-block--BackgroundColor);
+  border: var(--pf-v6-c-code-block--BorderWidth) solid var(--pf-v6-c-code-block--BorderColor);
   border-radius: var(--pf-v6-c-code-block--BorderRadius);
 }
 

package/components/CodeBlock/code-block.scss

@@ -1,6 +1,8 @@
 @use '../../sass-utilities' as *;
 
 @include pf-root($code-block) {
+  --#{$code-block}--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$code-block}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$code-block}__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -19,6 +21,7 @@
 
 .#{$code-block} {
   background-color: var(--#{$code-block}--BackgroundColor);
+  border: var(--#{$code-block}--BorderWidth) solid var(--#{$code-block}--BorderColor);
   border-radius: var(--#{$code-block}--BorderRadius);
 }