@patternfly/patternfly 6.3.0-prerelease.75 → 6.3.0-prerelease.77

package/components/CalendarMonth/calendar-month.css

@@ -46,12 +46,14 @@
   --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-calendar-month__date--Width: 4ch;
   --pf-v6-c-calendar-month__date--Height: 4ch;
+  --pf-v6-c-calendar-month__date--BorderWidth: 0;
+  --pf-v6-c-calendar-month__date--BorderColor: transparent;
   --pf-v6-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
   --pf-v6-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
-  --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-calendar-month__date--after--BorderWidth: 0;
   --pf-v6-c-calendar-month__date--after--BorderColor: transparent;
   --pf-v6-c-calendar-month__date--after--OutlineOffset: 0;
   --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -60,9 +62,12 @@
   --pf-v6-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
   --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v6-c-calendar-month__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
-  --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
-  --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
+  --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent;
 }
 
 .pf-v6-c-calendar-month {
@@ -143,8 +148,8 @@
 }
 .pf-v6-c-calendar-month__dates-cell.pf-m-current {
   --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
-  --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
-  --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
+  --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth);
+  --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor);
 }
 .pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
   --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
@@ -167,8 +172,10 @@
 .pf-v6-c-calendar-month__dates-cell.pf-m-selected {
   --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
   --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--Color);
+  --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
+  --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor);
   --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
-  --pf-v6-c-calendar-month__date--hover--BorderWidth: 0;
+  --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
   --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
   --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
   --pf-v6-c-calendar-month__date--after--OutlineOffset: var(--pf-v6-c-calendar-month__date--after--focus--OutlineOffset);
@@ -192,6 +199,12 @@
   background-color: var(--pf-v6-c-calendar-month__date--BackgroundColor);
   border: 0;
 }
+.pf-v6-c-calendar-month__date::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+  border: var(--pf-v6-c-calendar-month__date--BorderWidth) solid var(--pf-v6-c-calendar-month__date--BorderColor);
+}
 .pf-v6-c-calendar-month__date::after {
   position: absolute;
   inset-block-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
@@ -201,15 +214,17 @@
   content: "";
   border: var(--pf-v6-c-calendar-month__date--after--BorderWidth) solid var(--pf-v6-c-calendar-month__date--after--BorderColor);
 }
-.pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::after {
+.pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::before, .pf-v6-c-calendar-month__date::after {
   border-radius: var(--pf-v6-c-calendar-month__date--BorderRadius);
 }
 .pf-v6-c-calendar-month__date:hover, .pf-v6-c-calendar-month__date.pf-m-hover {
   --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--hover--BackgroundColor);
-  border: var(--pf-v6-c-calendar-month__date--hover--BorderColor) solid var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
+  --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
+  --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__date--hover--BorderColor);
 }
 .pf-v6-c-calendar-month__date:focus, .pf-v6-c-calendar-month__date.pf-m-focus {
   --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__date--focus--after--BorderColor);
+  --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__date--focus--after--BorderWidth);
   outline: 0;
 }
 .pf-v6-c-calendar-month__date:disabled {

package/components/CalendarMonth/calendar-month.scss

@@ -58,12 +58,14 @@
   // date button
   --#{$calendar-month}__date--Width: 4ch;
   --#{$calendar-month}__date--Height: 4ch;
+  --#{$calendar-month}__date--BorderWidth: 0;
+  --#{$calendar-month}__date--BorderColor: transparent;
   --#{$calendar-month}__date--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$calendar-month}__date--Color: var(--pf-t--global--text--color--regular);
   --#{$calendar-month}__date--BackgroundColor: transparent;
   --#{$calendar-month}__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --#{$calendar-month}__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
-  --#{$calendar-month}__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$calendar-month}__date--after--BorderWidth: 0;
   --#{$calendar-month}__date--after--BorderColor: transparent;
   --#{$calendar-month}__date--after--OutlineOffset: 0;
   --#{$calendar-month}__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -72,9 +74,12 @@
   --#{$calendar-month}__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
   --#{$calendar-month}__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$calendar-month}__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
+  --#{$calendar-month}__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular);
   --#{$calendar-month}__date--after--focus--OutlineOffset: -2px;
-  --#{$calendar-month}__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
-  --#{$calendar-month}__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$calendar-month}__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$calendar-month}__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$calendar-month}__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
+  --#{$calendar-month}__dates-cell--m-selected__date--BorderColor: transparent;
 }
 
 .#{$calendar-month} {
@@ -158,8 +163,8 @@
 
   &.pf-m-current {
     --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-current__date--BackgroundColor);
-    --#{$calendar-month}__date--after--BorderWidth: var(--#{$calendar-month}__dates-cell--m-current__date--after--BorderWidth);
-    --#{$calendar-month}__date--after--BorderColor: var(--#{$calendar-month}__dates-cell--m-current__date--after--BorderColor);
+    --#{$calendar-month}__date--BorderWidth: var(--#{$calendar-month}__dates-cell--m-current__date--BorderWidth);
+    --#{$calendar-month}__date--BorderColor: var(--#{$calendar-month}__dates-cell--m-current__date--BorderColor);
   }
 
   &.pf-m-in-range {
@@ -187,10 +192,12 @@
   &.pf-m-selected {
     --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor);
     --#{$calendar-month}__date--Color: var(--#{$calendar-month}__dates-cell--m-selected__date--Color);
+    --#{$calendar-month}__date--BorderWidth: var(--#{$calendar-month}__dates-cell--m-selected__date--BorderWidth);
+    --#{$calendar-month}__date--BorderColor: var(--#{$calendar-month}__dates-cell--m-selected__date--BorderColor);
 
     // tweak the hover styling for a selected date
     --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor);
-    --#{$calendar-month}__date--hover--BorderWidth: 0;
+    --#{$calendar-month}__date--hover--BorderWidth: var(--#{$calendar-month}__dates-cell--m-selected__date--BorderWidth);
 
     // tweak the focus styling for a selected date
     --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor);
@@ -218,6 +225,15 @@
   background-color: var(--#{$calendar-month}__date--BackgroundColor);
   border: 0;
 
+  // base border
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    border: var(--#{$calendar-month}__date--BorderWidth) solid var(--#{$calendar-month}__date--BorderColor);
+  }
+
+  // offset focus outline
   &::after {
     position: absolute;
     inset-block-start: var(--#{$calendar-month}__date--after--OutlineOffset);
@@ -229,6 +245,7 @@
   }
 
   &,
+  &::before,
   &::after {
     border-radius: var(--#{$calendar-month}__date--BorderRadius);
   }
@@ -236,13 +253,14 @@
   &:hover,
   &.pf-m-hover {
     --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__date--hover--BackgroundColor);
-
-    border: var(--#{$calendar-month}__date--hover--BorderColor) solid var(--#{$calendar-month}__date--hover--BorderWidth);
+    --#{$calendar-month}__date--BorderWidth: var(--#{$calendar-month}__date--hover--BorderWidth);
+    --#{$calendar-month}__date--BorderColor: var(--#{$calendar-month}__date--hover--BorderColor);
   }
 
   &:focus,
   &.pf-m-focus {
     --#{$calendar-month}__date--after--BorderColor: var(--#{$calendar-month}__date--focus--after--BorderColor);
+    --#{$calendar-month}__date--after--BorderWidth: var(--#{$calendar-month}__date--focus--after--BorderWidth);
 
     outline: 0;
   }

package/components/Card/card.css

@@ -71,6 +71,7 @@
   --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
@@ -157,6 +158,7 @@
 }
 .pf-v6-c-card.pf-m-secondary {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
 }
 .pf-v6-c-card.pf-m-plain {

package/components/Card/card.scss

@@ -98,6 +98,7 @@
   // Secondary
   --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$card}--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$card}--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   // Full height
   --#{$card}--m-full-height--Height: 100%;
@@ -221,6 +222,7 @@
 
   &.pf-m-secondary {
     --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
+    --#{$card}--BorderWidth: var(--#{$card}--m-secondary--BorderWidth);
     --#{$card}--BackgroundColor: var(--#{$card}--m-secondary--BackgroundColor);
   }
 

package/components/Divider/divider.css

@@ -66,6 +66,8 @@
   flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
   content: "";
   background-color: var(--pf-v6-c-divider--Color);
+  border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
+  border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
 }
 .pf-v6-c-divider.pf-m-horizontal {
   flex-direction: row;

package/components/Divider/divider.scss

@@ -43,6 +43,8 @@ $pf-v6-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
     flex-basis: var(--#{$divider}--before--FlexBasis);
     content: "";
     background-color: var(--#{$divider}--Color);
+    border-block-start: var(--#{$divider}--Size) solid transparent;
+    border-inline-start: var(--#{$divider}--Size) solid transparent;
   }
 
   // - Divider horizontal

package/components/Drawer/drawer.css

@@ -111,7 +111,8 @@
   --pf-v6-c-drawer__panel--BoxShadow: none;
   --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
-  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
+  --pf-v6-c-drawer--m-inline__panel--after--Width: 0;
+  --pf-v6-c-drawer--m-inline__panel--after--md--Width: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
@@ -419,6 +420,7 @@
 
 @media screen and (min-width: 48rem) {
   .pf-v6-c-drawer {
+    --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
     min-width: var(--pf-v6-c-drawer__panel--MinWidth);
   }
   .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {

package/components/Drawer/drawer.scss

@@ -169,7 +169,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   // Divider 
   // TODO remove these variables in a breaking change in favor of setting the border variables directly
   --#{$drawer}__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
-  --#{$drawer}--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default); // TODO this turns on border always for inline
+  --#{$drawer}--m-inline__panel--after--Width: 0;
+  --#{$drawer}--m-inline__panel--after--md--Width: var(--pf-t--global--border--width--divider--default); // TODO this turns on border always for inline
   --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$drawer}__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
   --#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
@@ -515,6 +516,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 @media screen and (min-width: $pf-v6-global--breakpoint--md) {
   // Default
   .#{$drawer} {
+    --#{$drawer}--m-inline__panel--after--Width: var(--#{$drawer}--m-inline__panel--after--md--Width);
+
     min-width: var(--#{$drawer}__panel--MinWidth);
 
     > .#{$drawer}__main {

package/components/Page/page.css

@@ -124,6 +124,15 @@
     --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
   }
 }
+@media screen and (max-width: calc(48rem - 1px)) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
+    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
+    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
+    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
+    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
+  }
+}
 
 .pf-v6-c-page {
   display: grid;
@@ -514,13 +523,8 @@
 @media screen and (max-width: calc(48rem - 1px)) {
   .pf-v6-c-page__main-container {
     --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
-    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
-    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
     --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
     --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
-    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
-    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
-    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
   }
 }
 

package/components/Page/page.scss

@@ -93,6 +93,14 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main-container--xs--BorderInlineStartWidth: 0px; // needs a unit because it's used in calc()
   --#{$page}__main-container--xs--BorderInlineEndWidth: 0px; // needs a unit because it's used in calc()
 
+  @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
+    --#{$page}__main-container--MarginInlineStart: var(--#{$page}__main-container--xs--MarginInlineStart);
+    --#{$page}__main-container--MarginInlineEnd: var(--#{$page}__main-container--xs--MarginInlineEnd);
+    --#{$page}__main-container--BorderBlockEndWidth: var(--#{$page}__main-container--xs--BorderBlockEndWidth);
+    --#{$page}__main-container--BorderInlineStartWidth: var(--#{$page}__main-container--xs--BorderInlineStartWidth);
+    --#{$page}__main-container--BorderInlineEndWidth: var(--#{$page}__main-container--xs--BorderInlineEndWidth);
+  }
+
   // Main section
   --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$page}__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
@@ -408,13 +416,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
     --#{$page}__main-container--AlignSelf: var(--#{$page}__main-container--xs--AlignSelf);
-    --#{$page}__main-container--MarginInlineStart: var(--#{$page}__main-container--xs--MarginInlineStart);
-    --#{$page}__main-container--MarginInlineEnd: var(--#{$page}__main-container--xs--MarginInlineEnd);
     --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--xs--MaxHeight);
     --#{$page}__main-container--BorderRadius: var(--#{$page}__main-container--xs--BorderRadius);
-    --#{$page}__main-container--BorderBlockEndWidth: var(--#{$page}__main-container--xs--BorderBlockEndWidth);
-    --#{$page}__main-container--BorderInlineStartWidth: var(--#{$page}__main-container--xs--BorderInlineStartWidth);
-    --#{$page}__main-container--BorderInlineEndWidth: var(--#{$page}__main-container--xs--BorderInlineEndWidth);
   }
 }
 

package/components/Progress/progress.css

@@ -10,6 +10,8 @@
   --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-progress__indicator--Height: var(--pf-v6-c-progress__bar--Height);
   --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
+  --pf-v6-c-progress__indicator--BorderColor: transparent;
   --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
   --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
   --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -180,6 +182,13 @@
   height: var(--pf-v6-c-progress__indicator--Height);
   background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
 }
+.pf-v6-c-progress__indicator::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+  border: var(--pf-v6-c-progress__indicator--BorderWidth) solid var(--pf-v6-c-progress__indicator--BorderColor);
+  border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
+}
 
 .pf-v6-c-progress__helper-text {
   grid-row: 3/4;

package/components/Progress/progress.scss

@@ -15,6 +15,8 @@
   --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$progress}__indicator--Height: var(--#{$progress}__bar--Height);
   --#{$progress}__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$progress}__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
+  --#{$progress}__indicator--BorderColor: transparent;
   --#{$progress}__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--#{$progress}--GridGap));
 
   // Modifier variables
@@ -220,6 +222,15 @@
   position: absolute; // position absolute to bring above the semi-transparent bar overlay
   height: var(--#{$progress}__indicator--Height);
   background-color: var(--#{$progress}__indicator--BackgroundColor);
+
+  // for forced colors mode
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    border: var(--#{$progress}__indicator--BorderWidth) solid var(--#{$progress}__indicator--BorderColor);
+    border-radius: var(--#{$progress}__bar--BorderRadius);
+  }
 }
 
 .#{$progress}__helper-text {

package/components/Switch/switch.css

@@ -10,11 +10,13 @@
   --pf-v6-c-switch--Height: auto;
   --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset));
-  --pf-v6-c-switch__input--checked__toggle--BorderWidth: 0;
+  --pf-v6-c-switch__input--checked__toggle--BorderColor: transparent;
+  --pf-v6-c-switch__input--checked__toggle--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v6-c-switch__input--disabled__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
   --pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
@@ -29,6 +31,7 @@
   --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
   --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
   --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
+  --pf-v6-c-switch__toggle--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
@@ -70,6 +73,7 @@
 }
 .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle {
   --pf-v6-c-switch__toggle--BorderWidth: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth);
+  --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--checked__toggle--BorderColor);
   background-color: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor);
 }
 .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
@@ -95,6 +99,7 @@
 }
 .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle {
   --pf-v6-c-switch__toggle-icon--Color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color);
+  --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--disabled__toggle--BorderColor);
   cursor: not-allowed;
   background-color: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor);
 }
@@ -119,6 +124,7 @@
   height: var(--pf-v6-c-switch__toggle--before--Height);
   content: "";
   background-color: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor);
+  border: var(--pf-v6-c-switch__toggle--before--BorderWidth) solid transparent;
   border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius);
   transition: var(--pf-v6-c-switch__toggle--before--Transition);
   transform: translateY(-50%);

package/components/Switch/switch.scss

@@ -19,11 +19,13 @@
   // Switch input
   --#{$switch}__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$switch}__input--checked__toggle--before--TranslateX: calc(100% + var(--#{$switch}__toggle-icon--Offset));
-  --#{$switch}__input--checked__toggle--BorderWidth: 0;
+  --#{$switch}__input--checked__toggle--BorderColor: transparent;
+  --#{$switch}__input--checked__toggle--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$switch}__input--checked__label--Color: var(--pf-t--global--text--color--regular);
   --#{$switch}__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
   --#{$switch}__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
   --#{$switch}__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$switch}__input--disabled__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$switch}__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
   --#{$switch}__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
   --#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
@@ -40,6 +42,7 @@
   --#{$switch}__toggle--before--Width: calc(var(--#{$switch}--FontSize) - var(--#{$switch}__toggle-icon--Offset));
   --#{$switch}__toggle--before--Height: var(--#{$switch}__toggle--before--Width);
   --#{$switch}__toggle--before--InsetInlineStart: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
+  --#{$switch}__toggle--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$switch}__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$switch}__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$switch}__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
@@ -88,6 +91,7 @@
 
     ~ .#{$switch}__toggle {
       --#{$switch}__toggle--BorderWidth: var(--#{$switch}__input--checked__toggle--BorderWidth);
+      --#{$switch}__toggle--BorderColor: var(--#{$switch}__input--checked__toggle--BorderColor);
 
       background-color: var(--#{$switch}__input--checked__toggle--BackgroundColor);
 
@@ -125,6 +129,7 @@
 
     ~ .#{$switch}__toggle {
       --#{$switch}__toggle-icon--Color: var(--#{$switch}__input--disabled__toggle-icon--Color);
+      --#{$switch}__toggle--BorderColor: var(--#{$switch}__input--disabled__toggle--BorderColor);
 
       cursor: not-allowed;
       background-color: var(--#{$switch}__input--disabled__toggle--BackgroundColor);
@@ -153,6 +158,7 @@
     height: var(--#{$switch}__toggle--before--Height);
     content: "";
     background-color: var(--#{$switch}__input--not-checked__toggle--before--BackgroundColor);
+    border: var(--#{$switch}__toggle--before--BorderWidth) solid transparent; // for forced color mode
     border-radius: var(--#{$switch}__toggle--before--BorderRadius);
     transition: var(--#{$switch}__toggle--before--Transition); // TODO remove shorthand in breaking change
     transform: translateY(-50%);