@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.4

package/README.md

@@ -96,7 +96,7 @@ Ignore the violations that aren’t related to your contribution.
 
 Fix violations related to your contribution.
 
-If there are violations that are not obvious how to fix, then [create an issue](https://github.com/patternfly/patternfly/issues/new) with information about the violation that was found. For example, some violations might require further discussion before they can be addressed. And some violations may not be valid and require changes to the workspace or tooling to stop flagging the violation. 
+If there are violations that are not obvious how to fix, then [create an issue](https://github.com/patternfly/patternfly/issues/new) with information about the violation that was found. For example, some violations might require further discussion before they can be addressed. And some violations may not be valid and require changes to the workspace or tooling to stop flagging the violation.
 
 If you have any suggestions about ways that we can improve how we use this tool, please let us know by opening an issue.
 

package/RELEASE-NOTES.md

@@ -3,6 +3,36 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.16 release notes (2022-12-09)
+Packages released:
+- [@patternfly/patternfly@v4.222.4](https://www.npmjs.com/package/@patternfly/patternfly/v/4.222.4)
+
+### Components
+- **Dropdown:** Added loading state for split button checkbox ([#5269](https://github.com/patternfly/patternfly/pull/5269))
+- **Form control:** Fixed select dark theme icon ([#5242](https://github.com/patternfly/patternfly/pull/5242))
+- **Menu:** Prevented hidden drilldown items from being focusable ([#5271](https://github.com/patternfly/patternfly/pull/5271))
+- **Slider:** Updated value input styling ([#5249](https://github.com/patternfly/patternfly/pull/5249))
+- **Tabs:**
+  - Updated nested demo heading levels ([#5246](https://github.com/patternfly/patternfly/pull/5246))
+  - Removed pagination from demo, exposed tags ([#5259](https://github.com/patternfly/patternfly/pull/5259))
+
+### Other
+- **Workspace:**
+  - Cleaned up demos, added path as way to include partials ([#5135](https://github.com/patternfly/patternfly/pull/5135))
+  - Removed test code from #5135 ([#5255](https://github.com/patternfly/patternfly/pull/5255))
+
+
+## 2022.15 release notes (2022-11-18)
+Packages released:
+- [@patternfly/patternfly@v4.221.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.221.2)
+
+### Components
+- **Pagination:** Added support for insets ([#5207](https://github.com/patternfly/patternfly/pull/5207))
+- **Tabs:** Added help popover, refactored tab action ([#5213](https://github.com/patternfly/patternfly/pull/5213))
+
+### Other
+- **Icons:** Added data-sink and data-source ([#5228](https://github.com/patternfly/patternfly/pull/5228))
+
 ## 2022.14 release notes (2022-10-28)
 Packages released:
 - [@patternfly/patternfly@v4.219.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.219.2)

package/components/Dropdown/dropdown.css

@@ -50,6 +50,8 @@
   --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
+  --pf-c-dropdown__toggle-progress--Visibility: hidden;
+  --pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -261,9 +263,14 @@
   align-items: center;
   cursor: pointer;
 }
+.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check.pf-m-in-progress {
+  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility: hidden;
+  --pf-c-dropdown__toggle-progress--Visibility: visible;
+}
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check > input,
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check .pf-c-check {
   cursor: pointer;
+  visibility: var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
   transform: translateY(var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
 }
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button {
@@ -459,6 +466,14 @@
   --pf-c-dropdown__toggle-image--MarginRight: 0;
 }
 
+.pf-c-dropdown__toggle-progress {
+  position: absolute;
+  visibility: var(--pf-c-dropdown__toggle-progress--Visibility);
+}
+.pf-c-dropdown__toggle-progress .pf-c-spinner {
+  --pf-c-spinner--diameter: var(--pf-c-dropdown__toggle-progress--c-spinner--diameter);
+}
+
 .pf-c-dropdown__menu {
   position: absolute;
   top: var(--pf-c-dropdown__menu--Top);

package/components/Dropdown/dropdown.scss

@@ -62,6 +62,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   // toggle button
   --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
 
+  // toggle progress
+  --pf-c-dropdown__toggle-progress--Visibility: hidden;
+  --pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm); // should match the checkbox input size
+
   // split buttons
   --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -341,9 +345,15 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
       align-items: center;
       cursor: pointer;
 
+      &.pf-m-in-progress {
+        --pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility: hidden;
+        --pf-c-dropdown__toggle-progress--Visibility: visible;
+      }
+
       > input,
       .pf-c-check {
         cursor: pointer;
+        visibility: var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
         transform: translateY(var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
       }
     }
@@ -624,6 +634,16 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 }
 
+// Loading spinner
+.pf-c-dropdown__toggle-progress {
+  position: absolute;
+  visibility: var(--pf-c-dropdown__toggle-progress--Visibility);
+
+  .pf-c-spinner {
+    --pf-c-spinner--diameter: var(--pf-c-dropdown__toggle-progress--c-spinner--diameter);
+  }
+}
+
 .pf-c-dropdown__menu {
   position: absolute;
   top: var(--pf-c-dropdown__menu--Top);

package/components/FormControl/form-control.css

@@ -326,7 +326,7 @@ textarea.pf-c-form-control {
 }
 
 :where(.pf-theme-dark) .pf-c-form-control {
-  --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
+  --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23e0e0e0' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
   --pf-c-form-control--BorderTopColor: transparent;
   --pf-c-form-control--BorderRightColor: transparent;
   --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);

package/components/FormControl/themes/dark/form-control.scss

@@ -2,7 +2,7 @@
 
 @mixin pf-theme-dark-form-control() {
   .pf-c-form-control {
-    --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
+    --pf-c-form-control__select--BackgroundUrl: #{pf-bg-svg($pf-c-form-control__select--Coordinates, $pf-c-form-control__select--ViewBox, $pf-global--Color--100)};
     --pf-c-form-control--BorderTopColor: transparent;
     --pf-c-form-control--BorderRightColor: transparent;
     --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);

package/components/InputGroup/input-group.css

@@ -22,6 +22,9 @@
   --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
   --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-input-group--c-form-control--MarginRight: 0;
   color: var(--pf-global--Color--100);
@@ -71,6 +74,11 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BorderWidth: 0;
   margin-left: 0;
 }
+.pf-c-input-group__text.pf-m-disabled {
+  --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
+  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+  --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
+}
 
 :where(.pf-theme-dark) .pf-c-input-group {
   --pf-c-input-group--BackgroundColor: transparent;
@@ -79,6 +87,8 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
   --pf-c-input-group__text--BorderLeftColor: transparent;
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }
 :where(.pf-theme-dark) .pf-c-input-group > * + * {
   margin-left: 0;
@@ -92,4 +102,8 @@ label.pf-c-input-group__text {
 }
 :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
   --pf-c-input-group__text--BackgroundColor: transparent;
+}
+:where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
+  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+  color: var(--pf-c-input-group__text--m-disabled--Color);
 }

package/components/InputGroup/input-group.scss

@@ -15,6 +15,9 @@
   --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
 
   // Form control
   --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
@@ -84,6 +87,12 @@
 
     margin-left: 0;
   }
+
+  &.pf-m-disabled {
+    --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
+    --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+    --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
+  }
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/components/InputGroup/themes/dark/input-group.scss

@@ -8,6 +8,8 @@
     --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
     --pf-c-input-group__text--BorderLeftColor: transparent;
     --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+    --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
+    --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 
     > * + * {
       margin-left: 0;
@@ -24,5 +26,11 @@
     &.pf-m-plain {
       --pf-c-input-group__text--BackgroundColor: transparent;
     }
+
+    &.pf-m-disabled {
+      --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+
+      color: var(--pf-c-input-group__text--m-disabled--Color);
+    }
   }
 }

package/components/Menu/menu.css

@@ -296,11 +296,15 @@
 }
 .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
   overflow: visible;
+  visibility: hidden;
 }
 .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-divider,
 .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
   display: none;
 }
+.pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item.pf-m-current-path {
+  visibility: hidden;
+}
 .pf-c-menu.pf-m-plain {
   --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
 }

package/components/Menu/menu.scss

@@ -316,11 +316,16 @@
   // stylelint-disable selector-max-class
   &.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
     overflow: visible;
+    visibility: hidden;
 
     > .pf-c-divider,
     > .pf-c-menu__list-item:not(.pf-m-current-path) {
       display: none; // hide all siblings of current path to maintain proper menu height
     }
+
+    > .pf-c-menu__list-item.pf-m-current-path {
+      visibility: hidden;
+    }
   }
   // stylelint-enable
 

package/components/Pagination/pagination.css

@@ -7,6 +7,11 @@
 }
 
 .pf-c-pagination {
+  --pf-c-pagination--inset: 0;
+  --pf-c-pagination--PaddingRight: var(--pf-c-pagination--inset);
+  --pf-c-pagination--PaddingLeft: var(--pf-c-pagination--inset);
+  --pf-c-pagination--m-page-insets--inset: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
   --pf-c-pagination--m-bottom--child--MarginRight: 0;
   --pf-c-pagination--m-bottom--child--md--MarginRight: var(--pf-global--spacer--lg);
@@ -62,6 +67,8 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
+  padding-right: var(--pf-c-pagination--PaddingRight);
+  padding-left: var(--pf-c-pagination--PaddingLeft);
 }
 @media screen and (min-width: 768px) {
   .pf-c-pagination {
@@ -81,6 +88,8 @@
   .pf-c-pagination {
     --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
     --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
+    --pf-c-pagination__scroll-button--Width: var(--pf-c-pagination__scroll-button--xl--Width);
+    --pf-c-pagination--m-page-insets--inset: var(--pf-c-pagination--m-page-insets--xl--inset);
   }
 }
 .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
@@ -171,6 +180,9 @@
 .pf-c-pagination.pf-m-compact {
   --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
 }
+.pf-c-pagination.pf-m-page-insets {
+  --pf-c-pagination--inset: var(--pf-c-pagination--m-page-insets--inset);
+}
 
 .pf-c-pagination__nav {
   display: var(--pf-c-pagination__nav--Display);
@@ -217,6 +229,42 @@
   --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
   --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
 }
+.pf-c-pagination.pf-m-inset-none {
+  --pf-c-pagination--inset: 0;
+}
+.pf-c-pagination.pf-m-inset-sm {
+  --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+}
+.pf-c-pagination.pf-m-inset-md {
+  --pf-c-pagination--inset: var(--pf-global--spacer--md);
+}
+.pf-c-pagination.pf-m-inset-lg {
+  --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+}
+.pf-c-pagination.pf-m-inset-xl {
+  --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+}
+.pf-c-pagination.pf-m-inset-2xl {
+  --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+}
+.pf-c-pagination.pf-m-inset-none {
+  --pf-c-pagination--inset: 0;
+}
+.pf-c-pagination.pf-m-inset-sm {
+  --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+}
+.pf-c-pagination.pf-m-inset-md {
+  --pf-c-pagination--inset: var(--pf-global--spacer--md);
+}
+.pf-c-pagination.pf-m-inset-lg {
+  --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+}
+.pf-c-pagination.pf-m-inset-xl {
+  --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+}
+.pf-c-pagination.pf-m-inset-2xl {
+  --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+}
 @media (min-width: 576px) {
   .pf-c-pagination.pf-m-display-summary-on-sm {
     --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
@@ -228,6 +276,42 @@
     --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
     --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
   }
+  .pf-c-pagination.pf-m-inset-none-on-sm {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
+  .pf-c-pagination.pf-m-inset-none-on-sm {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-sm {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
 }
 @media (min-width: 768px) {
   .pf-c-pagination.pf-m-display-summary-on-md {
@@ -240,6 +324,42 @@
     --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
     --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
   }
+  .pf-c-pagination.pf-m-inset-none-on-md {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
+  .pf-c-pagination.pf-m-inset-none-on-md {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-md {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
 }
 @media (min-width: 992px) {
   .pf-c-pagination.pf-m-display-summary-on-lg {
@@ -252,6 +372,42 @@
     --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
     --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
   }
+  .pf-c-pagination.pf-m-inset-none-on-lg {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
+  .pf-c-pagination.pf-m-inset-none-on-lg {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-lg {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
 }
 @media (min-width: 1200px) {
   .pf-c-pagination.pf-m-display-summary-on-xl {
@@ -264,6 +420,42 @@
     --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
     --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
   }
+  .pf-c-pagination.pf-m-inset-none-on-xl {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
+  .pf-c-pagination.pf-m-inset-none-on-xl {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
 }
 @media (min-width: 1450px) {
   .pf-c-pagination.pf-m-display-summary-on-2xl {
@@ -276,6 +468,42 @@
     --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
     --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
   }
+  .pf-c-pagination.pf-m-inset-none-on-2xl {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
+  .pf-c-pagination.pf-m-inset-none-on-2xl {
+    --pf-c-pagination--inset: 0;
+  }
+  .pf-c-pagination.pf-m-inset-sm-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
+  }
+  .pf-c-pagination.pf-m-inset-md-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--md);
+  }
+  .pf-c-pagination.pf-m-inset-lg-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
+  }
+  .pf-c-pagination.pf-m-inset-xl-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
+  }
+  .pf-c-pagination.pf-m-inset-2xl-on-2xl {
+    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
+  }
 }
 
 :where(.pf-theme-dark) .pf-c-pagination {

package/components/Pagination/pagination.scss

@@ -1,6 +1,15 @@
 $pf-c-pagination--breakpoint-map: build-breakpoint-map();
+$pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
 .pf-c-pagination {
+  --pf-c-pagination--inset: 0;
+  --pf-c-pagination--PaddingRight: var(--pf-c-pagination--inset);
+  --pf-c-pagination--PaddingLeft: var(--pf-c-pagination--inset);
+
+  // Page insets
+  --pf-c-pagination--m-page-insets--inset: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
+
   // children
   --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
   --pf-c-pagination--m-bottom--child--MarginRight: 0;
@@ -86,12 +95,16 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
   @media screen and (min-width: $pf-global--breakpoint--xl) {
     --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
     --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
+    --pf-c-pagination__scroll-button--Width: var(--pf-c-pagination__scroll-button--xl--Width);
+    --pf-c-pagination--m-page-insets--inset: var(--pf-c-pagination--m-page-insets--xl--inset);
   }
 
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
+  padding-right: var(--pf-c-pagination--PaddingRight);
+  padding-left: var(--pf-c-pagination--PaddingLeft);
 
   // stylelint-disable selector-not-notation
   // update to single :not() in breaking change
@@ -194,7 +207,6 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
     }
   }
 
-
   .pf-c-options-menu__toggle {
     font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize);
   }
@@ -202,8 +214,13 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
   &.pf-m-compact {
     --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
   }
+
+  &.pf-m-page-insets {
+    --pf-c-pagination--inset: var(--pf-c-pagination--m-page-insets--inset);
+  }
 }
 
+
 // nav
 .pf-c-pagination__nav {
   display: var(--pf-c-pagination__nav--Display);
@@ -268,6 +285,18 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
         --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
         --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
       }
+
+      @each $spacer, $spacer-value in $pf-c-pagination--variable-map {
+        &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
+          --pf-c-pagination--inset: #{$spacer-value};
+        }
+      }
+
+      @each $spacer, $spacer-value in $pf-c-pagination--variable-map {
+        &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
+          --pf-c-pagination--inset: #{$spacer-value};
+        }
+      }
     }
   }
 }

package/components/Slider/slider.css

@@ -182,13 +182,6 @@
   z-index: var(--pf-c-slider__value--m-floating--ZIndex);
   transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
 }
-.pf-c-slider__value.pf-m-floating .pf-c-input-group {
-  align-items: center;
-}
-.pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
-  position: absolute;
-  left: 100%;
-}
 .pf-c-slider__value .pf-c-form-control {
   width: var(--pf-c-slider__value--c-form-control--Width);
 }

package/components/Slider/slider.scss

@@ -218,15 +218,6 @@
     left: var(--pf-c-slider__value--m-floating--Left);
     z-index: var(--pf-c-slider__value--m-floating--ZIndex);
     transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
-
-    .pf-c-input-group {
-      align-items: center;
-    }
-
-    .pf-c-input-group__text {
-      position: absolute;
-      left: 100%;
-    }
   }
 
   .pf-c-form-control {