@redhat-cloud-services/frontend-components 3.4.14 → 3.6.1

package/esm/Pagination/pagination.css

@@ -0,0 +1,580 @@
+.pf-c-pagination {
+  --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);
+  --pf-c-pagination--m-compact--child--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-pagination--c-options-menu__toggle--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-pagination__nav--Display: none;
+  --pf-c-pagination__nav--Visibility: hidden;
+  --pf-c-pagination--m-display-summary__nav--Display: none;
+  --pf-c-pagination--m-display-summary__nav--Visibility: hidden;
+  --pf-c-pagination--m-display-full__nav--Display: inline-flex;
+  --pf-c-pagination--m-display-full__nav--Visibility: visible;
+  --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-pagination__nav-control--c-button--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-global--spacer--form-element);
+  --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-pagination__nav-page-select--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
+  --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
+  --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
+  --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
+  --pf-c-pagination__total-items--Display: block;
+  --pf-c-pagination__total-items--Visibility: visible;
+  --pf-c-pagination--m-display-summary__total-items--Display: block;
+  --pf-c-pagination--m-display-summary__total-items--Visibility: visible;
+  --pf-c-pagination--m-display-full__total-items--Display: none;
+  --pf-c-pagination--m-display-full__total-items--Visibility: hidden;
+  --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-pagination--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
+  --pf-c-pagination--m-sticky--md--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-sticky--md--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-sticky--md--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-sticky--md--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-pagination--m-sticky--Top: 0;
+  --pf-c-pagination--m-bottom--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-pagination--m-bottom--BoxShadow: var(--pf-global--BoxShadow--sm-top);
+  --pf-c-pagination--m-bottom--Bottom: 0;
+  --pf-c-pagination--m-bottom--md--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-bottom--md--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-pagination--m-bottom--xl--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-top);
+  --pf-c-pagination--c-options-menu--Display: none;
+  --pf-c-pagination--c-options-menu--Visibility: hidden;
+  --pf-c-pagination--m-display-summary--c-options-menu--Display: none;
+  --pf-c-pagination--m-display-summary--c-options-menu--Visibility: hidden;
+  --pf-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
+  --pf-c-pagination--m-display-full--c-options-menu--Visibility: visible;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+@media screen and (min-width: 768px) {
+  .pf-c-pagination {
+    --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
+    --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
+    --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
+    --pf-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
+    --pf-c-pagination--m-bottom--child--MarginRight: var(--pf-c-pagination--m-bottom--child--md--MarginRight);
+    --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
+    --pf-c-pagination--m-bottom--BoxShadow: none;
+    --pf-c-pagination--c-options-menu--Display: inline-flex;
+    --pf-c-pagination--c-options-menu--Visibility: visible;
+    --pf-c-pagination__nav--Display: inline-flex;
+    --pf-c-pagination__nav--Visibility: visible;
+    --pf-c-pagination__total-items--Display: none;
+    --pf-c-pagination__total-items--Visibility: hidden;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .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 > *:not(:last-child):not(.pf-c-pagination__total-items) {
+  margin-right: var(--pf-c-pagination--child--MarginRight);
+}
+.pf-c-pagination .pf-c-options-menu {
+  display: var(--pf-c-pagination--c-options-menu--Display);
+  visibility: var(--pf-c-pagination--c-options-menu--Visibility);
+}
+.pf-c-pagination.pf-m-bottom {
+  --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-bottom--child--MarginRight);
+  --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
+  --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
+  --pf-c-pagination--m-sticky--BoxShadow: var(--pf-c-pagination--m-bottom--m-sticky--BoxShadow);
+  --pf-c-pagination--m-sticky--Top: auto;
+  position: sticky;
+  bottom: var(--pf-c-pagination--m-bottom--Bottom);
+  justify-content: center;
+  background-color: var(--pf-c-pagination--m-bottom--BackgroundColor);
+  box-shadow: var(--pf-c-pagination--m-bottom--BoxShadow);
+}
+.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control .pf-c-button {
+  --pf-c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
+  --pf-c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
+  outline-offset: var(--pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
+}
+.pf-c-pagination.pf-m-bottom.pf-m-static {
+  --pf-c-pagination--m-bottom--MarginTop: 0;
+  --pf-c-pagination--m-bottom--BorderTopWidth: 0;
+  position: relative;
+  box-shadow: none;
+}
+.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
+.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
+.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
+  display: none;
+  visibility: hidden;
+}
+.pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+  position: absolute;
+  display: block;
+  visibility: visible;
+}
+.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
+  display: flex;
+  flex-basis: 100%;
+  justify-content: space-between;
+  visibility: visible;
+}
+@media screen and (min-width: 768px) {
+  .pf-c-pagination.pf-m-bottom {
+    --pf-c-pagination--m-bottom--BorderTopWidth: 0;
+    --pf-c-pagination--m-bottom--MarginTop: 0;
+    --pf-c-pagination--m-bottom--Bottom: auto;
+    position: relative;
+    justify-content: flex-end;
+    padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft);
+  }
+  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
+.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
+.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
+    display: block;
+    visibility: visible;
+  }
+  .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+    position: relative;
+  }
+  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
+    display: inline-flex;
+    flex-basis: auto;
+  }
+}
+.pf-c-pagination.pf-m-sticky {
+  --pf-c-pagination--m-bottom--Bottom: 0;
+  position: sticky;
+  top: var(--pf-c-pagination--m-sticky--Top);
+  z-index: var(--pf-c-pagination--m-sticky--ZIndex);
+  padding-top: var(--pf-c-pagination--m-sticky--PaddingTop);
+  padding-right: var(--pf-c-pagination--m-sticky--PaddingRight);
+  padding-bottom: var(--pf-c-pagination--m-sticky--PaddingBottom);
+  padding-left: var(--pf-c-pagination--m-sticky--PaddingLeft);
+  background-color: var(--pf-c-pagination--m-sticky--BackgroundColor);
+  box-shadow: var(--pf-c-pagination--m-sticky--BoxShadow);
+}
+@media screen and (min-width: 768px) {
+  .pf-c-pagination.pf-m-sticky {
+    padding: var(--pf-c-pagination--m-sticky--md--PaddingTop) var(--pf-c-pagination--m-sticky--md--PaddingRight) var(--pf-c-pagination--m-sticky--md--PaddingBottom) var(--pf-c-pagination--m-sticky--md--PaddingLeft);
+  }
+}
+.pf-c-pagination .pf-c-options-menu__toggle {
+  font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize);
+}
+.pf-c-pagination.pf-m-compact {
+  --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
+}
+
+.pf-c-pagination__nav {
+  display: var(--pf-c-pagination__nav--Display);
+  justify-content: flex-end;
+  visibility: var(--pf-c-pagination__nav--Visibility);
+}
+
+.pf-c-pagination__nav-control .pf-c-button {
+  padding-right: var(--pf-c-pagination__nav-control--c-button--PaddingRight);
+  padding-left: var(--pf-c-pagination__nav-control--c-button--PaddingLeft);
+  font-size: var(--pf-c-pagination__nav-control--c-button--FontSize);
+}
+.pf-c-pagination.pf-m-compact .pf-c-pagination__nav-control + .pf-c-pagination__nav-control {
+  margin-left: var(--pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
+}
+
+.pf-c-pagination__nav-page-select {
+  display: flex;
+  align-items: center;
+  padding-right: var(--pf-c-pagination__nav-page-select--PaddingRight);
+  padding-left: var(--pf-c-pagination__nav-page-select--PaddingLeft);
+}
+.pf-c-pagination__nav-page-select > * {
+  font-size: var(--pf-c-pagination__nav-page-select--FontSize);
+  white-space: nowrap;
+}
+.pf-c-pagination__nav-page-select > *:not(:last-child) {
+  margin-right: var(--pf-c-pagination__nav-page-select--child--MarginRight);
+}
+.pf-c-pagination__nav-page-select .pf-c-form-control {
+  width: var(--pf-c-pagination__nav-page-select--c-form-control--Width);
+}
+
+.pf-c-pagination__total-items {
+  display: var(--pf-c-pagination__total-items--Display);
+  visibility: var(--pf-c-pagination__total-items--Visibility);
+}
+
+.pf-c-pagination.pf-m-display-summary {
+  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
+  --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
+  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
+  --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
+  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
+  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
+}
+.pf-c-pagination.pf-m-display-full {
+  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
+  --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
+  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
+  --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
+  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
+  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
+}
+@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);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
+  }
+  .pf-c-pagination.pf-m-display-full-on-sm {
+    --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-pagination.pf-m-display-summary-on-md {
+    --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
+  }
+  .pf-c-pagination.pf-m-display-full-on-md {
+    --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-pagination.pf-m-display-summary-on-lg {
+    --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
+  }
+  .pf-c-pagination.pf-m-display-full-on-lg {
+    --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-pagination.pf-m-display-summary-on-xl {
+    --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
+  }
+  .pf-c-pagination.pf-m-display-full-on-xl {
+    --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-pagination.pf-m-display-summary-on-2xl {
+    --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
+  }
+  .pf-c-pagination.pf-m-display-full-on-2xl {
+    --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
+    --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
+    --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
+    --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
+    --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
+  }
+}
+
+.pf-c-options-menu {
+  --pf-c-options-menu__toggle--BackgroundColor: transparent;
+  --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
+  --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle--MinWidth: 0;
+  --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
+  --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
+  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
+  --pf-c-options-menu__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
+  --pf-c-options-menu__toggle--Color: var(--pf-global--Color--100);
+  --pf-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-options-menu__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-global--Color--200);
+  --pf-c-options-menu__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
+  --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
+  --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
+  --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
+  --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
+  --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-options-menu__toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-options-menu__menu--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-options-menu__menu--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__menu--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__menu--Top: calc(100% + var(--pf-global--spacer--xs));
+  --pf-c-options-menu__menu--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-options-menu--m-top__menu--Top: 0;
+  --pf-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
+  --pf-c-options-menu__menu-item--BackgroundColor: transparent;
+  --pf-c-options-menu__menu-item--Color: var(--pf-global--Color--100);
+  --pf-c-options-menu__menu-item--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-options-menu__menu-item--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__menu-item--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-options-menu__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__menu-item--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-options-menu__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
+  --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
+  --pf-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
+  --pf-c-options-menu__menu-item-icon--Color: var(--pf-global--active-color--100);
+  --pf-c-options-menu__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-options-menu__group--group--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__group-title--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
+  --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
+  --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
+  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
+  --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+.pf-c-options-menu .pf-c-divider {
+  margin-top: var(--pf-c-options-menu--c-divider--MarginTop);
+  margin-bottom: var(--pf-c-options-menu--c-divider--MarginBottom);
+}
+.pf-c-options-menu .pf-c-divider:last-child {
+  --pf-c-options-menu--c-divider--MarginBottom: 0;
+}
+
+.pf-c-options-menu__toggle:not(.pf-m-plain)::before,
+.pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-options-menu__toggle--BorderWidth) solid;
+  border-color: var(--pf-c-options-menu__toggle--BorderTopColor) var(--pf-c-options-menu__toggle--BorderRightColor) var(--pf-c-options-menu__toggle--BorderBottomColor) var(--pf-c-options-menu__toggle--BorderLeftColor);
+}
+.pf-c-options-menu__toggle:not(.pf-m-plain):hover::before,
+.pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:hover::before {
+  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--hover--BorderBottomColor);
+}
+.pf-c-options-menu__toggle:not(.pf-m-plain):active::before, .pf-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
+.pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:active::before,
+.pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button.pf-m-active::before {
+  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--active--BorderBottomColor);
+  border-bottom-width: var(--pf-c-options-menu__toggle--active--BorderBottomWidth);
+}
+.pf-c-options-menu__toggle:not(.pf-m-plain):focus::before,
+.pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:focus::before {
+  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--focus--BorderBottomColor);
+  border-bottom-width: var(--pf-c-options-menu__toggle--focus--BorderBottomWidth);
+}
+
+.pf-c-options-menu__toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: var(--pf-c-options-menu__toggle--MinWidth);
+  max-width: 100%;
+  padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
+  line-height: var(--pf-c-options-menu__toggle--LineHeight);
+  color: var(--pf-c-options-menu__toggle--Color);
+  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
+  border: none;
+}
+.pf-c-options-menu__toggle:not(.pf-m-text) {
+  padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
+  padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
+  padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
+}
+.pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
+  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
+  border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
+}
+.pf-c-options-menu__toggle.pf-m-plain {
+  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
+  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
+  display: inline-block;
+}
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
+  justify-content: center;
+  color: var(--pf-c-options-menu__toggle--m-plain--Color);
+}
+.pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
+  line-height: var(--pf-c-options-menu__toggle--LineHeight);
+}
+.pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
+  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
+}
+.pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
+  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
+}
+.pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
+  pointer-events: none;
+}
+.pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-options-menu__toggle.pf-m-disabled.pf-m-text, .pf-c-options-menu__toggle:disabled:not(.pf-m-plain), .pf-c-options-menu__toggle:disabled.pf-m-text {
+  --pf-c-options-menu__toggle--BackgroundColor: var(--pf-c-options-menu__toggle--disabled--BackgroundColor);
+}
+.pf-c-options-menu__toggle.pf-m-disabled::before, .pf-c-options-menu__toggle:disabled::before {
+  border: 0;
+}
+
+.pf-c-options-menu__toggle-button-icon {
+  position: relative;
+}
+
+.pf-c-options-menu__toggle-button {
+  padding: var(--pf-c-options-menu__toggle-button--PaddingTop) var(--pf-c-options-menu__toggle-button--PaddingRight) var(--pf-c-options-menu__toggle-button--PaddingBottom) var(--pf-c-options-menu__toggle-button--PaddingLeft);
+  background-color: var(--pf-c-options-menu__toggle-button--BackgroundColor);
+  border: 0;
+}
+
+.pf-c-options-menu__toggle-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-c-options-menu__toggle-icon {
+  margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
+  margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
+}
+.pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
+  transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
+}
+
+.pf-c-options-menu__menu {
+  position: absolute;
+  top: var(--pf-c-options-menu__menu--Top);
+  z-index: var(--pf-c-options-menu__menu--ZIndex);
+  min-width: 100%;
+  padding-top: var(--pf-c-options-menu__menu--PaddingTop);
+  padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom);
+  background-color: var(--pf-c-options-menu__menu--BackgroundColor);
+  background-clip: padding-box;
+  box-shadow: var(--pf-c-options-menu__menu--BoxShadow);
+}
+.pf-c-options-menu__menu.pf-m-align-right {
+  right: 0;
+}
+.pf-c-options-menu.pf-m-top .pf-c-options-menu__menu {
+  --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
+  transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
+}
+
+.pf-c-options-menu__menu-item {
+  display: flex;
+  align-items: baseline;
+  width: 100%;
+  padding: var(--pf-c-options-menu__menu-item--PaddingTop) var(--pf-c-options-menu__menu-item--PaddingRight) var(--pf-c-options-menu__menu-item--PaddingBottom) var(--pf-c-options-menu__menu-item--PaddingLeft);
+  font-size: var(--pf-c-options-menu__menu-item--FontSize);
+  color: var(--pf-c-options-menu__menu-item--Color);
+  white-space: nowrap;
+  background-color: var(--pf-c-options-menu__menu-item--BackgroundColor);
+  border: none;
+}
+.pf-c-options-menu__menu-item:hover, .pf-c-options-menu__menu-item:focus {
+  text-decoration: none;
+  background-color: var(--pf-c-options-menu__menu-item--hover--BackgroundColor);
+}
+.pf-c-options-menu__menu-item:disabled, .pf-c-options-menu__menu-item.pf-m-disabled {
+  color: var(--pf-c-options-menu__menu-item--disabled--Color);
+  pointer-events: none;
+  background-color: var(--pf-c-options-menu__menu-item--disabled--BackgroundColor);
+}
+
+.pf-c-options-menu__menu-item-icon {
+  align-self: center;
+  width: auto;
+  padding-left: var(--pf-c-options-menu__menu-item-icon--PaddingLeft);
+  margin-left: auto;
+  font-size: var(--pf-c-options-menu__menu-item-icon--FontSize);
+  color: var(--pf-c-options-menu__menu-item-icon--Color);
+}
+
+.pf-c-options-menu__group + .pf-c-options-menu__group {
+  padding-top: var(--pf-c-options-menu__group--group--PaddingTop);
+}
+
+.pf-c-options-menu__group-title {
+  padding-top: var(--pf-c-options-menu__group-title--PaddingTop);
+  padding-right: var(--pf-c-options-menu__group-title--PaddingRight);
+  padding-bottom: var(--pf-c-options-menu__group-title--PaddingBottom);
+  padding-left: var(--pf-c-options-menu__group-title--PaddingLeft);
+  font-size: var(--pf-c-options-menu__group-title--FontSize);
+  font-weight: var(--pf-c-options-menu__group-title--FontWeight);
+  color: var(--pf-c-options-menu__group-title--Color);
+}
+
+.ins-c-pagination-next .pf-c-options-menu .pf-c-dropdown__menu .pf-c-dropdown__menu-item {
+  display: flex;
+}
+.ins-c-pagination-next .pf-c-options-menu .pf-c-dropdown__menu .pf-c-dropdown__menu-item .pf-c-options-menu__menu-item-icon {
+  padding-left: 0;
+}
+
+.pf-c-pagination .pf-c-pagination__nav .pf-c-pagination__nav-page-select input {
+  width: 75px;
+}

package/esm/Pagination/pagination.scss

@@ -0,0 +1,15 @@
+@import '~@patternfly/patternfly/sass-utilities/_all.scss';
+@import '~@patternfly/patternfly/components/Pagination/pagination.scss';
+@import '~@patternfly/patternfly/components/OptionsMenu/options-menu.scss';
+
+.ins-c-pagination-next .pf-c-options-menu {
+    .pf-c-dropdown__menu .pf-c-dropdown__menu-item {
+        display: flex;
+
+        .pf-c-options-menu__menu-item-icon {
+            padding-left: 0;
+        }
+    }
+}
+
+.pf-c-pagination .pf-c-pagination__nav .pf-c-pagination__nav-page-select input { width: 75px; }