@patternfly/react-styles 6.5.0-prerelease.21 → 6.5.0-prerelease.22

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 (18) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Button/button.css +10 -4
  3. package/css/components/Button/button.d.ts +1 -0
  4. package/css/components/Button/button.js +1 -0
  5. package/css/components/Button/button.mjs +1 -0
  6. package/css/components/Compass/compass.css +6 -6
  7. package/css/components/MenuToggle/menu-toggle.css +3 -3
  8. package/css/components/Page/page.css +12 -8
  9. package/css/components/Pagination/pagination.css +56 -4
  10. package/css/components/Pagination/pagination.d.ts +6 -1
  11. package/css/components/Pagination/pagination.js +6 -1
  12. package/css/components/Pagination/pagination.mjs +6 -1
  13. package/css/components/_index.css +87 -25
  14. package/css/components/_index.d.ts +2 -2
  15. package/css/components/_index.js +2 -2
  16. package/css/components/_index.mjs +2 -2
  17. package/css/docs/components/Compass/examples/Compass.css +2 -11
  18. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.5.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.21...@patternfly/react-styles@6.5.0-prerelease.22) (2026-05-07)
7
+
8
+ ### Features
9
+
10
+ - **Pagination:** added dynamic sticky and plain ([#12388](https://github.com/patternfly/patternfly-react/issues/12388)) ([7c4f9df](https://github.com/patternfly/patternfly-react/commit/7c4f9dfac4c4a63deecd9fb4d517c5713a617f9e))
11
+
6
12
  # [6.5.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.20...@patternfly/react-styles@6.5.0-prerelease.21) (2026-04-28)
7
13
 
8
14
  ### Features
package/css/components/Button/button.css CHANGED
@@ -355,6 +355,7 @@
355
355
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
356
356
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
357
357
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
358
+ --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: 1;
358
359
  --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
359
360
  }
360
361
 
@@ -750,6 +751,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
750
751
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
751
752
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
752
753
  }
754
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-button.pf-m-hamburger {
755
+ --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: 1;
756
+ --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: -1;
757
+ }
758
+
753
759
  .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
754
760
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
755
761
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -764,9 +770,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
764
770
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
765
771
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
766
772
  --pf-v6-c-button__icon--TransitionDelay: 0s;
767
- --pf-v6-c-button__icon--ScaleX: 1;
773
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
768
774
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
769
- --pf-v6-c-button--hover__icon--ScaleX: 1;
775
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
770
776
  }
771
777
  .pf-v6-c-button.pf-m-circle {
772
778
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
@@ -862,11 +868,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
862
868
  display: none;
863
869
  }
864
870
  }
865
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
871
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded {
866
872
  justify-content: flex-start;
867
873
  width: 100%;
868
874
  }
869
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
875
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
870
876
  display: revert;
871
877
  }
872
878
 
package/css/components/Button/button.d.ts CHANGED
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  "buttonProgress": "pf-v6-c-button__progress",
15
15
  "buttonText": "pf-v6-c-button__text",
16
16
  "compassDock": "pf-v6-c-compass__dock",
17
+ "dirRtl": "pf-v6-m-dir-rtl",
17
18
  "modifiers": {
18
19
  "primary": "pf-m-primary",
19
20
  "unread": "pf-m-unread",
package/css/components/Button/button.js CHANGED
@@ -16,6 +16,7 @@ exports.default = {
16
16
  "buttonProgress": "pf-v6-c-button__progress",
17
17
  "buttonText": "pf-v6-c-button__text",
18
18
  "compassDock": "pf-v6-c-compass__dock",
19
+ "dirRtl": "pf-v6-m-dir-rtl",
19
20
  "modifiers": {
20
21
  "primary": "pf-m-primary",
21
22
  "unread": "pf-m-unread",
package/css/components/Button/button.mjs CHANGED
@@ -14,6 +14,7 @@ export default {
14
14
  "buttonProgress": "pf-v6-c-button__progress",
15
15
  "buttonText": "pf-v6-c-button__text",
16
16
  "compassDock": "pf-v6-c-compass__dock",
17
+ "dirRtl": "pf-v6-m-dir-rtl",
17
18
  "modifiers": {
18
19
  "primary": "pf-m-primary",
19
20
  "unread": "pf-m-unread",
package/css/components/Compass/compass.css CHANGED
@@ -130,18 +130,18 @@
130
130
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
131
131
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
132
132
  --pf-v6-c-button__icon--TransitionDelay: 0s;
133
- --pf-v6-c-button__icon--ScaleX: 1;
133
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
134
134
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
135
- --pf-v6-c-button--hover__icon--ScaleX: 1;
135
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
136
136
  }
137
137
  .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
138
138
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
139
139
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
140
140
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
141
141
  --pf-v6-c-button__icon--TransitionDelay: 0s;
142
- --pf-v6-c-button__icon--ScaleX: 1;
142
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
143
143
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
144
- --pf-v6-c-button--hover__icon--ScaleX: 1;
144
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
145
145
  }
146
146
  @media (min-width: 62rem) {
147
147
  .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
@@ -166,9 +166,9 @@
166
166
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
167
167
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
168
168
  --pf-v6-c-button__icon--TransitionDelay: 0s;
169
- --pf-v6-c-button__icon--ScaleX: 1;
169
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
170
170
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
171
- --pf-v6-c-button--hover__icon--ScaleX: 1;
171
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
172
172
  }
173
173
  }
174
174
 
package/css/components/MenuToggle/menu-toggle.css CHANGED
@@ -367,12 +367,12 @@
367
367
  display: none;
368
368
  }
369
369
  }
370
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
370
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
371
371
  justify-content: flex-start;
372
372
  width: 100%;
373
373
  }
374
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
375
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
374
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
375
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
376
376
  .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
377
377
  display: revert;
378
378
  }
package/css/components/Page/page.css CHANGED
@@ -297,9 +297,9 @@
297
297
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
298
298
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
299
299
  --pf-v6-c-button__icon--TransitionDelay: 0s;
300
- --pf-v6-c-button__icon--ScaleX: 1;
300
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
301
301
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
302
- --pf-v6-c-button--hover__icon--ScaleX: 1;
302
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
303
303
  }
304
304
  @media (min-width: 75rem) {
305
305
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
@@ -314,9 +314,9 @@
314
314
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
315
315
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
316
316
  --pf-v6-c-button__icon--TransitionDelay: 0s;
317
- --pf-v6-c-button__icon--ScaleX: 1;
317
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
318
318
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
319
- --pf-v6-c-button--hover__icon--ScaleX: 1;
319
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
320
320
  }
321
321
  .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
322
322
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
@@ -333,9 +333,9 @@
333
333
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
334
334
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
335
335
  --pf-v6-c-button__icon--TransitionDelay: 0s;
336
- --pf-v6-c-button__icon--ScaleX: 1;
336
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
337
337
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
338
- --pf-v6-c-button--hover__icon--ScaleX: 1;
338
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
339
339
  }
340
340
  @media (min-width: 62rem) {
341
341
  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
@@ -360,9 +360,9 @@
360
360
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
361
361
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
362
362
  --pf-v6-c-button__icon--TransitionDelay: 0s;
363
- --pf-v6-c-button__icon--ScaleX: 1;
363
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
364
364
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
365
- --pf-v6-c-button--hover__icon--ScaleX: 1;
365
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
366
366
  }
367
367
  }
368
368
 
@@ -392,6 +392,10 @@
392
392
  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
393
393
  translate: -100% 0;
394
394
  }
395
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
396
+ translate: 100% 0;
397
+ }
398
+
395
399
  .pf-v6-c-page__dock.pf-m-expanded {
396
400
  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
397
401
  translate: 0;
package/css/components/Pagination/pagination.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --pf-v6-c-pagination__total-items--Display: block;
18
18
  --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
19
19
  --pf-v6-c-pagination--m-display-full__total-items--Display: none;
20
- --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
20
+ --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
21
21
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
22
22
  --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
23
23
  --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -26,6 +26,12 @@
26
26
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
27
27
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
28
28
  --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
29
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
30
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: 0;
31
+ --pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
32
+ --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
33
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
34
+ --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
29
35
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30
36
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
31
37
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -40,6 +46,15 @@
40
46
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
41
47
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
42
48
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
49
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
50
+ }
51
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
52
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
53
+ --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
54
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
55
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
56
+ }
57
+ .pf-v6-c-pagination {
43
58
  --pf-v6-c-pagination__page-menu--Display--base: block;
44
59
  --pf-v6-c-pagination__page-menu--Display: none;
45
60
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
@@ -74,6 +89,9 @@
74
89
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
75
90
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
76
91
  }
92
+ :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) {
93
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
94
+ }
77
95
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
78
96
  display: var(--pf-v6-c-pagination__page-menu--Display);
79
97
  }
@@ -91,6 +109,9 @@
91
109
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
92
110
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
93
111
  }
112
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
113
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
114
+ }
94
115
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
95
116
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
96
117
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -145,15 +166,46 @@
145
166
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
146
167
  --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
147
168
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
148
- position: sticky;
149
169
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
170
+ background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
171
+ box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
172
+ }
173
+ .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
174
+ position: sticky;
150
175
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
151
176
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
152
177
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
153
178
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
154
179
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
155
- background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
156
- box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
180
+ }
181
+ .pf-v6-c-pagination.pf-m-sticky-base {
182
+ inset-block-start: var(--pf-v6-c-pagination--m-sticky-base--InsetBlockStart);
183
+ border-radius: var(--pf-v6-c-pagination--m-sticky-base--BorderRadius, 0);
184
+ }
185
+ .pf-v6-c-pagination.pf-m-sticky-base.pf-m-bottom {
186
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
187
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: var(--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd);
188
+ }
189
+ .pf-v6-c-pagination.pf-m-sticky-base::before {
190
+ position: absolute;
191
+ inset: 0;
192
+ z-index: -1;
193
+ content: "";
194
+ background-color: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
195
+ border-radius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
196
+ box-shadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
197
+ opacity: 0;
198
+ transition-timing-function: var(--pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction);
199
+ transition-duration: var(--pf-v6-c-pagination--m-sticky-base--TransitionDuration);
200
+ transition-property: opacity;
201
+ }
202
+ .pf-v6-c-pagination.pf-m-sticky-stuck {
203
+ --pf-v6-c-pagination--m-sticky-base--BoxShadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
204
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
205
+ --pf-v6-c-pagination--m-sticky-base--BackgroundColor: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
206
+ }
207
+ .pf-v6-c-pagination.pf-m-sticky-stuck::before {
208
+ opacity: 1;
157
209
  }
158
210
  .pf-v6-c-pagination.pf-m-page-insets {
159
211
  --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);
package/css/components/Pagination/pagination.d.ts CHANGED
@@ -3,7 +3,11 @@ declare const _default: {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
4
  "formControl": "pf-v6-c-form-control",
5
5
  "modifiers": {
6
+ "plain": "pf-m-plain",
7
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
6
8
  "bottom": "pf-m-bottom",
9
+ "stickyBase": "pf-m-sticky-base",
10
+ "stickyStuck": "pf-m-sticky-stuck",
7
11
  "first": "pf-m-first",
8
12
  "last": "pf-m-last",
9
13
  "static": "pf-m-static",
@@ -63,6 +67,7 @@ declare const _default: {
63
67
  "paginationNavControl": "pf-v6-c-pagination__nav-control",
64
68
  "paginationNavPageSelect": "pf-v6-c-pagination__nav-page-select",
65
69
  "paginationPageMenu": "pf-v6-c-pagination__page-menu",
66
- "paginationTotalItems": "pf-v6-c-pagination__total-items"
70
+ "paginationTotalItems": "pf-v6-c-pagination__total-items",
71
+ "themeGlass": "pf-v6-theme-glass"
67
72
  };
68
73
  export default _default;
package/css/components/Pagination/pagination.js CHANGED
@@ -5,7 +5,11 @@ exports.default = {
5
5
  "dirRtl": "pf-v6-m-dir-rtl",
6
6
  "formControl": "pf-v6-c-form-control",
7
7
  "modifiers": {
8
+ "plain": "pf-m-plain",
9
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
8
10
  "bottom": "pf-m-bottom",
11
+ "stickyBase": "pf-m-sticky-base",
12
+ "stickyStuck": "pf-m-sticky-stuck",
9
13
  "first": "pf-m-first",
10
14
  "last": "pf-m-last",
11
15
  "static": "pf-m-static",
@@ -65,5 +69,6 @@ exports.default = {
65
69
  "paginationNavControl": "pf-v6-c-pagination__nav-control",
66
70
  "paginationNavPageSelect": "pf-v6-c-pagination__nav-page-select",
67
71
  "paginationPageMenu": "pf-v6-c-pagination__page-menu",
68
- "paginationTotalItems": "pf-v6-c-pagination__total-items"
72
+ "paginationTotalItems": "pf-v6-c-pagination__total-items",
73
+ "themeGlass": "pf-v6-theme-glass"
69
74
  };
package/css/components/Pagination/pagination.mjs CHANGED
@@ -3,7 +3,11 @@ export default {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
4
  "formControl": "pf-v6-c-form-control",
5
5
  "modifiers": {
6
+ "plain": "pf-m-plain",
7
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
6
8
  "bottom": "pf-m-bottom",
9
+ "stickyBase": "pf-m-sticky-base",
10
+ "stickyStuck": "pf-m-sticky-stuck",
7
11
  "first": "pf-m-first",
8
12
  "last": "pf-m-last",
9
13
  "static": "pf-m-static",
@@ -63,5 +67,6 @@ export default {
63
67
  "paginationNavControl": "pf-v6-c-pagination__nav-control",
64
68
  "paginationNavPageSelect": "pf-v6-c-pagination__nav-page-select",
65
69
  "paginationPageMenu": "pf-v6-c-pagination__page-menu",
66
- "paginationTotalItems": "pf-v6-c-pagination__total-items"
70
+ "paginationTotalItems": "pf-v6-c-pagination__total-items",
71
+ "themeGlass": "pf-v6-theme-glass"
67
72
  };
package/css/components/_index.css CHANGED
@@ -1970,6 +1970,7 @@ button.pf-v6-c-breadcrumb__link {
1970
1970
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
1971
1971
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
1972
1972
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
1973
+ --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: 1;
1973
1974
  --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
1974
1975
  }
1975
1976
 
@@ -2365,6 +2366,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2365
2366
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
2366
2367
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
2367
2368
  }
2369
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-button.pf-m-hamburger {
2370
+ --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: 1;
2371
+ --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: -1;
2372
+ }
2373
+
2368
2374
  .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
2369
2375
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2370
2376
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -2379,9 +2385,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2379
2385
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2380
2386
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2381
2387
  --pf-v6-c-button__icon--TransitionDelay: 0s;
2382
- --pf-v6-c-button__icon--ScaleX: 1;
2388
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
2383
2389
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2384
- --pf-v6-c-button--hover__icon--ScaleX: 1;
2390
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
2385
2391
  }
2386
2392
  .pf-v6-c-button.pf-m-circle {
2387
2393
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
@@ -2477,11 +2483,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2477
2483
  display: none;
2478
2484
  }
2479
2485
  }
2480
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
2486
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded {
2481
2487
  justify-content: flex-start;
2482
2488
  width: 100%;
2483
2489
  }
2484
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
2490
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
2485
2491
  display: revert;
2486
2492
  }
2487
2493
 
@@ -3804,18 +3810,18 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3804
3810
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
3805
3811
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
3806
3812
  --pf-v6-c-button__icon--TransitionDelay: 0s;
3807
- --pf-v6-c-button__icon--ScaleX: 1;
3813
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
3808
3814
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
3809
- --pf-v6-c-button--hover__icon--ScaleX: 1;
3815
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
3810
3816
  }
3811
3817
  .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
3812
3818
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
3813
3819
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
3814
3820
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
3815
3821
  --pf-v6-c-button__icon--TransitionDelay: 0s;
3816
- --pf-v6-c-button__icon--ScaleX: 1;
3822
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
3817
3823
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
3818
- --pf-v6-c-button--hover__icon--ScaleX: 1;
3824
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
3819
3825
  }
3820
3826
  @media (min-width: 62rem) {
3821
3827
  .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
@@ -3840,9 +3846,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3840
3846
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
3841
3847
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
3842
3848
  --pf-v6-c-button__icon--TransitionDelay: 0s;
3843
- --pf-v6-c-button__icon--ScaleX: 1;
3849
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
3844
3850
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
3845
- --pf-v6-c-button--hover__icon--ScaleX: 1;
3851
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
3846
3852
  }
3847
3853
  }
3848
3854
 
@@ -12263,12 +12269,12 @@ ul.pf-v6-c-list {
12263
12269
  display: none;
12264
12270
  }
12265
12271
  }
12266
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
12272
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
12267
12273
  justify-content: flex-start;
12268
12274
  width: 100%;
12269
12275
  }
12270
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
12271
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
12276
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
12277
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
12272
12278
  .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
12273
12279
  display: revert;
12274
12280
  }
@@ -13944,9 +13950,9 @@ ul.pf-v6-c-list {
13944
13950
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13945
13951
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13946
13952
  --pf-v6-c-button__icon--TransitionDelay: 0s;
13947
- --pf-v6-c-button__icon--ScaleX: 1;
13953
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13948
13954
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13949
- --pf-v6-c-button--hover__icon--ScaleX: 1;
13955
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13950
13956
  }
13951
13957
  @media (min-width: 75rem) {
13952
13958
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
@@ -13961,9 +13967,9 @@ ul.pf-v6-c-list {
13961
13967
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13962
13968
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13963
13969
  --pf-v6-c-button__icon--TransitionDelay: 0s;
13964
- --pf-v6-c-button__icon--ScaleX: 1;
13970
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13965
13971
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13966
- --pf-v6-c-button--hover__icon--ScaleX: 1;
13972
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13967
13973
  }
13968
13974
  .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
13969
13975
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
@@ -13980,9 +13986,9 @@ ul.pf-v6-c-list {
13980
13986
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13981
13987
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13982
13988
  --pf-v6-c-button__icon--TransitionDelay: 0s;
13983
- --pf-v6-c-button__icon--ScaleX: 1;
13989
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13984
13990
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13985
- --pf-v6-c-button--hover__icon--ScaleX: 1;
13991
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13986
13992
  }
13987
13993
  @media (min-width: 62rem) {
13988
13994
  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
@@ -14007,9 +14013,9 @@ ul.pf-v6-c-list {
14007
14013
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
14008
14014
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
14009
14015
  --pf-v6-c-button__icon--TransitionDelay: 0s;
14010
- --pf-v6-c-button__icon--ScaleX: 1;
14016
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
14011
14017
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
14012
- --pf-v6-c-button--hover__icon--ScaleX: 1;
14018
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
14013
14019
  }
14014
14020
  }
14015
14021
 
@@ -14039,6 +14045,10 @@ ul.pf-v6-c-list {
14039
14045
  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
14040
14046
  translate: -100% 0;
14041
14047
  }
14048
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
14049
+ translate: 100% 0;
14050
+ }
14051
+
14042
14052
  .pf-v6-c-page__dock.pf-m-expanded {
14043
14053
  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
14044
14054
  translate: 0;
@@ -14693,7 +14703,7 @@ ul.pf-v6-c-list {
14693
14703
  --pf-v6-c-pagination__total-items--Display: block;
14694
14704
  --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
14695
14705
  --pf-v6-c-pagination--m-display-full__total-items--Display: none;
14696
- --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14706
+ --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
14697
14707
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
14698
14708
  --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
14699
14709
  --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -14702,6 +14712,12 @@ ul.pf-v6-c-list {
14702
14712
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
14703
14713
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
14704
14714
  --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
14715
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
14716
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: 0;
14717
+ --pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14718
+ --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
14719
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
14720
+ --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
14705
14721
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14706
14722
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
14707
14723
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -14716,6 +14732,15 @@ ul.pf-v6-c-list {
14716
14732
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
14717
14733
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
14718
14734
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
14735
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
14736
+ }
14737
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
14738
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
14739
+ --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
14740
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
14741
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
14742
+ }
14743
+ .pf-v6-c-pagination {
14719
14744
  --pf-v6-c-pagination__page-menu--Display--base: block;
14720
14745
  --pf-v6-c-pagination__page-menu--Display: none;
14721
14746
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
@@ -14750,6 +14775,9 @@ ul.pf-v6-c-list {
14750
14775
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
14751
14776
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
14752
14777
  }
14778
+ :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) {
14779
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
14780
+ }
14753
14781
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
14754
14782
  display: var(--pf-v6-c-pagination__page-menu--Display);
14755
14783
  }
@@ -14767,6 +14795,9 @@ ul.pf-v6-c-list {
14767
14795
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
14768
14796
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
14769
14797
  }
14798
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
14799
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
14800
+ }
14770
14801
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
14771
14802
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
14772
14803
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -14821,15 +14852,46 @@ ul.pf-v6-c-list {
14821
14852
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
14822
14853
  --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
14823
14854
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
14824
- position: sticky;
14825
14855
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
14856
+ background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
14857
+ box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
14858
+ }
14859
+ .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
14860
+ position: sticky;
14826
14861
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
14827
14862
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
14828
14863
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
14829
14864
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
14830
14865
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
14831
- background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
14832
- box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
14866
+ }
14867
+ .pf-v6-c-pagination.pf-m-sticky-base {
14868
+ inset-block-start: var(--pf-v6-c-pagination--m-sticky-base--InsetBlockStart);
14869
+ border-radius: var(--pf-v6-c-pagination--m-sticky-base--BorderRadius, 0);
14870
+ }
14871
+ .pf-v6-c-pagination.pf-m-sticky-base.pf-m-bottom {
14872
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
14873
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: var(--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd);
14874
+ }
14875
+ .pf-v6-c-pagination.pf-m-sticky-base::before {
14876
+ position: absolute;
14877
+ inset: 0;
14878
+ z-index: -1;
14879
+ content: "";
14880
+ background-color: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
14881
+ border-radius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
14882
+ box-shadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
14883
+ opacity: 0;
14884
+ transition-timing-function: var(--pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction);
14885
+ transition-duration: var(--pf-v6-c-pagination--m-sticky-base--TransitionDuration);
14886
+ transition-property: opacity;
14887
+ }
14888
+ .pf-v6-c-pagination.pf-m-sticky-stuck {
14889
+ --pf-v6-c-pagination--m-sticky-base--BoxShadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
14890
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
14891
+ --pf-v6-c-pagination--m-sticky-base--BackgroundColor: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
14892
+ }
14893
+ .pf-v6-c-pagination.pf-m-sticky-stuck::before {
14894
+ opacity: 1;
14833
14895
  }
14834
14896
  .pf-v6-c-pagination.pf-m-page-insets {
14835
14897
  --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);
package/css/components/_index.d.ts CHANGED
@@ -748,6 +748,8 @@ declare const _default: {
748
748
  "paddingOn_2xl": "pf-m-padding-on-2xl",
749
749
  "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
750
750
  "bottom": "pf-m-bottom",
751
+ "stickyBase": "pf-m-sticky-base",
752
+ "stickyStuck": "pf-m-sticky-stuck",
751
753
  "first": "pf-m-first",
752
754
  "last": "pf-m-last",
753
755
  "displaySummary": "pf-m-display-summary",
@@ -883,8 +885,6 @@ declare const _default: {
883
885
  "visibleOnXlHeight": "pf-m-visible-on-xl-height",
884
886
  "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
885
887
  "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
886
- "stickyBase": "pf-m-sticky-base",
887
- "stickyStuck": "pf-m-sticky-stuck",
888
888
  "expandAll": "pf-m-expand-all",
889
889
  "label": "pf-m-label",
890
890
  "pagination": "pf-m-pagination",
package/css/components/_index.js CHANGED
@@ -750,6 +750,8 @@ exports.default = {
750
750
  "paddingOn_2xl": "pf-m-padding-on-2xl",
751
751
  "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
752
752
  "bottom": "pf-m-bottom",
753
+ "stickyBase": "pf-m-sticky-base",
754
+ "stickyStuck": "pf-m-sticky-stuck",
753
755
  "first": "pf-m-first",
754
756
  "last": "pf-m-last",
755
757
  "displaySummary": "pf-m-display-summary",
@@ -885,8 +887,6 @@ exports.default = {
885
887
  "visibleOnXlHeight": "pf-m-visible-on-xl-height",
886
888
  "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
887
889
  "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
888
- "stickyBase": "pf-m-sticky-base",
889
- "stickyStuck": "pf-m-sticky-stuck",
890
890
  "expandAll": "pf-m-expand-all",
891
891
  "label": "pf-m-label",
892
892
  "pagination": "pf-m-pagination",
package/css/components/_index.mjs CHANGED
@@ -748,6 +748,8 @@ export default {
748
748
  "paddingOn_2xl": "pf-m-padding-on-2xl",
749
749
  "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
750
750
  "bottom": "pf-m-bottom",
751
+ "stickyBase": "pf-m-sticky-base",
752
+ "stickyStuck": "pf-m-sticky-stuck",
751
753
  "first": "pf-m-first",
752
754
  "last": "pf-m-last",
753
755
  "displaySummary": "pf-m-display-summary",
@@ -883,8 +885,6 @@ export default {
883
885
  "visibleOnXlHeight": "pf-m-visible-on-xl-height",
884
886
  "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
885
887
  "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
886
- "stickyBase": "pf-m-sticky-base",
887
- "stickyStuck": "pf-m-sticky-stuck",
888
888
  "expandAll": "pf-m-expand-all",
889
889
  "label": "pf-m-label",
890
890
  "pagination": "pf-m-pagination",
package/css/docs/components/Compass/examples/Compass.css CHANGED
@@ -1,17 +1,8 @@
1
- .ws-core-a-compass .pf-v6-c-compass {
1
+ #ws-page-main .ws-core-a-compass .pf-v6-c-compass {
2
2
  height: 600px;
3
3
  }
4
4
 
5
5
  #ws-core-a-compass-basic [class*="pf-v6-c-compass"],
6
6
  #ws-core-a-compass-docked [class*="pf-v6-c-compass"] {
7
- position: relative;
8
- }
9
-
10
- #ws-core-a-compass-basic [class*="pf-v6-c-compass"]::after,
11
- #ws-core-a-compass-docked [class*="pf-v6-c-compass"]::after {
12
- position: absolute;
13
- inset: 0;
14
- pointer-events: none;
15
- content: "";
16
- border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
7
+ outline: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
17
8
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.5.0-prerelease.21",
3
+ "version": "6.5.0-prerelease.22",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.5.0-prerelease.78",
22
+ "@patternfly/patternfly": "6.5.0-prerelease.79",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.3"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "b1d4b8d38afd6c84f6d381b610b4af13586dacfe"
27
+ "gitHead": "6b93dbd79a250af00d40d88f8e7eeb5553231946"
28
28
  }