@patternfly/patternfly 6.0.0-alpha.30 → 6.0.0-alpha.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/components/HelperText/helper-text.css +28 -34
  2. package/components/HelperText/helper-text.scss +30 -40
  3. package/components/Pagination/pagination.css +61 -121
  4. package/components/Pagination/pagination.scss +48 -127
  5. package/docs/components/Pagination/examples/Pagination.md +663 -637
  6. package/docs/components/Toolbar/examples/Toolbar.md +102 -100
  7. package/docs/demos/CardView/examples/CardView.md +102 -98
  8. package/docs/demos/DataList/examples/DataList.md +408 -392
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +319 -299
  10. package/docs/demos/Table/examples/Table.md +1239 -1193
  11. package/docs/demos/Toolbar/examples/Toolbar.md +408 -392
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +89 -163
  14. package/patternfly-theme-dark-unversioned.css +89 -163
  15. package/patternfly.css +89 -163
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
  18. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  19. package/components/Pagination/themes/dark/pagination.scss +0 -7
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -16118,30 +16118,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16118
16118
  margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
16119
16119
  }
16120
16120
 
16121
+ :root {
16122
+ --pf-v5-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
16123
+ --pf-v5-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
16124
+ --pf-v5-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);
16125
+ --pf-v5-c-helper-text__item-text--Color: var(--pf-t--global--text--color--regular);
16126
+ --pf-v5-c-helper-text__item-text--FontWeight: var(--pf-t--global--font--weight--body);
16127
+ --pf-v5-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-t--global--icon--color--subtle);
16128
+ --pf-v5-c-helper-text__item-text--m-indeterminate--Color: var(--pf-t--global--text--color--subtle);
16129
+ --pf-v5-c-helper-text__item-icon--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
16130
+ --pf-v5-c-helper-text__item-text--m-warning--FontWeight: var(--pf-t--global--font--weight--body--bold);
16131
+ --pf-v5-c-helper-text__item-icon--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
16132
+ --pf-v5-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
16133
+ --pf-v5-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
16134
+ --pf-v5-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
16135
+ --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
16136
+ --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
16137
+ --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
16138
+ --pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
16139
+ --pf-v5-c-helper-text--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
16140
+ --pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
16141
+ --pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
16142
+ --pf-v5-c-helper-text__item-icon--MarginRight: var(--pf-t--global--spacer--xs);
16143
+ }
16144
+
16121
16145
  .pf-v5-c-helper-text {
16122
- --pf-v5-c-helper-text--Gap: var(--pf-v5-global--spacer--xs);
16123
- --pf-v5-c-helper-text--FontSize: var(--pf-v5-global--FontSize--sm);
16124
- --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-global--Color--100);
16125
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-global--Color--100);
16126
- --pf-v5-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-v5-global--Color--200);
16127
- --pf-v5-c-helper-text__item-text--m-indeterminate--Color: var(--pf-v5-global--Color--200);
16128
- --pf-v5-c-helper-text__item-icon--m-warning--Color: var(--pf-v5-global--warning-color--100);
16129
- --pf-v5-c-helper-text__item-text--m-warning--Color: var(--pf-v5-global--warning-color--200);
16130
- --pf-v5-c-helper-text__item-icon--m-success--Color: var(--pf-v5-global--success-color--100);
16131
- --pf-v5-c-helper-text__item-text--m-success--Color: var(--pf-v5-global--success-color--200);
16132
- --pf-v5-c-helper-text__item-icon--m-error--Color: var(--pf-v5-global--danger-color--100);
16133
- --pf-v5-c-helper-text__item-text--m-error--Color: var(--pf-v5-global--danger-color--200);
16134
- --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v5-global--Color--100);
16135
- --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-global--Color--100);
16136
- --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-v5-global--Color--200);
16137
- --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-v5-global--Color--200);
16138
- --pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-v5-global--warning-color--100);
16139
- --pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color: var(--pf-v5-global--Color--200);
16140
- --pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-v5-global--success-color--100);
16141
- --pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color: var(--pf-v5-global--Color--200);
16142
- --pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-v5-global--danger-color--100);
16143
- --pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color: var(--pf-v5-global--Color--100);
16144
- --pf-v5-c-helper-text__item-icon--MarginRight: var(--pf-v5-global--spacer--xs);
16145
16146
  display: grid;
16146
16147
  gap: var(--pf-v5-c-helper-text--Gap);
16147
16148
  font-size: var(--pf-v5-c-helper-text--FontSize);
@@ -16153,6 +16154,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16153
16154
 
16154
16155
  .pf-v5-c-helper-text__item {
16155
16156
  display: flex;
16157
+ font-weight: var(--pf-v5-c-helper-text__item-text--FontWeight);
16156
16158
  }
16157
16159
  .pf-v5-c-helper-text__item.pf-m-indeterminate {
16158
16160
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text__item-icon--m-indeterminate--Color);
@@ -16161,25 +16163,21 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16161
16163
  --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color);
16162
16164
  }
16163
16165
  .pf-v5-c-helper-text__item.pf-m-warning {
16166
+ --pf-v5-c-helper-text__item-text--FontWeight: var(--pf-v5-c-helper-text__item-text--m-warning--FontWeight);
16164
16167
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text__item-icon--m-warning--Color);
16165
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-c-helper-text__item-text--m-warning--Color);
16166
16168
  --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color);
16167
- --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color);
16168
16169
  }
16169
16170
  .pf-v5-c-helper-text__item.pf-m-success {
16171
+ --pf-v5-c-helper-text__item-text--FontWeight: var(--pf-v5-c-helper-text__item-text--m-success--FontWeight);
16170
16172
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text__item-icon--m-success--Color);
16171
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-c-helper-text__item-text--m-success--Color);
16172
16173
  --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color);
16173
- --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color);
16174
16174
  }
16175
16175
  .pf-v5-c-helper-text__item.pf-m-error {
16176
+ --pf-v5-c-helper-text__item-text--FontWeight: var(--pf-v5-c-helper-text__item-text--m-error--FontWeight);
16176
16177
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text__item-icon--m-error--Color);
16177
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-c-helper-text__item-text--m-error--Color);
16178
16178
  --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color);
16179
- --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color);
16180
16179
  }
16181
16180
  .pf-v5-c-helper-text__item.pf-m-dynamic {
16182
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic__item-text--Color);
16183
16181
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text--m-dynamic__item-icon--Color);
16184
16182
  }
16185
16183
 
@@ -16192,14 +16190,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16192
16190
  color: var(--pf-v5-c-helper-text__item-text--Color);
16193
16191
  }
16194
16192
 
16195
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
16196
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16197
- }
16198
-
16199
- :where(.pf-theme-dark) .pf-v5-c-helper-text {
16200
- --pf-v5-c-helper-text__item-text--m-success--Color: var(--pf-v5-global--success-color--100);
16201
- }
16202
-
16203
16193
  .pf-v5-c-icon {
16204
16194
  --pf-v5-c-icon--Width: 1em;
16205
16195
  --pf-v5-c-icon--Height: 1em;
@@ -22553,116 +22543,85 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22553
22543
  flex: 1 0 auto;
22554
22544
  }
22555
22545
 
22556
- .pf-v5-c-pagination {
22546
+ :root {
22557
22547
  --pf-v5-c-pagination--inset: 0;
22558
- --pf-v5-c-pagination--PaddingRight: var(--pf-v5-c-pagination--inset);
22559
- --pf-v5-c-pagination--PaddingLeft: var(--pf-v5-c-pagination--inset);
22560
- --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-global--spacer--md);
22561
- --pf-v5-c-pagination--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
22562
- --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-global--spacer--lg);
22563
- --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
22564
- --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
22565
- --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
22566
- --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
22548
+ --pf-v5-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
22549
+ --pf-v5-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--md);
22550
+ --pf-v5-c-pagination--m-page-insets--xl--inset: var(--pf-t--global--spacer--lg);
22567
22551
  --pf-v5-c-pagination__nav--Display: none;
22568
22552
  --pf-v5-c-pagination--m-display-summary__nav--Display: none;
22569
22553
  --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
22570
- --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
22571
- --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
22572
- --pf-v5-c-pagination__nav-control--c-button--FontSize: var(--pf-v5-global--FontSize--md);
22573
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
22574
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-global--spacer--md);
22575
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-global--spacer--md);
22576
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--md);
22577
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-v5-global--spacer--form-element);
22578
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-v5-global--spacer--sm);
22579
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-v5-global--spacer--form-element);
22580
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-v5-global--spacer--sm);
22581
- --pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-v5-global--spacer--md);
22582
- --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-v5-global--FontSize--sm);
22583
- --pf-v5-c-pagination__nav-page-select--PaddingLeft: var(--pf-v5-global--spacer--md);
22584
- --pf-v5-c-pagination__nav-page-select--PaddingRight: var(--pf-v5-global--spacer--md);
22585
- --pf-v5-c-pagination__nav-page-select--child--MarginRight: var(--pf-v5-global--spacer--xs);
22586
- --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);
22554
+ --pf-v5-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
22555
+ --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--md);
22556
+ --pf-v5-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
22557
+ --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);
22587
22558
  --pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;
22588
22559
  --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));
22589
22560
  --pf-v5-c-pagination__total-items--Display: block;
22590
22561
  --pf-v5-c-pagination--m-display-summary__total-items--Display: block;
22591
22562
  --pf-v5-c-pagination--m-display-full__total-items--Display: none;
22592
- --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22593
- --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
22594
- --pf-v5-c-pagination--m-sticky--md--PaddingTop: var(--pf-v5-global--spacer--md);
22595
- --pf-v5-c-pagination--m-sticky--md--PaddingRight: var(--pf-v5-global--spacer--md);
22596
- --pf-v5-c-pagination--m-sticky--md--PaddingBottom: var(--pf-v5-global--spacer--md);
22597
- --pf-v5-c-pagination--m-sticky--md--PaddingLeft: var(--pf-v5-global--spacer--md);
22598
- --pf-v5-c-pagination--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
22563
+ --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22564
+ --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
22565
+ --pf-v5-c-pagination--m-sticky--PaddingTop: var(--pf-t--global--spacer--md);
22566
+ --pf-v5-c-pagination--m-sticky--PaddingRight: var(--pf-t--global--spacer--lg);
22567
+ --pf-v5-c-pagination--m-sticky--PaddingBottom: var(--pf-t--global--spacer--md);
22568
+ --pf-v5-c-pagination--m-sticky--PaddingLeft: var(--pf-t--global--spacer--lg);
22569
+ --pf-v5-c-pagination--m-sticky--ZIndex: 100;
22599
22570
  --pf-v5-c-pagination--m-sticky--Top: 0;
22600
- --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22601
- --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
22571
+ --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22572
+ --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
22602
22573
  --pf-v5-c-pagination--m-bottom--Bottom: 0;
22603
- --pf-v5-c-pagination--m-bottom--md--PaddingTop: var(--pf-v5-global--spacer--md);
22604
- --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-global--spacer--md);
22605
- --pf-v5-c-pagination--m-bottom--md--PaddingBottom: var(--pf-v5-global--spacer--md);
22606
- --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-global--spacer--md);
22607
- --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
22608
- --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
22609
- --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
22610
- --pf-v5-c-pagination--c-menu-toggle--Display: none;
22611
- --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
22612
- --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: inline-flex;
22613
- display: flex;
22614
- flex-wrap: wrap;
22615
- align-items: center;
22616
- justify-content: flex-end;
22617
- padding-inline-start: var(--pf-v5-c-pagination--PaddingLeft);
22618
- padding-inline-end: var(--pf-v5-c-pagination--PaddingRight);
22574
+ --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-t--global--spacer--lg);
22575
+ --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-t--global--spacer--lg);
22576
+ --pf-v5-c-pagination--m-bottom--md--PaddingTop: var(--pf-t--global--spacer--md);
22577
+ --pf-v5-c-pagination--m-bottom--md--PaddingBottom: var(--pf-t--global--spacer--md);
22578
+ --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-t--global--spacer--lg);
22579
+ --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
22580
+ --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
22581
+ --pf-v5-c-pagination__page-menu--Display: none;
22582
+ --pf-v5-c-pagination--m-display-summary__page-menu--Display: none;
22583
+ --pf-v5-c-pagination--m-display-full__page-menu--Display: inline-flex;
22619
22584
  }
22620
22585
  @media screen and (min-width: 768px) {
22621
- .pf-v5-c-pagination {
22622
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
22623
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
22624
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
22625
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
22626
- --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
22627
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
22586
+ :root {
22628
22587
  --pf-v5-c-pagination--m-bottom--BoxShadow: none;
22629
- --pf-v5-c-pagination--c-menu-toggle--Display: inline-flex;
22588
+ --pf-v5-c-pagination__page-menu--Display: inline-flex;
22630
22589
  --pf-v5-c-pagination__nav--Display: inline-flex;
22631
22590
  --pf-v5-c-pagination__total-items--Display: none;
22632
22591
  }
22633
22592
  }
22634
22593
  @media screen and (min-width: 1200px) {
22635
- .pf-v5-c-pagination {
22636
- --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
22637
- --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
22594
+ :root {
22595
+ --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
22596
+ --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
22638
22597
  --pf-v5-c-pagination__scroll-button--Width: var(--pf-v5-c-pagination__scroll-button--xl--Width);
22639
22598
  --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-c-pagination--m-page-insets--xl--inset);
22640
22599
  }
22641
22600
  }
22642
- .pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
22643
- margin-inline-end: var(--pf-v5-c-pagination--child--MarginRight);
22601
+
22602
+ .pf-v5-c-pagination {
22603
+ display: flex;
22604
+ flex-wrap: wrap;
22605
+ column-gap: var(--pf-v5-c-pagination--ColumnGap);
22606
+ align-items: center;
22607
+ justify-content: flex-end;
22608
+ padding-inline-start: var(--pf-v5-c-pagination--inset);
22609
+ padding-inline-end: var(--pf-v5-c-pagination--inset);
22644
22610
  }
22645
- .pf-v5-c-pagination .pf-v5-c-menu-toggle {
22646
- display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
22647
- font-size: var(--pf-v5-c-pagination--c-menu-toggle--FontSize);
22611
+ .pf-v5-c-pagination .pf-v5-c-pagination__page-menu {
22612
+ display: var(--pf-v5-c-pagination__page-menu--Display);
22648
22613
  }
22649
22614
  .pf-v5-c-pagination.pf-m-bottom {
22650
- --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--MarginRight);
22651
- --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
22652
- --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
22653
22615
  --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow);
22654
22616
  --pf-v5-c-pagination--m-sticky--Top: auto;
22655
22617
  position: sticky;
22656
22618
  inset-block-end: var(--pf-v5-c-pagination--m-bottom--Bottom);
22657
22619
  justify-content: center;
22620
+ padding-inline-start: var(--pf-v5-c-pagination--m-bottom--PaddingLeft);
22621
+ padding-inline-end: var(--pf-v5-c-pagination--m-bottom--PaddingRight);
22658
22622
  background-color: var(--pf-v5-c-pagination--m-bottom--BackgroundColor);
22659
22623
  box-shadow: var(--pf-v5-c-pagination--m-bottom--BoxShadow);
22660
22624
  }
22661
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control .pf-v5-c-button {
22662
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
22663
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
22664
- outline-offset: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
22665
- }
22666
22625
  .pf-v5-c-pagination.pf-m-bottom.pf-m-static {
22667
22626
  --pf-v5-c-pagination--m-bottom--MarginTop: 0;
22668
22627
  --pf-v5-c-pagination--m-bottom--BorderTopWidth: 0;
@@ -22674,7 +22633,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22674
22633
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
22675
22634
  display: none;
22676
22635
  }
22677
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
22636
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__page-menu {
22678
22637
  position: absolute;
22679
22638
  display: block;
22680
22639
  }
@@ -22692,8 +22651,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22692
22651
  justify-content: flex-end;
22693
22652
  padding-block-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop);
22694
22653
  padding-block-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom);
22695
- padding-inline-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
22696
- padding-inline-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingRight);
22697
22654
  }
22698
22655
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
22699
22656
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
@@ -22703,7 +22660,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22703
22660
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
22704
22661
  display: inline-flex;
22705
22662
  }
22706
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
22663
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__page-menu {
22707
22664
  position: relative;
22708
22665
  }
22709
22666
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
@@ -22723,23 +22680,13 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22723
22680
  background-color: var(--pf-v5-c-pagination--m-sticky--BackgroundColor);
22724
22681
  box-shadow: var(--pf-v5-c-pagination--m-sticky--BoxShadow);
22725
22682
  }
22726
- @media screen and (min-width: 768px) {
22727
- .pf-v5-c-pagination.pf-m-sticky {
22728
- padding-block-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop);
22729
- padding-block-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom);
22730
- padding-inline-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
22731
- padding-inline-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingRight);
22732
- }
22733
- }
22734
- .pf-v5-c-pagination.pf-m-compact {
22735
- --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-compact--child--MarginRight);
22736
- }
22737
22683
  .pf-v5-c-pagination.pf-m-page-insets {
22738
22684
  --pf-v5-c-pagination--inset: var(--pf-v5-c-pagination--m-page-insets--inset);
22739
22685
  }
22740
22686
 
22741
22687
  .pf-v5-c-pagination__nav {
22742
22688
  display: var(--pf-v5-c-pagination__nav--Display);
22689
+ column-gap: var(--pf-v5-c-pagination__nav--ColumnGap);
22743
22690
  justify-content: flex-end;
22744
22691
  }
22745
22692
 
@@ -22747,28 +22694,15 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22747
22694
  scale: -1 1;
22748
22695
  }
22749
22696
 
22750
- .pf-v5-c-pagination__nav-control .pf-v5-c-button {
22751
- padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
22752
- padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
22753
- font-size: var(--pf-v5-c-pagination__nav-control--c-button--FontSize);
22754
- }
22755
- .pf-v5-c-pagination.pf-m-compact .pf-v5-c-pagination__nav-control + .pf-v5-c-pagination__nav-control {
22756
- margin-inline-start: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
22757
- }
22758
-
22759
22697
  .pf-v5-c-pagination__nav-page-select {
22760
22698
  display: flex;
22699
+ column-gap: var(--pf-v5-c-pagination__nav-page-select--ColumnGap);
22761
22700
  align-items: center;
22762
- padding-inline-start: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
22763
- padding-inline-end: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
22764
22701
  }
22765
22702
  .pf-v5-c-pagination__nav-page-select > * {
22766
22703
  font-size: var(--pf-v5-c-pagination__nav-page-select--FontSize);
22767
22704
  white-space: nowrap;
22768
22705
  }
22769
- .pf-v5-c-pagination__nav-page-select > *:not(:last-child) {
22770
- margin-inline-end: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
22771
- }
22772
22706
  .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
22773
22707
  width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
22774
22708
  }
@@ -22778,12 +22712,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22778
22712
 
22779
22713
  .pf-v5-c-pagination.pf-m-display-summary {
22780
22714
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
22781
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
22715
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
22782
22716
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
22783
22717
  }
22784
22718
  .pf-v5-c-pagination.pf-m-display-full {
22785
22719
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
22786
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
22720
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
22787
22721
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
22788
22722
  }
22789
22723
  .pf-v5-c-pagination.pf-m-inset-none {
@@ -22807,12 +22741,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22807
22741
  @media (min-width: 576px) {
22808
22742
  .pf-v5-c-pagination.pf-m-display-summary-on-sm {
22809
22743
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
22810
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
22744
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
22811
22745
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
22812
22746
  }
22813
22747
  .pf-v5-c-pagination.pf-m-display-full-on-sm {
22814
22748
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
22815
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
22749
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
22816
22750
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
22817
22751
  }
22818
22752
  .pf-v5-c-pagination.pf-m-inset-none-on-sm {
@@ -22837,12 +22771,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22837
22771
  @media (min-width: 768px) {
22838
22772
  .pf-v5-c-pagination.pf-m-display-summary-on-md {
22839
22773
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
22840
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
22774
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
22841
22775
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
22842
22776
  }
22843
22777
  .pf-v5-c-pagination.pf-m-display-full-on-md {
22844
22778
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
22845
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
22779
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
22846
22780
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
22847
22781
  }
22848
22782
  .pf-v5-c-pagination.pf-m-inset-none-on-md {
@@ -22867,12 +22801,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22867
22801
  @media (min-width: 992px) {
22868
22802
  .pf-v5-c-pagination.pf-m-display-summary-on-lg {
22869
22803
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
22870
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
22804
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
22871
22805
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
22872
22806
  }
22873
22807
  .pf-v5-c-pagination.pf-m-display-full-on-lg {
22874
22808
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
22875
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
22809
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
22876
22810
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
22877
22811
  }
22878
22812
  .pf-v5-c-pagination.pf-m-inset-none-on-lg {
@@ -22897,12 +22831,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22897
22831
  @media (min-width: 1200px) {
22898
22832
  .pf-v5-c-pagination.pf-m-display-summary-on-xl {
22899
22833
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
22900
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
22834
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
22901
22835
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
22902
22836
  }
22903
22837
  .pf-v5-c-pagination.pf-m-display-full-on-xl {
22904
22838
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
22905
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
22839
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
22906
22840
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
22907
22841
  }
22908
22842
  .pf-v5-c-pagination.pf-m-inset-none-on-xl {
@@ -22927,12 +22861,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22927
22861
  @media (min-width: 1450px) {
22928
22862
  .pf-v5-c-pagination.pf-m-display-summary-on-2xl {
22929
22863
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
22930
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
22864
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
22931
22865
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
22932
22866
  }
22933
22867
  .pf-v5-c-pagination.pf-m-display-full-on-2xl {
22934
22868
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
22935
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
22869
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
22936
22870
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
22937
22871
  }
22938
22872
  .pf-v5-c-pagination.pf-m-inset-none-on-2xl {
@@ -22955,14 +22889,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22955
22889
  }
22956
22890
  }
22957
22891
 
22958
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
22959
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
22960
- }
22961
-
22962
- :where(.pf-theme-dark) .pf-v5-c-pagination {
22963
- --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
22964
- }
22965
-
22966
22892
  .pf-v5-c-panel {
22967
22893
  --pf-v5-c-panel--Width: auto;
22968
22894
  --pf-v5-c-panel--MinWidth: auto;