@patternfly/patternfly 6.3.0-prerelease.76 → 6.3.0-prerelease.78

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/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/FormControl/form-control.css

@@ -313,12 +313,6 @@
 .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
   padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
 }
-@-moz-document url-prefix() {
-  .pf-v6-c-form-control:has(select) {
-    --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
-    --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
-  }
-}
 .pf-v6-c-form-control.pf-m-placeholder > select {
   --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
 }

package/components/FormControl/form-control.scss

@@ -394,13 +394,6 @@
     & .#{$form-control}__utilities {
       padding-inline-end: var(--#{$form-control}__utilities--select--PaddingInlineEnd);
     }
-
-    // Firefox's select text has additional padding
-    // stylelint-disable-next-line
-    @-moz-document url-prefix() {
-      --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) - 1px);
-      --#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__select--PaddingInlineStart) - 4px);
-    }
   }
 
   &.pf-m-placeholder > select {

package/components/Label/label.css

@@ -5,7 +5,7 @@
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
   --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
-  --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -146,10 +146,10 @@
   --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
-  --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
+  --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
   --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
-  --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
+  --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-label--m-add--BackgroundColor: transparent;
   --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);

package/components/Label/label.scss

@@ -7,7 +7,7 @@
   --#{$label}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$label}--MaxWidth: 100%;
   --#{$label}--MinWidth: calc((var(--#{$label}--FontSize) * var(--pf-t--global--font--line-height--body) + var(--#{$label}--PaddingBlockStart) + var(--#{$label}--PaddingBlockEnd)));
-  --#{$label}--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$label}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$label}--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$label}--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -184,10 +184,10 @@
   // Overflow
   --#{$label}--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
   --#{$label}--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
-  --#{$label}--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
+  --#{$label}--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
   --#{$label}--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --#{$label}--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
-  --#{$label}--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
+  --#{$label}--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
 
   // Add
   --#{$label}--m-add--Color: var(--pf-t--global--text--color--brand--default);

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/Panel/panel.css

@@ -8,12 +8,12 @@
   --pf-v6-c-panel--before--BorderWidth: 0;
   --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);

package/components/Panel/panel.scss

@@ -14,7 +14,7 @@
 
   // secondary modifier
   --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   // bordered
   --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
@@ -23,7 +23,7 @@
   // raised
   --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --#{$panel}--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$panel}--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   // header
   --#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);

package/components/Progress/progress.css

@@ -4,7 +4,7 @@
   --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
   --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);

package/components/Progress/progress.scss

@@ -9,7 +9,7 @@
   --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
   --#{$progress}__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$progress}__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --#{$progress}__bar--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$progress}__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
   --#{$progress}__status--Gap: var(--pf-t--global--spacer--sm);
   --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);

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) {