@patternfly/patternfly 6.6.0-prerelease.2 → 6.6.0-prerelease.21

package/components/Avatar/avatar.scss

@@ -9,26 +9,93 @@ $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: 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: 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: 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: 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: calc(#{pf-size-prem(128px)} / 1.414);
 
   // Bordered
   --#{$avatar}--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
   --#{$avatar}--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
+
+  // Colorful
+  --#{$avatar}--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$avatar}--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$avatar}--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
+  --#{$avatar}--m-gray--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$avatar}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --#{$avatar}--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
+  --#{$avatar}--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
+  --#{$avatar}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --#{$avatar}--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
+  --#{$avatar}--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
+  --#{$avatar}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --#{$avatar}--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
+  --#{$avatar}--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
+  --#{$avatar}--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --#{$avatar}--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+  --#{$avatar}--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
+  --#{$avatar}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --#{$avatar}--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
+  --#{$avatar}--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
+  --#{$avatar}--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --#{$avatar}--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+  --#{$avatar}--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
+  --#{$avatar}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --#{$avatar}--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
+  --#{$avatar}--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
+  --#{$avatar}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --#{$avatar}--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
+  --#{$avatar}--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);  
+  
+  // Initials
+  --#{$avatar}__initials--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$avatar}__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$avatar}--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$avatar}--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$avatar}--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
+  --#{$avatar}--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --#{$avatar}--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$avatar}--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
+  --#{$avatar}--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --#{$avatar}--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$avatar}--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
+  --#{$avatar}--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --#{$avatar}--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --#{$avatar}--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --#{$avatar}--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+  --#{$avatar}--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --#{$avatar}--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+  --#{$avatar}--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --#{$avatar}--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
 
 .#{$avatar} {
   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);
@@ -40,4 +107,98 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
       @include pf-v6-build-css-variable-stack("--#{$avatar}--Height", "--#{$avatar}--m-#{$size}--Height", $pf-v6-c-avatar--breakpoint-map);
     }
   }
+
+  &.pf-m-sm {
+    --#{$avatar}--FontSize: var(--#{$avatar}--m-sm--FontSize);
+    --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-sm__initials--FontSize);
+    --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-sm__initials--FontWeight);
+  }
+
+  &.pf-m-lg {
+    --#{$avatar}--FontSize: var(--#{$avatar}--m-lg--FontSize);
+    --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-lg__initials--FontSize);
+    --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-lg__initials--FontWeight);
+    --#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-lg__initials--FontFamily);
+  }
+
+  &.pf-m-xl {
+    --#{$avatar}--FontSize: var(--#{$avatar}--m-xl--FontSize);
+    --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-xl__initials--FontSize);
+    --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-xl__initials--FontWeight);
+    --#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-xl__initials--FontFamily);
+  }
+
+  &.pf-m-colorful {
+    --#{$avatar}--BorderWidth: var(--#{$avatar}--m-colorful--BorderWidth);
+  }
+  
+  &.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);
+  }
+
+  &.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/Breadcrumb/breadcrumb.css

@@ -68,7 +68,7 @@
   font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
   line-height: inherit;
   color: var(--pf-v6-c-breadcrumb__link--Color);
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);

package/components/Breadcrumb/breadcrumb.scss

@@ -83,7 +83,7 @@
   font-weight: var(--#{$breadcrumb}__link--FontWeight);
   line-height: inherit;
   color: var(--#{$breadcrumb}__link--Color);
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   text-decoration-line: var(--#{$breadcrumb}__link--TextDecorationLine);
   text-decoration-style: var(--#{$breadcrumb}__link--TextDecorationStyle);
   text-decoration-color: var(--#{$breadcrumb}__link--TextDecorationColor);

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);
@@ -860,6 +874,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   justify-content: flex-start;
   width: 100%;
 }
+.pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon {
+  min-width: 1lh;
+}
 @media (min-width: 62rem) {
   .pf-v6-c-button.pf-m-docked {
     justify-content: center;

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 {
@@ -989,6 +1005,10 @@
     justify-content: flex-start;
     width: 100%;
 
+    .#{$button}__icon {
+      min-width: 1lh;
+    }
+
     @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
       justify-content: center;
 

package/components/ClipboardCopy/clipboard-copy.css

@@ -86,7 +86,7 @@
 }
 
 .pf-v6-c-clipboard-copy__text {
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   white-space: normal;
 }
 .pf-v6-c-clipboard-copy__text.pf-m-code {

package/components/ClipboardCopy/clipboard-copy.scss

@@ -108,7 +108,7 @@
 }
 
 .#{$clipboard-copy}__text {
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   white-space: normal;
 
   &.pf-m-code {

package/components/Compass/compass.css

@@ -315,15 +315,18 @@
   inset-inline-start: 0;
   z-index: var(--pf-v6-c-compass__dock--ZIndex);
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   grid-area: dock;
   width: var(--pf-v6-c-compass__dock--Width);
   translate: -100% 0;
-  transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
+  transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-compass__dock--TransitionDuration--slide);
 }
 .pf-v6-c-compass__dock.pf-m-expanded {
   --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
+  visibility: visible;
   translate: 0;
+  transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s 0s;
 }
 @media (min-width: 62rem) {
   .pf-v6-c-compass__dock {
@@ -331,6 +334,7 @@
     --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
     position: revert;
     inset: revert;
+    visibility: revert;
     width: auto;
     translate: 0;
   }

package/components/Compass/compass.scss

@@ -324,16 +324,19 @@
   inset-inline-start: 0;
   z-index: var(--#{$compass}__dock--ZIndex);
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   grid-area: dock;
   width: var(--#{$compass}__dock--Width);
   translate: -100% 0;
-  transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide);
+  transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide), visibility 0s var(--#{$compass}__dock--TransitionDuration--slide);
 
   &.pf-m-expanded {
     --#{$compass}__dock--TransitionDuration--slide: var(--#{$compass}__dock--m-expanded--TransitionDuration--slide);
 
+    visibility: visible;
     translate: 0;
+    transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide), visibility 0s 0s;
   }
 
   @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
@@ -342,6 +345,7 @@
 
     position: revert;
     inset: revert;
+    visibility: revert;
     width: auto;
     translate: 0;
   }

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/DualListSelector/dual-list-selector.css

@@ -76,7 +76,7 @@
   --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
-  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
+  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
   --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);

package/components/DualListSelector/dual-list-selector.scss

@@ -106,7 +106,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
   // Icon
   --#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
-  --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
+  --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
   --#{$dual-list-selector}__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);

package/components/Masthead/masthead.css

@@ -3,7 +3,7 @@
   --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
   --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
-  --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);

package/components/Masthead/masthead.scss

@@ -9,7 +9,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   --#{$masthead}--ColumnGap: var(--pf-t--global--spacer--gutter--default);
   --#{$masthead}--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --#{$masthead}--PaddingBlock: var(--pf-t--global--spacer--md);
-  --#{$masthead}--PaddingInline: var(--pf-t--global--spacer--lg);
+  --#{$masthead}--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
   --#{$masthead}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$masthead}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 

package/components/Menu/menu.css

@@ -220,7 +220,7 @@
   --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
   --pf-v6-c-menu__item-external--Color: transparent;
   --pf-v6-c-menu__item-select-icon--Color: transparent;
-  --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
+  --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
   --pf-v6-c-menu__list-item--BackgroundColor: transparent;
   --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
   --pf-v6-c-menu__list-item--hover--BorderColor: transparent;
@@ -587,7 +587,7 @@
 .pf-v6-c-menu__item-description {
   font-size: var(--pf-v6-c-menu__item-description--FontSize);
   color: var(--pf-v6-c-menu__item-description--Color);
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
 }
 
 .pf-v6-c-menu__item-check .pf-v6-c-check {

package/components/Menu/menu.scss

@@ -17,7 +17,7 @@
   --#{$menu}--BorderRadius: calc(var(--#{$menu}__item--BorderRadius) + var(--#{$menu}--PaddingBlockStart));
   --#{$menu}--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
   --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm);
-  --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled); // TODO: remove in breaking change
   --#{$menu}--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
   --#{$menu}--TransitionDuration: 0s;
   --#{$menu}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -205,7 +205,7 @@
     --#{$menu}__item-toggle-icon--Color: var(--#{$menu}--icon--disabled--Color);
     --#{$menu}__item-external--Color: transparent;
     --#{$menu}__item-select-icon--Color: transparent;
-    --#{$menu}__item-description--Color: var(--#{$menu}--icon--disabled--Color);
+    --#{$menu}__item-description--Color: var(--#{$menu}__item--m-disabled--Color);
     --#{$menu}__list-item--BackgroundColor: transparent;
     --#{$menu}__list-item--hover--BackgroundColor: transparent;
     --#{$menu}__list-item--hover--BorderColor: transparent;
@@ -627,7 +627,7 @@
 .#{$menu}__item-description {
   font-size: var(--#{$menu}__item-description--FontSize);
   color: var(--#{$menu}__item-description--Color);
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
 }
 
 // - Menu check

package/components/MenuToggle/menu-toggle.css

@@ -357,6 +357,9 @@
   justify-content: flex-start;
   width: 100%;
 }
+.pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
+  min-width: 1lh;
+}
 @media (min-width: 62rem) {
   .pf-v6-c-menu-toggle.pf-m-docked {
     justify-content: center;

package/components/MenuToggle/menu-toggle.scss

@@ -438,6 +438,10 @@
     justify-content: flex-start;
     width: 100%;
 
+    .#{$menu-toggle}__icon {
+      min-width: 1lh;
+    }
+
     @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
       justify-content: center;
       width: auto;
@@ -459,7 +463,6 @@
       display: revert;
     }
   }
-
 }
 
 // Register the property type for the custom property to be animatable