@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.30

package/components/Progress/progress.scss

@@ -7,8 +7,8 @@
   --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
   --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); // the bar always needs white under it so that the semi-transparent color shows correctly
   --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
+  --pf-c-progress__status--Gap: var(--pf-global--spacer--sm);
   --pf-c-progress__status-icon--Color: var(--pf-global--Color--100); // the status icon default color is the default text color
-  --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-progress__bar--before--Opacity: .2; // one-off change in opacity to allow progress bar to automatically coordinate with the indicator color
   --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
   --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
@@ -34,10 +34,10 @@
 
   // Component styles
   display: grid;
-  align-items: end;
-  grid-gap: var(--pf-c-progress--GridGap);
-  grid-template-columns: auto auto;
   grid-template-rows: 1fr auto;
+  grid-template-columns: auto auto;
+  grid-gap: var(--pf-c-progress--GridGap);
+  align-items: end;
 
   // Modifiers
   // size modifiers
@@ -80,8 +80,8 @@
     }
 
     .pf-c-progress__status {
-      grid-column: 2 / 3;
       grid-row: 2 / 3;
+      grid-column: 2 / 3;
       align-self: center;
     }
 
@@ -148,8 +148,8 @@
 
 // the progress__description is displayed above the progress bar on the left
 .pf-c-progress__description {
-  word-break: break-word;
   grid-column: 1 / 2;
+  word-break: break-word;
 
   &.pf-m-truncate {
     @include pf-text-overflow;
@@ -158,23 +158,26 @@
 
 // the progress__status is displayed in the upper right
 .pf-c-progress__status {
-  grid-column: 2 / 3;
+  display: flex;
   grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  gap: var(--pf-c-progress__status--Gap);
+  align-items: flex-start;
+  justify-content: flex-end;
   text-align: right;
   word-break: break-word;
 }
 
 // the progress__status-icon is an icon displayed always in the upper right
 .pf-c-progress__status-icon {
-  margin-left: var(--pf-c-progress__status-icon--MarginLeft);
   color: var(--pf-c-progress__status-icon--Color);
 }
 
 // The progress__bar is a white underlay with a semi-transparent color on top, which matches the progress__indicator color
 .pf-c-progress__bar {
   position: relative;
-  grid-column: 1 / 3;
   grid-row: 2 / 3;
+  grid-column: 1 / 3;
   align-self: center;
   height: var(--pf-c-progress__bar--Height);
   background-color: var(--pf-c-progress__bar--BackgroundColor);
@@ -202,8 +205,8 @@
 }
 
 .pf-c-progress__helper-text {
-  grid-column: 1 / 3;
   grid-row: 3 / 4;
+  grid-column: 1 / 3;
   margin-top: var(--pf-c-progress__helper-text--MarginTop);
 }
 

package/components/ProgressStepper/progress-stepper.css

@@ -114,10 +114,10 @@
   --pf-c-progress-stepper--m-center__step-main--before--Content: "";
   position: relative;
   display: grid;
-  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
-  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);
+  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-auto-columns: 1fr;
+  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
 }
 @media screen and (min-width: 768px) {
   .pf-c-progress-stepper {
@@ -184,8 +184,8 @@
   grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
 }
 .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-connector {
-  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
   grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
+  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
   padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
 }
 .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-main {
@@ -302,11 +302,11 @@
 }
 .pf-c-progress-stepper__step-title.pf-m-help-text {
   text-decoration: underline;
-  cursor: pointer;
+  text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
   text-decoration-style: dashed;
   text-decoration-color: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor);
-  text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
   text-underline-offset: var(--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
+  cursor: pointer;
 }
 .pf-c-progress-stepper__step-title.pf-m-help-text:hover {
   --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step-title--m-help-text--hover--Color);

package/components/ProgressStepper/progress-stepper.scss

@@ -190,10 +190,10 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
   position: relative;
   display: grid;
-  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
-  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);
+  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-auto-columns: 1fr; // gives even spacing between steps
+  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
 
   // Progress stepper Modifiers
   &.pf-m-center {
@@ -247,8 +247,8 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
 
     .pf-c-progress-stepper__step-connector {
-      min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
       grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
+      min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
       padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
     }
 
@@ -392,11 +392,11 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
   &.pf-m-help-text {
     text-decoration: underline;
-    cursor: pointer;
+    text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
     text-decoration-style: dashed;
     text-decoration-color: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor);
-    text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
     text-underline-offset: var(--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
+    cursor: pointer;
 
     &:hover {
       --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step-title--m-help-text--hover--Color);

package/components/SearchInput/search-input.css

@@ -12,6 +12,7 @@
   --pf-c-search-input__text-input--PaddingLeft: var(--pf-global--spacer--xl);
   --pf-c-search-input__text-input--MinWidth: 6ch;
   --pf-c-search-input__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
+  --pf-c-search-input__text-input--BackgroundColor: transparent;
   --pf-c-search-input__icon--Left: var(--pf-global--spacer--sm);
   --pf-c-search-input__icon--Color: var(--pf-global--Color--200);
   --pf-c-search-input__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -56,9 +57,9 @@
 
 .pf-c-search-input__text {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "text-input";
   flex: 1;
+  grid-template-areas: "text-input";
+  grid-template-columns: 1fr;
 }
 .pf-c-search-input__text::before, .pf-c-search-input__text::after {
   position: absolute;
@@ -99,6 +100,7 @@
   width: 100%;
   min-width: var(--pf-c-search-input__text-input--MinWidth);
   padding: var(--pf-c-search-input__text-input--PaddingTop) var(--pf-c-search-input__text-input--PaddingRight) var(--pf-c-search-input__text-input--PaddingBottom) var(--pf-c-search-input__text-input--PaddingLeft);
+  background-color: var(--pf-c-search-input__text-input--BackgroundColor);
   border: 0;
 }
 .pf-c-search-input__text-input, .pf-c-search-input__text-input.pf-m-hint {

package/components/SearchInput/search-input.scss

@@ -17,6 +17,7 @@
   --pf-c-search-input__text-input--PaddingLeft: var(--pf-global--spacer--xl);
   --pf-c-search-input__text-input--MinWidth: 6ch;
   --pf-c-search-input__text-input--m-hint--Color: var(--pf-global--Color--dark-200); // matches placeholder text color
+  --pf-c-search-input__text-input--BackgroundColor: transparent;
 
   // Icon
   --pf-c-search-input__icon--Left: var(--pf-global--spacer--sm);
@@ -71,9 +72,9 @@
 
 .pf-c-search-input__text {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "text-input";
   flex: 1;
+  grid-template-areas: "text-input";
+  grid-template-columns: 1fr;
 
   &::before,
   &::after {
@@ -120,6 +121,7 @@
   width: 100%;
   min-width: var(--pf-c-search-input__text-input--MinWidth);
   padding: var(--pf-c-search-input__text-input--PaddingTop) var(--pf-c-search-input__text-input--PaddingRight) var(--pf-c-search-input__text-input--PaddingBottom) var(--pf-c-search-input__text-input--PaddingLeft);
+  background-color: var(--pf-c-search-input__text-input--BackgroundColor);
   border: 0;
 
   &,

package/components/Select/select.css

@@ -356,8 +356,8 @@
 .pf-c-select__toggle-typeahead {
   flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
   flex-grow: 1;
-  min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
   flex-shrink: 0;
+  min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
 }
 .pf-c-select__toggle-typeahead.pf-c-form-control {
   background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);

package/components/Select/select.scss

@@ -448,8 +448,8 @@
 .pf-c-select__toggle-typeahead {
   flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
   flex-grow: 1;
-  min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
   flex-shrink: 0;
+  min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
 
   &.pf-c-form-control {
     background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);

package/components/Sidebar/sidebar.css

@@ -1,26 +1,52 @@
 .pf-c-sidebar {
+  --pf-c-sidebar--inset: var(--pf-global--spacer--md);
+  --pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);
+  --pf-c-sidebar__panel--PaddingTop: 0;
+  --pf-c-sidebar__panel--PaddingRight: 0;
+  --pf-c-sidebar__panel--PaddingBottom: 0;
+  --pf-c-sidebar__panel--PaddingLeft: 0;
+  --pf-c-sidebar__panel--Order: -1;
+  --pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--PaddingTop: 0;
+  --pf-c-sidebar__content--PaddingRight: 0;
+  --pf-c-sidebar__content--PaddingBottom: 0;
+  --pf-c-sidebar__content--PaddingLeft: 0;
+  --pf-c-sidebar__content--Order: 1;
+  --pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
   --pf-c-sidebar__main--FlexDirection: column;
   --pf-c-sidebar__main--md--FlexDirection: row;
   --pf-c-sidebar__main--AlignItems: stretch;
   --pf-c-sidebar__main--md--AlignItems: start;
   --pf-c-sidebar__main--child--MarginTop: 0;
-  --pf-c-sidebar__main--child--MarginLeft: 0;
-  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
-  --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
-  --pf-c-sidebar--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__main--m-border--before--Display: none;
+  --pf-c-sidebar__main--m-border--before--md--Display: block;
+  --pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
+  --pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);
+  --pf-c-sidebar--m-panel-right__panel--Order: -1;
   --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
+  --pf-c-sidebar--m-panel-right__content--md--Order: -1;
   --pf-c-sidebar--m-stack__main--FlexDirection: column;
   --pf-c-sidebar--m-stack__main--AlignItems: stretch;
   --pf-c-sidebar--m-stack__panel--Position: sticky;
   --pf-c-sidebar--m-stack__panel--Top: 0;
   --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
-  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
   --pf-c-sidebar--m-split__main--AlignItems: start;
   --pf-c-sidebar--m-split__main--FlexDirection: row;
   --pf-c-sidebar--m-split__panel--Position: static;
   --pf-c-sidebar--m-split__panel--Top: auto;
   --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
+  --pf-c-sidebar--m-split__main--m-border--before--Display: block;
   --pf-c-sidebar__panel--FlexBasis--base: auto;
   --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
   --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
@@ -34,7 +60,6 @@
   --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
   --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
   --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-sidebar__panel--Order: 0;
   --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-sidebar__panel--m-sticky--Top: 0;
@@ -44,60 +69,50 @@
 @media (min-width: 768px) {
   .pf-c-sidebar {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
+    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
+    --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display);
     --pf-c-sidebar__panel--BoxShadow: none;
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
-    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
   }
 }
 @media (min-width: 1200px) {
   .pf-c-sidebar {
-    --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
+    --pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
   }
 }
-.pf-c-sidebar.pf-m-gutter {
-  --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-  --pf-c-sidebar__main--child--MarginLeft: 0;
-}
-.pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
-  margin-top: var(--pf-c-sidebar__main--child--MarginTop);
-  margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
-}
-@media (min-width: 768px) {
-  .pf-c-sidebar.pf-m-gutter {
-    --pf-c-sidebar__main--child--MarginTop: 0;
-    --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
-  }
+.pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main {
+  gap: var(--pf-c-sidebar--m-gutter__main--Gap);
 }
 .pf-c-sidebar.pf-m-panel-right {
   --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
+  --pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);
 }
 @media (min-width: 768px) {
   .pf-c-sidebar.pf-m-panel-right {
     --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
+    --pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
   }
 }
 .pf-c-sidebar.pf-m-stack {
   --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
   --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
-  --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-  --pf-c-sidebar__main--child--MarginLeft: 0;
   --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
   --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
   --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
   --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
+  --pf-c-sidebar__main--m-border--before--Display: none;
   --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
 }
 .pf-c-sidebar.pf-m-split {
   --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
   --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
-  --pf-c-sidebar__main--child--MarginTop: 0;
-  --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
   --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
   --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
   --pf-c-sidebar__panel--BoxShadow: none;
   --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
+  --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
   --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
 }
 
@@ -106,17 +121,31 @@
   flex-direction: var(--pf-c-sidebar__main--FlexDirection);
   align-items: var(--pf-c-sidebar__main--AlignItems);
 }
+.pf-c-sidebar__main.pf-m-border::before {
+  display: var(--pf-c-sidebar__main--m-border--before--Display);
+  flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
+  align-self: stretch;
+  content: "";
+  background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
+}
 
 .pf-c-sidebar__panel {
   position: var(--pf-c-sidebar__panel--Position);
   top: var(--pf-c-sidebar__panel--Top);
   z-index: var(--pf-c-sidebar__panel--ZIndex);
-  flex-shrink: 0;
   flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
+  flex-shrink: 0;
   order: var(--pf-c-sidebar__panel--Order);
+  padding: var(--pf-c-sidebar__panel--PaddingTop) var(--pf-c-sidebar__panel--PaddingRight) var(--pf-c-sidebar__panel--PaddingBottom) var(--pf-c-sidebar__panel--PaddingLeft);
   background-color: var(--pf-c-sidebar__panel--BackgroundColor);
   box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
 }
+.pf-c-sidebar__panel.pf-m-padding {
+  --pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
+  --pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
+  --pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
+  --pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
+}
 .pf-c-sidebar__panel.pf-m-sticky {
   --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
   --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
@@ -128,11 +157,25 @@
 
 .pf-c-sidebar__content {
   flex-grow: 1;
+  order: var(--pf-c-sidebar__content--Order);
+  padding: var(--pf-c-sidebar__content--PaddingTop) var(--pf-c-sidebar__content--PaddingRight) var(--pf-c-sidebar__content--PaddingBottom) var(--pf-c-sidebar__content--PaddingLeft);
   background-color: var(--pf-c-sidebar__content--BackgroundColor);
 }
+.pf-c-sidebar__content.pf-m-padding {
+  --pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+  --pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
+  --pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
+  --pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+}
 .pf-c-sidebar__content.pf-m-no-background {
   --pf-c-sidebar__content--BackgroundColor: transparent;
 }
+.pf-c-sidebar__content + .pf-c-sidebar__panel {
+  --pf-c-sidebar__panel--Order: 1;
+}
+:where(.pf-c-sidebar__content:first-child) {
+  --pf-c-sidebar__content--Order: -1;
+}
 
 .pf-c-sidebar.pf-m-no-background,
 .pf-c-sidebar__panel.pf-m-no-background,

package/components/Sidebar/sidebar.scss

@@ -1,9 +1,38 @@
 $pf-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
-
 .pf-c-sidebar {
+  --pf-c-sidebar--inset: var(--pf-global--spacer--md);
+  --pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);
+
+  // Panel
+  --pf-c-sidebar__panel--PaddingTop: 0;
+  --pf-c-sidebar__panel--PaddingRight: 0;
+  --pf-c-sidebar__panel--PaddingBottom: 0;
+  --pf-c-sidebar__panel--PaddingLeft: 0;
+  --pf-c-sidebar__panel--Order: -1;
+
+  // Panel padding
+  --pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
+
+  // Content
+  --pf-c-sidebar__content--PaddingTop: 0;
+  --pf-c-sidebar__content--PaddingRight: 0;
+  --pf-c-sidebar__content--PaddingBottom: 0;
+  --pf-c-sidebar__content--PaddingLeft: 0;
+  --pf-c-sidebar__content--Order: 1;
+
+  // Content padding
+  --pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
 
   // Main
   --pf-c-sidebar__main--FlexDirection: column;
@@ -11,15 +40,20 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar__main--AlignItems: stretch;
   --pf-c-sidebar__main--md--AlignItems: start;
   --pf-c-sidebar__main--child--MarginTop: 0;
-  --pf-c-sidebar__main--child--MarginLeft: 0;
 
   // Gutter
-  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
-  --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
+  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);
+
+  // Border
+  --pf-c-sidebar__main--m-border--before--Display: none;
+  --pf-c-sidebar__main--m-border--before--md--Display: block;
+  --pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
+  --pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);
 
   // Panel right
-  --pf-c-sidebar--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-panel-right__panel--Order: -1;
   --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
+  --pf-c-sidebar--m-panel-right__content--md--Order: -1;
 
   // Stack
   --pf-c-sidebar--m-stack__main--FlexDirection: column;
@@ -27,7 +61,7 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar--m-stack__panel--Position: sticky;
   --pf-c-sidebar--m-stack__panel--Top: 0;
   --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
-  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
 
   // Split
   --pf-c-sidebar--m-split__main--AlignItems: start;
@@ -35,6 +69,7 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar--m-split__panel--Position: static;
   --pf-c-sidebar--m-split__panel--Top: auto;
   --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
+  --pf-c-sidebar--m-split__main--m-border--before--Display: block;
 
   // Panel
   --pf-c-sidebar__panel--FlexBasis--base: auto;
@@ -50,7 +85,6 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
   --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
   --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-sidebar__panel--Order: 0;
   --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
 
   // Content
@@ -62,61 +96,51 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
   @media (min-width: $pf-global--breakpoint--md) {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
+    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
+    --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display); // show border starting at md breakpoint
     --pf-c-sidebar__panel--BoxShadow: none;
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
-    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
   }
 
   @media (min-width: $pf-global--breakpoint--xl) {
-    --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
+    --pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
   }
 
-  &.pf-m-gutter {
-    --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-    --pf-c-sidebar__main--child--MarginLeft: 0;
-
-    > .pf-c-sidebar__main > * + * {
-      margin-top: var(--pf-c-sidebar__main--child--MarginTop);
-      margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
-    }
-
-    @media (min-width: $pf-global--breakpoint--md) {
-      --pf-c-sidebar__main--child--MarginTop: 0;
-      --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
-    }
+  &.pf-m-gutter > .pf-c-sidebar__main {
+    gap: var(--pf-c-sidebar--m-gutter__main--Gap);
   }
 
   &.pf-m-panel-right {
     --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
+    --pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);
 
     @media (min-width: $pf-global--breakpoint--md) {
       --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
+      --pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
     }
   }
 
   &.pf-m-stack {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
     --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
-    --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-    --pf-c-sidebar__main--child--MarginLeft: 0;
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
     --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
+    --pf-c-sidebar__main--m-border--before--Display: none;
     --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
   }
 
   &.pf-m-split {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
     --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
-    --pf-c-sidebar__main--child--MarginTop: 0;
-    --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
     --pf-c-sidebar__panel--BoxShadow: none;
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
+    --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
     --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
   }
 
@@ -127,18 +151,34 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   display: flex;
   flex-direction: var(--pf-c-sidebar__main--FlexDirection);
   align-items: var(--pf-c-sidebar__main--AlignItems);
+
+  &.pf-m-border::before {
+    display: var(--pf-c-sidebar__main--m-border--before--Display);
+    flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
+    align-self: stretch;
+    content: "";
+    background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
+  }
 }
 
 .pf-c-sidebar__panel {
   position: var(--pf-c-sidebar__panel--Position);
   top: var(--pf-c-sidebar__panel--Top);
   z-index: var(--pf-c-sidebar__panel--ZIndex);
-  flex-shrink: 0;
   flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
+  flex-shrink: 0;
   order: var(--pf-c-sidebar__panel--Order);
+  padding: var(--pf-c-sidebar__panel--PaddingTop) var(--pf-c-sidebar__panel--PaddingRight) var(--pf-c-sidebar__panel--PaddingBottom) var(--pf-c-sidebar__panel--PaddingLeft);
   background-color: var(--pf-c-sidebar__panel--BackgroundColor);
   box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
 
+  &.pf-m-padding {
+    --pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
+    --pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
+    --pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
+    --pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
+  }
+
   &.pf-m-sticky {
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
@@ -152,11 +192,28 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 .pf-c-sidebar__content {
   flex-grow: 1;
+  order: var(--pf-c-sidebar__content--Order);
+  padding: var(--pf-c-sidebar__content--PaddingTop) var(--pf-c-sidebar__content--PaddingRight) var(--pf-c-sidebar__content--PaddingBottom) var(--pf-c-sidebar__content--PaddingLeft);
   background-color: var(--pf-c-sidebar__content--BackgroundColor);
 
+  &.pf-m-padding {
+    --pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+    --pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
+    --pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
+    --pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+  }
+
   &.pf-m-no-background {
     --pf-c-sidebar__content--BackgroundColor: transparent;
   }
+
+  & + .pf-c-sidebar__panel {
+    --pf-c-sidebar__panel--Order: 1;
+  }
+
+  :where(&:first-child) {
+    --pf-c-sidebar__content--Order: -1;
+  }
 }
 
 .pf-c-sidebar,

package/components/SimpleList/simple-list.css

@@ -40,9 +40,9 @@
   border: none;
 }
 .pf-c-simple-list__item-link:hover {
-  text-decoration: none;
   --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
   --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
+  text-decoration: none;
 }
 .pf-c-simple-list__item-link:focus {
   --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);