@patternfly/patternfly 6.2.0-prerelease.1 → 6.2.0-prerelease.10

package/assets/pficon/pficon.scss

@@ -14,7 +14,7 @@
 	font-variant: normal;
 	font-weight: normal;
 	// speak: none; // only necessary if not using the private unicode range (firstGlyph option)
-	text-decoration: none;
+	text-decoration-line: none;
 	text-transform: none;
 }
 

package/base/normalize.scss

@@ -107,12 +107,12 @@
 
   :where(a) {
     color: var(--pf-t--global--text--color--link--default);
-    text-decoration: var(--pf-t--global--text-decoration--link--line--default);
+    text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
   }
 
   :where(a:hover, a:focus) {
     color: var(--pf-t--global--text--color--link--hover);
-    text-decoration: var(--pf-t--global--text-decoration--link--line--hover);
+    text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
   }
 
   :where(

package/base/patternfly-pf-icons.css

@@ -9,7 +9,7 @@
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
-  text-decoration: none;
+  text-decoration-line: none;
   text-transform: none;
 }
 

package/components/Banner/banner.css

@@ -119,7 +119,7 @@
 }
 .pf-v6-c-banner a {
   color: var(--pf-v6-c-banner--link--Color);
-  text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
+  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
 }
 .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
   --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -132,7 +132,7 @@
   --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
   --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
-  text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
+  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 {
   cursor: not-allowed;

package/components/Banner/banner.scss

@@ -142,7 +142,7 @@
 
   a {
     color: var(--#{$banner}--link--Color);
-    text-decoration: var(--#{$banner}--link--TextDecoration);
+    text-decoration-line: var(--#{$banner}--link--TextDecoration);
 
     &:hover:not(.pf-m-disabled) {
       --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
@@ -162,7 +162,7 @@
     --#{$button}--m-link--hover--Color: var(--#{$banner}--link--hover--Color);
     --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
 
-    text-decoration: var(--#{$banner}--link--TextDecoration);
+    text-decoration-line: var(--#{$banner}--link--TextDecoration);
 
     &:disabled,
     &.pf-m-disabled {

package/components/Breadcrumb/breadcrumb.css

@@ -65,7 +65,8 @@
   font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
   line-height: inherit;
   color: var(--pf-v6-c-breadcrumb__link--Color);
-  text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
   word-break: break-word;
   background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
 }
@@ -79,7 +80,7 @@
 }
 .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
   color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
-  text-decoration: none;
+  text-decoration-line: none;
 }
 button.pf-v6-c-breadcrumb__link {
   border: none;

package/components/Breadcrumb/breadcrumb.scss

@@ -81,7 +81,8 @@
   font-weight: var(--#{$breadcrumb}__link--FontWeight);
   line-height: inherit;
   color: var(--#{$breadcrumb}__link--Color);
-  text-decoration: var(--#{$breadcrumb}__link--TextDecorationLine) var(--#{$breadcrumb}__link--TextDecorationStyle);
+  text-decoration-line: var(--#{$breadcrumb}__link--TextDecorationLine);
+  text-decoration-style: var(--#{$breadcrumb}__link--TextDecorationStyle);
   word-break: break-word;
   background-color: var(--#{$breadcrumb}__link--BackgroundColor);
 
@@ -99,7 +100,7 @@
     &,
     &:is(:hover, :focus) {
       color: var(--#{$breadcrumb}__link--m-current--Color);
-      text-decoration: none;
+      text-decoration-line: none;
     }
   }
 

package/components/Button/button.css

@@ -18,6 +18,7 @@
   --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-button--TextDecorationLine: none;
   --pf-v6-c-button--TextDecorationStyle: none;
+  --pf-v6-c-button--TextDecorationColor: currentcolor;
   --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
@@ -26,6 +27,7 @@
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --pf-v6-c-button--hover--TextDecorationLine: none;
   --pf-v6-c-button--hover--TextDecorationStyle: none;
+  --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BorderColor: transparent;
   --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -110,6 +112,12 @@
   --pf-v6-c-button--span--m-link--m-inline--Display: inline;
   --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
+  --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--TextDecorationColor: currentcolor;
+  --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--hover--TextDecorationColor: currentcolor;
   --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
   --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);
@@ -217,6 +225,7 @@
   --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
   --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v6-c-button--disabled--TextDecorationColor: currentcolor;
   --pf-v6-c-button--disabled--BorderColor: transparent;
   --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
   --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -261,7 +270,9 @@
   line-height: var(--pf-v6-c-button--LineHeight, inherit);
   color: var(--pf-v6-c-button--Color);
   text-align: center;
-  text-decoration: var(--pf-v6-c-button--TextDecorationLine) var(--pf-v6-c-button--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
+  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
@@ -374,6 +385,12 @@
   --pf-v6-c-button--disabled--BackgroundColor: transparent;
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
   --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
+  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
+  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
+  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
+  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
+  --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);
   text-align: start;
   white-space: normal;
   outline-offset: 0.125rem;
@@ -534,7 +551,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
   --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
-  text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
+  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
 }
 .pf-v6-c-button.pf-m-clicked {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
@@ -548,6 +567,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
   color: var(--pf-v6-c-button--disabled--Color);
+  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
   background-color: 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 {

package/components/Button/button.scss

@@ -20,6 +20,7 @@
   --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$button}--TextDecorationLine: none;
   --#{$button}--TextDecorationStyle: none;
+  --#{$button}--TextDecorationColor: currentcolor;
   --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
@@ -30,6 +31,7 @@
   --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --#{$button}--hover--TextDecorationLine: none;
   --#{$button}--hover--TextDecorationStyle: none;
+  --#{$button}--hover--TextDecorationColor: currentcolor;
 
   // Clicked
   --#{$button}--m-clicked--BackgroundColor: transparent;
@@ -128,6 +130,12 @@
   --#{$button}--span--m-link--m-inline--Display: inline;
   --#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+  --#{$button}--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
+  --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
+  --#{$button}--m-link--m-inline--TextDecorationColor: currentcolor;
+  --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
+  --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+  --#{$button}--m-link--m-inline--hover--TextDecorationColor: currentcolor;
 
   // Plain
   --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -259,6 +267,7 @@
   // Disabled
   --#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$button}--disabled--TextDecorationColor: currentcolor;
   --#{$button}--disabled--BorderColor: transparent;
   --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
 
@@ -311,7 +320,9 @@
   line-height: var(--#{$button}--LineHeight, inherit);
   color: var(--#{$button}--Color);
   text-align: center;
-  text-decoration: var(--#{$button}--TextDecorationLine) var(--#{$button}--TextDecorationStyle);
+  text-decoration-line: var(--#{$button}--TextDecorationLine);
+  text-decoration-style: var(--#{$button}--TextDecorationStyle);
+  text-decoration-color: var(--#{$button}--TextDecorationColor);
   white-space: nowrap;
   cursor: pointer; // needed for when a button does not use <button> - eg, <span>
   user-select: none;
@@ -440,6 +451,12 @@
       --#{$button}--disabled--BackgroundColor: transparent;
       --#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
       --#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);
+      --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--Color);
+      --#{$button}--m-link__icon--Color: var(--#{$button}--m-link--m-inline__icon--Color);
+      --#{$button}--TextDecorationColor: var(--#{$button}--m-link--m-inline--TextDecorationColor);
+      --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
+      --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
+      --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
 
       text-align: start;
       white-space: normal;
@@ -623,7 +640,9 @@
     --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-plain--m-no-padding--hover__icon--Color);
     --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
 
-    text-decoration: var(--#{$button}--hover--TextDecorationLine) var(--#{$button}--hover--TextDecorationStyle);
+    text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
+    text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
+    text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
   }
 
   &.pf-m-clicked {
@@ -645,6 +664,7 @@
   &.pf-m-disabled,
   &.pf-m-aria-disabled {
     color: var(--#{$button}--disabled--Color);
+    text-decoration-color: var(--#{$button}--disabled--TextDecorationColor);
     background-color: var(--#{$button}--disabled--BackgroundColor);
 
     &::after {

package/components/Content/content.css

@@ -83,7 +83,8 @@
 
 :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
   color: var(--pf-v6-c-content--a--Color);
-  text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-content--a--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-content--a--TextDecorationStyle);
 }
 :is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) {
   --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);

package/components/Content/content.scss

@@ -119,7 +119,8 @@
     & a
   ) {
     color: var(--#{$content}--a--Color);
-    text-decoration: var(--#{$content}--a--TextDecorationLine) var(--#{$content}--a--TextDecorationStyle);
+    text-decoration-line: var(--#{$content}--a--TextDecorationLine);
+    text-decoration-style: var(--#{$content}--a--TextDecorationStyle);
 
     &:is(:hover, :focus) {
       --#{$content}--a--Color: var(--#{$content}--a--hover--Color);

package/components/DescriptionList/description-list.css

@@ -14,7 +14,7 @@
   --pf-v6-c-description-list__term--Display: inline;
   --pf-v6-c-description-list__term--sm--Display: flex;
   --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -196,7 +196,8 @@
   min-width: 0;
 }
 .pf-v6-c-description-list__text.pf-m-help-text {
-  text-decoration: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine) var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle);
   text-underline-offset: var(--pf-v6-c-description-list__text--m-help-text--TextUnderlineOffset);
   cursor: pointer;
 }

package/components/DescriptionList/description-list.scss

@@ -24,7 +24,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}__term--Display: inline;
   --#{$description-list}__term--sm--Display: flex;
   --#{$description-list}__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$description-list}__term--LineHeight: var(--pf-t--global--font--line-height--body);
 
   @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
@@ -179,7 +179,8 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   min-width: 0; // this allows overflow-wrap to work
 
   &.pf-m-help-text {
-    text-decoration: var(--#{$description-list}__text--m-help-text--TextDecorationLine) var(--#{$description-list}__text--m-help-text--TextDecorationStyle);
+    text-decoration-line: var(--#{$description-list}__text--m-help-text--TextDecorationLine);
+    text-decoration-style: var(--#{$description-list}__text--m-help-text--TextDecorationStyle);
     text-underline-offset: var(--#{$description-list}__text--m-help-text--TextUnderlineOffset);
     cursor: pointer;
 

package/components/Drawer/drawer.css

@@ -15,7 +15,8 @@
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
+  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
   --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
   --pf-v6-c-drawer__panel--FlexBasis: 100%;
   --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -229,6 +230,7 @@
   overflow: auto;
   background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
   box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
+  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
   transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
   -webkit-overflow-scrolling: touch;

package/components/Drawer/drawer.scss

@@ -27,7 +27,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
   --#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$drawer}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --#{$drawer}__panel--TransitionDuration: 250ms;
+  --#{$drawer}__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$drawer}__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
   --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
   --#{$drawer}__panel--FlexBasis: 100%;
   --#{$drawer}__panel--md--FlexBasis--min: #{pf-size-prem(24px)};
@@ -298,6 +299,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   overflow: auto;
   background-color: var(--#{$drawer}__panel--BackgroundColor);
   box-shadow: var(--#{$drawer}__panel--BoxShadow);
+  transition-timing-function: var(--#{$drawer}__panel--TransitionTimingFunction);
   transition-duration: var(--#{$drawer}__panel--TransitionDuration);
   transition-property: var(--#{$drawer}__panel--TransitionProperty);
   -webkit-overflow-scrolling: touch;

package/components/Form/form.css

@@ -10,16 +10,16 @@
   --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
   --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
-  --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-form__label--hover--Cursor: pointer;
   --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
   --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
-  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
   --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -333,9 +333,6 @@
   font-size: var(--pf-v6-c-form__label--FontSize);
   line-height: var(--pf-v6-c-form__label--LineHeight);
 }
-.pf-v6-c-form__label::selection {
-  background-color: none;
-}
 .pf-v6-c-form__label:not(.pf-m-disabled):hover {
   cursor: var(--pf-v6-c-form__label--hover--Cursor);
 }

package/components/Form/form.scss

@@ -67,7 +67,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
 
   // Label
-  --#{$form}__label--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__label--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$form}__label--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$form}__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$form}__label--hover--Cursor: pointer;
@@ -78,11 +78,11 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
   // Required labels
   --#{$form}__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
-  --#{$form}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__label-required--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$form}__label-required--Color: var(--pf-t--global--color--status--danger--default);
 
   // Field level help
-  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Form group label info
   --#{$form}__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
@@ -261,10 +261,6 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   font-size: var(--#{$form}__label--FontSize);
   line-height: var(--#{$form}__label--LineHeight);
 
-  &::selection {
-    background-color: none;
-  }
-
   &:not(.pf-m-disabled):hover {
     cursor: var(--#{$form}__label--hover--Cursor);
   }

package/components/JumpLinks/jump-links.css

@@ -186,7 +186,7 @@
   padding-block-end: var(--pf-v6-c-jump-links__link--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-jump-links__link--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-jump-links__link--PaddingInlineEnd);
-  text-decoration: none;
+  text-decoration-line: none;
   outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset);
 }
 .pf-v6-c-jump-links__link:is(:hover, :focus) {

package/components/JumpLinks/jump-links.scss

@@ -160,7 +160,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   padding-block-end: var(--#{$jump-links}__link--PaddingBlockEnd);
   padding-inline-start: var(--#{$jump-links}__link--PaddingInlineStart);
   padding-inline-end: var(--#{$jump-links}__link--PaddingInlineEnd);
-  text-decoration: none;
+  text-decoration-line: none;
   outline-offset: var(--#{$jump-links}__link--OutlineOffset);
 
   &:is(:hover, :focus) {

package/components/Label/label.css

@@ -381,7 +381,8 @@
   --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
 }
 .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
-  text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
   text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-editable-active {
@@ -414,7 +415,7 @@
   --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
 }
 .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
-  text-decoration: none;
+  text-decoration-line: none;
 }
 .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
   --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);

package/components/Label/label.scss

@@ -458,7 +458,8 @@
     }
 
     .#{$label}__text {
-      text-decoration: var(--#{$label}--m-editable--TextDecorationLine) var(--#{$label}--m-editable--TextDecorationStyle);
+      text-decoration-line: var(--#{$label}--m-editable--TextDecorationLine);
+      text-decoration-style: var(--#{$label}--m-editable--TextDecorationStyle);
       text-underline-offset: var(--#{$label}--m-editable--TextUnderlineOffset);
     }
   }
@@ -500,7 +501,7 @@
     .#{$label}__content {
       &,
       &:is(:hover, :focus) {
-        text-decoration: none;
+        text-decoration-line: none;
       }
 
       &:is(:hover, :focus) {

package/components/Menu/menu.css

@@ -177,11 +177,20 @@
 .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
   --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
   --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
-  --pf-v6-c-menu__item-external-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__list-item--BackgroundColor: transparent;
+  --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
+}
+.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled),
+.pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled) {
   pointer-events: none;
 }
+.pf-v6-c-menu__list-item.pf-m-aria-disabled .pf-v6-c-menu__item,
+.pf-v6-c-menu__item-action.pf-m-aria-disabled .pf-v6-c-menu__item {
+  cursor: default;
+}
 
 [class*=pf-v6-c-menu]:is([hidden]) {
   display: none;
@@ -429,7 +438,7 @@
   line-height: var(--pf-v6-c-menu__item--LineHeight);
   color: var(--pf-v6-c-menu__item--Color);
   text-align: start;
-  text-decoration: none;
+  text-decoration-line: none;
   background-color: var(--pf-v6-c-menu__item--BackgroundColor);
   border: 0;
   outline-offset: var(--pf-v6-c-menu--OutlineOffset);

package/components/Menu/menu.scss

@@ -175,12 +175,22 @@
   &:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled="true"]) {
     --#{$menu}__item--Color: var(--#{$menu}__item--m-disabled--Color);
     --#{$menu}__item-toggle-icon--Color: var(--#{$menu}--icon--disabled--Color);
-    --#{$menu}__item-external-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}__list-item--BackgroundColor: transparent;
+    --#{$menu}__list-item--hover--BackgroundColor: transparent;
+  }
 
+  &:is(.pf-m-disabled, :disabled) {
     pointer-events: none;
   }
+
+  &.pf-m-aria-disabled {
+    .#{$menu}__item {
+      cursor: default;
+    }
+  }
 }
 
 // - Menu hidden
@@ -518,7 +528,7 @@
   line-height: var(--#{$menu}__item--LineHeight);
   color: var(--#{$menu}__item--Color);
   text-align: start;
-  text-decoration: none;
+  text-decoration-line: none;
   background-color: var(--#{$menu}__item--BackgroundColor);
   border: 0;
   outline-offset: var(--#{$menu}--OutlineOffset);

package/components/MenuToggle/menu-toggle.css

@@ -54,6 +54,7 @@
   --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
   --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
   --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
+  --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
   --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
   --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -61,6 +62,7 @@
   --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
   --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
+  --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
   --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
   --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
   --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
@@ -186,12 +188,14 @@
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
   --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
+  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
   --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
   --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
   --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
   --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
   --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
   --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
   --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);

package/components/MenuToggle/menu-toggle.scss

@@ -70,6 +70,7 @@
   // * Menu toggle secondary
   --#{$menu-toggle}--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
   --#{$menu-toggle}--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
+  --#{$menu-toggle}--m-secondary--BackgroundColor: transparent;
   --#{$menu-toggle}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
   --#{$menu-toggle}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
   --#{$menu-toggle}--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -77,6 +78,7 @@
   --#{$menu-toggle}--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --#{$menu-toggle}--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
   --#{$menu-toggle}--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
+  --#{$menu-toggle}--m-secondary--expanded--BackgroundColor: transparent;
   --#{$menu-toggle}--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
   --#{$menu-toggle}--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
   --#{$menu-toggle}--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
@@ -236,12 +238,14 @@
     --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-secondary--PaddingInlineStart);
     --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-secondary--PaddingInlineEnd);
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-secondary--Color);
+    --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--m-secondary--BackgroundColor);
     --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-secondary--BorderColor);
     --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-secondary--BorderRadius);
     --#{$menu-toggle}--hover--Color: var(--#{$menu-toggle}--m-secondary--hover--Color);
     --#{$menu-toggle}--hover--BorderWidth: var(--#{$menu-toggle}--m-secondary--hover--BorderWidth);
     --#{$menu-toggle}--hover--BorderColor: var(--#{$menu-toggle}--m-secondary--hover--BorderColor);
     --#{$menu-toggle}--expanded--Color: var(--#{$menu-toggle}--m-secondary--expanded--Color);
+    --#{$menu-toggle}--expanded--BackgroundColor: var(--#{$menu-toggle}--m-secondary--expanded--BackgroundColor);
     --#{$menu-toggle}--expanded--BorderWidth: var(--#{$menu-toggle}--m-secondary--expanded--BorderWidth);
     --#{$menu-toggle}--hover__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--hover__toggle-icon--Color);
     --#{$menu-toggle}--expanded__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color);