@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/JumpLinks/jump-links.css

@@ -1,60 +1,55 @@
-:where(:root),
-:where(.pf-v6-c-jump-links) {
+:root,
+.pf-v6-c-jump-links {
   --pf-v6-c-jump-links__list--Display: flex;
-  --pf-v6-c-jump-links__list--PaddingTop: 0;
-  --pf-v6-c-jump-links__list--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-jump-links__list--PaddingBottom: 0;
-  --pf-v6-c-jump-links__list--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-jump-links--m-vertical__list--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-jump-links--m-vertical__list--PaddingRight: 0;
-  --pf-v6-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-jump-links--m-vertical__list--PaddingLeft: 0;
+  --pf-v6-c-jump-links__list--PaddingBlockStart: 0;
+  --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-jump-links__list--PaddingBlockEnd: 0;
+  --pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd: 0;
+  --pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart: 0;
   --pf-v6-c-jump-links__list--FlexDirection: row;
   --pf-v6-c-jump-links--m-vertical__list--FlexDirection: column;
   --pf-v6-c-jump-links__list--before--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-jump-links__list--before--BorderTopWidth: var(--pf-t--global--border--width--box--default);
-  --pf-v6-c-jump-links__list--before--BorderRightWidth: 0;
-  --pf-v6-c-jump-links__list--before--BorderBottomWidth: 0;
-  --pf-v6-c-jump-links__list--before--BorderLeftWidth: 0;
-  --pf-v6-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
-  --pf-v6-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
-  --pf-v6-c-jump-links__list__list--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-jump-links__link--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-jump-links__link--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-jump-links__link--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-jump-links__link--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-jump-links__list__list__link--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-jump-links__list__list__link--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-jump-links__list__list__link--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-jump-links__list--before--BorderInlineEndWidth: 0;
+  --pf-v6-c-jump-links__list--before--BorderBlockEndWidth: 0;
+  --pf-v6-c-jump-links__list--before--BorderInlineStartWidth: 0;
+  --pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth: 0;
+  --pf-v6-c-jump-links__list__list--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-jump-links__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-jump-links__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-jump-links__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-jump-links__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-jump-links__list__list__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-jump-links__list__list__link--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-jump-links__list__list__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
-  --pf-v6-c-jump-links__link--before--BorderTopWidth: 0;
-  --pf-v6-c-jump-links__link--before--BorderRightWidth: 0;
-  --pf-v6-c-jump-links__link--before--BorderBottomWidth: 0;
-  --pf-v6-c-jump-links__link--before--BorderLeftWidth: 0;
+  --pf-v6-c-jump-links__link--before--BorderBlockStartWidth: 0;
+  --pf-v6-c-jump-links__link--before--BorderInlineEndWidth: 0;
+  --pf-v6-c-jump-links__link--before--BorderBlockEndWidth: 0;
+  --pf-v6-c-jump-links__link--before--BorderInlineStartWidth: 0;
   --pf-v6-c-jump-links__link--before--BorderColor: transparent;
-  --pf-v6-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-t--global--border--width--extra-strong);
-  --pf-v6-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
+  --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong);
+  --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: 0;
   --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
-  --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
-  --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-t--global--border--width--extra-strong);
+  --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0;
+  --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-jump-links__link--hover__link-text--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-jump-links__label--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-jump-links__label--Display: block;
-  --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element));
-  --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-v6-global--spacer--form-element));
-  --pf-v6-c-jump-links__toggle--MarginBottom: var(--pf-v6-c-jump-links__toggle--MarginBottom--base);
-  --pf-v6-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v6-c-jump-links__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
-  --pf-v6-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
+  --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
+  --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-jump-links__toggle--Display: none;
-  --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
-  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-v6-global--Transition);
+  --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
-  --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v6-c-jump-links__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
 }
 
 .pf-v6-c-jump-links {
@@ -67,14 +62,14 @@
   align-items: center;
 }
 .pf-v6-c-jump-links.pf-m-vertical, .pf-v6-c-jump-links.pf-m-expandable {
-  --pf-v6-c-jump-links__list--PaddingTop: var(--pf-v6-c-jump-links--m-vertical__list--PaddingTop);
-  --pf-v6-c-jump-links__list--PaddingRight: var(--pf-v6-c-jump-links--m-vertical__list--PaddingRight);
-  --pf-v6-c-jump-links__list--PaddingBottom: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBottom);
-  --pf-v6-c-jump-links__list--PaddingLeft: var(--pf-v6-c-jump-links--m-vertical__list--PaddingLeft);
-  --pf-v6-c-jump-links__list--before--BorderTopWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderTopWidth);
-  --pf-v6-c-jump-links__list--before--BorderLeftWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderLeftWidth);
-  --pf-v6-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
-  --pf-v6-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
+  --pf-v6-c-jump-links__list--PaddingBlockStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart);
+  --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd);
+  --pf-v6-c-jump-links__list--PaddingBlockEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd);
+  --pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart);
+  --pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth);
+  --pf-v6-c-jump-links__list--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth);
+  --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth);
+  --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth);
   --pf-v6-c-jump-links__list--FlexDirection: var(--pf-v6-c-jump-links--m-vertical__list--FlexDirection);
   flex-direction: column;
 }
@@ -88,7 +83,7 @@
   --pf-v6-c-jump-links__toggle--Display: none;
   --pf-v6-c-jump-links__label--Display: block;
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-sm {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -100,7 +95,7 @@
     --pf-v6-c-jump-links__label--Display: block;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-md {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -112,7 +107,7 @@
     --pf-v6-c-jump-links__label--Display: block;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-lg {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -124,7 +119,7 @@
     --pf-v6-c-jump-links__label--Display: block;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-xl {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -136,7 +131,7 @@
     --pf-v6-c-jump-links__label--Display: block;
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-2xl {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -150,7 +145,7 @@
 }
 .pf-v6-c-jump-links.pf-m-expanded {
   --pf-v6-c-jump-links__list--Display: flex;
-  --pf-v6-c-jump-links__toggle--MarginBottom: var(--pf-v6-c-jump-links--m-expanded__toggle--MarginBottom);
+  --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd);
   --pf-v6-c-jump-links__toggle-icon--Rotate: var(--pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate);
   --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-v6-c-jump-links--m-expanded__toggle-icon--Color);
 }
@@ -159,10 +154,10 @@
   position: relative;
   display: var(--pf-v6-c-jump-links__list--Display);
   flex-direction: var(--pf-v6-c-jump-links__list--FlexDirection);
-  padding-block-start: var(--pf-v6-c-jump-links__list--PaddingTop);
-  padding-block-end: var(--pf-v6-c-jump-links__list--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-jump-links__list--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-jump-links__list--PaddingRight);
+  padding-block-start: var(--pf-v6-c-jump-links__list--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-jump-links__list--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-jump-links__list--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-jump-links__list--PaddingInlineEnd);
 }
 .pf-v6-c-jump-links__list::before {
   position: absolute;
@@ -170,32 +165,32 @@
   pointer-events: none;
   content: "";
   border: solid var(--pf-v6-c-jump-links__list--before--BorderColor);
-  border-block-start-width: var(--pf-v6-c-jump-links__list--before--BorderTopWidth);
-  border-block-end-width: var(--pf-v6-c-jump-links__list--before--BorderBottomWidth);
-  border-inline-start-width: var(--pf-v6-c-jump-links__list--before--BorderLeftWidth);
-  border-inline-end-width: var(--pf-v6-c-jump-links__list--before--BorderRightWidth);
+  border-block-start-width: var(--pf-v6-c-jump-links__list--before--BorderBlockStartWidth);
+  border-block-end-width: var(--pf-v6-c-jump-links__list--before--BorderBlockEndWidth);
+  border-inline-start-width: var(--pf-v6-c-jump-links__list--before--BorderInlineStartWidth);
+  border-inline-end-width: var(--pf-v6-c-jump-links__list--before--BorderInlineEndWidth);
 }
 .pf-v6-c-jump-links__list .pf-v6-c-jump-links__list {
-  --pf-v6-c-jump-links__list--PaddingTop: 0;
-  --pf-v6-c-jump-links__list--PaddingBottom: 0;
-  --pf-v6-c-jump-links__link--PaddingTop: var(--pf-v6-c-jump-links__list__list__link--PaddingTop);
-  --pf-v6-c-jump-links__link--PaddingBottom: var(--pf-v6-c-jump-links__list__list__link--PaddingBottom);
-  --pf-v6-c-jump-links__link--PaddingLeft: var(--pf-v6-c-jump-links__list__list__link--PaddingLeft);
-  margin-block-start: var(--pf-v6-c-jump-links__list__list--MarginTop);
+  --pf-v6-c-jump-links__list--PaddingBlockStart: 0;
+  --pf-v6-c-jump-links__list--PaddingBlockEnd: 0;
+  --pf-v6-c-jump-links__link--PaddingBlockStart: var(--pf-v6-c-jump-links__list__list__link--PaddingBlockStart);
+  --pf-v6-c-jump-links__link--PaddingBlockEnd: var(--pf-v6-c-jump-links__list__list__link--PaddingBlockEnd);
+  --pf-v6-c-jump-links__link--PaddingInlineStart: var(--pf-v6-c-jump-links__list__list__link--PaddingInlineStart);
+  margin-block-start: var(--pf-v6-c-jump-links__list__list--MarginBlockStart);
 }
 
 .pf-v6-c-jump-links__link {
   position: relative;
   display: flex;
   flex: 1;
-  padding-block-start: var(--pf-v6-c-jump-links__link--PaddingTop);
-  padding-block-end: var(--pf-v6-c-jump-links__link--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-jump-links__link--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-jump-links__link--PaddingRight);
+  padding-block-start: var(--pf-v6-c-jump-links__link--PaddingBlockStart);
+  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;
   outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset);
 }
-.pf-v6-c-jump-links__link:hover, .pf-v6-c-jump-links__link:focus {
+.pf-v6-c-jump-links__link:is(:hover, :focus) {
   --pf-v6-c-jump-links__link-text--Color: var(--pf-v6-c-jump-links__link--hover__link-text--Color);
 }
 .pf-v6-c-jump-links__link::before {
@@ -205,18 +200,18 @@
   content: "";
   border-color: var(--pf-v6-c-jump-links__link--before--BorderColor);
   border-style: solid;
-  border-block-start-width: var(--pf-v6-c-jump-links__link--before--BorderTopWidth);
-  border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBottomWidth);
-  border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderLeftWidth);
-  border-inline-end-width: var(--pf-v6-c-jump-links__link--before--BorderRightWidth);
+  border-block-start-width: var(--pf-v6-c-jump-links__link--before--BorderBlockStartWidth);
+  border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBlockEndWidth);
+  border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderInlineStartWidth);
+  border-inline-end-width: var(--pf-v6-c-jump-links__link--before--BorderInlineEndWidth);
 }
 
 .pf-v6-c-jump-links__item {
   --pf-v6-c-jump-links__list--before--BorderColor: transparent;
 }
 .pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link {
-  --pf-v6-c-jump-links__link--before--BorderTopWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderTopWidth);
-  --pf-v6-c-jump-links__link--before--BorderLeftWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderLeftWidth);
+  --pf-v6-c-jump-links__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth);
+  --pf-v6-c-jump-links__link--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth);
   --pf-v6-c-jump-links__link--before--BorderColor: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderColor);
   --pf-v6-c-jump-links__link-text--Color: var(--pf-v6-c-jump-links__item--m-current__link-text--Color);
 }
@@ -227,7 +222,7 @@
 
 .pf-v6-c-jump-links__label {
   display: var(--pf-v6-c-jump-links__label--Display);
-  margin-block-end: var(--pf-v6-c-jump-links__label--MarginBottom);
+  margin-block-end: var(--pf-v6-c-jump-links__label--MarginBlockEnd);
 }
 
 .pf-v6-c-jump-links__main {
@@ -237,26 +232,15 @@
 
 .pf-v6-c-jump-links__toggle {
   display: var(--pf-v6-c-jump-links__toggle--Display);
-  margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginTop);
-  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBottom);
-  margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginLeft);
-}
-.pf-v6-c-jump-links__toggle .pf-v6-c-button {
-  display: flex;
-  align-items: center;
+  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
 }
 
 .pf-v6-c-jump-links__toggle-icon {
   display: inline-block;
   color: var(--pf-v6-c-jump-links__toggle-icon--Color);
-  transition: var(--pf-v6-c-jump-links__toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration) var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
   scale: -1 1;
-}
-
-.pf-v6-c-jump-links__toggle-text {
-  margin-inline-start: var(--pf-v6-c-jump-links__toggle-text--MarginLeft);
-  color: var(--pf-v6-c-jump-links__toggle-text--Color);
 }

package/components/JumpLinks/jump-links.scss

@@ -1,50 +1,50 @@
-// @debug $jump-links; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$jump-links}) {
+$pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+
+@include pf-root($jump-links) {
   // list
   --#{$jump-links}__list--Display: flex;
-  --#{$jump-links}__list--PaddingTop: 0;
-  --#{$jump-links}__list--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$jump-links}__list--PaddingBottom: 0;
-  --#{$jump-links}__list--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$jump-links}--m-vertical__list--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$jump-links}--m-vertical__list--PaddingRight: 0;
-  --#{$jump-links}--m-vertical__list--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$jump-links}--m-vertical__list--PaddingLeft: 0;
+  --#{$jump-links}__list--PaddingBlockStart: 0;
+  --#{$jump-links}__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$jump-links}__list--PaddingBlockEnd: 0;
+  --#{$jump-links}__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$jump-links}--m-vertical__list--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$jump-links}--m-vertical__list--PaddingInlineEnd: 0;
+  --#{$jump-links}--m-vertical__list--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$jump-links}--m-vertical__list--PaddingInlineStart: 0;
   --#{$jump-links}__list--FlexDirection: row;
   --#{$jump-links}--m-vertical__list--FlexDirection: column;
   --#{$jump-links}__list--before--BorderColor: var(--pf-t--global--border--color--default);
-  --#{$jump-links}__list--before--BorderTopWidth: var(--pf-t--global--border--width--box--default);
-  --#{$jump-links}__list--before--BorderRightWidth: 0;
-  --#{$jump-links}__list--before--BorderBottomWidth: 0;
-  --#{$jump-links}__list--before--BorderLeftWidth: 0;
-  --#{$jump-links}--m-vertical__list--before--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
-  --#{$jump-links}--m-vertical__list--before--BorderTopWidth: 0;
-  --#{$jump-links}__list__list--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
+  --#{$jump-links}__list--before--BorderBlockStartWidth: var(--pf-t--global--border--width--box--default);
+  --#{$jump-links}__list--before--BorderInlineEndWidth: 0;
+  --#{$jump-links}__list--before--BorderBlockEndWidth: 0;
+  --#{$jump-links}__list--before--BorderInlineStartWidth: 0;
+  --#{$jump-links}--m-vertical__list--before--BorderInlineStartWidth: var(--pf-t--global--border--width--box--default);
+  --#{$jump-links}--m-vertical__list--before--BorderBlockStartWidth: 0;
+  --#{$jump-links}__list__list--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
 
   // link
-  --#{$jump-links}__link--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$jump-links}__link--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$jump-links}__link--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$jump-links}__link--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$jump-links}__list__list__link--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$jump-links}__list__list__link--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --#{$jump-links}__list__list__link--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$jump-links}__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$jump-links}__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$jump-links}__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$jump-links}__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$jump-links}__list__list__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$jump-links}__list__list__link--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --#{$jump-links}__list__list__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$jump-links}__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
 
   // before
-  --#{$jump-links}__link--before--BorderTopWidth: 0;
-  --#{$jump-links}__link--before--BorderRightWidth: 0;
-  --#{$jump-links}__link--before--BorderBottomWidth: 0;
-  --#{$jump-links}__link--before--BorderLeftWidth: 0;
+  --#{$jump-links}__link--before--BorderBlockStartWidth: 0;
+  --#{$jump-links}__link--before--BorderInlineEndWidth: 0;
+  --#{$jump-links}__link--before--BorderBlockEndWidth: 0;
+  --#{$jump-links}__link--before--BorderInlineStartWidth: 0;
   --#{$jump-links}__link--before--BorderColor: transparent;
-  --#{$jump-links}__item--m-current__link--before--BorderTopWidth: var(--pf-t--global--border--width--extra-strong);
-  --#{$jump-links}__item--m-current__link--before--BorderLeftWidth: 0;
+  --#{$jump-links}__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong);
+  --#{$jump-links}__item--m-current__link--before--BorderInlineStartWidth: 0;
   --#{$jump-links}__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
-  --#{$jump-links}--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
-  --#{$jump-links}--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-t--global--border--width--extra-strong);
+  --#{$jump-links}--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0;
+  --#{$jump-links}--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong);
 
   // text
   --#{$jump-links}__link-text--Color: var(--pf-t--global--text--color--subtle);
@@ -52,27 +52,20 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   --#{$jump-links}__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
 
   // label
-  --#{$jump-links}__label--MarginBottom: var(--pf-t--global--spacer--md);
+  --#{$jump-links}__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --#{$jump-links}__label--Display: block;
 
   // toggle
-  --#{$jump-links}__toggle--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$jump-links}__toggle--MarginBottom--base: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$jump-links}__toggle--MarginBottom: var(--#{$jump-links}__toggle--MarginBottom--base);
-  --#{$jump-links}--m-expanded__toggle--MarginBottom: calc(var(--#{$jump-links}__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
-  --#{$jump-links}__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
+  --#{$jump-links}__toggle--MarginBlockEnd: 0;
+  --#{$jump-links}--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$jump-links}__toggle--Display: none;
 
   // toggle icon
-  --#{$jump-links}__toggle-icon--Color: currentcolor;
-  --#{$jump-links}__toggle-icon--Transition: var(--#{$pf-global}--Transition); // TODO
+  --#{$jump-links}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$jump-links}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$jump-links}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$jump-links}__toggle-icon--Rotate: 0;
-  --#{$jump-links}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
-
-  // toggle text
-  --#{$jump-links}__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
-  --#{$jump-links}__toggle-text--Color: var(--pf-t--global--text--color--regular);
 }
 
 .#{$jump-links} {
@@ -88,23 +81,23 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
   &.pf-m-vertical,
   &.pf-m-expandable {
-    --#{$jump-links}__list--PaddingTop: var(--#{$jump-links}--m-vertical__list--PaddingTop);
-    --#{$jump-links}__list--PaddingRight: var(--#{$jump-links}--m-vertical__list--PaddingRight);
-    --#{$jump-links}__list--PaddingBottom: var(--#{$jump-links}--m-vertical__list--PaddingBottom);
-    --#{$jump-links}__list--PaddingLeft: var(--#{$jump-links}--m-vertical__list--PaddingLeft);
-    --#{$jump-links}__list--before--BorderTopWidth: var(--#{$jump-links}--m-vertical__list--before--BorderTopWidth);
-    --#{$jump-links}__list--before--BorderLeftWidth: var(--#{$jump-links}--m-vertical__list--before--BorderLeftWidth);
-    --#{$jump-links}__item--m-current__link--before--BorderTopWidth: var(--#{$jump-links}--m-vertical__item--m-current__link--before--BorderTopWidth);
-    --#{$jump-links}__item--m-current__link--before--BorderLeftWidth: var(--#{$jump-links}--m-vertical__item--m-current__link--before--BorderLeftWidth);
+    --#{$jump-links}__list--PaddingBlockStart: var(--#{$jump-links}--m-vertical__list--PaddingBlockStart);
+    --#{$jump-links}__list--PaddingInlineEnd: var(--#{$jump-links}--m-vertical__list--PaddingInlineEnd);
+    --#{$jump-links}__list--PaddingBlockEnd: var(--#{$jump-links}--m-vertical__list--PaddingBlockEnd);
+    --#{$jump-links}__list--PaddingInlineStart: var(--#{$jump-links}--m-vertical__list--PaddingInlineStart);
+    --#{$jump-links}__list--before--BorderBlockStartWidth: var(--#{$jump-links}--m-vertical__list--before--BorderBlockStartWidth);
+    --#{$jump-links}__list--before--BorderInlineStartWidth: var(--#{$jump-links}--m-vertical__list--before--BorderInlineStartWidth);
+    --#{$jump-links}__item--m-current__link--before--BorderBlockStartWidth: var(--#{$jump-links}--m-vertical__item--m-current__link--before--BorderBlockStartWidth);
+    --#{$jump-links}__item--m-current__link--before--BorderInlineStartWidth: var(--#{$jump-links}--m-vertical__item--m-current__link--before--BorderInlineStartWidth);
     --#{$jump-links}__list--FlexDirection: var(--#{$jump-links}--m-vertical__list--FlexDirection);
 
     flex-direction: column;
   }
 
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-jump-links--m-expandable--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-jump-links--m-expandable--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-expandable#{$breakpoint-name} {
         --#{$jump-links}__list--Display: none;
         --#{$jump-links}__toggle--Display: block;
@@ -121,7 +114,7 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
   &.pf-m-expanded {
     --#{$jump-links}__list--Display: flex;
-    --#{$jump-links}__toggle--MarginBottom: var(--#{$jump-links}--m-expanded__toggle--MarginBottom);
+    --#{$jump-links}__toggle--MarginBlockEnd: var(--#{$jump-links}--m-expanded__toggle--MarginBlockEnd);
     --#{$jump-links}__toggle-icon--Rotate: var(--#{$jump-links}--m-expanded__toggle-icon--Rotate);
     --#{$jump-links}__toggle-icon--Color: var(--#{$jump-links}--m-expanded__toggle-icon--Color);
   }
@@ -131,10 +124,10 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   position: relative;
   display: var(--#{$jump-links}__list--Display);
   flex-direction: var(--#{$jump-links}__list--FlexDirection);
-  padding-block-start: var(--#{$jump-links}__list--PaddingTop);
-  padding-block-end: var(--#{$jump-links}__list--PaddingBottom);
-  padding-inline-start: var(--#{$jump-links}__list--PaddingLeft);
-  padding-inline-end: var(--#{$jump-links}__list--PaddingRight);
+  padding-block-start: var(--#{$jump-links}__list--PaddingBlockStart);
+  padding-block-end: var(--#{$jump-links}__list--PaddingBlockEnd);
+  padding-inline-start: var(--#{$jump-links}__list--PaddingInlineStart);
+  padding-inline-end: var(--#{$jump-links}__list--PaddingInlineEnd);
 
   &::before {
     position: absolute;
@@ -142,20 +135,20 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
     pointer-events: none;
     content: "";
     border: solid var(--#{$jump-links}__list--before--BorderColor);
-    border-block-start-width: var(--#{$jump-links}__list--before--BorderTopWidth);
-    border-block-end-width: var(--#{$jump-links}__list--before--BorderBottomWidth);
-    border-inline-start-width: var(--#{$jump-links}__list--before--BorderLeftWidth);
-    border-inline-end-width: var(--#{$jump-links}__list--before--BorderRightWidth);
+    border-block-start-width: var(--#{$jump-links}__list--before--BorderBlockStartWidth);
+    border-block-end-width: var(--#{$jump-links}__list--before--BorderBlockEndWidth);
+    border-inline-start-width: var(--#{$jump-links}__list--before--BorderInlineStartWidth);
+    border-inline-end-width: var(--#{$jump-links}__list--before--BorderInlineEndWidth);
   }
 
   .#{$jump-links}__list {
-    --#{$jump-links}__list--PaddingTop: 0;
-    --#{$jump-links}__list--PaddingBottom: 0;
-    --#{$jump-links}__link--PaddingTop: var(--#{$jump-links}__list__list__link--PaddingTop);
-    --#{$jump-links}__link--PaddingBottom: var(--#{$jump-links}__list__list__link--PaddingBottom);
-    --#{$jump-links}__link--PaddingLeft: var(--#{$jump-links}__list__list__link--PaddingLeft);
+    --#{$jump-links}__list--PaddingBlockStart: 0;
+    --#{$jump-links}__list--PaddingBlockEnd: 0;
+    --#{$jump-links}__link--PaddingBlockStart: var(--#{$jump-links}__list__list__link--PaddingBlockStart);
+    --#{$jump-links}__link--PaddingBlockEnd: var(--#{$jump-links}__list__list__link--PaddingBlockEnd);
+    --#{$jump-links}__link--PaddingInlineStart: var(--#{$jump-links}__list__list__link--PaddingInlineStart);
 
-    margin-block-start: var(--#{$jump-links}__list__list--MarginTop);
+    margin-block-start: var(--#{$jump-links}__list__list--MarginBlockStart);
   }
 }
 
@@ -163,15 +156,14 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   position: relative;
   display: flex;
   flex: 1;
-  padding-block-start: var(--#{$jump-links}__link--PaddingTop);
-  padding-block-end: var(--#{$jump-links}__link--PaddingBottom);
-  padding-inline-start: var(--#{$jump-links}__link--PaddingLeft);
-  padding-inline-end: var(--#{$jump-links}__link--PaddingRight);
+  padding-block-start: var(--#{$jump-links}__link--PaddingBlockStart);
+  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;
   outline-offset: var(--#{$jump-links}__link--OutlineOffset);
 
-  &:hover,
-  &:focus {
+  &:is(:hover, :focus) {
     --#{$jump-links}__link-text--Color: var(--#{$jump-links}__link--hover__link-text--Color);
   }
 
@@ -182,10 +174,10 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
     content: "";
     border-color: var(--#{$jump-links}__link--before--BorderColor);
     border-style: solid;
-    border-block-start-width: var(--#{$jump-links}__link--before--BorderTopWidth);
-    border-block-end-width: var(--#{$jump-links}__link--before--BorderBottomWidth);
-    border-inline-start-width: var(--#{$jump-links}__link--before--BorderLeftWidth);
-    border-inline-end-width: var(--#{$jump-links}__link--before--BorderRightWidth);
+    border-block-start-width: var(--#{$jump-links}__link--before--BorderBlockStartWidth);
+    border-block-end-width: var(--#{$jump-links}__link--before--BorderBlockEndWidth);
+    border-inline-start-width: var(--#{$jump-links}__link--before--BorderInlineStartWidth);
+    border-inline-end-width: var(--#{$jump-links}__link--before--BorderInlineEndWidth);
   }
 }
 
@@ -194,8 +186,8 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   --#{$jump-links}__list--before--BorderColor: transparent;
 
   &.pf-m-current > .#{$jump-links}__link {
-    --#{$jump-links}__link--before--BorderTopWidth: var(--#{$jump-links}__item--m-current__link--before--BorderTopWidth);
-    --#{$jump-links}__link--before--BorderLeftWidth: var(--#{$jump-links}__item--m-current__link--before--BorderLeftWidth);
+    --#{$jump-links}__link--before--BorderBlockStartWidth: var(--#{$jump-links}__item--m-current__link--before--BorderBlockStartWidth);
+    --#{$jump-links}__link--before--BorderInlineStartWidth: var(--#{$jump-links}__item--m-current__link--before--BorderInlineStartWidth);
     --#{$jump-links}__link--before--BorderColor: var(--#{$jump-links}__item--m-current__link--before--BorderColor);
     --#{$jump-links}__link-text--Color: var(--#{$jump-links}__item--m-current__link-text--Color);
   }
@@ -208,7 +200,7 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
 .#{$jump-links}__label {
   display: var(--#{$jump-links}__label--Display);
-  margin-block-end: var(--#{$jump-links}__label--MarginBottom);
+  margin-block-end: var(--#{$jump-links}__label--MarginBlockEnd);
 }
 
 .#{$jump-links}__main {
@@ -218,26 +210,14 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
 .#{$jump-links}__toggle {
   display: var(--#{$jump-links}__toggle--Display);
-  margin-block-start: var(--#{$jump-links}__toggle--MarginTop);
-  margin-block-end: var(--#{$jump-links}__toggle--MarginBottom);
-  margin-inline-start: var(--#{$jump-links}__toggle--MarginLeft);
-
-  .#{$button} {
-    display: flex;
-    align-items: center;
-  }
+  margin-block-end: var(--#{$jump-links}__toggle--MarginBlockEnd);
 }
 
 .#{$jump-links}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
   color: var(--#{$jump-links}__toggle-icon--Color);
-  transition: var(--#{$jump-links}__toggle-icon--Transition);
+  transition: transform var(--#{$jump-links}__toggle-icon--TransitionDuration) var(--#{$jump-links}__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$jump-links}__toggle-icon--Rotate));
 }
-
-.#{$jump-links}__toggle-text {
-  margin-inline-start: var(--#{$jump-links}__toggle-text--MarginLeft);
-  color: var(--#{$jump-links}__toggle-text--Color);
-}