@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.10

package/css/components/Pagination/pagination.css

@@ -6,116 +6,88 @@
   appearance: none;
 }
 
-.pf-v5-c-pagination {
+:where(:root),
+:where(.pf-v5-c-pagination) {
   --pf-v5-c-pagination--inset: 0;
-  --pf-v5-c-pagination--PaddingRight: var(--pf-v5-c-pagination--inset);
-  --pf-v5-c-pagination--PaddingLeft: var(--pf-v5-c-pagination--inset);
-  --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
-  --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--md);
+  --pf-v5-c-pagination--m-page-insets--xl--inset: var(--pf-t--global--spacer--lg);
   --pf-v5-c-pagination__nav--Display: none;
   --pf-v5-c-pagination--m-display-summary__nav--Display: none;
   --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
-  --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination__nav-control--c-button--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-pagination__nav-page-select--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination__nav-page-select--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination__nav-page-select--child--MarginRight: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
+  --pf-v5-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--md);
+  --pf-v5-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--sm) * 2 + var(--pf-t--global--border--width--100) * 2);
   --pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;
   --pf-v5-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
   --pf-v5-c-pagination__total-items--Display: block;
   --pf-v5-c-pagination--m-display-summary__total-items--Display: block;
   --pf-v5-c-pagination--m-display-full__total-items--Display: none;
-  --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
-  --pf-v5-c-pagination--m-sticky--md--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-sticky--md--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-sticky--md--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-sticky--md--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
+  --pf-v5-c-pagination--m-sticky--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-pagination--m-sticky--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-sticky--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-pagination--m-sticky--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-sticky--ZIndex: 100;
   --pf-v5-c-pagination--m-sticky--Top: 0;
-  --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
+  --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v5-c-pagination--m-bottom--Bottom: 0;
-  --pf-v5-c-pagination--m-bottom--md--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom--md--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
-  --pf-v5-c-pagination--c-menu-toggle--Display: none;
-  --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
-  --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: inline-flex;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  padding-inline-start: var(--pf-v5-c-pagination--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-pagination--PaddingRight);
+  --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-bottom--md--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-pagination--m-bottom--md--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
+  --pf-v5-c-pagination__page-menu--Display: none;
+  --pf-v5-c-pagination--m-display-summary__page-menu--Display: none;
+  --pf-v5-c-pagination--m-display-full__page-menu--Display: inline-flex;
 }
 @media screen and (min-width: 768px) {
-  .pf-v5-c-pagination {
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
-    --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
-    --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
+  :where(:root),
+  :where(.pf-v5-c-pagination) {
     --pf-v5-c-pagination--m-bottom--BoxShadow: none;
-    --pf-v5-c-pagination--c-menu-toggle--Display: inline-flex;
+    --pf-v5-c-pagination__page-menu--Display: inline-flex;
     --pf-v5-c-pagination__nav--Display: inline-flex;
     --pf-v5-c-pagination__total-items--Display: none;
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-pagination {
-    --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
-    --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
+  :where(:root),
+  :where(.pf-v5-c-pagination) {
+    --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
+    --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
     --pf-v5-c-pagination__scroll-button--Width: var(--pf-v5-c-pagination__scroll-button--xl--Width);
     --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-c-pagination--m-page-insets--xl--inset);
   }
 }
-.pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
-  margin-inline-end: var(--pf-v5-c-pagination--child--MarginRight);
+
+.pf-v5-c-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--pf-v5-c-pagination--ColumnGap);
+  align-items: center;
+  justify-content: flex-end;
+  padding-inline-start: var(--pf-v5-c-pagination--inset);
+  padding-inline-end: var(--pf-v5-c-pagination--inset);
 }
-.pf-v5-c-pagination .pf-v5-c-menu-toggle {
-  display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
-  font-size: var(--pf-v5-c-pagination--c-menu-toggle--FontSize);
+.pf-v5-c-pagination .pf-v5-c-pagination__page-menu {
+  display: var(--pf-v5-c-pagination__page-menu--Display);
 }
 .pf-v5-c-pagination.pf-m-bottom {
-  --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--MarginRight);
-  --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
-  --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
   --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow);
   --pf-v5-c-pagination--m-sticky--Top: auto;
   position: sticky;
   inset-block-end: var(--pf-v5-c-pagination--m-bottom--Bottom);
   justify-content: center;
+  padding-inline-start: var(--pf-v5-c-pagination--m-bottom--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination--m-bottom--PaddingRight);
   background-color: var(--pf-v5-c-pagination--m-bottom--BackgroundColor);
   box-shadow: var(--pf-v5-c-pagination--m-bottom--BoxShadow);
 }
-.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control .pf-v5-c-button {
-  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
-  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
-  outline-offset: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
-}
 .pf-v5-c-pagination.pf-m-bottom.pf-m-static {
   --pf-v5-c-pagination--m-bottom--MarginTop: 0;
   --pf-v5-c-pagination--m-bottom--BorderTopWidth: 0;
@@ -127,7 +99,7 @@
 .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
   display: none;
 }
-.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
+.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__page-menu {
   position: absolute;
   display: block;
 }
@@ -145,8 +117,6 @@
     justify-content: flex-end;
     padding-block-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop);
     padding-block-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom);
-    padding-inline-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
-    padding-inline-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingRight);
   }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
@@ -156,7 +126,7 @@
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
     display: inline-flex;
   }
-  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__page-menu {
     position: relative;
   }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
@@ -176,23 +146,13 @@
   background-color: var(--pf-v5-c-pagination--m-sticky--BackgroundColor);
   box-shadow: var(--pf-v5-c-pagination--m-sticky--BoxShadow);
 }
-@media screen and (min-width: 768px) {
-  .pf-v5-c-pagination.pf-m-sticky {
-    padding-block-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop);
-    padding-block-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom);
-    padding-inline-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
-    padding-inline-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingRight);
-  }
-}
-.pf-v5-c-pagination.pf-m-compact {
-  --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-compact--child--MarginRight);
-}
 .pf-v5-c-pagination.pf-m-page-insets {
   --pf-v5-c-pagination--inset: var(--pf-v5-c-pagination--m-page-insets--inset);
 }
 
 .pf-v5-c-pagination__nav {
   display: var(--pf-v5-c-pagination__nav--Display);
+  column-gap: var(--pf-v5-c-pagination__nav--ColumnGap);
   justify-content: flex-end;
 }
 
@@ -200,28 +160,15 @@
   scale: -1 1;
 }
 
-.pf-v5-c-pagination__nav-control .pf-v5-c-button {
-  padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
-  font-size: var(--pf-v5-c-pagination__nav-control--c-button--FontSize);
-}
-.pf-v5-c-pagination.pf-m-compact .pf-v5-c-pagination__nav-control + .pf-v5-c-pagination__nav-control {
-  margin-inline-start: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
-}
-
 .pf-v5-c-pagination__nav-page-select {
   display: flex;
+  column-gap: var(--pf-v5-c-pagination__nav-page-select--ColumnGap);
   align-items: center;
-  padding-inline-start: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
 }
 .pf-v5-c-pagination__nav-page-select > * {
   font-size: var(--pf-v5-c-pagination__nav-page-select--FontSize);
   white-space: nowrap;
 }
-.pf-v5-c-pagination__nav-page-select > *:not(:last-child) {
-  margin-inline-end: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
-}
 .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
   width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
 }
@@ -231,12 +178,12 @@
 
 .pf-v5-c-pagination.pf-m-display-summary {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+  --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-display-full {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+  --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-inset-none {
@@ -260,12 +207,12 @@
 @media (min-width: 576px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-sm {
@@ -290,12 +237,12 @@
 @media (min-width: 768px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-md {
@@ -320,12 +267,12 @@
 @media (min-width: 992px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-lg {
@@ -350,12 +297,12 @@
 @media (min-width: 1200px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-xl {
@@ -380,12 +327,12 @@
 @media (min-width: 1450px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
+    --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-2xl {
@@ -406,8 +353,4 @@
   .pf-v5-c-pagination.pf-m-inset-2xl-on-2xl {
     --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
   }
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-pagination {
-  --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/css/components/Pagination/pagination.d.ts

@@ -1,16 +1,13 @@
 import './pagination.css';
 declare const _default: {
-  "button": "pf-v5-c-button",
   "dirRtl": "pf-v5-m-dir-rtl",
   "formControl": "pf-v5-c-form-control",
-  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
     "first": "pf-m-first",
     "last": "pf-m-last",
     "sticky": "pf-m-sticky",
-    "compact": "pf-m-compact",
     "pageInsets": "pf-m-page-insets",
     "displaySummary": "pf-m-display-summary",
     "displayFull": "pf-m-display-full",
@@ -65,7 +62,7 @@ declare const _default: {
   "paginationNav": "pf-v5-c-pagination__nav",
   "paginationNavControl": "pf-v5-c-pagination__nav-control",
   "paginationNavPageSelect": "pf-v5-c-pagination__nav-page-select",
-  "paginationTotalItems": "pf-v5-c-pagination__total-items",
-  "themeDark": "pf-v5-theme-dark"
+  "paginationPageMenu": "pf-v5-c-pagination__page-menu",
+  "paginationTotalItems": "pf-v5-c-pagination__total-items"
 };
 export default _default;

package/css/components/Pagination/pagination.js

@@ -2,17 +2,14 @@
 exports.__esModule = true;
 require('./pagination.css');
 exports.default = {
-  "button": "pf-v5-c-button",
   "dirRtl": "pf-v5-m-dir-rtl",
   "formControl": "pf-v5-c-form-control",
-  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
     "first": "pf-m-first",
     "last": "pf-m-last",
     "sticky": "pf-m-sticky",
-    "compact": "pf-m-compact",
     "pageInsets": "pf-m-page-insets",
     "displaySummary": "pf-m-display-summary",
     "displayFull": "pf-m-display-full",
@@ -67,6 +64,6 @@ exports.default = {
   "paginationNav": "pf-v5-c-pagination__nav",
   "paginationNavControl": "pf-v5-c-pagination__nav-control",
   "paginationNavPageSelect": "pf-v5-c-pagination__nav-page-select",
-  "paginationTotalItems": "pf-v5-c-pagination__total-items",
-  "themeDark": "pf-v5-theme-dark"
+  "paginationPageMenu": "pf-v5-c-pagination__page-menu",
+  "paginationTotalItems": "pf-v5-c-pagination__total-items"
 };

package/css/components/Pagination/pagination.mjs

@@ -1,16 +1,13 @@
 import './pagination.css';
 export default {
-  "button": "pf-v5-c-button",
   "dirRtl": "pf-v5-m-dir-rtl",
   "formControl": "pf-v5-c-form-control",
-  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
     "first": "pf-m-first",
     "last": "pf-m-last",
     "sticky": "pf-m-sticky",
-    "compact": "pf-m-compact",
     "pageInsets": "pf-m-page-insets",
     "displaySummary": "pf-m-display-summary",
     "displayFull": "pf-m-display-full",
@@ -65,6 +62,6 @@ export default {
   "paginationNav": "pf-v5-c-pagination__nav",
   "paginationNavControl": "pf-v5-c-pagination__nav-control",
   "paginationNavPageSelect": "pf-v5-c-pagination__nav-page-select",
-  "paginationTotalItems": "pf-v5-c-pagination__total-items",
-  "themeDark": "pf-v5-theme-dark"
+  "paginationPageMenu": "pf-v5-c-pagination__page-menu",
+  "paginationTotalItems": "pf-v5-c-pagination__total-items"
 };

package/css/components/Panel/panel.css

@@ -1,34 +1,39 @@
+:root,
 .pf-v5-c-panel {
   --pf-v5-c-panel--Width: auto;
   --pf-v5-c-panel--MinWidth: auto;
   --pf-v5-c-panel--MaxWidth: none;
   --pf-v5-c-panel--ZIndex: auto;
-  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-panel--BoxShadow: none;
   --pf-v5-c-panel--before--BorderWidth: 0;
-  --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
-  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v5-c-panel__main--MaxHeight: none;
   --pf-v5-c-panel__main--Overflow: visible;
-  --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v5-c-panel__footer--BoxShadow: none;
   --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
-  --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
+  --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
+}
+
+.pf-v5-c-panel {
   position: relative;
   z-index: var(--pf-v5-c-panel--ZIndex);
   width: var(--pf-v5-c-panel--Width);
@@ -47,6 +52,9 @@
 .pf-v5-c-panel.pf-m-bordered {
   --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
 }
+.pf-v5-c-panel.pf-m-secondary {
+  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
+}
 .pf-v5-c-panel.pf-m-raised {
   --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
   --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -83,8 +91,4 @@
   padding-inline-start: var(--pf-v5-c-panel__footer--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-panel__footer--PaddingRight);
   box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-panel {
-  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/css/components/Panel/panel.d.ts

@@ -2,6 +2,7 @@ import './panel.css';
 declare const _default: {
   "modifiers": {
     "bordered": "pf-m-bordered",
+    "secondary": "pf-m-secondary",
     "raised": "pf-m-raised",
     "scrollable": "pf-m-scrollable"
   },
@@ -9,7 +10,6 @@ declare const _default: {
   "panelFooter": "pf-v5-c-panel__footer",
   "panelHeader": "pf-v5-c-panel__header",
   "panelMain": "pf-v5-c-panel__main",
-  "panelMainBody": "pf-v5-c-panel__main-body",
-  "themeDark": "pf-v5-theme-dark"
+  "panelMainBody": "pf-v5-c-panel__main-body"
 };
 export default _default;

package/css/components/Panel/panel.js

@@ -4,6 +4,7 @@ require('./panel.css');
 exports.default = {
   "modifiers": {
     "bordered": "pf-m-bordered",
+    "secondary": "pf-m-secondary",
     "raised": "pf-m-raised",
     "scrollable": "pf-m-scrollable"
   },
@@ -11,6 +12,5 @@ exports.default = {
   "panelFooter": "pf-v5-c-panel__footer",
   "panelHeader": "pf-v5-c-panel__header",
   "panelMain": "pf-v5-c-panel__main",
-  "panelMainBody": "pf-v5-c-panel__main-body",
-  "themeDark": "pf-v5-theme-dark"
+  "panelMainBody": "pf-v5-c-panel__main-body"
 };

package/css/components/Panel/panel.mjs

@@ -2,6 +2,7 @@ import './panel.css';
 export default {
   "modifiers": {
     "bordered": "pf-m-bordered",
+    "secondary": "pf-m-secondary",
     "raised": "pf-m-raised",
     "scrollable": "pf-m-scrollable"
   },
@@ -9,6 +10,5 @@ export default {
   "panelFooter": "pf-v5-c-panel__footer",
   "panelHeader": "pf-v5-c-panel__header",
   "panelMain": "pf-v5-c-panel__main",
-  "panelMainBody": "pf-v5-c-panel__main-body",
-  "themeDark": "pf-v5-theme-dark"
+  "panelMainBody": "pf-v5-c-panel__main-body"
 };