@patternfly/patternfly 6.6.0-prerelease.8 → 6.6.0

package/components/Avatar/avatar.scss

@@ -9,19 +9,19 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
   --#{$avatar}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$avatar}--Width: #{pf-size-prem(36px)};
   --#{$avatar}--Height: #{pf-size-prem(36px)};
-  --#{$avatar}--FontSize: #{pf-size-prem(36px)};
+  --#{$avatar}--FontSize: calc(#{pf-size-prem(36px)} / 1.414); // 1.414 is the square root of 2, used to get the inner square of the avatar
   --#{$avatar}--m-sm--Width: #{pf-size-prem(24px)};
   --#{$avatar}--m-sm--Height: #{pf-size-prem(24px)};
-  --#{$avatar}--m-sm--FontSize: #{pf-size-prem(24px)};
+  --#{$avatar}--m-sm--FontSize: calc(#{pf-size-prem(24px)} / 1.414);
   --#{$avatar}--m-md--Width: #{pf-size-prem(36px)};
   --#{$avatar}--m-md--Height: #{pf-size-prem(36px)};
-  --#{$avatar}--m-md--FontSize: #{pf-size-prem(36px)};
+  --#{$avatar}--m-md--FontSize: calc(#{pf-size-prem(36px)} / 1.414);
   --#{$avatar}--m-lg--Width: #{pf-size-prem(72px)};
   --#{$avatar}--m-lg--Height: #{pf-size-prem(72px)};
-  --#{$avatar}--m-lg--FontSize: #{pf-size-prem(72px)};
+  --#{$avatar}--m-lg--FontSize: calc(#{pf-size-prem(72px)} / 1.414);
   --#{$avatar}--m-xl--Width: #{pf-size-prem(128px)};
   --#{$avatar}--m-xl--Height: #{pf-size-prem(128px)};
-  --#{$avatar}--m-xl--FontSize: #{pf-size-prem(128px)};
+  --#{$avatar}--m-xl--FontSize: calc(#{pf-size-prem(128px)} / 1.414);
 
   // Bordered
   --#{$avatar}--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
@@ -83,9 +83,19 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
   width: var(--#{$avatar}--Width);
   height: var(--#{$avatar}--Height);
   font-size: var(--#{$avatar}--FontSize);
+  color: var(--#{$avatar}--Color, inherit);
+  background-color: var(--#{$avatar}--BackgroundColor, transparent);
   border: var(--#{$avatar}--BorderWidth) solid var(--#{$avatar}--BorderColor);
   border-radius: var(--#{$avatar}--BorderRadius);
 
+  @at-root div#{&} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: clip;
+    vertical-align: middle;
+  }
+
   &.pf-m-bordered {
     --#{$avatar}--BorderColor: var(--#{$avatar}--m-bordered--BorderColor);
     --#{$avatar}--BorderWidth: var(--#{$avatar}--m-bordered--BorderWidth);
@@ -120,84 +130,75 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
 
   &.pf-m-colorful {
     --#{$avatar}--BorderWidth: var(--#{$avatar}--m-colorful--BorderWidth);
+  }
   
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: clip;
-    vertical-align: middle;
-    color: var(--#{$avatar}--m-colorful--Color, inherit);
-    background-color: var(--#{$avatar}--m-colorful--BackgroundColor, transparent);
-    border-color: var(--#{$avatar}--m-colorful--BorderColor, transparent);
-
-    &.pf-m-red {
-      --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-red--BackgroundColor);
-      --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-red--Color);
-      --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-red--BorderColor);
-      --#{$avatar}__initials--Color: var(--#{$avatar}--m-red__initials--Color);
-    }
-  
-    &.pf-m-orangered {
-      --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-orangered--BackgroundColor);
-      --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-orangered--Color);
-      --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-orangered--BorderColor);
-      --#{$avatar}__initials--Color: var(--#{$avatar}--m-orangered__initials--Color);
-    }
-  
-    &.pf-m-orange {
-      --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-orange--BackgroundColor);
-      --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-orange--Color);
-      --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-orange--BorderColor);
-      --#{$avatar}__initials--Color: var(--#{$avatar}--m-orange__initials--Color);
-    }
-  
-    &.pf-m-yellow {
-      --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-yellow--BackgroundColor);
-      --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-yellow--Color);
-      --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-yellow--BorderColor);
-      --#{$avatar}__initials--Color: var(--#{$avatar}--m-yellow__initials--Color);
-    }
-  
-    &.pf-m-green {
-      --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-green--BackgroundColor);
-      --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-green--Color);
-      --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-green--BorderColor);
-      --#{$avatar}__initials--Color: var(--#{$avatar}--m-green__initials--Color);
-    }
-  
-    &.pf-m-teal {
-      --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-teal--BackgroundColor);
-      --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-teal--Color);
-      --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-teal--BorderColor);
-      --#{$avatar}__initials--Color: var(--#{$avatar}--m-teal__initials--Color);
-    }
-  
-    &.pf-m-blue {
-      --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-blue--BackgroundColor);
-      --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-blue--Color);
-      --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-blue--BorderColor);
-      --#{$avatar}__initials--Color: var(--#{$avatar}--m-blue__initials--Color);
-    }
-  
-    &.pf-m-purple {
-      --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-purple--BackgroundColor);
-      --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-purple--Color);
-      --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-purple--BorderColor);
-      --#{$avatar}__initials--Color: var(--#{$avatar}--m-purple__initials--Color);
-    }
-    
-    &.pf-m-gray {
-      --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-gray--BackgroundColor);
-      --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-gray--Color);
-      --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-gray--BorderColor);
-      --#{$avatar}__initials--Color: var(--#{$avatar}--m-gray__initials--Color);
-    }
+  &.pf-m-red {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-red--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-red--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-red--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-red__initials--Color);
+  }
+
+  &.pf-m-orangered {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-orangered--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-orangered--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-orangered--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-orangered__initials--Color);
+  }
+
+  &.pf-m-orange {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-orange--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-orange--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-orange--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-orange__initials--Color);
+  }
+
+  &.pf-m-yellow {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-yellow--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-yellow--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-yellow--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-yellow__initials--Color);
+  }
+
+  &.pf-m-green {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-green--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-green--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-green--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-green__initials--Color);
   }
 
-  .#{$avatar}__initials {
-    font-family: var(--#{$avatar}__initials--FontFamily, revert);
-    font-size: var(--#{$avatar}__initials--FontSize);
-    font-weight: var(--#{$avatar}__initials--FontWeight);
-    color: var(--#{$avatar}__initials--Color);
+  &.pf-m-teal {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-teal--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-teal--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-teal--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-teal__initials--Color);
   }
+
+  &.pf-m-blue {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-blue--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-blue--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-blue--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-blue__initials--Color);
+  }
+
+  &.pf-m-purple {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-purple--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-purple--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-purple--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-purple__initials--Color);
+  }
+  
+  &.pf-m-gray {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-gray--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-gray--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-gray--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-gray__initials--Color);
+  }
+}
+
+.#{$avatar}__initials {
+  font-family: var(--#{$avatar}__initials--FontFamily, revert);
+  font-size: var(--#{$avatar}__initials--FontSize);
+  font-weight: var(--#{$avatar}__initials--FontWeight);
+  color: var(--#{$avatar}__initials--Color);
 }

package/components/Banner/banner.css

@@ -21,7 +21,9 @@
   --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);
+  --pf-v6-c-banner--link--clicked--Color: var(--pf-v6-c-banner--Color);
   --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
   --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -130,6 +132,7 @@
 .pf-v6-c-banner a {
   color: var(--pf-v6-c-banner--link--Color);
   text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
+  text-decoration-color: var(--pf-v6-c-banner--a--TextDecorationColor);
 }
 .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
   --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -141,7 +144,11 @@
 .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
   --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
   --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
+  --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-v6-c-banner--link--clicked--Color);
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
+  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
+  --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
   text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
 }
 .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {

package/components/Banner/banner.scss

@@ -22,7 +22,9 @@
   --#{$banner}--link--Color: var(--#{$banner}--Color);
   --#{$banner}--link--TextDecoration: underline;
   --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
+  --#{$banner}--link--clicked--Color: var(--#{$banner}--Color);
   --#{$banner}--link--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --#{$banner}--link--TextDecorationColor: currentcolor;
 
   // modifier variables
   --#{$banner}--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
@@ -154,6 +156,7 @@
   a {
     color: var(--#{$banner}--link--Color);
     text-decoration-line: var(--#{$banner}--link--TextDecoration);
+    text-decoration-color: var(--#{$banner}--a--TextDecorationColor);
 
     &:hover:not(.pf-m-disabled) {
       --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
@@ -171,7 +174,11 @@
   .#{$button}.pf-m-inline {
     --#{$button}--m-link--m-inline--Color: var(--#{$banner}--link--Color);
     --#{$button}--m-link--m-inline--hover--Color: var(--#{$banner}--link--hover--Color);
+    --#{$button}--m-link--m-inline--m-clicked--Color: var(--#{$banner}--link--clicked--Color);
     --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
+    --#{$button}--m-link--m-inline--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
+    --#{$button}--m-link--m-inline--hover--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
+    --#{$button}--m-link--m-inline--m-clicked--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
 
     text-decoration-line: var(--#{$banner}--link--TextDecoration);
 

package/components/Button/button.css

@@ -126,6 +126,10 @@
   --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
   --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
+  --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
   --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
   --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
   --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
@@ -140,6 +144,8 @@
   --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+  --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+  --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
   --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -512,9 +518,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
   --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
   --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
-  --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
+  --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine);
+  --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle);
+  --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor);
+  --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
   --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
   --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
+  --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color);
+  --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color);
   --pf-v6-c-button--BorderWidth: 0;
   --pf-v6-c-button--hover--BorderWidth: 0;
   --pf-v6-c-button--m-clicked--BorderWidth: 0;
@@ -527,6 +538,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
   --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
 }
+.pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked {
+  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
+}
 .pf-v6-c-button.pf-m-link.pf-m-danger {
   --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
   --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);

package/components/Button/button.scss

@@ -144,6 +144,10 @@
   --#{$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--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
+  --#{$button}--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --#{$button}--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --#{$button}--m-link--m-inline--m-clicked--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);
@@ -158,6 +162,8 @@
   --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
   --#{$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--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+  --#{$button}--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
 
   // Plain
   --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
@@ -588,9 +594,14 @@
       --#{$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-clicked--TextDecorationLine: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationLine);
+      --#{$button}--m-clicked--TextDecorationStyle: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationStyle);
+      --#{$button}--m-clicked--TextDecorationColor: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationColor);
+      --#{$button}--m-clicked--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--m-clicked--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}--m-link--m-clicked--Color: var(--#{$button}--m-link--m-inline--m-clicked--Color);
+      --#{$button}--m-link--m-clicked__icon--Color: var(--#{$button}--m-link--m-inline--m-clicked__icon--Color);
       --#{$button}--BorderWidth: 0;
       --#{$button}--hover--BorderWidth: 0;
       --#{$button}--m-clicked--BorderWidth: 0;
@@ -605,6 +616,11 @@
       &:focus {
         --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--hover--TextUnderlineOffset);
       }
+
+      &:active,
+      &.pf-m-clicked {
+        --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset);
+      }
     }
 
     &.pf-m-danger {

package/components/DragDrop/drag-drop.css

@@ -3,6 +3,7 @@
   --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
   --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
+  --pf-v6-c-draggable--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
   --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -17,6 +18,7 @@
   --pf-v6-c-draggable--Cursor: var(--pf-v6-c-draggable--m-dragging--Cursor);
   position: relative;
   background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
+  border-radius: var(--pf-v6-c-draggable--m-dragging--BorderRadius);
   box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
 }
 .pf-v6-c-draggable.pf-m-dragging::after {
@@ -36,6 +38,7 @@
 
 .pf-v6-c-droppable {
   --pf-v6-c-droppable--before--BackgroundColor: transparent;
+  --pf-v6-c-droppable--before--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-droppable--before--Opacity: 0;
   --pf-v6-c-droppable--after--BorderWidth: 0;
   --pf-v6-c-droppable--after--BorderColor: transparent;
@@ -58,6 +61,7 @@
 }
 .pf-v6-c-droppable::before {
   background-color: var(--pf-v6-c-droppable--before--BackgroundColor);
+  border-radius: var(--pf-v6-c-droppable--before--BorderRadius);
   opacity: var(--pf-v6-c-droppable--before--Opacity);
 }
 .pf-v6-c-droppable::after {

package/components/DragDrop/drag-drop.scss

@@ -5,6 +5,7 @@
   --#{$draggable}--m-dragging--Cursor: grabbing;
   --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$draggable}--m-dragging--BackgroundColor: transparent;
+  --#{$draggable}--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$draggable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
   --#{$draggable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
   --#{$draggable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -20,6 +21,7 @@
 
     position: relative;
     background-color: var(--#{$draggable}--m-dragging--BackgroundColor);
+    border-radius: var(--#{$draggable}--m-dragging--BorderRadius);
     box-shadow: var(--#{$draggable}--m-dragging--BoxShadow);
 
     &::after {
@@ -42,6 +44,7 @@
 
 @include pf-root($droppable) {
   --#{$droppable}--before--BackgroundColor: transparent;
+  --#{$droppable}--before--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$droppable}--before--Opacity: 0;
   --#{$droppable}--after--BorderWidth: 0;
   --#{$droppable}--after--BorderColor: transparent;
@@ -67,6 +70,7 @@
 
   &::before {
     background-color: var(--#{$droppable}--before--BackgroundColor);
+    border-radius: var(--#{$droppable}--before--BorderRadius);
     opacity: var(--#{$droppable}--before--Opacity);
   }
 

package/components/Page/page.css

@@ -14,11 +14,12 @@
   --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
   --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
   --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
-  --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
+  --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
   --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
-  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
+  --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
   --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
-  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
+  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
   --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
   --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -414,8 +415,6 @@
 }
 @media (min-width: 62rem) {
   .pf-v6-c-page__dock {
-    --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
-    --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
     position: revert;
     inset: revert;
     visibility: revert;
@@ -443,6 +442,9 @@
 }
 @media (min-width: 62rem) {
   .pf-v6-c-page__dock-main {
+    --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
+    --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
+    --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
     --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
     --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
     --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);

package/components/Page/page.scss

@@ -27,11 +27,12 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
   --#{$page}__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
   --#{$page}__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
-  --#{$page}__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
+  --#{$page}__dock-main--BorderInlineEndWidth: 0;
   --#{$page}__dock-main--BorderInlineEndColor: transparent;
-  --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
+  --#{$page}__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
   --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
-  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
+  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
 
   // Docked nav
   --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
@@ -285,7 +286,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$page}__main-container--MarginBlockStart: var(--#{$page}__main-container--MarginBlockStart--glass);
     --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--MaxHeight--glass);
     --#{$page}--m-dock__main-container--MaxHeight: var(--#{$page}--m-dock__main-container--MaxHeight--glass);
-    --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);  
+    --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);
   }
 
   @media (min-width: $pf-v6-global--breakpoint--xl) {
@@ -447,9 +448,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
-    --#{$page}__dock-main--BackgroundColor: var(--#{$page}__dock-main--desktop--BackgroundColor);
-    --#{$page}__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
-
     position: revert;
     inset: revert;
     visibility: revert;
@@ -479,6 +477,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
+    --#{$page}__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--desktop--BorderInlineEndWidth);
+    --#{$page}__dock-main--BackgroundColor: var(--#{$page}__dock-main--desktop--BackgroundColor);
+    --#{$page}__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
     --#{$page}__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
     --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
     --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--BorderInlineEndWidth);
@@ -975,4 +976,4 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
       flex-grow: 1;
     }
   }
-}
+}

package/components/Panel/panel.css

@@ -5,7 +5,7 @@
   --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-panel--BoxShadow: none;
   --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-panel--before--BorderWidth: 0;
+  --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);

package/components/Panel/panel.scss

@@ -9,12 +9,12 @@
   --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--medium);
 
   // border
-  --#{$panel}--before--BorderWidth: 0;
+  --#{$panel}--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
 
   // secondary modifier
   --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); // TODO - remove in a breaking change
 
   // bordered
   --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);

package/components/Table/table.css

@@ -155,7 +155,7 @@
   --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
   --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
-  --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
+  --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: initial;
   --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
   --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -198,16 +198,13 @@
 .pf-v6-c-table.pf-m-fixed {
   table-layout: fixed;
 }
-.pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
+.pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th::after {
   opacity: 0;
   transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
   transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
   transition-property: opacity;
 }
-.pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
-  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
-}
-.pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after {
+.pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead .pf-v6-c-table__th::after {
   opacity: 1;
 }
 .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
@@ -218,27 +215,39 @@
   inset-block-start: 0;
   z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
 }
-.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before {
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   content: "";
-  background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
   border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
   box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
 }
-.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) {
-  z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
-}
-.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th::after {
   position: absolute;
   inset: 0;
-  z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
+  z-index: -1;
   pointer-events: none;
   content: "";
+  background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
   border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
 }
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th:first-child::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th:first-child::after {
+  border-start-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
+  border-end-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
+}
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th:last-child::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th:last-child::after {
+  border-start-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
+  border-end-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
+}
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) {
+  z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
+}
+:where(.pf-v6-theme-glass) .pf-v6-c-table.pf-m-sticky-header .pf-m-nested-column-header, :where(.pf-v6-theme-glass) .pf-v6-c-table.pf-m-sticky-header-base .pf-m-nested-column-header {
+  --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
+  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
+}
 .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
   border-block-end: 0;
 }
@@ -949,14 +958,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   vertical-align: bottom;
 }
 .pf-v6-c-table__thead.pf-m-nested-column-header {
+  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
   position: relative;
 }
-.pf-v6-c-table__thead.pf-m-nested-column-header::after {
-  position: absolute;
-  inset: 0;
+.pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__tr:last-child:not(.pf-m-border-row) {
   z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
   pointer-events: none;
-  content: "";
   border-block-end: var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor);
 }
 .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
@@ -997,7 +1004,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   border-block-end: 0;
 }
 .pf-v6-c-table__tr.pf-m-border-row {
-  border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+  height: var(--pf-v6-c-table--border-width--base);
+  background-color: var(--pf-v6-c-table--BorderColor);
 }
 
 .pf-v6-c-table__tfoot {