@patternfly/patternfly 6.6.0-prerelease.22 → 6.6.0-prerelease.23

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 (9) hide show
  1. package/components/Pagination/pagination.css +12 -7
  2. package/components/Pagination/pagination.scss +15 -12
  3. package/components/_index.css +12 -7
  4. package/docs/components/Pagination/examples/Pagination.md +0 -162
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +12 -7
  7. package/patternfly.css +12 -7
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Pagination/pagination.css CHANGED
@@ -33,7 +33,8 @@
33
33
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
34
34
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
35
35
  --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
36
- --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
36
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
37
+ --pf-v6-c-pagination--m-bottom--BorderRadius: 0;
37
38
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
38
39
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
39
40
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
@@ -47,6 +48,8 @@
47
48
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
48
49
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
49
50
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-pagination--m-bottom--m-static--BorderRadius: 0;
52
+ --pf-v6-c-pagination--m-bottom--m-static--BackgroundColor: transparent;
50
53
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
51
54
  }
52
55
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
@@ -54,6 +57,9 @@
54
57
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
55
58
  --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
56
59
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
60
+ --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
61
+ --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
62
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
57
63
  }
58
64
  .pf-v6-c-pagination {
59
65
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -65,6 +71,7 @@
65
71
  }
66
72
  @media screen and (min-width: 48rem) {
67
73
  .pf-v6-c-pagination {
74
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
68
75
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
69
76
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
70
77
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
@@ -90,9 +97,6 @@
90
97
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
91
98
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
92
99
  }
93
- :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
94
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
95
- }
96
100
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
97
101
  display: var(--pf-v6-c-pagination__page-menu--Display);
98
102
  }
@@ -108,11 +112,9 @@
108
112
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
109
113
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
110
114
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
115
+ border-radius: var(--pf-v6-c-pagination--m-bottom--BorderRadius);
111
116
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
112
117
  }
113
- :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
114
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
115
- }
116
118
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
117
119
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
118
120
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -131,6 +133,7 @@
131
133
  .pf-v6-c-pagination.pf-m-bottom {
132
134
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
133
135
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
136
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
134
137
  position: relative;
135
138
  justify-content: flex-end;
136
139
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
@@ -155,12 +158,14 @@
155
158
  }
156
159
  }
157
160
  .pf-v6-c-pagination.pf-m-static {
161
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-v6-c-pagination--m-bottom--m-static--BackgroundColor);
158
162
  position: relative;
159
163
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
160
164
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
161
165
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
162
166
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
163
167
  border: 0;
168
+ border-radius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
164
169
  box-shadow: none;
165
170
  }
166
171
  .pf-v6-c-pagination.pf-m-sticky {
package/components/Pagination/pagination.scss CHANGED
@@ -50,7 +50,8 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
50
50
  --#{$pagination}--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
51
51
 
52
52
  // bottom
53
- --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
53
+ --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
54
+ --#{$pagination}--m-bottom--BorderRadius: 0;
54
55
  --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
55
56
  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
56
57
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
@@ -64,6 +65,8 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
64
65
  --#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
65
66
  --#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
66
67
  --#{$pagination}--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
68
+ --#{$pagination}--m-bottom--m-static--BorderRadius: 0;
69
+ --#{$pagination}--m-bottom--m-static--BackgroundColor: transparent;
67
70
  --#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd: 0;
68
71
 
69
72
  :where(:root.pf-v6-theme-glass) & {
@@ -71,6 +74,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
71
74
  --#{$pagination}--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
72
75
  --#{$pagination}--m-sticky--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
73
76
  --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
77
+ --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
78
+ --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
79
+ --#{$pagination}--m-bottom--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
74
80
  }
75
81
 
76
82
  // page menu
@@ -82,6 +88,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
82
88
  --#{$pagination}__page-menu--md--Display: var(--#{$pagination}__page-menu--Display--base);
83
89
 
84
90
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
91
+ --#{$pagination}--m-bottom--BackgroundColor: transparent;
85
92
  --#{$pagination}--m-bottom--BoxShadow: none;
86
93
  --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
87
94
  --#{$pagination}__page-menu--Display: var(--#{$pagination}__page-menu--md--Display);
@@ -106,11 +113,6 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
106
113
  border-block-start-width: var(--#{$pagination}--BorderBlockStartWidth);
107
114
  border-block-end-width: var(--#{$pagination}--BorderBlockEndWidth);
108
115
 
109
- :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
110
- :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
111
- --#{$pagination}--m-bottom--BackgroundColor: transparent;
112
- }
113
-
114
116
  .#{$pagination}__page-menu {
115
117
  display: var(--#{$pagination}__page-menu--Display);
116
118
  }
@@ -128,12 +130,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
128
130
  padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
129
131
  padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
130
132
  background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
133
+ border-radius: var(--#{$pagination}--m-bottom--BorderRadius);
131
134
  box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
132
135
 
133
- :where(:root.pf-v6-theme-glass) &.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
134
- --#{$pagination}--m-bottom--BackgroundColor: transparent;
135
- }
136
-
137
136
  .#{$pagination}__nav-control.pf-m-first,
138
137
  .#{$pagination}__nav-control.pf-m-last,
139
138
  .#{$pagination}__nav-page-select {
@@ -154,6 +153,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
154
153
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
155
154
  --#{$pagination}--m-bottom--MarginBlockStart: 0;
156
155
  --#{$pagination}--m-bottom--InsetBlockEnd: auto;
156
+ --#{$pagination}--m-bottom--BorderRadius: var(--#{$pagination}--m-bottom--m-static--BorderRadius);
157
157
 
158
158
  position: relative;
159
159
  justify-content: flex-end;
@@ -161,7 +161,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
161
161
  padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
162
162
  padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
163
163
  padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
164
-
164
+
165
165
  .#{$pagination}__nav-control.pf-m-first,
166
166
  .#{$pagination}__nav-control.pf-m-last,
167
167
  .#{$pagination}__nav-page-select {
@@ -184,15 +184,18 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
184
184
  }
185
185
 
186
186
  &.pf-m-static {
187
+ --#{$pagination}--m-bottom--BackgroundColor: var(--#{$pagination}--m-bottom--m-static--BackgroundColor);
188
+
187
189
  position: relative;
188
190
  padding-block-start: var(--#{$pagination}--m-bottom--m-static--PaddingBlockStart);
189
191
  padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
190
192
  padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
191
193
  padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
192
194
  border: 0;
195
+ border-radius: var(--#{$pagination}--m-bottom--m-static--BorderRadius);
193
196
  box-shadow: none;
194
197
  }
195
-
198
+
196
199
  &.pf-m-sticky {
197
200
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
198
201
  --#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
package/components/_index.css CHANGED
@@ -15051,7 +15051,8 @@ ul.pf-v6-c-list {
15051
15051
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
15052
15052
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
15053
15053
  --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
15054
- --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15054
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
15055
+ --pf-v6-c-pagination--m-bottom--BorderRadius: 0;
15055
15056
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
15056
15057
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
15057
15058
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
@@ -15065,6 +15066,8 @@ ul.pf-v6-c-list {
15065
15066
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
15066
15067
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
15067
15068
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15069
+ --pf-v6-c-pagination--m-bottom--m-static--BorderRadius: 0;
15070
+ --pf-v6-c-pagination--m-bottom--m-static--BackgroundColor: transparent;
15068
15071
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
15069
15072
  }
15070
15073
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
@@ -15072,6 +15075,9 @@ ul.pf-v6-c-list {
15072
15075
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
15073
15076
  --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
15074
15077
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
15078
+ --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
15079
+ --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
15080
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
15075
15081
  }
15076
15082
  .pf-v6-c-pagination {
15077
15083
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -15083,6 +15089,7 @@ ul.pf-v6-c-list {
15083
15089
  }
15084
15090
  @media screen and (min-width: 48rem) {
15085
15091
  .pf-v6-c-pagination {
15092
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
15086
15093
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
15087
15094
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
15088
15095
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
@@ -15108,9 +15115,6 @@ ul.pf-v6-c-list {
15108
15115
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
15109
15116
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
15110
15117
  }
15111
- :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
15112
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
15113
- }
15114
15118
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
15115
15119
  display: var(--pf-v6-c-pagination__page-menu--Display);
15116
15120
  }
@@ -15126,11 +15130,9 @@ ul.pf-v6-c-list {
15126
15130
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
15127
15131
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
15128
15132
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
15133
+ border-radius: var(--pf-v6-c-pagination--m-bottom--BorderRadius);
15129
15134
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
15130
15135
  }
15131
- :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
15132
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
15133
- }
15134
15136
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
15135
15137
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
15136
15138
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -15149,6 +15151,7 @@ ul.pf-v6-c-list {
15149
15151
  .pf-v6-c-pagination.pf-m-bottom {
15150
15152
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
15151
15153
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
15154
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
15152
15155
  position: relative;
15153
15156
  justify-content: flex-end;
15154
15157
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
@@ -15173,12 +15176,14 @@ ul.pf-v6-c-list {
15173
15176
  }
15174
15177
  }
15175
15178
  .pf-v6-c-pagination.pf-m-static {
15179
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-v6-c-pagination--m-bottom--m-static--BackgroundColor);
15176
15180
  position: relative;
15177
15181
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
15178
15182
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
15179
15183
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
15180
15184
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
15181
15185
  border: 0;
15186
+ border-radius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
15182
15187
  box-shadow: none;
15183
15188
  }
15184
15189
  .pf-v6-c-pagination.pf-m-sticky {
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -635,166 +635,6 @@ cssPrefix: pf-v6-c-pagination
635
635
 
636
636
  ```
637
637
 
638
- ### Bottom plain
639
-
640
- ```html
641
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
642
- <br />
643
- <br />
644
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
645
- <br />
646
- <br />
647
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
648
- <br />
649
- <br />
650
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
651
- <div class="pf-v6-c-pagination pf-m-plain pf-m-bottom">
652
- <div class="pf-v6-c-pagination__page-menu">
653
- <button
654
- class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
655
- type="button"
656
- aria-expanded="false"
657
- id="pagination-plain-bottom-menu-toggle"
658
- >
659
- <span class="pf-v6-c-menu-toggle__text">
660
- <b>1 - 10</b>&nbsp;of&nbsp;
661
- <b>36</b>
662
- </span>
663
- <span class="pf-v6-c-menu-toggle__controls">
664
- <span class="pf-v6-c-menu-toggle__toggle-icon">
665
- <svg
666
- class="pf-v6-svg"
667
- fill="currentColor"
668
- viewBox="0 0 20 20"
669
- aria-hidden="true"
670
- role="img"
671
- width="1em"
672
- height="1em"
673
- >
674
- <path
675
- d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
676
- />
677
- </svg>
678
- </span>
679
- </span>
680
- </button>
681
- </div>
682
- <nav
683
- class="pf-v6-c-pagination__nav"
684
- aria-label="Pagination nav - plain bottom example"
685
- >
686
- <div class="pf-v6-c-pagination__nav-control pf-m-first">
687
- <button
688
- class="pf-v6-c-button pf-m-plain"
689
- type="button"
690
- disabled
691
- aria-label="Go to first page"
692
- >
693
- <span class="pf-v6-c-button__icon">
694
- <svg
695
- class="pf-v6-svg"
696
- fill="currentColor"
697
- viewBox="0 0 20 20"
698
- aria-hidden="true"
699
- role="img"
700
- width="1em"
701
- height="1em"
702
- >
703
- <path
704
- d="M10 19a.997.997 0 0 1-.707-.293l-7.647-7.646c-.283-.284-.439-.66-.439-1.061s.156-.777.44-1.06l7.646-7.647a1 1 0 1 1 1.414 1.414L3.414 10l7.293 7.293A1 1 0 0 1 10 19Zm8.707-.293a1 1 0 0 0 0-1.414L11.414 10l7.293-7.293a1 1 0 1 0-1.414-1.414L9.646 8.939c-.283.284-.439.66-.439 1.061s.156.777.44 1.06l7.646 7.647a.997.997 0 0 0 1.414 0Z"
705
- />
706
- </svg>
707
- </span>
708
- </button>
709
- </div>
710
- <div class="pf-v6-c-pagination__nav-control pf-m-prev">
711
- <button
712
- class="pf-v6-c-button pf-m-plain"
713
- type="button"
714
- disabled
715
- aria-label="Go to previous page"
716
- >
717
- <span class="pf-v6-c-button__icon">
718
- <svg
719
- class="pf-v6-svg"
720
- fill="currentColor"
721
- viewBox="0 0 20 20"
722
- aria-hidden="true"
723
- role="img"
724
- width="1em"
725
- height="1em"
726
- >
727
- <path
728
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
729
- />
730
- </svg>
731
- </span>
732
- </button>
733
- </div>
734
- <div class="pf-v6-c-pagination__nav-page-select">
735
- <span class="pf-v6-c-form-control">
736
- <input
737
- aria-label="Current page"
738
- type="number"
739
- min="1"
740
- max="4"
741
- value="1"
742
- />
743
- </span>
744
- <span aria-hidden="true">of 4</span>
745
- </div>
746
- <div class="pf-v6-c-pagination__nav-control pf-m-next">
747
- <button
748
- class="pf-v6-c-button pf-m-plain"
749
- type="button"
750
- aria-label="Go to next page"
751
- >
752
- <span class="pf-v6-c-button__icon">
753
- <svg
754
- class="pf-v6-svg"
755
- fill="currentColor"
756
- viewBox="0 0 20 20"
757
- aria-hidden="true"
758
- role="img"
759
- width="1em"
760
- height="1em"
761
- >
762
- <path
763
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
764
- />
765
- </svg>
766
- </span>
767
- </button>
768
- </div>
769
- <div class="pf-v6-c-pagination__nav-control pf-m-last">
770
- <button
771
- class="pf-v6-c-button pf-m-plain"
772
- type="button"
773
- disabled
774
- aria-label="Go to last page"
775
- >
776
- <span class="pf-v6-c-button__icon">
777
- <svg
778
- class="pf-v6-svg"
779
- fill="currentColor"
780
- viewBox="0 0 20 20"
781
- aria-hidden="true"
782
- role="img"
783
- width="1em"
784
- height="1em"
785
- >
786
- <path
787
- d="M10 19a1 1 0 0 1-.707-1.707L16.586 10 9.293 2.707a1 1 0 1 1 1.414-1.414l7.647 7.646c.283.284.439.66.439 1.061s-.156.777-.44 1.06l-7.646 7.647A.997.997 0 0 1 10 19Zm-7.293-.293 7.647-7.646c.283-.284.439-.66.439-1.061s-.156-.777-.44-1.06L2.708 1.292a1 1 0 1 0-1.414 1.414L8.586 10l-7.293 7.293a1 1 0 1 0 1.414 1.414Z"
788
- />
789
- </svg>
790
- </span>
791
- </button>
792
- </div>
793
- </nav>
794
- </div>
795
-
796
- ```
797
-
798
638
  ### Bottom sticky
799
639
 
800
640
  ```html
@@ -2439,8 +2279,6 @@ This example shows the use of `.pf-m-sticky-base` and `.pf-m-sticky-stuck` on bo
2439
2279
  | `.pf-m-sticky` | `.pf-v6-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-v6-c-pagination.pf-m-bottom`. |
2440
2280
  | `.pf-m-sticky-base` | `.pf-v6-c-pagination` | Makes the pagination sticky on scroll, but does not apply sticky styling. `.pf-m-sticky-stuck` must be used to apply sticky styling. |
2441
2281
  | `.pf-m-sticky-stuck` | `.pf-v6-c-pagination.pf-m-sticky-base` | Applies sticky styling to a pagination with `.pf-m-sticky-base`. |
2442
- | `.pf-m-plain` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies the pagination to have a transparent background. Only applies outside of glass theme. |
2443
- | `.pf-m-no-plain-on-glass` | `.pf-v6-c-pagination.pf-m-bottom` | Prevents the pagination from being transparent on glass theme. |
2444
2282
  | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
2445
2283
  | `.pf-m-page-insets` | `.pf-v6-c-pagination` | Modifies the pagination component padding/inset to visually match padding of page elements. |
2446
2284
  | `.pf-m-first` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the first page button. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly",
4
- "version": "6.6.0-prerelease.22",
4
+ "version": "6.6.0-prerelease.23",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -24307,7 +24307,8 @@ ul.pf-v6-c-list {
24307
24307
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
24308
24308
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
24309
24309
  --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
24310
- --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24310
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
24311
+ --pf-v6-c-pagination--m-bottom--BorderRadius: 0;
24311
24312
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
24312
24313
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
24313
24314
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
@@ -24321,6 +24322,8 @@ ul.pf-v6-c-list {
24321
24322
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
24322
24323
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
24323
24324
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
24325
+ --pf-v6-c-pagination--m-bottom--m-static--BorderRadius: 0;
24326
+ --pf-v6-c-pagination--m-bottom--m-static--BackgroundColor: transparent;
24324
24327
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
24325
24328
  }
24326
24329
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
@@ -24328,6 +24331,9 @@ ul.pf-v6-c-list {
24328
24331
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
24329
24332
  --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
24330
24333
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
24334
+ --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
24335
+ --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
24336
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
24331
24337
  }
24332
24338
  .pf-v6-c-pagination {
24333
24339
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -24339,6 +24345,7 @@ ul.pf-v6-c-list {
24339
24345
  }
24340
24346
  @media screen and (min-width: 48rem) {
24341
24347
  .pf-v6-c-pagination {
24348
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
24342
24349
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
24343
24350
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
24344
24351
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
@@ -24364,9 +24371,6 @@ ul.pf-v6-c-list {
24364
24371
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
24365
24372
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
24366
24373
  }
24367
- :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
24368
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
24369
- }
24370
24374
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
24371
24375
  display: var(--pf-v6-c-pagination__page-menu--Display);
24372
24376
  }
@@ -24382,11 +24386,9 @@ ul.pf-v6-c-list {
24382
24386
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
24383
24387
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
24384
24388
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
24389
+ border-radius: var(--pf-v6-c-pagination--m-bottom--BorderRadius);
24385
24390
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
24386
24391
  }
24387
- :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
24388
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
24389
- }
24390
24392
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
24391
24393
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
24392
24394
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -24405,6 +24407,7 @@ ul.pf-v6-c-list {
24405
24407
  .pf-v6-c-pagination.pf-m-bottom {
24406
24408
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
24407
24409
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
24410
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
24408
24411
  position: relative;
24409
24412
  justify-content: flex-end;
24410
24413
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
@@ -24429,12 +24432,14 @@ ul.pf-v6-c-list {
24429
24432
  }
24430
24433
  }
24431
24434
  .pf-v6-c-pagination.pf-m-static {
24435
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-v6-c-pagination--m-bottom--m-static--BackgroundColor);
24432
24436
  position: relative;
24433
24437
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
24434
24438
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
24435
24439
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
24436
24440
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
24437
24441
  border: 0;
24442
+ border-radius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
24438
24443
  box-shadow: none;
24439
24444
  }
24440
24445
  .pf-v6-c-pagination.pf-m-sticky {
package/patternfly.css CHANGED
@@ -24462,7 +24462,8 @@ ul.pf-v6-c-list {
24462
24462
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
24463
24463
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
24464
24464
  --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
24465
- --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24465
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
24466
+ --pf-v6-c-pagination--m-bottom--BorderRadius: 0;
24466
24467
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
24467
24468
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
24468
24469
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
@@ -24476,6 +24477,8 @@ ul.pf-v6-c-list {
24476
24477
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
24477
24478
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
24478
24479
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
24480
+ --pf-v6-c-pagination--m-bottom--m-static--BorderRadius: 0;
24481
+ --pf-v6-c-pagination--m-bottom--m-static--BackgroundColor: transparent;
24479
24482
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
24480
24483
  }
24481
24484
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
@@ -24483,6 +24486,9 @@ ul.pf-v6-c-list {
24483
24486
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
24484
24487
  --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
24485
24488
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
24489
+ --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
24490
+ --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
24491
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
24486
24492
  }
24487
24493
  .pf-v6-c-pagination {
24488
24494
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -24494,6 +24500,7 @@ ul.pf-v6-c-list {
24494
24500
  }
24495
24501
  @media screen and (min-width: 48rem) {
24496
24502
  .pf-v6-c-pagination {
24503
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
24497
24504
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
24498
24505
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
24499
24506
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
@@ -24519,9 +24526,6 @@ ul.pf-v6-c-list {
24519
24526
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
24520
24527
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
24521
24528
  }
24522
- :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
24523
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
24524
- }
24525
24529
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
24526
24530
  display: var(--pf-v6-c-pagination__page-menu--Display);
24527
24531
  }
@@ -24537,11 +24541,9 @@ ul.pf-v6-c-list {
24537
24541
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
24538
24542
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
24539
24543
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
24544
+ border-radius: var(--pf-v6-c-pagination--m-bottom--BorderRadius);
24540
24545
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
24541
24546
  }
24542
- :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
24543
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
24544
- }
24545
24547
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
24546
24548
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
24547
24549
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -24560,6 +24562,7 @@ ul.pf-v6-c-list {
24560
24562
  .pf-v6-c-pagination.pf-m-bottom {
24561
24563
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
24562
24564
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
24565
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
24563
24566
  position: relative;
24564
24567
  justify-content: flex-end;
24565
24568
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
@@ -24584,12 +24587,14 @@ ul.pf-v6-c-list {
24584
24587
  }
24585
24588
  }
24586
24589
  .pf-v6-c-pagination.pf-m-static {
24590
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-v6-c-pagination--m-bottom--m-static--BackgroundColor);
24587
24591
  position: relative;
24588
24592
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
24589
24593
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
24590
24594
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
24591
24595
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
24592
24596
  border: 0;
24597
+ border-radius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
24593
24598
  box-shadow: none;
24594
24599
  }
24595
24600
  .pf-v6-c-pagination.pf-m-sticky {