@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.30

package/components/Avatar/avatar.css

@@ -4,24 +4,87 @@
   --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-avatar--Width: 2.25rem;
   --pf-v6-c-avatar--Height: 2.25rem;
+  --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414);
   --pf-v6-c-avatar--m-sm--Width: 1.5rem;
   --pf-v6-c-avatar--m-sm--Height: 1.5rem;
+  --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
   --pf-v6-c-avatar--m-md--Width: 2.25rem;
   --pf-v6-c-avatar--m-md--Height: 2.25rem;
+  --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
   --pf-v6-c-avatar--m-lg--Width: 4.5rem;
   --pf-v6-c-avatar--m-lg--Height: 4.5rem;
+  --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
   --pf-v6-c-avatar--m-xl--Width: 8rem;
   --pf-v6-c-avatar--m-xl--Height: 8rem;
+  --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
   --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
+  --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
+  --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
+  --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
+  --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
+  --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
+  --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
+  --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+  --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
+  --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
+  --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
+  --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+  --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
+  --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
+  --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
+  --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
+  --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
+  --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
+  --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
+  --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+  --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+  --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
 
 .pf-v6-c-avatar {
   width: var(--pf-v6-c-avatar--Width);
   height: var(--pf-v6-c-avatar--Height);
+  font-size: var(--pf-v6-c-avatar--FontSize);
+  color: var(--pf-v6-c-avatar--Color, inherit);
+  background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
   border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
   border-radius: var(--pf-v6-c-avatar--BorderRadius);
 }
+div.pf-v6-c-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: clip;
+  vertical-align: middle;
+}
+
 .pf-v6-c-avatar.pf-m-bordered {
   --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
   --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -249,4 +312,85 @@
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
   }
+}
+.pf-v6-c-avatar.pf-m-sm {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
+}
+.pf-v6-c-avatar.pf-m-lg {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
+  --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
+}
+.pf-v6-c-avatar.pf-m-xl {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
+  --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
+}
+.pf-v6-c-avatar.pf-m-colorful {
+  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
+}
+.pf-v6-c-avatar.pf-m-red {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-orangered {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-orange {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-yellow {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-green {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-teal {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-blue {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-purple {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-gray {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
+}
+
+.pf-v6-c-avatar__initials {
+  font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
+  font-size: var(--pf-v6-c-avatar__initials--FontSize);
+  font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
+  color: var(--pf-v6-c-avatar__initials--Color);
 }

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

@@ -18,9 +18,9 @@
   --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
-  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
 }
 
@@ -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

@@ -29,9 +29,9 @@
   --#{$breadcrumb}__heading--FontSize: var(--#{$breadcrumb}__item--FontSize);
 
   // breadcrumb dropdown
-  --#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --#{$breadcrumb}__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
-  --#{$breadcrumb}__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$breadcrumb}__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --#{$breadcrumb}__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
 }
 
@@ -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);
@@ -245,6 +251,7 @@
   --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
   --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
   --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
+  --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -320,7 +327,6 @@
   --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
   --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
-  --pf-v6-c-button__progress--Opacity: 0;
   --pf-v6-c-button__progress--TranslateY: -50%;
   --pf-v6-c-button__progress--TranslateX: 0;
   --pf-v6-c-button__progress--InsetBlockStart: 50%;
@@ -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);
@@ -747,7 +761,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
   --pf-v6-c-button__icon--TransitionDuration: 0s;
   --pf-v6-c-button__icon--TransitionProperty: scale;
-  --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
   --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
   --pf-v6-c-button--hover__icon--TransitionProperty: scale;
 }
@@ -823,7 +836,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   background: var(--pf-v6-c-button--disabled--BackgroundColor);
 }
 .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
-  border-color: transparent;
+  border-color: var(--pf-v6-c-button--disabled--BorderColor);
 }
 .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
   color: var(--pf-v6-c-button--disabled__icon--Color);
@@ -860,6 +873,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);
@@ -283,7 +289,8 @@
   --#{$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-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold); // TODO - remove in a breaking change
   --#{$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);
@@ -374,7 +381,6 @@
 
   // Progress
   --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
-  --#{$button}__progress--Opacity: 0;
   --#{$button}__progress--TranslateY: -50%;
   --#{$button}__progress--TranslateX: 0;
   --#{$button}__progress--InsetBlockStart: 50%;
@@ -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 {
@@ -859,7 +875,6 @@
     --#{$button}__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
     --#{$button}__icon--TransitionDuration: 0s;
     --#{$button}__icon--TransitionProperty: scale;
-    --#{$button}--hover__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
     --#{$button}--hover__icon--TransitionDuration: 0s;
     --#{$button}--hover__icon--TransitionProperty: scale;
 
@@ -941,7 +956,7 @@
     background: var(--#{$button}--disabled--BackgroundColor);
 
     &::after {
-      border-color: transparent;
+      border-color: var(--#{$button}--disabled--BorderColor);
     }
 
     .#{$button}__icon {
@@ -989,6 +1004,10 @@
     justify-content: flex-start;
     width: 100%;
 
+    .#{$button}__icon {
+      min-width: 1lh;
+    }
+
     @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
       justify-content: center;