@patternfly/patternfly 6.3.1 → 6.4.0-prerelease.2

package/components/ToggleGroup/toggle-group.css

@@ -11,6 +11,7 @@
   --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
   --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -22,12 +23,13 @@
   --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
-  --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
   --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
   --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
-  --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
   --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
   --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -50,11 +52,11 @@
 .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
   margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
 }
-.pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button::before {
+.pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
   border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
   border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
 }
-.pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
+.pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
   border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
   border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
 }
@@ -73,25 +75,31 @@
   background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
   border: 0;
 }
-.pf-v6-c-toggle-group__button::before {
+.pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
   position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  inset: 0;
   pointer-events: none;
   content: "";
   border-style: solid;
+  border-radius: inherit;
+}
+.pf-v6-c-toggle-group__button::before {
   border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
   border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
   border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
   border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
   border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
 }
+.pf-v6-c-toggle-group__button::after {
+  inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
+  border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
+  border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
+}
 .pf-v6-c-toggle-group__button:is(:hover, :focus) {
   --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);
+  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
   text-decoration-line: none;
 }
 .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -99,6 +107,7 @@
   --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
+  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
 }
 .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);

package/components/ToggleGroup/toggle-group.scss

@@ -14,6 +14,7 @@
   --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
   --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$toggle-group}__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
 
@@ -31,14 +32,15 @@
   --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
   --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
-  --#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
   --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
+  --#{$toggle-group}__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
 
   // disabled
   --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
-  --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
   --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Compact
@@ -68,21 +70,15 @@
 
   &:first-child {
     .#{$toggle-group}__button {
-      &,
-      &::before {
-        border-start-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderStartStartRadius);
-        border-end-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderEndStartRadius);
-      }
+      border-start-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderStartStartRadius);
+      border-end-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderEndStartRadius);
     }
   }
 
   &:last-child {
     .#{$toggle-group}__button {
-      &,
-      &::before {
-        border-start-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderStartEndRadius);
-        border-end-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderEndEndRadius);
-      }
+      border-start-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderStartEndRadius);
+      border-end-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderEndEndRadius);
     }
   }
 }
@@ -101,15 +97,17 @@
   background-color: var(--#{$toggle-group}__button--BackgroundColor);
   border: 0;
 
-  &::before {
+  &::before,
+  &::after {
     position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
+    inset: 0;
     pointer-events: none;
     content: "";
     border-style: solid;
+    border-radius: inherit;
+  }
+
+  &::before {
     border-width: var(--#{$toggle-group}__button--before--BorderWidth);
     border-block-start-color: var(--#{$toggle-group}__button--before--BorderBlockStartColor, var(--#{$toggle-group}__button--before--BorderColor));
     border-block-end-color: var(--#{$toggle-group}__button--before--BorderBlockEndColor, var(--#{$toggle-group}__button--before--BorderColor));
@@ -117,10 +115,18 @@
     border-inline-end-color: var(--#{$toggle-group}__button--before--BorderInlineEndColor, var(--#{$toggle-group}__button--before--BorderColor));
   }
 
+  // forced-colors borders
+  &::after {
+    inset: var(--#{$toggle-group}__button--before--BorderWidth);
+    border-color: var(--#{$toggle-group}__button--after--BorderColor, transparent);
+    border-width: var(--#{$toggle-group}__button--after--BorderWidth, 0);
+  }
+
   &:is(:hover, :focus) {
     --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--hover--BackgroundColor);
     --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
     --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
+    --#{$toggle-group}__button--after--BorderWidth: var(--#{$toggle-group}__button--hover--after--BorderWidth);
 
     text-decoration-line: none;
   }
@@ -130,6 +136,7 @@
     --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
     --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--m-selected--ZIndex);
     --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--m-selected--before--BorderColor);
+    --#{$toggle-group}__button--after--BorderWidth: var(--#{$toggle-group}__button--m-selected--after--BorderWidth);
   }
 
   &:is(:disabled, .pf-m-disabled) {

package/components/Toolbar/toolbar.css

@@ -31,11 +31,15 @@
   --pf-v6-c-toolbar__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-toolbar__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-toolbar__expandable-content--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
   --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -206,6 +210,7 @@
   z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
   padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
+  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
   box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
 }
 .pf-v6-c-toolbar.pf-m-static,
@@ -352,12 +357,14 @@
   padding-inline-start: var(--pf-v6-c-toolbar__expandable-content--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-toolbar__expandable-content--PaddingInlineEnd);
   background-color: var(--pf-v6-c-toolbar__expandable-content--BackgroundColor);
+  border-block-end: var(--pf-v6-c-toolbar__expandable-content--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar__expandable-content--BorderBlockEndColor);
   box-shadow: var(--pf-v6-c-toolbar__expandable-content--BoxShadow);
 }
 @media screen and (min-width: 62rem) {
   .pf-v6-c-toolbar__expandable-content {
     position: static;
     padding: 0;
+    border-block-end: 0;
     box-shadow: none;
   }
 }

package/components/Toolbar/toolbar.scss

@@ -57,6 +57,8 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   --#{$toolbar}__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --#{$toolbar}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --#{$toolbar}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --#{$toolbar}__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$toolbar}__expandable-content--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
 
   // * Toolbar sticky
   --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
@@ -64,6 +66,8 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   --#{$toolbar}--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$toolbar}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --#{$toolbar}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$toolbar}--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$toolbar}--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
 
   // * Toolbar expand all
   --#{$toolbar}__expand-all-icon--Rotate: 0;
@@ -142,6 +146,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
     z-index: var(--#{$toolbar}--m-sticky--ZIndex);
     padding-block-start: var(--#{$toolbar}--m-sticky--PaddingBlockStart);
     padding-block-end: var(--#{$toolbar}--m-sticky--PaddingBlockEnd);
+    border-block-end: var(--#{$toolbar}--m-sticky--BorderBlockEndWidth) solid var(--#{$toolbar}--m-sticky--BorderBlockEndColor);
     box-shadow: var(--#{$toolbar}--m-sticky--BoxShadow);
   }
 
@@ -280,11 +285,13 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   padding-inline-start: var(--#{$toolbar}__expandable-content--PaddingInlineStart);
   padding-inline-end: var(--#{$toolbar}__expandable-content--PaddingInlineEnd);
   background-color: var(--#{$toolbar}__expandable-content--BackgroundColor);
+  border-block-end: var(--#{$toolbar}__expandable-content--BorderBlockEndWidth) solid var(--#{$toolbar}__expandable-content--BorderBlockEndColor);
   box-shadow: var(--#{$toolbar}__expandable-content--BoxShadow);
 
   @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     position: static;
     padding: 0;
+    border-block-end: 0;
     box-shadow: none;
   }
 

package/components/TreeView/tree-view.css

@@ -8,6 +8,11 @@
   --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view__node--indent--base);
   --pf-v6-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-tree-view__node--BackgroundColor: transparent;
+  --pf-v6-c-tree-view__node--BorderRadius: var(--pf-v6-c-tree-view__content--BorderRadius);
+  --pf-v6-c-tree-view__node--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-tree-view__node--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-tree-view__node--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --pf-v6-c-tree-view__node--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
   --pf-v6-c-tree-view__node--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-tree-view__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v6-c-tree-view__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -293,8 +298,17 @@
   color: var(--pf-v6-c-tree-view__node--Color);
   background-color: var(--pf-v6-c-tree-view__node--BackgroundColor);
 }
+.pf-v6-c-tree-view__node::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-tree-view__node--BorderWidth) solid var(--pf-v6-c-tree-view__node--BorderColor);
+  border-radius: var(--pf-v6-c-tree-view__node--BorderRadius);
+}
 .pf-v6-c-tree-view__node.pf-m-current {
   --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view__node--m-current--Color);
+  --pf-v6-c-tree-view__node--BorderWidth: var(--pf-v6-c-tree-view__node--m-current--BorderWidth);
 }
 .pf-v6-c-tree-view__node .pf-v6-c-tree-view__node-count {
   margin-inline-start: var(--pf-v6-c-tree-view__node-count--MarginInlineStart);
@@ -392,6 +406,7 @@ label.pf-v6-c-tree-view__node-text {
 
 .pf-v6-c-tree-view__content:hover,
 .pf-v6-c-tree-view__content:focus-within {
+  --pf-v6-c-tree-view__node--BorderWidth: var(--pf-v6-c-tree-view__node--hover--BorderWidth);
   background-color: var(--pf-v6-c-tree-view__node--hover--BackgroundColor);
 }
 

package/components/TreeView/tree-view.scss

@@ -17,6 +17,11 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
   --#{$tree-view}__node--PaddingInlineStart: var(--#{$tree-view}__node--indent--base);
   --#{$tree-view}__node--Color: var(--pf-t--global--text--color--subtle);
   --#{$tree-view}__node--BackgroundColor: transparent;
+  --#{$tree-view}__node--BorderRadius: var(--#{$tree-view}__content--BorderRadius);
+  --#{$tree-view}__node--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$tree-view}__node--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --#{$tree-view}__node--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --#{$tree-view}__node--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
   --#{$tree-view}__node--m-current--Color: var(--pf-t--global--text--color--regular);
   --#{$tree-view}__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --#{$tree-view}__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -407,8 +412,18 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
   color: var(--#{$tree-view}__node--Color);
   background-color: var(--#{$tree-view}__node--BackgroundColor);
 
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--#{$tree-view}__node--BorderWidth) solid var(--#{$tree-view}__node--BorderColor);
+    border-radius: var(--#{$tree-view}__node--BorderRadius);
+  }
+
   &.pf-m-current {
     --#{$tree-view}__node--Color: var(--#{$tree-view}__node--m-current--Color);
+    --#{$tree-view}__node--BorderWidth: var(--#{$tree-view}__node--m-current--BorderWidth);
   }
 
   .#{$tree-view}__node-count {
@@ -514,6 +529,8 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
 
 .#{$tree-view}__content:hover,
 .#{$tree-view}__content:focus-within {
+  --#{$tree-view}__node--BorderWidth: var(--#{$tree-view}__node--hover--BorderWidth);
+
   background-color: var(--#{$tree-view}__node--hover--BackgroundColor);
 }
 

package/components/Wizard/wizard.css

@@ -36,6 +36,10 @@
   --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
   --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
@@ -47,15 +51,20 @@
   --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
   --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-wizard__nav-link--before--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-wizard__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-wizard__nav-link--before--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-wizard__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-wizard__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v6-c-wizard__nav-link--m-current--before--BorderColor: transparent;
   --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
   --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor: transparent;
   --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
   --pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
   --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -74,6 +83,7 @@
   --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
   --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
   --pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
   --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -84,6 +94,8 @@
   --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-wizard__nav--Width: 100%;
   --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
@@ -117,6 +129,7 @@
   .pf-v6-c-wizard {
     --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
     --pf-v6-c-wizard__nav--BoxShadow: none;
+    --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
   }
 }
 
@@ -234,6 +247,9 @@
 .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
   --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
 }
+.pf-v6-c-wizard__toggle-list-item.pf-m-warning {
+  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color);
+}
 .pf-v6-c-wizard__toggle-list-item.pf-m-success {
   --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
 }
@@ -300,6 +316,7 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--pf-v6-c-wizard__nav--BackgroundColor);
+  border-block-end: var(--pf-v6-c-wizard__nav--BorderBlockEndWidth) solid var(--pf-v6-c-wizard__nav--BorderBlockEndColor);
   box-shadow: var(--pf-v6-c-wizard__nav--BoxShadow);
 }
 .pf-v6-c-wizard__nav.pf-m-expanded {
@@ -367,6 +384,7 @@
 .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
   position: relative;
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: var(--pf-v6-c-wizard__nav-link--before--Width);
@@ -381,28 +399,35 @@
 .pf-v6-c-wizard__nav-link::before {
   inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
   content: counter(wizard-nav-count);
+  border: var(--pf-v6-c-wizard__nav-link--before--BorderWidth) solid var(--pf-v6-c-wizard__nav-link--before--BorderColor);
 }
 .pf-v6-c-wizard__nav-link.pf-m-current {
   --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
   --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
+  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth);
 }
 .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
   --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
   --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
+  --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BorderColor);
 }
 
-.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
+.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-warning, .pf-m-danger)::before {
   display: none;
 }
 .pf-v6-c-wizard__nav-link.pf-m-success {
   --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
 }
+.pf-v6-c-wizard__nav-link.pf-m-warning {
+  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color);
+}
 .pf-v6-c-wizard__nav-link.pf-m-danger {
   --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
 }
 .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
   --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
   --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
+  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth);
 }
 .pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
   --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
@@ -412,23 +437,29 @@
 .pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
   --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor);
   --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--before--Color);
-}
-
-.pf-v6-c-wizard__nav-link-text {
-  flex-grow: 1;
+  --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor);
 }
 
 .pf-v6-c-wizard__nav-link-main {
+  position: relative;
   display: flex;
+  flex-grow: 1;
   justify-content: space-between;
   padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
   background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
-  border: none;
   border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
 }
+.pf-v6-c-wizard__nav-link-main::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-wizard__nav-link-main--BorderWidth) solid var(--pf-v6-c-wizard__nav-link-main--BorderColor);
+  border-radius: inherit;
+}
 
 .pf-v6-c-wizard__nav-link-status-icon {
   position: relative;