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

package/patternfly.css

@@ -11265,12 +11265,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --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);
@@ -11279,9 +11281,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --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 {
@@ -11362,8 +11367,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 .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);
@@ -11386,8 +11391,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .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);
@@ -11411,6 +11418,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   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);
@@ -11420,15 +11433,17 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   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 {
@@ -11511,6 +11526,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --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;
@@ -11597,6 +11613,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 .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 {
@@ -14247,6 +14264,8 @@ ul) {
   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;
@@ -14597,7 +14616,8 @@ ul) {
   --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);
@@ -14905,6 +14925,7 @@ ul) {
 
 @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 {
@@ -21411,6 +21432,15 @@ ul.pf-v6-c-list {
     --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;
@@ -21801,13 +21831,8 @@ ul.pf-v6-c-list {
 @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);
   }
 }
 
@@ -22732,6 +22757,8 @@ ul.pf-v6-c-list {
   --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);
@@ -22902,6 +22929,13 @@ ul.pf-v6-c-list {
   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;
@@ -24565,11 +24599,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --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);
@@ -24584,6 +24620,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --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);
@@ -24625,6 +24662,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 }
 .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 {
@@ -24650,6 +24688,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 }
 .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);
 }
@@ -24674,6 +24713,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   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%);