@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.61

package/components/Button/button.scss

@@ -5,7 +5,7 @@
   --#{$button}--AlignItems: baseline;
   --#{$button}--JustifyContent: center;
   --#{$button}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
-  --#{$button}--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--PaddingBlockStart) + var(--#{$button}--PaddingBlockEnd));
+  --#{$button}--MinWidth: calc(1lh + var(--#{$button}--PaddingBlockStart) + var(--#{$button}--PaddingBlockEnd));
   --#{$button}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --#{$button}--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
   --#{$button}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
@@ -36,6 +36,7 @@
   --#{$button}--hover--TextDecorationLine: none;
   --#{$button}--hover--TextDecorationStyle: none;
   --#{$button}--hover--TextDecorationColor: currentcolor;
+  --#{$button}--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
   --#{$button}--hover--ScaleX: 1;
   --#{$button}--hover--ScaleY: 1;
 
@@ -43,6 +44,10 @@
   --#{$button}--m-clicked--BackgroundColor: transparent;
   --#{$button}--m-clicked--BorderColor: transparent;
   --#{$button}--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
+  --#{$button}--m-clicked--TextDecorationLine: none;
+  --#{$button}--m-clicked--TextDecorationStyle: none;
+  --#{$button}--m-clicked--TextDecorationColor: currentcolor;
+  --#{$button}--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
 
   // Primary
   --#{$button}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -89,7 +94,7 @@
   --#{$button}--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
 
   // Link
-  --#{$button}--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$button}--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --#{$button}--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --#{$button}--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --#{$button}--m-link--Color: var(--pf-t--global--text--color--brand--default);
@@ -131,10 +136,17 @@
   --#{$button}--m-link--m-inline--PaddingInlineEnd: 0;
   --#{$button}--m-link--m-inline--PaddingBlockEnd: 0;
   --#{$button}--m-link--m-inline--PaddingInlineStart: 0;
+  --#{$button}--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
   --#{$button}--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
   --#{$button}--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+  --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
+  --#{$button}--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
   --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
   --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --#{$button}--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --#{$button}--m-link--m-inline--TransitionProperty: color, text-underline-offset;
+  --#{$button}--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
+  --#{$button}--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
   --#{$button}--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
   --#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--#{$button}--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -144,13 +156,11 @@
   --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$button}--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
   --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
-  --#{$button}--m-link--m-inline--TextDecorationColor: currentcolor;
   --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
-  --#{$button}--m-link--m-inline--hover--TextDecorationColor: currentcolor;
 
   // Plain
-  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --#{$button}--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --#{$button}--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -188,12 +198,12 @@
   --#{$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);
+  --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
   --#{$button}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$button}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$button}--m-control--Color: var(--pf-t--global--text--color--regular);
   --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--control--default);
   --#{$button}--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$button}--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-control--hover--Color: var(--pf-t--global--text--color--regular);
@@ -268,13 +278,49 @@
   --#{$button}--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
   --#{$button}--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
 
-  // CTA
+  // CTA (display large)
   --#{$button}--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
   --#{$button}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
   --#{$button}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
   --#{$button}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
   --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$button}--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
+  --#{$button}--m-display-lg--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --#{$button}--m-display-lg--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --#{$button}--m-display-lg--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --#{$button}--m-display-lg--m-clicked--TextDecorationColor: var(--pf-t--global--border--color--control--default);
+  --#{$button}--m-display-lg--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --#{$button}--m-display-lg--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --#{$button}--m-display-lg--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+
+  // CTA primary
+  --#{$button}--m-display-lg--m-primary--Color: var(--pf-t--global--text--color--on-brand--accent--default);
+  --#{$button}--m-display-lg--m-primary--BackgroundColor: var(--pf-t--global--color--brand--accent--default);
+  --#{$button}--m-display-lg--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--default);
+  --#{$button}--m-display-lg--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--accent--hover);
+  --#{$button}--m-display-lg--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--accent--hover);
+  --#{$button}--m-display-lg--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--hover);
+  --#{$button}--m-display-lg--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--accent--clicked);
+  --#{$button}--m-display-lg--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--accent--clicked);
+  --#{$button}--m-display-lg--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--clicked);
+  --#{$button}--m-display-lg--m-primary--hover--TextDecorationColor: currentcolor;
+  --#{$button}--m-display-lg--m-primary--m-clicked--TextDecorationColor: currentcolor;
+
+  // CTA Secondary
+  --#{$button}--m-display-lg--m-secondary--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-display-lg--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--accent--default);
+  --#{$button}--m-display-lg--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--accent--default);
+  --#{$button}--m-display-lg--m-secondary--hover--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-display-lg--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--accent--hover);
+  --#{$button}--m-display-lg--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--accent--hover);
+  --#{$button}--m-display-lg--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-display-lg--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--accent--clicked);
+  --#{$button}--m-display-lg--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--accent--clicked);
+
+  // CTA Tertiary
+  --#{$button}--m-display-lg--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-display-lg--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--default);
 
   // Small
   --#{$button}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
@@ -373,14 +419,7 @@
   --#{$button}--m-hamburger__icon--m-expand--ScaleX: -1;
 
   // Circle
-  --#{$button}--m-circle--ScaleX: 1.29;
-  --#{$button}--m-circle--ScaleY: 1.29;
   --#{$button}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --#{$button}--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
-  --#{$button}--m-circle--PaddingBlockStart: var(--#{$button}--m-circle--Padding--base);
-  --#{$button}--m-circle--PaddingInlineEnd: 0;
-  --#{$button}--m-circle--PaddingBlockEnd: var(--#{$button}--m-circle--Padding--base);
-  --#{$button}--m-circle--PaddingInlineStart: 0;
 }
 
 .#{$button} {
@@ -389,7 +428,7 @@
   gap: var(--#{$button}--Gap);
   align-items: var(--#{$button}--AlignItems);
   justify-content: var(--#{$button}--JustifyContent);
-  min-width: var(--#{$button}--MinWidth);
+  min-width: var(--#{$button}--MinWidth, revert);
   padding-block-start: var(--#{$button}--PaddingBlockStart);
   padding-block-end: var(--#{$button}--PaddingBlockEnd);
   padding-inline-start: var(--#{$button}--PaddingInlineStart);
@@ -530,12 +569,13 @@
       --#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--m-inline--PaddingInlineEnd);
       --#{$button}--PaddingBlockEnd: var(--#{$button}--m-link--m-inline--PaddingBlockEnd);
       --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--m-inline--PaddingInlineStart);
+      --#{$button}--TransitionDuration: var(--#{$button}--m-link--m-inline--TransitionDuration);
+      --#{$button}--TransitionTimingFunction: var(--#{$button}--m-link--m-inline--TransitionTimingFunction);
+      --#{$button}--TransitionProperty: var(--#{$button}--m-link--m-inline--TransitionProperty);
       --#{$button}--BackgroundColor: transparent;
       --#{$button}__progress--InsetInlineStart: var(--#{$button}--m-link--m-inline__progress--InsetInlineStart);
       --#{$button}--TextDecorationLine: var(--#{$button}--m-link--m-inline--TextDecorationLine);
       --#{$button}--TextDecorationStyle: var(--#{$button}--m-link--m-inline--TextDecorationStyle);
-      --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
-      --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
       --#{$button}--hover--BackgroundColor: transparent;
       --#{$button}--m-clicked--BackgroundColor: transparent;
       --#{$button}--disabled--BackgroundColor: transparent;
@@ -544,7 +584,10 @@
       --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--Color);
       --#{$button}--m-link__icon--Color: var(--#{$button}--m-link--m-inline__icon--Color);
       --#{$button}--TextDecorationColor: var(--#{$button}--m-link--m-inline--TextDecorationColor);
+      --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
+      --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
       --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
+      --#{$button}--hover--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
       --#{$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;
@@ -552,9 +595,15 @@
       --#{$button}--m-clicked--BorderWidth: 0;
 
       text-align: start;
+      text-underline-offset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
       white-space: normal;
       background: transparent; // don't show the ripple effect for inline links
       outline-offset: #{pf-size-prem(2px)};
+
+      &:hover,
+      &:focus {
+        --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--hover--TextUnderlineOffset);
+      }
     }
 
     &.pf-m-danger {
@@ -731,6 +780,39 @@
     --#{$button}--PaddingBlockEnd: var(--#{$button}--m-display-lg--PaddingBlockEnd);
     --#{$button}--PaddingInlineStart: var(--#{$button}--m-display-lg--PaddingInlineStart);
     --#{$button}--FontSize: var(--#{$button}--m-display-lg--FontSize);
+    --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-display-lg--hover--TextDecorationColor);
+    --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-display-lg--hover--TextDecorationLine);
+    --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-display-lg--hover--TextDecorationStyle);
+    --#{$button}--hover--TextUnderlineOffset: var(--#{$button}--m-display-lg--hover--TextUnderlineOffset);
+    --#{$button}--m-clicked--TextDecorationColor: var(--#{$button}--m-display-lg--m-clicked--TextDecorationColor);
+    --#{$button}--m-clicked--TextDecorationLine: var(--#{$button}--m-display-lg--m-clicked--TextDecorationLine);
+    --#{$button}--m-clicked--TextDecorationStyle: var(--#{$button}--m-display-lg--m-clicked--TextDecorationStyle);
+    --#{$button}--m-clicked--TextUnderlineOffset: var(--#{$button}--m-display-lg--m-clicked--TextUnderlineOffset);
+    --#{$button}--m-primary--Color: var(--#{$button}--m-display-lg--m-primary--Color);
+    --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-display-lg--m-primary--BackgroundColor);
+    --#{$button}--m-primary__icon--Color: var(--#{$button}--m-display-lg--m-primary__icon--Color);
+    --#{$button}--m-primary--hover--Color: var(--#{$button}--m-display-lg--m-primary--hover--Color);
+    --#{$button}--m-primary--hover--BackgroundColor: var(--#{$button}--m-display-lg--m-primary--hover--BackgroundColor);
+    --#{$button}--m-primary--hover__icon--Color: var(--#{$button}--m-display-lg--m-primary--hover__icon--Color);
+    --#{$button}--m-primary--m-clicked--Color: var(--#{$button}--m-display-lg--m-primary--m-clicked--Color);
+    --#{$button}--m-primary--m-clicked--BackgroundColor: var(--#{$button}--m-display-lg--m-primary--m-clicked--BackgroundColor);
+    --#{$button}--m-primary--m-clicked__icon--Color: var(--#{$button}--m-display-lg--m-primary--m-clicked__icon--Color);
+    --#{$button}--m-secondary--Color: var(--#{$button}--m-display-lg--m-secondary--Color);
+    --#{$button}--m-secondary--BorderColor: var(--#{$button}--m-display-lg--m-secondary--BorderColor);
+    --#{$button}--m-secondary__icon--Color: var(--#{$button}--m-display-lg--m-secondary__icon--Color);
+    --#{$button}--m-secondary--hover--Color: var(--#{$button}--m-display-lg--m-secondary--hover--Color);
+    --#{$button}--m-secondary--hover--BorderColor: var(--#{$button}--m-display-lg--m-secondary--hover--BorderColor);
+    --#{$button}--m-secondary--hover__icon--Color: var(--#{$button}--m-display-lg--m-secondary--hover__icon--Color);
+    --#{$button}--m-secondary--m-clicked--Color: var(--#{$button}--m-display-lg--m-secondary--m-clicked--Color);
+    --#{$button}--m-secondary--m-clicked--BorderColor: var(--#{$button}--m-display-lg--m-secondary--m-clicked--BorderColor);
+    --#{$button}--m-secondary--m-clicked__icon--Color: var(--#{$button}--m-display-lg--m-secondary--m-clicked__icon--Color);
+    --#{$button}--m-tertiary--hover--BorderColor: var(--#{$button}--m-display-lg--m-tertiary--hover--BorderColor);
+    --#{$button}--m-tertiary--m-clicked--BorderColor: var(--#{$button}--m-display-lg--m-tertiary--m-clicked--BorderColor);
+
+    &.pf-m-primary {
+      --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-display-lg--m-primary--hover--TextDecorationColor);
+      --#{$button}--m-clicked--TextDecorationColor: var(--#{$button}--m-display-lg--m-primary--m-clicked--TextDecorationColor);
+    }
   }
 
   &.pf-m-favorite .#{$button}__icon {
@@ -786,14 +868,8 @@
 
   &.pf-m-circle {
     --#{$button}--BorderRadius: var(--#{$button}--m-circle--BorderRadius);
-    --#{$button}--PaddingBlockStart: var(--#{$button}--m-circle--PaddingBlockStart);
-    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-circle--PaddingInlineEnd);
-    --#{$button}--PaddingBlockEnd: var(--#{$button}--m-circle--PaddingBlockEnd);
-    --#{$button}--PaddingInlineStart: var(--#{$button}--m-circle--PaddingInlineStart);
 
-    & .pf-v6-c-button__icon {
-      scale: var(--#{$button}--m-circle--ScaleX) var(--#{$button}--m-circle--ScaleY);
-    }
+    padding-inline: 0;
   }
 
   &:hover,
@@ -816,6 +892,7 @@
     text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
     text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
     text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
+    text-underline-offset: var(--#{$button}--hover--TextUnderlineOffset);
     outline-offset: var(--pf-t--global--focus-ring--position--offset);
   }
 
@@ -826,6 +903,11 @@
     --#{$button}--BorderWidth: var(--#{$button}--m-clicked--BorderWidth);
     --#{$button}--BorderColor: var(--#{$button}--m-clicked--BorderColor);
     --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
+
+    text-decoration-line: var(--#{$button}--m-clicked--TextDecorationLine);
+    text-decoration-style: var(--#{$button}--m-clicked--TextDecorationStyle);
+    text-decoration-color: var(--#{$button}--m-clicked--TextDecorationColor);
+    text-underline-offset: var(--#{$button}--m-clicked--TextUnderlineOffset);
   }
 
   &:active {
@@ -891,6 +973,29 @@
     animation-duration: var(--#{$button}--m-notify__icon--AnimationDuration--notify);
     animation-timing-function: var(--#{$button}--m-notify__icon--AnimationTimingFunction--notify);
   }
+
+  &.pf-m-dock {
+    justify-content: flex-start;
+    width: 100%;
+
+    @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
+      justify-content: center;
+
+      .#{$button}__text {
+        display: none;
+      }
+    }
+  }
+
+  @at-root .#{$page}__dock.pf-m-text-expanded &,
+  &.pf-m-text-expanded {
+    justify-content: flex-start;
+    width: 100%;
+
+    .#{$button}__text {
+      display: revert;
+    }
+  }
 }
 
 .#{$button}__icon {

package/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/components/Card/card.css

@@ -1,9 +1,10 @@
 .pf-v6-c-card {
   --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
   --pf-v6-c-card--BorderStyle: solid;
   --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
   --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -32,8 +33,9 @@
   --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
-  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
-  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
+  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
+  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
   --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -70,13 +72,19 @@
   --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: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --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;
+  --pf-v6-c-card--m-plain--BoxShadow: none;
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+  --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-card--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --pf-v6-c-card--m-glass--BorderWidth: var(--pf-t--global--border--width--glass--default);
+  --pf-v6-c-card--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+  --pf-v6-c-card--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --pf-v6-c-card--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
 }
 
 .pf-v6-c-card {
@@ -87,6 +95,7 @@
   background-color: var(--pf-v6-c-card--BackgroundColor);
   border: 0;
   border-radius: var(--pf-v6-c-card--BorderRadius);
+  box-shadow: var(--pf-v6-c-card--BoxShadow);
 }
 .pf-v6-c-card::before {
   position: absolute;
@@ -100,6 +109,7 @@
   gap: 0;
 }
 .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
   isolation: isolate;
 }
 .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -134,6 +144,16 @@
 .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
 }
+.pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
+  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
+}
+
+.pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
+  --pf-v6-c-card__actions--PaddingInlineStart: 0;
+  --pf-v6-c-card__actions--MarginBlockStart: 0;
+  --pf-v6-c-card__actions--MarginBlockEnd: 0;
+}
 .pf-v6-c-card.pf-m-compact {
   --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
   --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -157,13 +177,16 @@
   --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
 }
 .pf-v6-c-card.pf-m-secondary {
-  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
-  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
 }
+.pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
+}
 .pf-v6-c-card.pf-m-plain {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
+  --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
 }
 .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
   transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
@@ -174,6 +197,14 @@
 .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer {
   padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart);
 }
+.pf-v6-c-card.pf-m-glass {
+  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
+  --pf-v6-c-card--BorderStyle: solid;
+  --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
+}
 
 .pf-v6-c-card__header {
   display: flex;
@@ -201,12 +232,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;
@@ -220,15 +251,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);
@@ -239,6 +271,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/components/Card/card.scss

@@ -2,10 +2,11 @@
 
 @include pf-root($card) {
   --#{$card}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$card}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$card}--BorderColor: var(--pf-t--global--border--color--subtle);
   --#{$card}--BorderStyle: solid;
   --#{$card}--BorderWidth: var(--pf-t--global--border--width--box--default);
   --#{$card}--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$card}--BoxShadow: var(--pf-t--global--box-shadow--sm);
   --#{$card}--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --#{$card}--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --#{$card}--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -36,10 +37,11 @@
   --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --#{$card}__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
-  --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
+  --#{$card}--m-expanded__header-toggle-icon--Rotate: -180deg;
 
   // Selectable/Clickable
-  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
+  --#{$card}--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$card}--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
 
   // Clickable clicked
   --#{$card}--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -97,8 +99,6 @@
 
   // Secondary
   --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$card}--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --#{$card}--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   // Full height
   --#{$card}--m-full-height--Height: 100%;
@@ -106,10 +106,22 @@
   // Plain - no border or background color
   --#{$card}--m-plain--BorderColor: transparent;
   --#{$card}--m-plain--BackgroundColor: transparent;
+  --#{$card}--m-plain--BoxShadow: none;
 
   // Toggle right
   --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+
+  // As tile
+  --#{$card}--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --#{$card}--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
+
+  // Glass
+  --#{$card}--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --#{$card}--m-glass--BorderWidth: var(--pf-t--global--border--width--glass--default);
+  --#{$card}--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+  --#{$card}--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --#{$card}--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
 }
 
 .#{$card} {
@@ -120,6 +132,7 @@
   background-color: var(--#{$card}--BackgroundColor);
   border: 0;
   border-radius: var(--#{$card}--BorderRadius);
+  box-shadow: var(--#{$card}--BoxShadow);
 
   &::before {
     position: absolute;
@@ -141,6 +154,8 @@
   // SELECTABLE or CLICKABLE CARDS
   &.pf-m-selectable,
   &.pf-m-clickable {
+    --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
+
     isolation: isolate;
 
     &::before {
@@ -196,6 +211,20 @@
   }
   // stylelint-enable selector-max-class
 
+  
+  @at-root .#{$card}__actions:has(> .#{$card}__selectable-actions input.#{$pf-prefix}screen-reader), // targets "card as tile", which are selectable cards with inputs
+  &:has(.#{$card}__selectable-actions input.#{$pf-prefix}screen-reader) {
+    --#{$card}--BackgroundColor: var(--#{$card}--m-as-tile--BackgroundColor);
+    --#{$card}--BorderColor: var(--#{$card}--m-as-tile--BorderColor);
+  }
+  
+  // when the whole card is clickable and the card actions are invisible, remove the padding/margin so it doesn't take up space
+  &.pf-m-clickable:not(.pf-m-selectable) {
+    --#{$card}__actions--PaddingInlineStart: 0;
+    --#{$card}__actions--MarginBlockStart: 0;
+    --#{$card}__actions--MarginBlockEnd: 0;
+  }
+
   &.pf-m-compact {
     --#{$card}__title-text--FontSize: var(--#{$card}--m-compact__title-text--FontSize);
     --#{$card}__body--FontSize: var(--#{$card}--m-compact__body--FontSize);
@@ -221,14 +250,22 @@
   }
 
   &.pf-m-secondary {
-    --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
-    --#{$card}--BorderWidth: var(--#{$card}--m-secondary--BorderWidth);
+    // TODO - let selectable secondary cards have a border
+    // --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
+    // --#{$card}--BorderWidth: var(--#{$card}--m-secondary--BorderWidth);
     --#{$card}--BackgroundColor: var(--#{$card}--m-secondary--BackgroundColor);
+
+    &.pf-m-selectable:not(.pf-m-current, .pf-m-selected),
+    &.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
+      --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
+      --#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth);
+    }
   }
 
   &.pf-m-plain {
     --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
     --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
+    --#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
   }
 
   &.pf-m-expanded {
@@ -249,6 +286,16 @@
       padding-block-start: var(--#{$card}--c-divider--child--PaddingBlockStart);
     }
   }
+
+  &.pf-m-glass {
+    --#{$card}--BackgroundColor: var(--#{$card}--m-glass--BackgroundColor);
+    --#{$card}--BorderColor: var(--#{$card}--m-glass--BorderColor);
+    --#{$card}--BorderWidth: var(--#{$card}--m-glass--BorderWidth);
+    --#{$card}--BorderStyle: solid;
+    --#{$card}--BoxShadow: var(--#{$card}--m-glass--BoxShadow);
+
+    backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
+  }
 }
 
 .#{$card}__header {
@@ -288,7 +335,7 @@
         margin-inline-end: auto;
       }
 
-      margin-inline-start: 0
+      margin-inline-start: 0;
     }
   }
 }
@@ -323,6 +370,12 @@
   overflow-wrap: var(--#{$card}__title-text--OverflowWrap);
 }
 
+.#{$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);
+}
+
 .#{$card}__actions {
   display: flex;
   gap: var(--#{$card}__actions--Gap);