@patternfly/patternfly 4.206.1 → 4.207.0

package/RELEASE-NOTES.md

@@ -3,6 +3,47 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.10 release notes (2022-08-04)
+Packages released:
+- [@patternfly/patternfly@v4.206.3](https://www.npmjs.com/package/@patternfly/patternfly/v/4.206.3)
+
+### Components
+- **Description list:** Removed dl group mod in examples ([#4993](https://github.com/patternfly/patternfly/pull/4993))
+- **Drawer:**
+  - Fixed sticky page sections when in drawer ([#4971](https://github.com/patternfly/patternfly/pull/4971))
+  - Fixed broken var names ([#4950](https://github.com/patternfly/patternfly/pull/4950))
+- **Form control:** Fixed disabled text color ([#4988](https://github.com/patternfly/patternfly/pull/4988))
+- **Menu:**
+  - Adjusted group title text ([#4917](https://github.com/patternfly/patternfly/pull/4917))
+  - Fixed non-visible drilldown submenu VO issue ([#4980](https://github.com/patternfly/patternfly/pull/4980))
+- **Number input:** Added support for status icon ([#4983](https://github.com/patternfly/patternfly/pull/4983))
+- **Page:** Fixed sticky-on section padding ([#5011](https://github.com/patternfly/patternfly/pull/5011))
+- **Popover:** Aligned edge of close button icon with content ([#4998](https://github.com/patternfly/patternfly/pull/4998))
+- **Sidebar:** Added light/dark theme border, remove desktop shadow ([#4938](https://github.com/patternfly/patternfly/pull/4938))
+- **Table:**
+  - Added aria-hidden to table border row ([#4923](https://github.com/patternfly/patternfly/pull/4923))
+  - Removed truncate from sticky hrs ([#4981](https://github.com/patternfly/patternfly/pull/4981))
+- **Tabs:** Added overflow variation for horiz overflow variation ([#5005](https://github.com/patternfly/patternfly/pull/5005))
+- **Timestamp:** Added component ([#4996](https://github.com/patternfly/patternfly/pull/4996))
+- **Tree view:**
+  - Added selectable/expandable, improved click areas ([#4869](https://github.com/patternfly/patternfly/pull/4869))
+  - Fixed selectable/expandable node bugs ([#4991](https://github.com/patternfly/patternfly/pull/4991))
+
+### Other
+- **Build:**
+  - Update docs framework ([#4934](https://github.com/patternfly/patternfly/pull/4934))
+  - Updated github workflow to publish docs before a11y tests ([#4967](https://github.com/patternfly/patternfly/pull/4967))
+  - Enable a11y attr check, update modal and popover docs ([#4977](https://github.com/patternfly/patternfly/pull/4977))
+- **Global:**
+  - Added full height/absolute mods for screen reader class ([#4888](https://github.com/patternfly/patternfly/pull/4888))
+  - Updated dark theme visited link color ([#4964](https://github.com/patternfly/patternfly/pull/4964))
+- **Workspace:**
+  - Fixed duplicate IDs in example docs ([#4928](https://github.com/patternfly/patternfly/pull/4928))
+  - Enabled dark theme switch ([#4937](https://github.com/patternfly/patternfly/pull/4937))
+  - Removed react css imports ([#4953](https://github.com/patternfly/patternfly/pull/4953))
+- **Utilities:** Adjusted utility colors in dark theme ([#4933](https://github.com/patternfly/patternfly/pull/4933))
+
+
 ## 2022.08 release notes (2022-06-24)
 Packages released:
 - [@patternfly/patternfly@v4.202.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.202.1)

package/components/Button/button.css

@@ -156,6 +156,11 @@
   --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
   --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
   --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
+  --pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100);
+  --pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300);
+  --pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm);
   position: relative;
   display: inline-block;
   padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -220,6 +225,9 @@
   --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color);
   --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
 }
+.pf-c-button.pf-m-primary .pf-c-badge.pf-m-unread {
+  border: var(--pf-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-c-button--m-primary__c-badge--BorderColor);
+}
 .pf-c-button.pf-m-secondary {
   --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor);
   color: var(--pf-c-button--m-secondary--Color);
@@ -431,6 +439,11 @@
 .pf-c-button:disabled::after, .pf-c-button.pf-m-disabled::after, .pf-c-button.pf-m-aria-disabled::after {
   border-color: var(--pf-c-button--disabled--after--BorderColor);
 }
+.pf-c-button:disabled .pf-c-badge, .pf-c-button.pf-m-disabled .pf-c-badge, .pf-c-button.pf-m-aria-disabled .pf-c-badge {
+  --pf-c-badge--m-unread--Color: var(--pf-c-button--disabled__c-badge--Color);
+  --pf-c-badge--m-unread--BackgroundColor: var(--pf-c-button--disabled__c-badge--BackgroundColor);
+  --pf-c-button--m-primary__c-badge--BorderWidth: 0;
+}
 .pf-c-button.pf-m-aria-disabled {
   --pf-c-button--after--BorderWidth: 0;
   --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
@@ -472,6 +485,12 @@
   --pf-c-spinner--Color: currentcolor;
 }
 
+.pf-c-button__count {
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--pf-c-button__count--MarginLeft);
+}
+
 .pf-m-overpass-font .pf-c-button {
   --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
 }
@@ -508,6 +527,7 @@
   --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--primary-color--100);
   --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--primary-color--100);
   --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--Color--100);
 }
 :where(.pf-theme-dark) .pf-c-button.pf-m-control:disabled::after {
   border: 0;

package/components/Button/button.scss

@@ -192,6 +192,13 @@
   --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
   --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
 
+  // Count
+  --pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100);
+  --pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300);
+  --pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm); // used only for primary, unread, not disabled
+
   position: relative;
   display: inline-block;
   padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -274,6 +281,10 @@
       --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color);
       --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
     }
+
+    .pf-c-badge.pf-m-unread {
+      border: var(--pf-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-c-button--m-primary__c-badge--BorderColor);
+    }
   }
 
   // Secondary buttons
@@ -564,6 +575,12 @@
 
     color: var(--pf-c-button--disabled--Color);
     background-color: var(--pf-c-button--disabled--BackgroundColor);
+
+    .pf-c-badge {
+      --pf-c-badge--m-unread--Color: var(--pf-c-button--disabled__c-badge--Color);
+      --pf-c-badge--m-unread--BackgroundColor: var(--pf-c-button--disabled__c-badge--BackgroundColor);
+      --pf-c-button--m-primary__c-badge--BorderWidth: 0;
+    }
   }
 
   &.pf-m-aria-disabled {
@@ -620,6 +637,12 @@
   }
 }
 
+.pf-c-button__count {
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--pf-c-button__count--MarginLeft);
+}
+
 // RedHat Font overrides
 @include pf-m-overpass-font {
   .pf-c-button {

package/components/Button/themes/dark/button.scss

@@ -33,6 +33,7 @@
     --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--primary-color--100);
     --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--primary-color--100);
     --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+    --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--Color--100);
 
     &.pf-m-control:disabled {
       &::after {

package/components/Check/check.css

@@ -10,6 +10,9 @@
   --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-check__description--Color: var(--pf-global--Color--200);
   --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-c-check--GridGap);
@@ -57,4 +60,10 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-check__input.pf-m-disabled {
   --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
   cursor: not-allowed;
+}
+
+.pf-c-check__label-required {
+  margin-left: var(--pf-c-check__label-required--MarginLeft);
+  font-size: var(--pf-c-check__label-required--FontSize);
+  color: var(--pf-c-check__label-required--Color);
 }

package/components/Check/check.scss

@@ -11,6 +11,11 @@
   --pf-c-check__description--Color: var(--pf-global--Color--200);
   --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
 
+  // Required checkbox
+  --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
+
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-c-check--GridGap);
@@ -64,3 +69,9 @@
     cursor: not-allowed;
   }
 }
+
+.pf-c-check__label-required {
+  margin-left: var(--pf-c-check__label-required--MarginLeft);
+  font-size: var(--pf-c-check__label-required--FontSize);
+  color: var(--pf-c-check__label-required--Color);
+}

package/components/ContextSelector/context-selector.css

@@ -248,6 +248,12 @@
   background-clip: padding-box;
   box-shadow: var(--pf-c-context-selector__menu--BoxShadow);
 }
+.pf-c-context-selector__menu.pf-m-static {
+  position: static;
+  top: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 .pf-c-context-selector__menu-search {
   position: relative;

package/components/ContextSelector/context-selector.scss

@@ -65,7 +65,6 @@
   --pf-c-context-selector__menu-list--PaddingTop: var(--pf-c-context-selector__menu--PaddingTop); // reference spacer directly at breaking change
   --pf-c-context-selector__menu-list--PaddingBottom: var(--pf-global--spacer--sm);
 
-
   // Menu item
   --pf-c-context-selector__menu-list-item--Color: var(--pf-global--Color--dark-100);
   --pf-c-context-selector__menu-list-item--PaddingTop: var(--pf-global--spacer--sm);
@@ -299,6 +298,13 @@
   background-color: var(--pf-c-context-selector__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--pf-c-context-selector__menu--BoxShadow);
+
+  &.pf-m-static {
+    position: static;
+    top: auto;
+    z-index: auto;
+    min-width: min-content;
+  }
 }
 
 .pf-c-context-selector__menu-search {

package/components/Dropdown/dropdown.css

@@ -469,6 +469,12 @@
   background-clip: padding-box;
   box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
 }
+.pf-c-dropdown__menu.pf-m-static {
+  position: static;
+  top: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 .pf-c-dropdown .pf-c-menu,
 .pf-c-dropdown__menu {

package/components/Dropdown/dropdown.scss

@@ -631,6 +631,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   background: var(--pf-c-dropdown__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
+
+  &.pf-m-static {
+    position: static;
+    top: auto;
+    z-index: auto;
+    min-width: min-content;
+  }
 }
 
 .pf-c-dropdown .pf-c-menu,

package/components/ExpandableSection/expandable-section.css

@@ -3,6 +3,7 @@
   --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-expandable-section__toggle--PaddingLeft: 0;
+  --pf-c-expandable-section__toggle--MarginTop: 0;
   --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
   --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
   --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
@@ -32,6 +33,8 @@
   --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
   --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
+  --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
+  --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
 }
 .pf-c-expandable-section.pf-m-expanded {
   --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -39,7 +42,7 @@
   --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
   --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
 }
-.pf-c-expandable-section.pf-m-detached {
+.pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
   --pf-c-expandable-section__content--MarginTop: 0;
 }
 .pf-c-expandable-section.pf-m-limit-width {
@@ -69,10 +72,24 @@
 .pf-c-expandable-section.pf-m-indented {
   --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
 }
+.pf-c-expandable-section.pf-m-truncate {
+  --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
+  --pf-c-expandable-section__toggle--PaddingTop: 0;
+  --pf-c-expandable-section__toggle--PaddingRight: 0;
+  --pf-c-expandable-section__toggle--PaddingBottom: 0;
+  --pf-c-expandable-section__toggle-text--MarginLeft: 0;
+}
+.pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
+  overflow: hidden;
+}
 
 .pf-c-expandable-section__toggle {
   display: flex;
   padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
+  margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
   color: var(--pf-c-expandable-section__toggle--Color);
   border: none;
 }

package/components/ExpandableSection/expandable-section.scss

@@ -4,6 +4,7 @@
   --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-expandable-section__toggle--PaddingLeft: 0;
+  --pf-c-expandable-section__toggle--MarginTop: 0;
   --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
   --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
   --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
@@ -46,6 +47,10 @@
   // Indented
   --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
 
+  // Truncate
+  --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
+  --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
+
 
   &.pf-m-expanded {
     --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -54,7 +59,8 @@
     --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
   }
 
-  &.pf-m-detached {
+  &.pf-m-detached,
+  &.pf-m-truncate {
     --pf-c-expandable-section__content--MarginTop: 0;
   }
 
@@ -89,11 +95,29 @@
   &.pf-m-indented {
     --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
   }
+
+  &.pf-m-truncate {
+    --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
+    --pf-c-expandable-section__toggle--PaddingTop: 0;
+    --pf-c-expandable-section__toggle--PaddingRight: 0;
+    --pf-c-expandable-section__toggle--PaddingBottom: 0;
+    --pf-c-expandable-section__toggle-text--MarginLeft: 0;
+
+    &:not(.pf-m-expanded) .pf-c-expandable-section__content {
+      // stylelint-disable
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
+      // stylelint-enable
+      overflow: hidden;
+    }
+  }
 }
 
 .pf-c-expandable-section__toggle {
   display: flex;
   padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
+  margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
   color: var(--pf-c-expandable-section__toggle--Color);
   border: none;
 

package/components/InputGroup/input-group.css

@@ -29,6 +29,9 @@
   width: 100%;
   background-color: var(--pf-c-input-group--BackgroundColor);
 }
+.pf-c-input-group.pf-m-plain {
+  --pf-c-input-group--BackgroundColor: transparent;
+}
 .pf-c-input-group > * + * {
   margin-left: -1px;
 }

package/components/InputGroup/input-group.scss

@@ -27,6 +27,10 @@
   width: 100%;
   background-color: var(--pf-c-input-group--BackgroundColor);
 
+  &.pf-m-plain {
+    --pf-c-input-group--BackgroundColor: transparent; // make default at breaking change
+  }
+
   // stylelint-disable
   > * + * {
     margin-left: -1px;

package/components/Masthead/masthead.css

@@ -8,7 +8,7 @@
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
 }
 
-.pf-c-masthead {
+.pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
   --pf-global--Color--100: var(--pf-global--Color--light-100);
   --pf-global--Color--200: var(--pf-global--Color--light-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -17,10 +17,10 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-masthead .pf-c-card {
+.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
   --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
 }
-.pf-c-masthead .pf-c-button {
+.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
   --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -227,6 +227,9 @@
 .pf-c-masthead .pf-c-nav {
   align-self: stretch;
 }
+.pf-c-masthead .pf-c-button.pf-m-plain {
+  color: var(--pf-global--Color--200);
+}
 
 .pf-c-masthead__main {
   position: relative;

package/components/Masthead/masthead.scss

@@ -243,6 +243,10 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   .pf-c-nav {
     align-self: stretch;
   }
+
+  .pf-c-button.pf-m-plain {
+    @include pf-t-dark(--pf-global--Color--200); // for all plain buttons, especially inside other components (.pf-c-input-group), for dark mode
+  }
 }
 
 // Main

package/components/Menu/menu.css

@@ -192,8 +192,6 @@
   --pf-c-menu__footer--BoxShadow: none;
   --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
-  --pf-c-menu__footer--after--BorderBottomWidth: 0;
-  --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
   --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
   --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -325,7 +323,6 @@
   --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
   --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
   --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
-  --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
 }
 .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
   overflow-y: auto;
@@ -627,7 +624,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   pointer-events: none;
   content: "";
   border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
-  border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
 }
 
 :where(.pf-theme-dark) .pf-c-menu {

package/components/Menu/menu.scss

@@ -182,8 +182,6 @@
   --pf-c-menu__footer--BoxShadow: none;
   --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
-  --pf-c-menu__footer--after--BorderBottomWidth: 0;
-  --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
   --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
   --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -334,7 +332,6 @@
     --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
     --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
     --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
-    --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
 
     .pf-c-menu__content {
       overflow-y: auto;
@@ -738,7 +735,6 @@
     pointer-events: none;
     content: "";
     border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
-    border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
   }
 }
 

package/components/Page/page.css

@@ -715,6 +715,31 @@
 .pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
   padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
 }
+@media (min-height: 0) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 40rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 48rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 60rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 80rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
 
 .pf-c-page__main-subnav {
   background-color: var(--pf-c-page__main-subnav--BackgroundColor);
@@ -740,6 +765,31 @@
 .pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
   --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
 }
+@media (min-height: 0) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 40rem) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 48rem) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 60rem) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 80rem) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
 
 .pf-c-page__main-tabs {
   padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);

package/components/Page/page.scss

@@ -548,9 +548,16 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   padding-left: var(--pf-c-page__main-nav--PaddingLeft);
   background-color: var(--pf-c-page__main-nav--BackgroundColor);
 
-  &.pf-m-sticky-top,
-  .pf-c-page__main-group.pf-m-sticky-top &:last-child {
-    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  // Responsive height modifiers for sticky top/bottom
+  @each $breakpoint, $breakpoint-value in $pf-c-page--height-breakpoint-map {
+    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
+
+    @include pf-apply-height-breakpoint($breakpoint) {
+      &.pf-m-sticky-top#{$breakpoint-name},
+      .pf-c-page__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
+        padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+      }
+    }
   }
 }
 
@@ -580,9 +587,16 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
     --pf-c-page__main-section--PaddingTop: var(--pf-c-page__main-breadcrumb--main-section--PaddingTop);
   }
 
-  &.pf-m-sticky-top,
-  .pf-c-page__main-group.pf-m-sticky-top &:last-child {
-    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  // Responsive height modifiers for sticky top/bottom
+  @each $breakpoint, $breakpoint-value in $pf-c-page--height-breakpoint-map {
+    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
+
+    @include pf-apply-height-breakpoint($breakpoint) {
+      &.pf-m-sticky-top#{$breakpoint-name},
+      .pf-c-page__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
+        --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+      }
+    }
   }
 }
 

package/components/Select/select.css

@@ -389,6 +389,12 @@
   top: 0;
   transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
 }
+.pf-c-select__menu.pf-m-static {
+  position: static;
+  top: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 .pf-c-select__menu-fieldset {
   border: 0;

package/components/Select/select.scss

@@ -484,6 +484,13 @@
     top: 0;
     transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
   }
+
+  &.pf-m-static {
+    position: static;
+    top: auto;
+    z-index: auto;
+    min-width: min-content;
+  }
 }
 
 .pf-c-select__menu-fieldset {

package/components/Wizard/themes/dark/wizard.scss

@@ -2,10 +2,10 @@
 
 @mixin pf-theme-dark-wizard() {
   .pf-c-wizard {
+    --pf-c-wizard__header--BackgroundColor: var(--pf-global--palette--black-1000);
+    --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--palette--black-500);
     --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
     --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
-    --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
-    --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
   }
 
   .pf-c-wizard__header {

package/components/Wizard/wizard.css

@@ -540,10 +540,10 @@
 }
 
 :where(.pf-theme-dark) .pf-c-wizard {
+  --pf-c-wizard__header--BackgroundColor: var(--pf-global--palette--black-1000);
+  --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
   --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
-  --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }
 :where(.pf-theme-dark) .pf-c-wizard__header {
   color: var(--pf-global--Color--100);