@patternfly/patternfly 4.203.2 → 4.204.0

package/base/patternfly-variables.css

@@ -297,6 +297,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;

package/base/themes/dark/_variables.scss

@@ -40,6 +40,7 @@
   --pf-global--danger-color--200: #{$pf-global--danger-color--200};
   --pf-global--link--Color: #{$pf-global--link--Color};
   --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
+  --pf-global--link--Color--visited: #{$pf-global--link--Color--visited};
   --pf-global--disabled-color--100: #{$pf-global--disabled-color--100};
   --pf-global--disabled-color--200: #{$pf-global--disabled-color--200};
   --pf-global--disabled-color--300: #{$pf-global--disabled-color--300};

package/components/Menu/menu.css

@@ -305,6 +305,7 @@
   background-color: transparent;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
+  display: none;
   visibility: hidden;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__item {

package/components/Menu/menu.scss

@@ -304,6 +304,7 @@
       }
 
       &:not(.pf-m-current-path) .pf-c-menu {
+        display: none;
         visibility: hidden;
       }
     }

package/components/NumberInput/number-input.css

@@ -10,11 +10,21 @@
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
+  --pf-c-number-input--c-form-control--width-icon: 0px;
+  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
   --pf-c-number-input--c-form-control--width-chars: 4;
-  --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
+  --pf-c-number-input--c-form-control--Width:
+    calc(
+      calc(
+        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
+      ) + var(--pf-c-number-input--c-form-control--width-icon)
+    );
   display: inline-flex;
   align-items: center;
 }
+.pf-c-number-input.pf-m-status {
+  --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
+}
 .pf-c-number-input .pf-c-form-control {
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);

package/components/NumberInput/number-input.scss

@@ -7,12 +7,26 @@
 
   // form control
   --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2); // element's padding
+  // stylelint-disable length-zero-no-unit
+  --pf-c-number-input--c-form-control--width-icon: 0px;
+  // stylelint-enable length-zero-no-unit
+  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl); // extra width to accommodate a status icon
   --pf-c-number-input--c-form-control--width-chars: 4;
-  --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
+  --pf-c-number-input--c-form-control--Width:
+    calc(
+      calc(
+        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
+      ) + var(--pf-c-number-input--c-form-control--width-icon)
+    );
 
   display: inline-flex;
   align-items: center;
 
+  // This modifier can be removed in a breaking change and the extra space created can always be included.
+  &.pf-m-status {
+    --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
+  }
+
   .pf-c-form-control {
     display: inline-flex;
     width: var(--pf-c-number-input--c-form-control--Width);

package/components/Page/page.css

@@ -143,6 +143,8 @@
   --pf-c-page__sidebar--Width: 18.125rem;
   --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
   --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
   --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
   --pf-c-page__sidebar--TranslateX: -100%;
@@ -415,15 +417,15 @@
   transition: var(--pf-c-page__sidebar--Transition);
   transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
 }
-@media screen and (min-width: 1200px) {
-  .pf-c-page__sidebar {
-    box-shadow: var(--pf-c-page__sidebar--BoxShadow);
-  }
-}
 .pf-c-page__sidebar.pf-m-expanded {
   --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
   box-shadow: var(--pf-c-page__sidebar--BoxShadow);
 }
+@media screen and (min-width: 1200px) {
+  .pf-c-page__sidebar.pf-m-expanded {
+    --pf-c-page__sidebar--BoxShadow: none;
+  }
+}
 .pf-c-page__sidebar.pf-m-collapsed {
   max-width: 0;
   overflow: hidden;
@@ -431,6 +433,7 @@
 .pf-c-page__sidebar.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
+  border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
 }
 
 .pf-c-page__sidebar-body {
@@ -954,6 +957,9 @@
 :where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
   background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
 }
+:where(.pf-theme-dark) .pf-c-page__sidebar {
+  border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
+}
 :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
   --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/components/Page/page.scss

@@ -74,6 +74,8 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   --pf-c-page__sidebar--Width: #{pf-size-prem(290px)};
   --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
   --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
   --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
   --pf-c-page__sidebar--TranslateX: -100%;
@@ -389,16 +391,16 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   transition: var(--pf-c-page__sidebar--Transition);
   transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
 
-  @media screen and (min-width: $pf-global--breakpoint--xl) {
-    box-shadow: var(--pf-c-page__sidebar--BoxShadow);
-  }
-
   // Mobile
   // Expanded nav
   &.pf-m-expanded {
     --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
 
     box-shadow: var(--pf-c-page__sidebar--BoxShadow);
+
+    @media screen and (min-width: $pf-global--breakpoint--xl) {
+      --pf-c-page__sidebar--BoxShadow: none;
+    }
   }
 
   // Desktop
@@ -412,6 +414,8 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
     @include pf-t-light;
 
     --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
+
+    border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
   }
 }
 

package/components/Page/themes/dark/page.scss

@@ -26,6 +26,10 @@
     }
   }
 
+  .pf-c-page__sidebar {
+    border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
+  }
+
   .pf-c-page__main-nav {
     &.pf-m-sticky-top,
     &.pf-m-sticky-bottom {

package/docs/components/NumberInput/examples/NumberInput.md

@@ -191,6 +191,56 @@ cssPrefix: pf-c-number-input
 
 ```
 
+### With status
+
+```html
+<div class="pf-c-number-input pf-m-status">
+  <div class="pf-c-input-group">
+    <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
+      <span class="pf-c-number-input__icon">
+        <i class="fas fa-minus" aria-hidden="true"></i>
+      </span>
+    </button>
+    <input
+      class="pf-c-form-control"
+      type="number"
+      value="90"
+      name="number-input-status-name"
+      aria-label="Number input"
+    />
+    <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
+      <span class="pf-c-number-input__icon">
+        <i class="fas fa-plus" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</div>
+<br />
+<br />
+<div class="pf-c-number-input pf-m-status">
+  <div class="pf-c-input-group">
+    <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
+      <span class="pf-c-number-input__icon">
+        <i class="fas fa-minus" aria-hidden="true"></i>
+      </span>
+    </button>
+    <input
+      class="pf-c-form-control pf-m-warning"
+      type="number"
+      value="90"
+      name="number-input-status-warning-name"
+      aria-label="Number input"
+    />
+    <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
+      <span class="pf-c-number-input__icon">
+        <i class="fas fa-plus" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</div>
+
+```
+
 ### Varying sizes
 
 ```html
@@ -311,9 +361,10 @@ cssPrefix: pf-c-number-input
 
 ### Usage
 
-| Class                                              | Applied              | Outcome                                                  |
-| -------------------------------------------------- | -------------------- | -------------------------------------------------------- |
-| `.pf-c-number-input`                               | `<div>`              | Initiates the number input component.                    |
-| `.pf-c-number-input__icon`                         | `<span>`             | Initiates the number input icon.                         |
-| `.pf-c-number-input__unit`                         | `<span>`             | Initiates the number input unit.                         |
-| `--pf-c-number-input--c-form-control--width-chars` | `.pf-c-number-input` | Specifies the number of characters to show in the input. |
+| Class                                              | Applied to           | Outcome                                                                                                                                                                                                          |
+| -------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-number-input`                               | `<div>`              | Initiates the number input component.                                                                                                                                                                            |
+| `.pf-c-number-input__icon`                         | `<span>`             | Initiates the number input icon.                                                                                                                                                                                 |
+| `.pf-c-number-input__unit`                         | `<span>`             | Initiates the number input unit.                                                                                                                                                                                 |
+| `.pf-m-status`                                     | `.pf-c-number-input` | Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. **Required** if a status icon may be shown, even if the icon is not currently shown. |
+| `--pf-c-number-input--c-form-control--width-chars` | `.pf-c-number-input` | Specifies the number of characters to show in the input.                                                                                                                                                         |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.203.2",
+  "version": "4.204.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -79,7 +79,7 @@
     "stylelint-scss": "^4.0.0",
     "stylelint-value-no-unknown-custom-properties": "^3.0.0",
     "surge": "^0.21.3",
-    "@patternfly/documentation-framework": "1.0.6",
+    "@patternfly/documentation-framework": "1.1.3",
     "unified": "^9.2.0",
     "webpack": "^4.43.0"
   },

package/patternfly-addons.css

@@ -8504,9 +8504,6 @@
 :where(.pf-theme-dark) .pf-u-color-light-200 {
   color: var(--pf-global--Color-200) !important;
 }
-:where(.pf-theme-dark) .pf-u-link-color-visited {
-  color: var(--pf-global--palette--purple-200) !important;
-}
 :where(.pf-theme-dark) .pf-u-default-color-300 {
   color: var(--pf-global--default-color--100) !important;
 }
@@ -8532,9 +8529,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-sm {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
     color: var(--pf-global--default-color--100) !important;
   }
@@ -8561,9 +8555,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-md {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
     color: var(--pf-global--default-color--100) !important;
   }
@@ -8590,9 +8581,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-lg {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
     color: var(--pf-global--default-color--100) !important;
   }
@@ -8619,9 +8607,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-xl {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
     color: var(--pf-global--default-color--100) !important;
   }
@@ -8648,9 +8633,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-2xl {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
     color: var(--pf-global--default-color--100) !important;
   }

package/patternfly-base-no-reset.css

@@ -338,6 +338,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;

package/patternfly-base.css

@@ -338,6 +338,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;

package/patternfly-no-reset.css

@@ -447,6 +447,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;
@@ -18388,6 +18389,7 @@ ul.pf-c-list {
   background-color: transparent;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
+  display: none;
   visibility: hidden;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
@@ -21458,6 +21460,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-page__sidebar--Width: 18.125rem;
   --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
   --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
   --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
   --pf-c-page__sidebar--TranslateX: -100%;
@@ -21730,15 +21734,15 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   transition: var(--pf-c-page__sidebar--Transition);
   transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
 }
-@media screen and (min-width: 1200px) {
-  .pf-c-page__sidebar {
-    box-shadow: var(--pf-c-page__sidebar--BoxShadow);
-  }
-}
 .pf-c-page__sidebar.pf-m-expanded {
   --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
   box-shadow: var(--pf-c-page__sidebar--BoxShadow);
 }
+@media screen and (min-width: 1200px) {
+  .pf-c-page__sidebar.pf-m-expanded {
+    --pf-c-page__sidebar--BoxShadow: none;
+  }
+}
 .pf-c-page__sidebar.pf-m-collapsed {
   max-width: 0;
   overflow: hidden;
@@ -21746,6 +21750,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 .pf-c-page__sidebar.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
+  border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
 }
 
 .pf-c-page__sidebar-body {
@@ -22272,6 +22277,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 :where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
   background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
 }
+:where(.pf-theme-dark) .pf-c-page__sidebar {
+  border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
+}
 :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
   --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }
@@ -31092,11 +31100,21 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
+  --pf-c-number-input--c-form-control--width-icon: 0px;
+  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
   --pf-c-number-input--c-form-control--width-chars: 4;
-  --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
+  --pf-c-number-input--c-form-control--Width:
+    calc(
+      calc(
+        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
+      ) + var(--pf-c-number-input--c-form-control--width-icon)
+    );
   display: inline-flex;
   align-items: center;
 }
+.pf-c-number-input.pf-m-status {
+  --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
+}
 .pf-c-number-input .pf-c-form-control {
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);

package/patternfly.css

@@ -447,6 +447,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;
@@ -18515,6 +18516,7 @@ ul.pf-c-list {
   background-color: transparent;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
+  display: none;
   visibility: hidden;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
@@ -21585,6 +21587,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-page__sidebar--Width: 18.125rem;
   --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
   --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
   --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
   --pf-c-page__sidebar--TranslateX: -100%;
@@ -21857,15 +21861,15 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   transition: var(--pf-c-page__sidebar--Transition);
   transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
 }
-@media screen and (min-width: 1200px) {
-  .pf-c-page__sidebar {
-    box-shadow: var(--pf-c-page__sidebar--BoxShadow);
-  }
-}
 .pf-c-page__sidebar.pf-m-expanded {
   --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
   box-shadow: var(--pf-c-page__sidebar--BoxShadow);
 }
+@media screen and (min-width: 1200px) {
+  .pf-c-page__sidebar.pf-m-expanded {
+    --pf-c-page__sidebar--BoxShadow: none;
+  }
+}
 .pf-c-page__sidebar.pf-m-collapsed {
   max-width: 0;
   overflow: hidden;
@@ -21873,6 +21877,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 .pf-c-page__sidebar.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
+  border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
 }
 
 .pf-c-page__sidebar-body {
@@ -22399,6 +22404,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 :where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
   background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
 }
+:where(.pf-theme-dark) .pf-c-page__sidebar {
+  border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
+}
 :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
   --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }
@@ -31219,11 +31227,21 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
+  --pf-c-number-input--c-form-control--width-icon: 0px;
+  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
   --pf-c-number-input--c-form-control--width-chars: 4;
-  --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
+  --pf-c-number-input--c-form-control--Width:
+    calc(
+      calc(
+        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
+      ) + var(--pf-c-number-input--c-form-control--width-icon)
+    );
   display: inline-flex;
   align-items: center;
 }
+.pf-c-number-input.pf-m-status {
+  --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
+}
 .pf-c-number-input .pf-c-form-control {
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);