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

package/components/_index.css

@@ -2458,12 +2458,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);
@@ -2472,9 +2474,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 {
@@ -2555,8 +2560,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);
@@ -2579,8 +2584,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);
@@ -2604,6 +2611,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);
@@ -2613,15 +2626,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 {
@@ -2704,6 +2719,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;
@@ -2790,6 +2806,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 {
@@ -5440,6 +5457,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;
@@ -5790,7 +5809,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);
@@ -6098,6 +6118,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 {
@@ -12604,6 +12625,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;
@@ -12994,13 +13024,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);
   }
 }
 
@@ -13925,6 +13950,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);
@@ -14095,6 +14122,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;
@@ -15758,11 +15792,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);
@@ -15777,6 +15813,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);
@@ -15818,6 +15855,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 {
@@ -15843,6 +15881,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);
 }
@@ -15867,6 +15906,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%);

package/docs/demos/CardView/examples/CardView.md

@@ -1030,92 +1030,88 @@ section: patterns
           </div>
         </div>
       </section>
-      <section class="pf-v6-c-page__main-section pf-m-sticky-bottom">
-        <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-pagination pf-m-bottom">
-            <div class="pf-v6-c-pagination__page-menu">
-              <button
-                class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
-                type="button"
-                aria-expanded="false"
-                aria-label="Menu toggle"
-                id="pagination-menu-toggle-bottom-example"
-              >
-                <span class="pf-v6-c-menu-toggle__text">
-                  <b>1 - 10</b>&nbsp;of&nbsp;
-                  <b>36</b>
-                </span>
-                <span class="pf-v6-c-menu-toggle__controls">
-                  <span class="pf-v6-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
-            <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
-              <div class="pf-v6-c-pagination__nav-control pf-m-first">
-                <button
-                  class="pf-v6-c-button pf-m-plain"
-                  type="button"
-                  disabled
-                  aria-label="Go to first page"
-                >
-                  <span class="pf-v6-c-button__icon">
-                    <i class="fas fa-angle-double-left" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
-              <div class="pf-v6-c-pagination__nav-control pf-m-prev">
-                <button
-                  class="pf-v6-c-button pf-m-plain"
-                  type="button"
-                  disabled
-                  aria-label="Go to previous page"
-                >
-                  <span class="pf-v6-c-button__icon">
-                    <i class="fas fa-angle-left" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
-              <div class="pf-v6-c-pagination__nav-page-select">
-                <span class="pf-v6-c-form-control">
-                  <input
-                    aria-label="Current page"
-                    type="number"
-                    min="1"
-                    max="4"
-                    value="1"
-                  />
-                </span>
-                <span aria-hidden="true">of 4</span>
-              </div>
-              <div class="pf-v6-c-pagination__nav-control pf-m-next">
-                <button
-                  class="pf-v6-c-button pf-m-plain"
-                  type="button"
-                  aria-label="Go to next page"
-                >
-                  <span class="pf-v6-c-button__icon">
-                    <i class="fas fa-angle-right" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
-              <div class="pf-v6-c-pagination__nav-control pf-m-last">
-                <button
-                  class="pf-v6-c-button pf-m-plain"
-                  type="button"
-                  disabled
-                  aria-label="Go to last page"
-                >
-                  <span class="pf-v6-c-button__icon">
-                    <i class="fas fa-angle-double-right" aria-hidden="true"></i>
-                  </span>
-                </button>
-              </div>
-            </nav>
-          </div>
+      <div class="pf-v6-c-pagination pf-m-bottom pf-m-sticky">
+        <div class="pf-v6-c-pagination__page-menu">
+          <button
+            class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
+            type="button"
+            aria-expanded="false"
+            aria-label="Menu toggle"
+            id="pagination-menu-toggle-bottom-example"
+          >
+            <span class="pf-v6-c-menu-toggle__text">
+              <b>1 - 10</b>&nbsp;of&nbsp;
+              <b>36</b>
+            </span>
+            <span class="pf-v6-c-menu-toggle__controls">
+              <span class="pf-v6-c-menu-toggle__toggle-icon">
+                <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+              </span>
+            </span>
+          </button>
         </div>
-      </section>
+        <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
+          <div class="pf-v6-c-pagination__nav-control pf-m-first">
+            <button
+              class="pf-v6-c-button pf-m-plain"
+              type="button"
+              disabled
+              aria-label="Go to first page"
+            >
+              <span class="pf-v6-c-button__icon">
+                <i class="fas fa-angle-double-left" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="pf-v6-c-pagination__nav-control pf-m-prev">
+            <button
+              class="pf-v6-c-button pf-m-plain"
+              type="button"
+              disabled
+              aria-label="Go to previous page"
+            >
+              <span class="pf-v6-c-button__icon">
+                <i class="fas fa-angle-left" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="pf-v6-c-pagination__nav-page-select">
+            <span class="pf-v6-c-form-control">
+              <input
+                aria-label="Current page"
+                type="number"
+                min="1"
+                max="4"
+                value="1"
+              />
+            </span>
+            <span aria-hidden="true">of 4</span>
+          </div>
+          <div class="pf-v6-c-pagination__nav-control pf-m-next">
+            <button
+              class="pf-v6-c-button pf-m-plain"
+              type="button"
+              aria-label="Go to next page"
+            >
+              <span class="pf-v6-c-button__icon">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="pf-v6-c-pagination__nav-control pf-m-last">
+            <button
+              class="pf-v6-c-button pf-m-plain"
+              type="button"
+              disabled
+              aria-label="Go to last page"
+            >
+              <span class="pf-v6-c-button__icon">
+                <i class="fas fa-angle-double-right" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+        </nav>
+      </div>
     </main>
   </div>
 </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.3.0-prerelease.75",
+  "version": "6.3.0-prerelease.77",
   "keywords": [],
   "license": "MIT",
   "engines": {

package/patternfly-no-globals.css

@@ -11125,12 +11125,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);
@@ -11139,9 +11141,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 {
@@ -11222,8 +11227,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);
@@ -11246,8 +11251,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);
@@ -11271,6 +11278,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);
@@ -11280,15 +11293,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 {
@@ -11371,6 +11386,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;
@@ -11457,6 +11473,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 {
@@ -14107,6 +14124,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;
@@ -14457,7 +14476,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);
@@ -14765,6 +14785,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 {
@@ -21271,6 +21292,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;
@@ -21661,13 +21691,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);
   }
 }
 
@@ -22592,6 +22617,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);
@@ -22762,6 +22789,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;
@@ -24425,11 +24459,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);
@@ -24444,6 +24480,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);
@@ -24485,6 +24522,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 {
@@ -24510,6 +24548,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);
 }
@@ -24534,6 +24573,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%);