@patternfly/react-styles 6.5.0-prerelease.21 → 6.5.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 (21) hide show
  1. package/CHANGELOG.md +12 -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 +116 -9
  9. package/css/components/Page/page.d.ts +4 -0
  10. package/css/components/Page/page.js +4 -0
  11. package/css/components/Page/page.mjs +4 -0
  12. package/css/components/Pagination/pagination.css +56 -4
  13. package/css/components/Pagination/pagination.d.ts +6 -1
  14. package/css/components/Pagination/pagination.js +6 -1
  15. package/css/components/Pagination/pagination.mjs +6 -1
  16. package/css/components/_index.css +191 -26
  17. package/css/components/_index.d.ts +6 -2
  18. package/css/components/_index.js +6 -2
  19. package/css/components/_index.mjs +6 -2
  20. package/css/docs/components/Compass/examples/Compass.css +2 -11
  21. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.22...@patternfly/react-styles@6.5.0-prerelease.23) (2026-05-08)
7
+
8
+ ### Features
9
+
10
+ - **Page:** add dynamic sticky section support ([#12409](https://github.com/patternfly/patternfly-react/issues/12409)) ([97b29d3](https://github.com/patternfly/patternfly-react/commit/97b29d3fafc14ee01f0bbf0d2bdbc527d62f2a16))
11
+
12
+ # [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)
13
+
14
+ ### Features
15
+
16
+ - **Pagination:** added dynamic sticky and plain ([#12388](https://github.com/patternfly/patternfly-react/issues/12388)) ([7c4f9df](https://github.com/patternfly/patternfly-react/commit/7c4f9dfac4c4a63deecd9fb4d517c5713a617f9e))
17
+
6
18
  # [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
19
 
8
20
  ### 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
@@ -154,10 +154,16 @@
154
154
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
155
155
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
156
156
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
157
+ --pf-v6-c-page--section--m-sticky-top--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
157
158
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
158
159
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
159
160
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
160
161
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
162
+ --pf-v6-c-page--section--m-sticky-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
163
+ --pf-v6-c-page--section--m-sticky-top--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
164
+ --pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
165
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
166
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
161
167
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
162
168
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
163
169
  --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -297,9 +303,9 @@
297
303
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
298
304
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
299
305
  --pf-v6-c-button__icon--TransitionDelay: 0s;
300
- --pf-v6-c-button__icon--ScaleX: 1;
306
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
301
307
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
302
- --pf-v6-c-button--hover__icon--ScaleX: 1;
308
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
303
309
  }
304
310
  @media (min-width: 75rem) {
305
311
  .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 +320,9 @@
314
320
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
315
321
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
316
322
  --pf-v6-c-button__icon--TransitionDelay: 0s;
317
- --pf-v6-c-button__icon--ScaleX: 1;
323
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
318
324
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
319
- --pf-v6-c-button--hover__icon--ScaleX: 1;
325
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
320
326
  }
321
327
  .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
328
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
@@ -333,9 +339,9 @@
333
339
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
334
340
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
335
341
  --pf-v6-c-button__icon--TransitionDelay: 0s;
336
- --pf-v6-c-button__icon--ScaleX: 1;
342
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
337
343
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
338
- --pf-v6-c-button--hover__icon--ScaleX: 1;
344
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
339
345
  }
340
346
  @media (min-width: 62rem) {
341
347
  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
@@ -360,9 +366,9 @@
360
366
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
361
367
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
362
368
  --pf-v6-c-button__icon--TransitionDelay: 0s;
363
- --pf-v6-c-button__icon--ScaleX: 1;
369
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
364
370
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
365
- --pf-v6-c-button--hover__icon--ScaleX: 1;
371
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
366
372
  }
367
373
  }
368
374
 
@@ -392,6 +398,10 @@
392
398
  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
393
399
  translate: -100% 0;
394
400
  }
401
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
402
+ translate: 100% 0;
403
+ }
404
+
395
405
  .pf-v6-c-page__dock.pf-m-expanded {
396
406
  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
397
407
  translate: 0;
@@ -617,6 +627,7 @@
617
627
  position: sticky;
618
628
  inset-block-start: 0;
619
629
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
630
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
620
631
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
621
632
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
622
633
  }
@@ -629,6 +640,7 @@
629
640
  position: sticky;
630
641
  inset-block-end: 0;
631
642
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
643
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
632
644
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
633
645
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
634
646
  }
@@ -642,6 +654,7 @@
642
654
  position: sticky;
643
655
  inset-block-start: 0;
644
656
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
657
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
645
658
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
646
659
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
647
660
  }
@@ -654,6 +667,7 @@
654
667
  position: sticky;
655
668
  inset-block-end: 0;
656
669
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
670
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
657
671
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
658
672
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
659
673
  }
@@ -668,6 +682,7 @@
668
682
  position: sticky;
669
683
  inset-block-start: 0;
670
684
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
685
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
671
686
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
672
687
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
673
688
  }
@@ -680,6 +695,7 @@
680
695
  position: sticky;
681
696
  inset-block-end: 0;
682
697
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
698
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
683
699
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
684
700
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
685
701
  }
@@ -694,6 +710,7 @@
694
710
  position: sticky;
695
711
  inset-block-start: 0;
696
712
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
713
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
697
714
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
698
715
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
699
716
  }
@@ -706,6 +723,7 @@
706
723
  position: sticky;
707
724
  inset-block-end: 0;
708
725
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
726
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
709
727
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
710
728
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
711
729
  }
@@ -720,6 +738,7 @@
720
738
  position: sticky;
721
739
  inset-block-start: 0;
722
740
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
741
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
723
742
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
724
743
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
725
744
  }
@@ -732,6 +751,7 @@
732
751
  position: sticky;
733
752
  inset-block-end: 0;
734
753
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
754
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
735
755
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
736
756
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
737
757
  }
@@ -746,6 +766,7 @@
746
766
  position: sticky;
747
767
  inset-block-start: 0;
748
768
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
769
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
749
770
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
750
771
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
751
772
  }
@@ -758,10 +779,96 @@
758
779
  position: sticky;
759
780
  inset-block-end: 0;
760
781
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
782
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
761
783
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
762
784
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
763
785
  }
764
786
  }
787
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base,
788
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
789
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
790
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
791
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
792
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
793
+ position: sticky;
794
+ inset-block-start: 0;
795
+ z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
796
+ box-shadow: none;
797
+ }
798
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base::before,
799
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base::before,
800
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base::before,
801
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base::before,
802
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base::before,
803
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base::before {
804
+ position: absolute;
805
+ inset: 0;
806
+ z-index: -1;
807
+ content: "";
808
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
809
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
810
+ opacity: 0;
811
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction);
812
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-top--TransitionDuration);
813
+ transition-property: opacity;
814
+ }
815
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-breadcrumb:last-child,
816
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
817
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-tabs:last-child,
818
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
819
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-section:last-child,
820
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
821
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-wizard:last-child,
822
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
823
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-group:last-child,
824
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base,
825
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-subnav:last-child {
826
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
827
+ }
828
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-stuck::before,
829
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-stuck::before,
830
+ .pf-v6-c-page__main-section.pf-m-sticky-top-stuck::before,
831
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-stuck::before,
832
+ .pf-v6-c-page__main-group.pf-m-sticky-top-stuck::before,
833
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-stuck::before {
834
+ opacity: 1;
835
+ }
836
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base,
837
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base,
838
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base,
839
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base,
840
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base,
841
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base {
842
+ position: sticky;
843
+ inset-block-end: 0;
844
+ z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
845
+ box-shadow: none;
846
+ }
847
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base::before,
848
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base::before,
849
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base::before,
850
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base::before,
851
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base::before,
852
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base::before {
853
+ position: absolute;
854
+ inset: 0;
855
+ z-index: -1;
856
+ content: "";
857
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
858
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
859
+ opacity: 0;
860
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction);
861
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionDuration);
862
+ transition-property: opacity;
863
+ }
864
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-stuck::before,
865
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-stuck::before,
866
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-stuck::before,
867
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-stuck::before,
868
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-stuck::before,
869
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-stuck::before {
870
+ opacity: 1;
871
+ }
765
872
 
766
873
  .pf-v6-c-page__main-container {
767
874
  display: flex;
@@ -856,7 +963,7 @@
856
963
  padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
857
964
  background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
858
965
  }
859
- .pf-v6-c-page__main-subnav.pf-m-sticky-top {
966
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top, .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
860
967
  padding-block-end: var(--pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd);
861
968
  }
862
969
 
package/css/components/Page/page.d.ts CHANGED
@@ -36,6 +36,10 @@ declare const _default: {
36
36
  "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
37
37
  "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
38
38
  "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
39
+ "stickyTopBase": "pf-m-sticky-top-base",
40
+ "stickyTopStuck": "pf-m-sticky-top-stuck",
41
+ "stickyBottomBase": "pf-m-sticky-bottom-base",
42
+ "stickyBottomStuck": "pf-m-sticky-bottom-stuck",
39
43
  "noSidebar": "pf-m-no-sidebar",
40
44
  "plain": "pf-m-plain",
41
45
  "noPlainOnGlass": "pf-m-no-plain-on-glass",
package/css/components/Page/page.js CHANGED
@@ -38,6 +38,10 @@ exports.default = {
38
38
  "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
39
39
  "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
40
40
  "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
41
+ "stickyTopBase": "pf-m-sticky-top-base",
42
+ "stickyTopStuck": "pf-m-sticky-top-stuck",
43
+ "stickyBottomBase": "pf-m-sticky-bottom-base",
44
+ "stickyBottomStuck": "pf-m-sticky-bottom-stuck",
41
45
  "noSidebar": "pf-m-no-sidebar",
42
46
  "plain": "pf-m-plain",
43
47
  "noPlainOnGlass": "pf-m-no-plain-on-glass",
package/css/components/Page/page.mjs CHANGED
@@ -36,6 +36,10 @@ export default {
36
36
  "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
37
37
  "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
38
38
  "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
39
+ "stickyTopBase": "pf-m-sticky-top-base",
40
+ "stickyTopStuck": "pf-m-sticky-top-stuck",
41
+ "stickyBottomBase": "pf-m-sticky-bottom-base",
42
+ "stickyBottomStuck": "pf-m-sticky-bottom-stuck",
39
43
  "noSidebar": "pf-m-no-sidebar",
40
44
  "plain": "pf-m-plain",
41
45
  "noPlainOnGlass": "pf-m-no-plain-on-glass",
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
  }
@@ -13801,10 +13807,16 @@ ul.pf-v6-c-list {
13801
13807
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
13802
13808
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
13803
13809
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
13810
+ --pf-v6-c-page--section--m-sticky-top--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
13804
13811
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
13805
13812
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
13806
13813
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13807
13814
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
13815
+ --pf-v6-c-page--section--m-sticky-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
13816
+ --pf-v6-c-page--section--m-sticky-top--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
13817
+ --pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13818
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
13819
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13808
13820
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
13809
13821
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
13810
13822
  --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -13944,9 +13956,9 @@ ul.pf-v6-c-list {
13944
13956
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13945
13957
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13946
13958
  --pf-v6-c-button__icon--TransitionDelay: 0s;
13947
- --pf-v6-c-button__icon--ScaleX: 1;
13959
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13948
13960
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13949
- --pf-v6-c-button--hover__icon--ScaleX: 1;
13961
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13950
13962
  }
13951
13963
  @media (min-width: 75rem) {
13952
13964
  .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 +13973,9 @@ ul.pf-v6-c-list {
13961
13973
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13962
13974
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13963
13975
  --pf-v6-c-button__icon--TransitionDelay: 0s;
13964
- --pf-v6-c-button__icon--ScaleX: 1;
13976
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13965
13977
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13966
- --pf-v6-c-button--hover__icon--ScaleX: 1;
13978
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13967
13979
  }
13968
13980
  .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
13981
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
@@ -13980,9 +13992,9 @@ ul.pf-v6-c-list {
13980
13992
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13981
13993
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13982
13994
  --pf-v6-c-button__icon--TransitionDelay: 0s;
13983
- --pf-v6-c-button__icon--ScaleX: 1;
13995
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13984
13996
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13985
- --pf-v6-c-button--hover__icon--ScaleX: 1;
13997
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13986
13998
  }
13987
13999
  @media (min-width: 62rem) {
13988
14000
  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
@@ -14007,9 +14019,9 @@ ul.pf-v6-c-list {
14007
14019
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
14008
14020
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
14009
14021
  --pf-v6-c-button__icon--TransitionDelay: 0s;
14010
- --pf-v6-c-button__icon--ScaleX: 1;
14022
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
14011
14023
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
14012
- --pf-v6-c-button--hover__icon--ScaleX: 1;
14024
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
14013
14025
  }
14014
14026
  }
14015
14027
 
@@ -14039,6 +14051,10 @@ ul.pf-v6-c-list {
14039
14051
  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
14040
14052
  translate: -100% 0;
14041
14053
  }
14054
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
14055
+ translate: 100% 0;
14056
+ }
14057
+
14042
14058
  .pf-v6-c-page__dock.pf-m-expanded {
14043
14059
  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
14044
14060
  translate: 0;
@@ -14264,6 +14280,7 @@ ul.pf-v6-c-list {
14264
14280
  position: sticky;
14265
14281
  inset-block-start: 0;
14266
14282
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
14283
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
14267
14284
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
14268
14285
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14269
14286
  }
@@ -14276,6 +14293,7 @@ ul.pf-v6-c-list {
14276
14293
  position: sticky;
14277
14294
  inset-block-end: 0;
14278
14295
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
14296
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
14279
14297
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
14280
14298
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14281
14299
  }
@@ -14289,6 +14307,7 @@ ul.pf-v6-c-list {
14289
14307
  position: sticky;
14290
14308
  inset-block-start: 0;
14291
14309
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
14310
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
14292
14311
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
14293
14312
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14294
14313
  }
@@ -14301,6 +14320,7 @@ ul.pf-v6-c-list {
14301
14320
  position: sticky;
14302
14321
  inset-block-end: 0;
14303
14322
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
14323
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
14304
14324
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
14305
14325
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14306
14326
  }
@@ -14315,6 +14335,7 @@ ul.pf-v6-c-list {
14315
14335
  position: sticky;
14316
14336
  inset-block-start: 0;
14317
14337
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
14338
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
14318
14339
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
14319
14340
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14320
14341
  }
@@ -14327,6 +14348,7 @@ ul.pf-v6-c-list {
14327
14348
  position: sticky;
14328
14349
  inset-block-end: 0;
14329
14350
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
14351
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
14330
14352
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
14331
14353
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14332
14354
  }
@@ -14341,6 +14363,7 @@ ul.pf-v6-c-list {
14341
14363
  position: sticky;
14342
14364
  inset-block-start: 0;
14343
14365
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
14366
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
14344
14367
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
14345
14368
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14346
14369
  }
@@ -14353,6 +14376,7 @@ ul.pf-v6-c-list {
14353
14376
  position: sticky;
14354
14377
  inset-block-end: 0;
14355
14378
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
14379
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
14356
14380
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
14357
14381
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14358
14382
  }
@@ -14367,6 +14391,7 @@ ul.pf-v6-c-list {
14367
14391
  position: sticky;
14368
14392
  inset-block-start: 0;
14369
14393
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
14394
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
14370
14395
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
14371
14396
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14372
14397
  }
@@ -14379,6 +14404,7 @@ ul.pf-v6-c-list {
14379
14404
  position: sticky;
14380
14405
  inset-block-end: 0;
14381
14406
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
14407
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
14382
14408
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
14383
14409
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14384
14410
  }
@@ -14393,6 +14419,7 @@ ul.pf-v6-c-list {
14393
14419
  position: sticky;
14394
14420
  inset-block-start: 0;
14395
14421
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
14422
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
14396
14423
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
14397
14424
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14398
14425
  }
@@ -14405,10 +14432,96 @@ ul.pf-v6-c-list {
14405
14432
  position: sticky;
14406
14433
  inset-block-end: 0;
14407
14434
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
14435
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
14408
14436
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
14409
14437
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14410
14438
  }
14411
14439
  }
14440
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base,
14441
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
14442
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
14443
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
14444
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
14445
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
14446
+ position: sticky;
14447
+ inset-block-start: 0;
14448
+ z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
14449
+ box-shadow: none;
14450
+ }
14451
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base::before,
14452
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base::before,
14453
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base::before,
14454
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base::before,
14455
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base::before,
14456
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base::before {
14457
+ position: absolute;
14458
+ inset: 0;
14459
+ z-index: -1;
14460
+ content: "";
14461
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
14462
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14463
+ opacity: 0;
14464
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction);
14465
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-top--TransitionDuration);
14466
+ transition-property: opacity;
14467
+ }
14468
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-breadcrumb:last-child,
14469
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
14470
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-tabs:last-child,
14471
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
14472
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-section:last-child,
14473
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
14474
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-wizard:last-child,
14475
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
14476
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-group:last-child,
14477
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base,
14478
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-subnav:last-child {
14479
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
14480
+ }
14481
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-stuck::before,
14482
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-stuck::before,
14483
+ .pf-v6-c-page__main-section.pf-m-sticky-top-stuck::before,
14484
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-stuck::before,
14485
+ .pf-v6-c-page__main-group.pf-m-sticky-top-stuck::before,
14486
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-stuck::before {
14487
+ opacity: 1;
14488
+ }
14489
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base,
14490
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base,
14491
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base,
14492
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base,
14493
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base,
14494
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base {
14495
+ position: sticky;
14496
+ inset-block-end: 0;
14497
+ z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
14498
+ box-shadow: none;
14499
+ }
14500
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base::before,
14501
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base::before,
14502
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base::before,
14503
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base::before,
14504
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base::before,
14505
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base::before {
14506
+ position: absolute;
14507
+ inset: 0;
14508
+ z-index: -1;
14509
+ content: "";
14510
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
14511
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14512
+ opacity: 0;
14513
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction);
14514
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionDuration);
14515
+ transition-property: opacity;
14516
+ }
14517
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-stuck::before,
14518
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-stuck::before,
14519
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-stuck::before,
14520
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-stuck::before,
14521
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-stuck::before,
14522
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-stuck::before {
14523
+ opacity: 1;
14524
+ }
14412
14525
 
14413
14526
  .pf-v6-c-page__main-container {
14414
14527
  display: flex;
@@ -14503,7 +14616,7 @@ ul.pf-v6-c-list {
14503
14616
  padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
14504
14617
  background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
14505
14618
  }
14506
- .pf-v6-c-page__main-subnav.pf-m-sticky-top {
14619
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top, .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
14507
14620
  padding-block-end: var(--pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd);
14508
14621
  }
14509
14622
 
@@ -14693,7 +14806,7 @@ ul.pf-v6-c-list {
14693
14806
  --pf-v6-c-pagination__total-items--Display: block;
14694
14807
  --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
14695
14808
  --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);
14809
+ --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
14697
14810
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
14698
14811
  --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
14699
14812
  --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -14702,6 +14815,12 @@ ul.pf-v6-c-list {
14702
14815
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
14703
14816
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
14704
14817
  --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
14818
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
14819
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: 0;
14820
+ --pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14821
+ --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
14822
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
14823
+ --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
14705
14824
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14706
14825
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
14707
14826
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -14716,6 +14835,15 @@ ul.pf-v6-c-list {
14716
14835
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
14717
14836
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
14718
14837
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
14838
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
14839
+ }
14840
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
14841
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
14842
+ --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
14843
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
14844
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
14845
+ }
14846
+ .pf-v6-c-pagination {
14719
14847
  --pf-v6-c-pagination__page-menu--Display--base: block;
14720
14848
  --pf-v6-c-pagination__page-menu--Display: none;
14721
14849
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
@@ -14750,6 +14878,9 @@ ul.pf-v6-c-list {
14750
14878
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
14751
14879
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
14752
14880
  }
14881
+ :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) {
14882
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
14883
+ }
14753
14884
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
14754
14885
  display: var(--pf-v6-c-pagination__page-menu--Display);
14755
14886
  }
@@ -14767,6 +14898,9 @@ ul.pf-v6-c-list {
14767
14898
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
14768
14899
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
14769
14900
  }
14901
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
14902
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
14903
+ }
14770
14904
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
14771
14905
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
14772
14906
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -14821,15 +14955,46 @@ ul.pf-v6-c-list {
14821
14955
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
14822
14956
  --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
14823
14957
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
14824
- position: sticky;
14825
14958
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
14959
+ background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
14960
+ box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
14961
+ }
14962
+ .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
14963
+ position: sticky;
14826
14964
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
14827
14965
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
14828
14966
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
14829
14967
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
14830
14968
  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);
14969
+ }
14970
+ .pf-v6-c-pagination.pf-m-sticky-base {
14971
+ inset-block-start: var(--pf-v6-c-pagination--m-sticky-base--InsetBlockStart);
14972
+ border-radius: var(--pf-v6-c-pagination--m-sticky-base--BorderRadius, 0);
14973
+ }
14974
+ .pf-v6-c-pagination.pf-m-sticky-base.pf-m-bottom {
14975
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
14976
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: var(--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd);
14977
+ }
14978
+ .pf-v6-c-pagination.pf-m-sticky-base::before {
14979
+ position: absolute;
14980
+ inset: 0;
14981
+ z-index: -1;
14982
+ content: "";
14983
+ background-color: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
14984
+ border-radius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
14985
+ box-shadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
14986
+ opacity: 0;
14987
+ transition-timing-function: var(--pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction);
14988
+ transition-duration: var(--pf-v6-c-pagination--m-sticky-base--TransitionDuration);
14989
+ transition-property: opacity;
14990
+ }
14991
+ .pf-v6-c-pagination.pf-m-sticky-stuck {
14992
+ --pf-v6-c-pagination--m-sticky-base--BoxShadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
14993
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
14994
+ --pf-v6-c-pagination--m-sticky-base--BackgroundColor: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
14995
+ }
14996
+ .pf-v6-c-pagination.pf-m-sticky-stuck::before {
14997
+ opacity: 1;
14833
14998
  }
14834
14999
  .pf-v6-c-pagination.pf-m-page-insets {
14835
15000
  --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);
package/css/components/_index.d.ts CHANGED
@@ -736,6 +736,10 @@ declare const _default: {
736
736
  "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
737
737
  "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
738
738
  "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
739
+ "stickyTopBase": "pf-m-sticky-top-base",
740
+ "stickyTopStuck": "pf-m-sticky-top-stuck",
741
+ "stickyBottomBase": "pf-m-sticky-bottom-base",
742
+ "stickyBottomStuck": "pf-m-sticky-bottom-stuck",
739
743
  "noSidebar": "pf-m-no-sidebar",
740
744
  "paddingOnSm": "pf-m-padding-on-sm",
741
745
  "noPaddingOnSm": "pf-m-no-padding-on-sm",
@@ -748,6 +752,8 @@ declare const _default: {
748
752
  "paddingOn_2xl": "pf-m-padding-on-2xl",
749
753
  "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
750
754
  "bottom": "pf-m-bottom",
755
+ "stickyBase": "pf-m-sticky-base",
756
+ "stickyStuck": "pf-m-sticky-stuck",
751
757
  "first": "pf-m-first",
752
758
  "last": "pf-m-last",
753
759
  "displaySummary": "pf-m-display-summary",
@@ -883,8 +889,6 @@ declare const _default: {
883
889
  "visibleOnXlHeight": "pf-m-visible-on-xl-height",
884
890
  "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
885
891
  "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
886
- "stickyBase": "pf-m-sticky-base",
887
- "stickyStuck": "pf-m-sticky-stuck",
888
892
  "expandAll": "pf-m-expand-all",
889
893
  "label": "pf-m-label",
890
894
  "pagination": "pf-m-pagination",
package/css/components/_index.js CHANGED
@@ -738,6 +738,10 @@ exports.default = {
738
738
  "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
739
739
  "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
740
740
  "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
741
+ "stickyTopBase": "pf-m-sticky-top-base",
742
+ "stickyTopStuck": "pf-m-sticky-top-stuck",
743
+ "stickyBottomBase": "pf-m-sticky-bottom-base",
744
+ "stickyBottomStuck": "pf-m-sticky-bottom-stuck",
741
745
  "noSidebar": "pf-m-no-sidebar",
742
746
  "paddingOnSm": "pf-m-padding-on-sm",
743
747
  "noPaddingOnSm": "pf-m-no-padding-on-sm",
@@ -750,6 +754,8 @@ exports.default = {
750
754
  "paddingOn_2xl": "pf-m-padding-on-2xl",
751
755
  "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
752
756
  "bottom": "pf-m-bottom",
757
+ "stickyBase": "pf-m-sticky-base",
758
+ "stickyStuck": "pf-m-sticky-stuck",
753
759
  "first": "pf-m-first",
754
760
  "last": "pf-m-last",
755
761
  "displaySummary": "pf-m-display-summary",
@@ -885,8 +891,6 @@ exports.default = {
885
891
  "visibleOnXlHeight": "pf-m-visible-on-xl-height",
886
892
  "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
887
893
  "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
888
- "stickyBase": "pf-m-sticky-base",
889
- "stickyStuck": "pf-m-sticky-stuck",
890
894
  "expandAll": "pf-m-expand-all",
891
895
  "label": "pf-m-label",
892
896
  "pagination": "pf-m-pagination",
package/css/components/_index.mjs CHANGED
@@ -736,6 +736,10 @@ export default {
736
736
  "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
737
737
  "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
738
738
  "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
739
+ "stickyTopBase": "pf-m-sticky-top-base",
740
+ "stickyTopStuck": "pf-m-sticky-top-stuck",
741
+ "stickyBottomBase": "pf-m-sticky-bottom-base",
742
+ "stickyBottomStuck": "pf-m-sticky-bottom-stuck",
739
743
  "noSidebar": "pf-m-no-sidebar",
740
744
  "paddingOnSm": "pf-m-padding-on-sm",
741
745
  "noPaddingOnSm": "pf-m-no-padding-on-sm",
@@ -748,6 +752,8 @@ export default {
748
752
  "paddingOn_2xl": "pf-m-padding-on-2xl",
749
753
  "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
750
754
  "bottom": "pf-m-bottom",
755
+ "stickyBase": "pf-m-sticky-base",
756
+ "stickyStuck": "pf-m-sticky-stuck",
751
757
  "first": "pf-m-first",
752
758
  "last": "pf-m-last",
753
759
  "displaySummary": "pf-m-display-summary",
@@ -883,8 +889,6 @@ export default {
883
889
  "visibleOnXlHeight": "pf-m-visible-on-xl-height",
884
890
  "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
885
891
  "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
886
- "stickyBase": "pf-m-sticky-base",
887
- "stickyStuck": "pf-m-sticky-stuck",
888
892
  "expandAll": "pf-m-expand-all",
889
893
  "label": "pf-m-label",
890
894
  "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.23",
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.80",
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": "ea832af189f62520e49b172f13cac22df6c5d3a4"
28
28
  }