@patternfly/patternfly 6.3.0-prerelease.56 → 6.3.0-prerelease.57

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 +14 -1
  2. package/components/Pagination/pagination.scss +14 -1
  3. package/components/_index.css +14 -1
  4. package/docs/components/Pagination/examples/Pagination.md +111 -0
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +14 -1
  7. package/patternfly.css +14 -1
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Pagination/pagination.css CHANGED
@@ -1,6 +1,9 @@
1
1
  .pf-v6-c-pagination {
2
2
  --pf-v6-c-pagination--inset: 0;
3
3
  --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
4
+ --pf-v6-c-pagination--BorderColor: var(--pf-t--global--border--color--high-contrast);
5
+ --pf-v6-c-pagination--BorderBlockStartWidth: 0;
6
+ --pf-v6-c-pagination--BorderBlockEndWidth: 0;
4
7
  --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
5
8
  --pf-v6-c-pagination__nav--Display: none;
6
9
  --pf-v6-c-pagination--m-display-summary__nav--Display: none;
@@ -22,14 +25,17 @@
22
25
  --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
23
26
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
24
27
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
28
+ --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
25
29
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
26
30
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
27
31
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
28
32
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
33
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
29
34
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
30
35
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
31
36
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
32
37
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
38
+ --pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
33
39
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
34
40
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
35
41
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -44,6 +50,7 @@
44
50
  @media screen and (min-width: 48rem) {
45
51
  .pf-v6-c-pagination {
46
52
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
53
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
47
54
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
48
55
  --pf-v6-c-pagination__nav--Display: inline-flex;
49
56
  --pf-v6-c-pagination__total-items--Display: none;
@@ -63,6 +70,9 @@
63
70
  justify-content: flex-end;
64
71
  padding-inline-start: var(--pf-v6-c-pagination--inset);
65
72
  padding-inline-end: var(--pf-v6-c-pagination--inset);
73
+ border: 0 solid var(--pf-v6-c-pagination--BorderColor);
74
+ border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
75
+ border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
66
76
  }
67
77
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
68
78
  display: var(--pf-v6-c-pagination__page-menu--Display);
@@ -70,6 +80,7 @@
70
80
  .pf-v6-c-pagination.pf-m-bottom {
71
81
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
72
82
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
83
+ --pf-v6-c-pagination--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth);
73
84
  position: sticky;
74
85
  inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
75
86
  justify-content: center;
@@ -96,7 +107,6 @@
96
107
  }
97
108
  @media screen and (min-width: 48rem) {
98
109
  .pf-v6-c-pagination.pf-m-bottom {
99
- --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
100
110
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
101
111
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
102
112
  position: relative;
@@ -128,10 +138,13 @@
128
138
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
129
139
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
130
140
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
141
+ border: 0;
131
142
  box-shadow: none;
132
143
  }
133
144
  .pf-v6-c-pagination.pf-m-sticky {
134
145
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
146
+ --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
147
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
135
148
  position: sticky;
136
149
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
137
150
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
package/components/Pagination/pagination.scss CHANGED
@@ -6,6 +6,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
6
6
  @include pf-root($pagination) {
7
7
  --#{$pagination}--inset: 0;
8
8
  --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
9
+ --#{$pagination}--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
+ --#{$pagination}--BorderBlockStartWidth: 0;
11
+ --#{$pagination}--BorderBlockEndWidth: 0;
9
12
 
10
13
  // Page insets
11
14
  --#{$pagination}--m-page-insets--inset: var(--pf-t--global--spacer--lg);
@@ -37,16 +40,19 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
37
40
  --#{$pagination}--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
38
41
  --#{$pagination}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
39
42
  --#{$pagination}--m-sticky--InsetBlockStart: 0;
43
+ --#{$pagination}--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
40
44
 
41
45
  // bottom
42
46
  --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
43
47
  --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
44
48
  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
45
49
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
50
+ --#{$pagination}--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
46
51
  --#{$pagination}--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
47
52
  --#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
48
53
  --#{$pagination}--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
49
54
  --#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
55
+ --#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
50
56
  --#{$pagination}--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
51
57
  --#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
52
58
  --#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -62,6 +68,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
62
68
 
63
69
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
64
70
  --#{$pagination}--m-bottom--BoxShadow: none;
71
+ --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
65
72
  --#{$pagination}__page-menu--Display: var(--#{$pagination}__page-menu--md--Display);
66
73
  --#{$pagination}__nav--Display: inline-flex;
67
74
  --#{$pagination}__total-items--Display: none;
@@ -80,6 +87,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
80
87
  justify-content: flex-end;
81
88
  padding-inline-start: var(--#{$pagination}--inset);
82
89
  padding-inline-end: var(--#{$pagination}--inset);
90
+ border: 0 solid var(--#{$pagination}--BorderColor);
91
+ border-block-start-width: var(--#{$pagination}--BorderBlockStartWidth);
92
+ border-block-end-width: var(--#{$pagination}--BorderBlockEndWidth);
83
93
 
84
94
  .#{$pagination}__page-menu {
85
95
  display: var(--#{$pagination}__page-menu--Display);
@@ -88,6 +98,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
88
98
  &.pf-m-bottom {
89
99
  --#{$pagination}--m-sticky--BoxShadow: var(--#{$pagination}--m-bottom--m-sticky--BoxShadow);
90
100
  --#{$pagination}--m-sticky--InsetBlockStart: auto;
101
+ --#{$pagination}--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--BorderBlockStartWidth);
91
102
 
92
103
  position: sticky;
93
104
  inset-block-end: var(--#{$pagination}--m-bottom--InsetBlockEnd);
@@ -117,7 +128,6 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
117
128
  }
118
129
 
119
130
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
120
- --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
121
131
  --#{$pagination}--m-bottom--MarginBlockStart: 0;
122
132
  --#{$pagination}--m-bottom--InsetBlockEnd: auto;
123
133
 
@@ -155,11 +165,14 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
155
165
  padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
156
166
  padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
157
167
  padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
168
+ border: 0;
158
169
  box-shadow: none;
159
170
  }
160
171
 
161
172
  &.pf-m-sticky {
162
173
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
174
+ --#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
175
+ --#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);
163
176
 
164
177
  position: sticky;
165
178
  inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
package/components/_index.css CHANGED
@@ -13197,6 +13197,9 @@ ul.pf-v6-c-list {
13197
13197
  .pf-v6-c-pagination {
13198
13198
  --pf-v6-c-pagination--inset: 0;
13199
13199
  --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
13200
+ --pf-v6-c-pagination--BorderColor: var(--pf-t--global--border--color--high-contrast);
13201
+ --pf-v6-c-pagination--BorderBlockStartWidth: 0;
13202
+ --pf-v6-c-pagination--BorderBlockEndWidth: 0;
13200
13203
  --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
13201
13204
  --pf-v6-c-pagination__nav--Display: none;
13202
13205
  --pf-v6-c-pagination--m-display-summary__nav--Display: none;
@@ -13218,14 +13221,17 @@ ul.pf-v6-c-list {
13218
13221
  --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13219
13222
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
13220
13223
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
13224
+ --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
13221
13225
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13222
13226
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
13223
13227
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
13224
13228
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
13229
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13225
13230
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13226
13231
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13227
13232
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
13228
13233
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
13234
+ --pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13229
13235
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
13230
13236
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
13231
13237
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -13240,6 +13246,7 @@ ul.pf-v6-c-list {
13240
13246
  @media screen and (min-width: 48rem) {
13241
13247
  .pf-v6-c-pagination {
13242
13248
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
13249
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
13243
13250
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
13244
13251
  --pf-v6-c-pagination__nav--Display: inline-flex;
13245
13252
  --pf-v6-c-pagination__total-items--Display: none;
@@ -13259,6 +13266,9 @@ ul.pf-v6-c-list {
13259
13266
  justify-content: flex-end;
13260
13267
  padding-inline-start: var(--pf-v6-c-pagination--inset);
13261
13268
  padding-inline-end: var(--pf-v6-c-pagination--inset);
13269
+ border: 0 solid var(--pf-v6-c-pagination--BorderColor);
13270
+ border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
13271
+ border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
13262
13272
  }
13263
13273
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
13264
13274
  display: var(--pf-v6-c-pagination__page-menu--Display);
@@ -13266,6 +13276,7 @@ ul.pf-v6-c-list {
13266
13276
  .pf-v6-c-pagination.pf-m-bottom {
13267
13277
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
13268
13278
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
13279
+ --pf-v6-c-pagination--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth);
13269
13280
  position: sticky;
13270
13281
  inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
13271
13282
  justify-content: center;
@@ -13292,7 +13303,6 @@ ul.pf-v6-c-list {
13292
13303
  }
13293
13304
  @media screen and (min-width: 48rem) {
13294
13305
  .pf-v6-c-pagination.pf-m-bottom {
13295
- --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
13296
13306
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
13297
13307
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
13298
13308
  position: relative;
@@ -13324,10 +13334,13 @@ ul.pf-v6-c-list {
13324
13334
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
13325
13335
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
13326
13336
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
13337
+ border: 0;
13327
13338
  box-shadow: none;
13328
13339
  }
13329
13340
  .pf-v6-c-pagination.pf-m-sticky {
13330
13341
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
13342
+ --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
13343
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
13331
13344
  position: sticky;
13332
13345
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
13333
13346
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -301,6 +301,16 @@ cssPrefix: pf-v6-c-pagination
301
301
  ### Bottom
302
302
 
303
303
  ```html
304
+ <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>
305
+ <br />
306
+ <br />
307
+ <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>
308
+ <br />
309
+ <br />
310
+ <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>
311
+ <br />
312
+ <br />
313
+ <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>
304
314
  <div class="pf-v6-c-pagination pf-m-bottom">
305
315
  <div class="pf-v6-c-pagination__page-menu">
306
316
  <button
@@ -490,6 +500,107 @@ cssPrefix: pf-v6-c-pagination
490
500
 
491
501
  ```
492
502
 
503
+ ### Bottom static
504
+
505
+ ```html
506
+ <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>
507
+ <br />
508
+ <br />
509
+ <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>
510
+ <br />
511
+ <br />
512
+ <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>
513
+ <br />
514
+ <br />
515
+ <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>
516
+ <div class="pf-v6-c-pagination pf-m-bottom pf-m-static">
517
+ <div class="pf-v6-c-pagination__page-menu">
518
+ <button
519
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
520
+ type="button"
521
+ aria-expanded="false"
522
+ aria-label="Menu toggle"
523
+ id="pagination-menu-toggle-bottom-sticky-example"
524
+ >
525
+ <span class="pf-v6-c-menu-toggle__text">
526
+ <b>1 - 10</b>&nbsp;of&nbsp;
527
+ <b>36</b>
528
+ </span>
529
+ <span class="pf-v6-c-menu-toggle__controls">
530
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
531
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
532
+ </span>
533
+ </span>
534
+ </button>
535
+ </div>
536
+ <nav
537
+ class="pf-v6-c-pagination__nav"
538
+ aria-label="Pagination nav - bottom sticky example"
539
+ >
540
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
541
+ <button
542
+ class="pf-v6-c-button pf-m-plain"
543
+ type="button"
544
+ disabled
545
+ aria-label="Go to first page"
546
+ >
547
+ <span class="pf-v6-c-button__icon">
548
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
549
+ </span>
550
+ </button>
551
+ </div>
552
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
553
+ <button
554
+ class="pf-v6-c-button pf-m-plain"
555
+ type="button"
556
+ disabled
557
+ aria-label="Go to previous page"
558
+ >
559
+ <span class="pf-v6-c-button__icon">
560
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
561
+ </span>
562
+ </button>
563
+ </div>
564
+ <div class="pf-v6-c-pagination__nav-page-select">
565
+ <span class="pf-v6-c-form-control">
566
+ <input
567
+ aria-label="Current page"
568
+ type="number"
569
+ min="1"
570
+ max="4"
571
+ value="1"
572
+ />
573
+ </span>
574
+ <span aria-hidden="true">of 4</span>
575
+ </div>
576
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
577
+ <button
578
+ class="pf-v6-c-button pf-m-plain"
579
+ type="button"
580
+ aria-label="Go to next page"
581
+ >
582
+ <span class="pf-v6-c-button__icon">
583
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
584
+ </span>
585
+ </button>
586
+ </div>
587
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
588
+ <button
589
+ class="pf-v6-c-button pf-m-plain"
590
+ type="button"
591
+ disabled
592
+ aria-label="Go to last page"
593
+ >
594
+ <span class="pf-v6-c-button__icon">
595
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
596
+ </span>
597
+ </button>
598
+ </div>
599
+ </nav>
600
+ </div>
601
+
602
+ ```
603
+
493
604
  ### Top disabled
494
605
 
495
606
  ```html
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",
4
- "version": "6.3.0-prerelease.56",
4
+ "version": "6.3.0-prerelease.57",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
package/patternfly-no-globals.css CHANGED
@@ -21864,6 +21864,9 @@ ul.pf-v6-c-list {
21864
21864
  .pf-v6-c-pagination {
21865
21865
  --pf-v6-c-pagination--inset: 0;
21866
21866
  --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
21867
+ --pf-v6-c-pagination--BorderColor: var(--pf-t--global--border--color--high-contrast);
21868
+ --pf-v6-c-pagination--BorderBlockStartWidth: 0;
21869
+ --pf-v6-c-pagination--BorderBlockEndWidth: 0;
21867
21870
  --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
21868
21871
  --pf-v6-c-pagination__nav--Display: none;
21869
21872
  --pf-v6-c-pagination--m-display-summary__nav--Display: none;
@@ -21885,14 +21888,17 @@ ul.pf-v6-c-list {
21885
21888
  --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
21886
21889
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
21887
21890
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
21891
+ --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21888
21892
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21889
21893
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21890
21894
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21891
21895
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
21896
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
21892
21897
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
21893
21898
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
21894
21899
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
21895
21900
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
21901
+ --pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
21896
21902
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
21897
21903
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
21898
21904
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -21907,6 +21913,7 @@ ul.pf-v6-c-list {
21907
21913
  @media screen and (min-width: 48rem) {
21908
21914
  .pf-v6-c-pagination {
21909
21915
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
21916
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
21910
21917
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
21911
21918
  --pf-v6-c-pagination__nav--Display: inline-flex;
21912
21919
  --pf-v6-c-pagination__total-items--Display: none;
@@ -21926,6 +21933,9 @@ ul.pf-v6-c-list {
21926
21933
  justify-content: flex-end;
21927
21934
  padding-inline-start: var(--pf-v6-c-pagination--inset);
21928
21935
  padding-inline-end: var(--pf-v6-c-pagination--inset);
21936
+ border: 0 solid var(--pf-v6-c-pagination--BorderColor);
21937
+ border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
21938
+ border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
21929
21939
  }
21930
21940
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
21931
21941
  display: var(--pf-v6-c-pagination__page-menu--Display);
@@ -21933,6 +21943,7 @@ ul.pf-v6-c-list {
21933
21943
  .pf-v6-c-pagination.pf-m-bottom {
21934
21944
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
21935
21945
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
21946
+ --pf-v6-c-pagination--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth);
21936
21947
  position: sticky;
21937
21948
  inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
21938
21949
  justify-content: center;
@@ -21959,7 +21970,6 @@ ul.pf-v6-c-list {
21959
21970
  }
21960
21971
  @media screen and (min-width: 48rem) {
21961
21972
  .pf-v6-c-pagination.pf-m-bottom {
21962
- --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
21963
21973
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
21964
21974
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
21965
21975
  position: relative;
@@ -21991,10 +22001,13 @@ ul.pf-v6-c-list {
21991
22001
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
21992
22002
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
21993
22003
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
22004
+ border: 0;
21994
22005
  box-shadow: none;
21995
22006
  }
21996
22007
  .pf-v6-c-pagination.pf-m-sticky {
21997
22008
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
22009
+ --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
22010
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
21998
22011
  position: sticky;
21999
22012
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
22000
22013
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
package/patternfly.css CHANGED
@@ -22004,6 +22004,9 @@ ul.pf-v6-c-list {
22004
22004
  .pf-v6-c-pagination {
22005
22005
  --pf-v6-c-pagination--inset: 0;
22006
22006
  --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
22007
+ --pf-v6-c-pagination--BorderColor: var(--pf-t--global--border--color--high-contrast);
22008
+ --pf-v6-c-pagination--BorderBlockStartWidth: 0;
22009
+ --pf-v6-c-pagination--BorderBlockEndWidth: 0;
22007
22010
  --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
22008
22011
  --pf-v6-c-pagination__nav--Display: none;
22009
22012
  --pf-v6-c-pagination--m-display-summary__nav--Display: none;
@@ -22025,14 +22028,17 @@ ul.pf-v6-c-list {
22025
22028
  --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
22026
22029
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
22027
22030
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
22031
+ --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
22028
22032
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22029
22033
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
22030
22034
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
22031
22035
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
22036
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
22032
22037
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
22033
22038
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
22034
22039
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
22035
22040
  --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
22041
+ --pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
22036
22042
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
22037
22043
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
22038
22044
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -22047,6 +22053,7 @@ ul.pf-v6-c-list {
22047
22053
  @media screen and (min-width: 48rem) {
22048
22054
  .pf-v6-c-pagination {
22049
22055
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
22056
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
22050
22057
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
22051
22058
  --pf-v6-c-pagination__nav--Display: inline-flex;
22052
22059
  --pf-v6-c-pagination__total-items--Display: none;
@@ -22066,6 +22073,9 @@ ul.pf-v6-c-list {
22066
22073
  justify-content: flex-end;
22067
22074
  padding-inline-start: var(--pf-v6-c-pagination--inset);
22068
22075
  padding-inline-end: var(--pf-v6-c-pagination--inset);
22076
+ border: 0 solid var(--pf-v6-c-pagination--BorderColor);
22077
+ border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
22078
+ border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
22069
22079
  }
22070
22080
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
22071
22081
  display: var(--pf-v6-c-pagination__page-menu--Display);
@@ -22073,6 +22083,7 @@ ul.pf-v6-c-list {
22073
22083
  .pf-v6-c-pagination.pf-m-bottom {
22074
22084
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
22075
22085
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
22086
+ --pf-v6-c-pagination--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth);
22076
22087
  position: sticky;
22077
22088
  inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
22078
22089
  justify-content: center;
@@ -22099,7 +22110,6 @@ ul.pf-v6-c-list {
22099
22110
  }
22100
22111
  @media screen and (min-width: 48rem) {
22101
22112
  .pf-v6-c-pagination.pf-m-bottom {
22102
- --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
22103
22113
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
22104
22114
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
22105
22115
  position: relative;
@@ -22131,10 +22141,13 @@ ul.pf-v6-c-list {
22131
22141
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
22132
22142
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
22133
22143
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
22144
+ border: 0;
22134
22145
  box-shadow: none;
22135
22146
  }
22136
22147
  .pf-v6-c-pagination.pf-m-sticky {
22137
22148
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
22149
+ --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
22150
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
22138
22151
  position: sticky;
22139
22152
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
22140
22153
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);