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

package/components/_index.css

@@ -1197,7 +1197,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);
@@ -1210,7 +1210,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;
@@ -1349,7 +1349,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);
 }
@@ -1363,7 +1364,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;
@@ -1410,6 +1411,7 @@ button.pf-v6-c-breadcrumb__link {
   --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;
@@ -1418,6 +1420,7 @@ button.pf-v6-c-breadcrumb__link {
   --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);
@@ -1502,6 +1505,12 @@ button.pf-v6-c-breadcrumb__link {
   --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);
@@ -1609,6 +1618,7 @@ button.pf-v6-c-breadcrumb__link {
   --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);
@@ -1618,6 +1628,8 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button__icon--MarginInlineEnd: 0;
   --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
   --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
+  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
+  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--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%;
@@ -1653,7 +1665,9 @@ button.pf-v6-c-breadcrumb__link {
   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;
@@ -1766,6 +1780,12 @@ button.pf-v6-c-breadcrumb__link {
   --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;
@@ -1926,7 +1946,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);
@@ -1940,6 +1962,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 {
@@ -1971,6 +1994,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
   opacity: 0;
 }
+.pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
+  animation-name: pf-v6-c-button-icon-notify;
+  animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
+  animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
+}
 
 .pf-v6-c-button__icon {
   margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -2001,6 +2029,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   align-items: center;
 }
 
+@keyframes pf-v6-c-button-icon-notify {
+  33% {
+    transform: rotate(30deg);
+  }
+  66% {
+    transform: rotate(-60deg);
+  }
+}
 .pf-v6-c-calendar-month {
   --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -3045,7 +3081,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 
 :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);
@@ -4083,7 +4120,7 @@ ul) {
   --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);
@@ -4265,7 +4302,8 @@ ul) {
   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;
 }
@@ -5168,7 +5206,8 @@ ul) {
   --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;
@@ -5382,6 +5421,7 @@ ul) {
   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;
@@ -6278,16 +6318,16 @@ ul) {
   --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);
@@ -6601,9 +6641,6 @@ ul) {
   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);
 }
@@ -7818,7 +7855,7 @@ label.pf-v6-c-input-group__text {
   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) {
@@ -8259,7 +8296,8 @@ label.pf-v6-c-input-group__text {
   --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 {
@@ -8292,7 +8330,7 @@ label.pf-v6-c-input-group__text {
   --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);
@@ -9559,11 +9597,20 @@ ul.pf-v6-c-list {
 .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;
@@ -9811,7 +9858,7 @@ ul.pf-v6-c-list {
   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);
@@ -10021,6 +10068,7 @@ ul.pf-v6-c-list {
   --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);
@@ -10028,6 +10076,7 @@ ul.pf-v6-c-list {
   --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);
@@ -10153,12 +10202,14 @@ ul.pf-v6-c-list {
   --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);
@@ -10839,13 +10890,15 @@ ul.pf-v6-c-list {
   --pf-v6-c-nav__item--ScrollSnapAlign: end;
   --pf-v6-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-nav__section-title--PaddingBlockStart: var(--pf-v6-c-nav__link--PaddingBlockStart);
-  --pf-v6-c-nav__section-title--PaddingBlockEnd: var(--pf-v6-c-nav__link--PaddingBlockEnd);
+  --pf-v6-c-nav__section-title--PaddingBlockStart: 0;
+  --pf-v6-c-nav__section-title--PaddingBlockEnd: 0;
   --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
   --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
   --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
   --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
   --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav__link--AlignItems: baseline;
   --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -10856,10 +10909,19 @@ ul.pf-v6-c-list {
   --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
   --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
   --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-nav__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-nav__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-nav__link--m-current--TransitionDuration--color: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
+  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
+  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
   --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
+  --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
+  --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -10888,6 +10950,12 @@ ul.pf-v6-c-list {
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-nav {
+    --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
+    --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
+  }
+}
 
 .pf-v6-c-nav,
 .pf-v6-c-nav__section,
@@ -10939,7 +11007,7 @@ ul.pf-v6-c-list {
 }
 
 [class^=pf-v6-c-nav][hidden] {
-  display: none;
+  visibility: hidden;
 }
 
 .pf-v6-c-nav__nav,
@@ -10948,30 +11016,43 @@ ul.pf-v6-c-list {
   --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
   --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
   --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
+  visibility: visible;
 }
 
 .pf-v6-c-nav__list {
   row-gap: var(--pf-v6-c-nav__list--RowGap);
   column-gap: var(--pf-v6-c-nav__list--ColumnGap);
+  min-height: 0;
 }
 
 .pf-v6-c-nav__subnav {
   --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
+  grid-template-rows: 1fr;
+  min-height: 0;
+  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
+  overflow-y: clip;
+  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
+  transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
+  transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
+}
+.pf-v6-c-nav__subnav[hidden] {
+  --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
+  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
+  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
+  grid-template-rows: 0fr;
+  opacity: 0;
 }
 
 .pf-v6-c-nav__item {
-  row-gap: var(--pf-v6-c-nav__item--RowGap);
   scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
 }
 .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
   margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
 }
-.pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
-  margin-block-end: var(--pf-v6-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v6-c-nav__item--RowGap));
-}
-.pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) + .pf-v6-c-nav__item > .pf-v6-c-nav__link::before {
-  inset-block-start: calc(var(--pf-v6-c-nav__item--RowGap) * -1 - var(--pf-v6-c-nav__list--RowGap));
+.pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
+  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
 }
 
 .pf-v6-c-nav__section {
@@ -11002,13 +11083,13 @@ ul.pf-v6-c-list {
   line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
   color: var(--pf-v6-c-nav__link--Color);
   text-align: start;
-  text-decoration: none;
+  text-decoration-line: none;
   background-color: var(--pf-v6-c-nav__link--BackgroundColor);
   border: none;
   border-radius: var(--pf-v6-c-nav__link--BorderRadius);
-}
-.pf-v6-c-nav__link[aria-expanded=true]::before {
-  inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
+  transition-timing-function: var(--pf-v6-c-nav__link--TransitionTimingFunction--background-color), var(--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color);
+  transition-duration: var(--pf-v6-c-nav__link--TransitionDuration--background-color), var(--pf-v6-c-nav__link--m-current--TransitionDuration--color);
+  transition-property: background-color, color;
 }
 .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
   color: var(--pf-v6-c-nav__link--hover--Color);
@@ -11033,6 +11114,9 @@ ul.pf-v6-c-list {
 
 .pf-v6-c-nav__toggle-icon {
   display: inline-block;
+  transition-timing-function: var(--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform);
+  transition-duration: var(--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform);
+  transition-property: transform;
   transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
@@ -12705,9 +12789,11 @@ ul.pf-v6-c-list {
 }
 
 .pf-v6-c-popover__title-text {
+  min-width: 0;
   font-size: var(--pf-v6-c-popover__title-text--FontSize);
   font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
   color: var(--pf-v6-c-popover__title-text--Color);
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-popover__body {
@@ -12722,6 +12808,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
   --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
   --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -12863,7 +12950,9 @@ ul.pf-v6-c-list {
   grid-column: 1/3;
   align-self: center;
   height: var(--pf-v6-c-progress__bar--Height);
+  overflow: hidden;
   background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
+  border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
 }
 
 .pf-v6-c-progress__indicator {
@@ -13200,7 +13289,8 @@ ul.pf-v6-c-list {
 .pf-v6-c-progress-stepper__step-title.pf-m-help-text {
   padding-inline-start: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd);
-  text-decoration: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine) var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
   text-underline-offset: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
   cursor: pointer;
 }
@@ -13953,7 +14043,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   font-size: var(--pf-v6-c-simple-list__item-link--FontSize);
   color: var(--pf-v6-c-simple-list__item-link--Color);
   text-align: start;
-  text-decoration: none;
+  text-decoration-line: none;
   background-color: var(--pf-v6-c-simple-list__item-link--BackgroundColor);
   border: none;
   border-radius: var(--pf-v6-c-simple-list__item-link--BorderRadius);
@@ -13966,7 +14056,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-simple-list__item-link:is(:hover, :focus) {
   --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--hover--BackgroundColor);
   --pf-v6-c-simple-list__item-link--Color: var(--pf-v6-c-simple-list__item-link--hover--Color);
-  text-decoration: none;
+  text-decoration-line: none;
 }
 .pf-v6-c-simple-list__item-link.pf-m-current {
   --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--m-current--BackgroundColor);
@@ -18478,7 +18568,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   padding-inline-end: var(--pf-v6-c-tabs__link--PaddingInlineEnd);
   font-size: var(--pf-v6-c-tabs__link--FontSize);
   color: var(--pf-v6-c-tabs__link--Color);
-  text-decoration: none;
+  text-decoration-line: none;
   background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
   border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
 }
@@ -19118,7 +19208,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 .pf-v6-c-timestamp.pf-m-help-text {
   --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--Color);
-  text-decoration: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine) var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
   text-underline-offset: var(--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset);
   cursor: pointer;
 }
@@ -19331,7 +19422,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
-  text-decoration: none;
+  text-decoration-line: none;
 }
 .pf-v6-c-toggle-group__button.pf-m-selected {
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--m-selected--BackgroundColor);
@@ -22282,7 +22373,7 @@ label.pf-v6-c-tree-view__node-text {
   padding-inline: 0;
   color: var(--pf-v6-c-wizard__nav-link--Color);
   text-align: start;
-  text-decoration: var(--pf-v6-c-wizard__nav-link--TextDecoration);
+  text-decoration-line: var(--pf-v6-c-wizard__nav-link--TextDecoration);
   word-break: break-word;
   counter-increment: wizard-nav-count;
   background-color: transparent;

package/docs/components/Avatar/examples/Avatar.md

@@ -88,7 +88,7 @@ The avatar component provides a default SVG icon. If an image is used it should
 | -- | -- | -- |
 | `.pf-v6-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
 | `.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border. |
-| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
-| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** This is the default size. |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/components/Brand/examples/Brand.md

@@ -83,5 +83,5 @@ Simple brand component.
 | -- | -- | -- |
 | `.pf-v6-c-brand` | `<img>, <picture>` |  Initiates a brand image. **Required** |
 | `.pf-m-picture` | `.pf-v6-c-brand` |  Modifies a brand image to a picture. |
-| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/components/DataList/examples/DataList.md

@@ -316,8 +316,8 @@ When a list item includes more than one block of content, it can be difficult fo
 | `.pf-v6-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-v6-c-data-list__action` here. **Required** |
 | `.pf-v6-c-data-list__check`  | `<div>` | Initiates a data list check cell. **Required** |
 | `.pf-v6-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/tokens/all-patternfly-tokens), or hides it at all breakpoints with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/tokens/all-patternfly-tokens). |
 
 ### Expandable
 
@@ -2244,4 +2244,4 @@ The DataList component provides a flexible alternative to the Table component, w
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
+| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/tokens/all-patternfly-tokens). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |

package/docs/components/DescriptionList/examples/DescriptionList.md

@@ -1613,8 +1613,8 @@ Cards can be used as description list group wrappers. Using cards in this way ap
 | `.pf-m-auto-column-widths` | `.pf-v6-c-description-list` | Modifies the description list to format automatically. |
 | `.pf-m-inline-grid` | `.pf-v6-c-description-list` | Modifies the description list display to inline-grid. |
 | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-description-list` | Modifies the description list number of columns. |
-| `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/tokens/all-patternfly-tokens). |
 
 <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element. |
 | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element to -1. |

package/docs/components/Divider/examples/Divider.md

@@ -134,5 +134,5 @@ The divider renders as an `<hr>` by default. It is possible to make the divider
 | `.pf-v6-c-divider` | `<hr>`, `<li>`, `<div>` | Defines the divider component. |
 | `.pf-m-vertical` | `.pf-v6-c-divider` | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
 | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-divider` | Modifies divider padding/inset to visually match padding of other adjacent components. |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/components/Drawer/examples/Drawer.md

@@ -808,15 +808,15 @@ cssPrefix: pf-v6-c-drawer
 | `.pf-m-panel-left` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the left. |
 | `.pf-m-panel-bottom` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
 | `.pf-m-expanded` | `.pf-v6-c-drawer` | Modifies the drawer panel for the expanded state. |
-| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
+| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/tokens/all-patternfly-tokens) will default to the `md` breakpoint. |
 | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
 | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
 | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
 | `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
 | `.pf-m-primary` | `.pf-v6-c-drawer__content` | Modifies the drawer content to use the primary background color. |
 | `.pf-m-secondary` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
-| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-resizable` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v6-c-drawer__splitter` element. |
 | `--pf-v6-c-drawer__panel--md--FlexBasis--min` | `.pf-v6-c-drawer__panel` | Defines the drawer panel minimum size. |
 | `--pf-v6-c-drawer__panel--md--FlexBasis` | `.pf-v6-c-drawer__panel` | Defines the drawer panel size. |