@patternfly/react-styles 6.3.1-prerelease.0 → 6.3.1-prerelease.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.1-prerelease.0...@patternfly/react-styles@6.3.1-prerelease.1) (2025-09-24)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 ## [6.3.1-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0...@patternfly/react-styles@6.3.1-prerelease.0) (2025-09-05)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Accordion/accordion.css

@@ -78,9 +78,10 @@
   --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-accordion__item--BorderWidth: 0;
   --pf-v6-c-accordion__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
-  --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-accordion__expandable-content--BorderWidth: 0;
   --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-accordion {
@@ -159,6 +160,7 @@
   --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility);
   --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
   --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
+  --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth);
 }
 
 .pf-v6-c-accordion__toggle {

package/css/components/Alert/alert-group.css

@@ -64,7 +64,7 @@
   --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
   --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
   --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
-  --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-alert-group__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -74,7 +74,7 @@
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
   --pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
   --pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
   --pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
@@ -119,6 +119,8 @@
 }
 .pf-v6-c-alert-group__overflow-button:hover, .pf-v6-c-alert-group__overflow-button:focus {
   --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-v6-c-alert-group__overflow-button--hover--BorderWidth);
+  --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
+  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
 }
 
 .pf-v6-c-alert-group__item {
@@ -174,17 +176,4 @@
   .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
     transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
   }
-}
-.pf-v6-c-alert-group__item:hover {
-  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
-  --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
-  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
-}
-.pf-v6-c-alert-group__item:focus {
-  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
-  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
-}
-.pf-v6-c-alert-group__item:active {
-  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
-  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
 }

package/css/components/Banner/banner.css

@@ -9,7 +9,7 @@
   --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-banner--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
   --pf-v6-c-banner--link--TextDecoration: underline;
   --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);

package/css/components/Button/button.css

@@ -22,7 +22,7 @@
   --pf-v6-c-button--TransitionDelay: 0s;
   --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
-  --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
+  --pf-v6-c-button--TransitionProperty: color, background, border-color;
   --pf-v6-c-button--ScaleX: 1;
   --pf-v6-c-button--ScaleY: 1;
   --pf-v6-c-button--border--offset: 0;
@@ -148,7 +148,7 @@
   --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
   --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
   --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
-  --pf-v6-c-button--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-button--m-plain--BorderColor: transparent;
   --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;

package/css/components/CalendarMonth/calendar-month.css

@@ -31,6 +31,9 @@
   --pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd: 0;
   --pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd);
   --pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart: 0;
+  --pf-v6-c-calendar-month__dates-cell--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0;
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0;
   --pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-calendar-month__dates-cell--m-in-range--m-start-range--before--InsetInlineStart: 50%;
   --pf-v6-c-calendar-month__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd: 50%;
@@ -38,15 +41,19 @@
   --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
   --pf-v6-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --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);
@@ -55,7 +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--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 {
@@ -128,13 +140,20 @@
   inset-block-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd);
   inset-inline-start: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart);
   inset-inline-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd);
+  pointer-events: none;
   content: "";
   background-color: var(--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor);
+  border: solid var(--pf-v6-c-calendar-month__dates-cell--after--BorderColor);
+  border-width: var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth) 0 var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth);
 }
 .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--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);
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth);
   --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
   --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
   --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth);
@@ -153,14 +172,18 @@
 .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);
 }
 .pf-v6-c-calendar-month__dates-cell.pf-m-disabled {
   --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0;
+  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0;
   --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
 }
 
@@ -176,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);
@@ -185,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/css/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/css/components/CodeBlock/code-block.css

@@ -1,6 +1,6 @@
 .pf-v6-c-code-block {
   --pf-v6-c-code-block--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);

package/css/components/DatePicker/date-picker.css

@@ -5,6 +5,8 @@
   --pf-v6-c-date-picker__input--c-form-control--Width: calc(var(--pf-v6-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v6-c-date-picker__input--c-form-control--width-base));
   --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
+  --pf-v6-c-date-picker__calendar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-date-picker__calendar--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -35,6 +37,7 @@
   inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
   z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
   background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
+  border: var(--pf-v6-c-date-picker__calendar--BorderWidth) solid var(--pf-v6-c-date-picker__calendar--BorderColor);
   box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
 }
 .pf-v6-c-date-picker__calendar.pf-m-align-right {

package/css/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/css/components/Drawer/drawer.css

@@ -110,9 +110,10 @@
   --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
   --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--high-contrast--border--width--divider--default);
-  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
-  --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--high-contrast--border--width--divider--default);
+  --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: 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);
   --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: 0;
@@ -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/css/components/DualListSelector/dual-list-selector.css

@@ -225,14 +225,13 @@
   --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color);
   font-weight: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
 }
-.pf-v6-c-dual-list-selector__list-item-row:hover {
+.pf-v6-c-dual-list-selector__list-item-row:hover, .pf-v6-c-dual-list-selector__list-item-row:focus-within {
   --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
   --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BorderWidth);
 }
 .pf-v6-c-dual-list-selector__list-item-row.pf-m-check {
   --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
-  --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderColor: transparent;
-  --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: revert;
+  --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderWidth: 0;
 }
 .pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row {
   --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor);
@@ -246,7 +245,7 @@
 
 .pf-v6-c-dual-list-selector__item,
 .pf-v6-c-dual-list-selector__item-main {
-  flex-basis: 100%;
+  flex-grow: 1;
 }
 
 .pf-v6-c-dual-list-selector__draggable {
@@ -265,7 +264,7 @@
 
 .pf-v6-c-dual-list-selector__item {
   position: relative;
-  width: 100%;
+  min-width: 0;
   padding-block-start: var(--pf-v6-c-dual-list-selector__item--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-dual-list-selector__item--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);

package/css/components/ExpandableSection/expandable-section.css

@@ -19,6 +19,7 @@
   --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
   --pf-v6-c-expandable-section__content--Opacity: 0;
   --pf-v6-c-expandable-section__content--TranslateY: 0;
+  --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
   --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
   --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
   --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -66,6 +67,7 @@
   --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
   --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
   --pf-v6-c-expandable-section__content--Visibility: auto;
+  --pf-v6-c-expandable-section__content--Overflow: visible;
   --pf-v6-c-expandable-section__content--MaxHeight: 99999px;
   --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
   gap: var(--pf-v6-c-expandable-section--Gap);
@@ -101,6 +103,7 @@
 }
 .pf-v6-c-expandable-section.pf-m-truncate {
   --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
+  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
 }
 .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
   display: -webkit-box;
@@ -127,13 +130,14 @@
 .pf-v6-c-expandable-section__content {
   max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
   padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
-  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
+  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
 }
 .pf-v6-c-expandable-section__content:where([hidden]) {
   display: revert;
 }
-.pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
+.pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) > .pf-v6-c-expandable-section__content {
   max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
+  overflow: var(--pf-v6-c-expandable-section__content--Overflow, hidden);
   visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
   opacity: var(--pf-v6-c-expandable-section__content--Opacity);
   transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);

package/css/components/FormControl/form-control.css

@@ -158,6 +158,12 @@
 .pf-v6-c-form-control > :is(input, select) {
   text-overflow: ellipsis;
 }
+.pf-v6-c-form-control > select {
+  background-color: var(--pf-v6-c-form-control--BackgroundColor);
+}
+.pf-v6-c-form-control > select * {
+  color: var(--pf-v6-c-form-control--Color);
+}
 .pf-v6-c-form-control:has(input) {
   --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
   --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
@@ -303,17 +309,10 @@
   --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
   --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
   --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-form-control--BackgroundColor);
 }
 .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/css/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/css/components/Login/login.css

@@ -17,7 +17,7 @@
   --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
+  --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);

package/css/components/Menu/menu.css

@@ -7,7 +7,7 @@
   --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-menu--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
+  --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
@@ -26,7 +26,11 @@
   --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu__footer--BoxShadow: none;
+  --pf-v6-c-menu__footer--BorderColor: transparent;
+  --pf-v6-c-menu__footer--BorderWidth: 0;
   --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-menu__list-item--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -346,6 +350,8 @@
 .pf-v6-c-menu.pf-m-scrollable {
   --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
   --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
+  --pf-v6-c-menu__footer--BorderColor: var(--pf-v6-c-menu--m-scrollable__footer--BorderColor);
+  --pf-v6-c-menu__footer--BorderWidth: var(--pf-v6-c-menu--m-scrollable__footer--BorderWidth);
   --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
   --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
   overflow: hidden;
@@ -387,6 +393,7 @@
   padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd);
+  border-block-start: var(--pf-v6-c-menu__footer--BorderWidth) solid var(--pf-v6-c-menu__footer--BorderColor);
   box-shadow: var(--pf-v6-c-menu__footer--BoxShadow);
 }
 

package/css/components/MenuToggle/menu-toggle.css

@@ -92,7 +92,7 @@
   --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
-  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
   --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
   --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;

package/css/components/ModalBox/modal-box.css

@@ -1,7 +1,7 @@
 .pf-v6-c-modal-box {
   --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-modal-box--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
+  --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--xl);

package/css/components/Page/page.css

@@ -107,6 +107,8 @@
   --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
+  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-page {
@@ -122,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;
@@ -512,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);
   }
 }
 
@@ -729,6 +735,9 @@
   flex-shrink: 0;
 }
 
+.pf-v6-c-page__drawer > .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+  border-block-start: var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth) solid var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor);
+}
 .pf-v6-c-page__drawer .pf-v6-c-page__main-container {
   align-self: revert;
 }

package/css/components/Page/page.d.ts

@@ -2,6 +2,9 @@ import './page.css';
 declare const _default: {
   "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
+  "drawer": "pf-v6-c-drawer",
+  "drawerMain": "pf-v6-c-drawer__main",
+  "drawerPanel": "pf-v6-c-drawer__panel",
   "masthead": "pf-v6-c-masthead",
   "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {

package/css/components/Page/page.js

@@ -4,6 +4,9 @@ require('./page.css');
 exports.default = {
   "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
+  "drawer": "pf-v6-c-drawer",
+  "drawerMain": "pf-v6-c-drawer__main",
+  "drawerPanel": "pf-v6-c-drawer__panel",
   "masthead": "pf-v6-c-masthead",
   "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {

package/css/components/Page/page.mjs

@@ -2,6 +2,9 @@ import './page.css';
 export default {
   "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
+  "drawer": "pf-v6-c-drawer",
+  "drawerMain": "pf-v6-c-drawer__main",
+  "drawerPanel": "pf-v6-c-drawer__panel",
   "masthead": "pf-v6-c-masthead",
   "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {