@patternfly/patternfly 6.5.0-prerelease.79 → 6.5.0-prerelease.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/Page/page.css +104 -1
  2. package/components/Page/page.scss +72 -1
  3. package/components/_index.css +104 -1
  4. package/docs/components/Page/examples/Page.md +78 -0
  5. package/package.json +2 -2
  6. package/patternfly-no-globals.css +104 -1
  7. package/patternfly.css +104 -1
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/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);
@@ -621,6 +627,7 @@
621
627
  position: sticky;
622
628
  inset-block-start: 0;
623
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);
624
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);
625
632
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
626
633
  }
@@ -633,6 +640,7 @@
633
640
  position: sticky;
634
641
  inset-block-end: 0;
635
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);
636
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);
637
645
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
638
646
  }
@@ -646,6 +654,7 @@
646
654
  position: sticky;
647
655
  inset-block-start: 0;
648
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);
649
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);
650
659
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
651
660
  }
@@ -658,6 +667,7 @@
658
667
  position: sticky;
659
668
  inset-block-end: 0;
660
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);
661
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);
662
672
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
663
673
  }
@@ -672,6 +682,7 @@
672
682
  position: sticky;
673
683
  inset-block-start: 0;
674
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);
675
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);
676
687
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
677
688
  }
@@ -684,6 +695,7 @@
684
695
  position: sticky;
685
696
  inset-block-end: 0;
686
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);
687
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);
688
700
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
689
701
  }
@@ -698,6 +710,7 @@
698
710
  position: sticky;
699
711
  inset-block-start: 0;
700
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);
701
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);
702
715
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
703
716
  }
@@ -710,6 +723,7 @@
710
723
  position: sticky;
711
724
  inset-block-end: 0;
712
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);
713
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);
714
728
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
715
729
  }
@@ -724,6 +738,7 @@
724
738
  position: sticky;
725
739
  inset-block-start: 0;
726
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);
727
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);
728
743
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
729
744
  }
@@ -736,6 +751,7 @@
736
751
  position: sticky;
737
752
  inset-block-end: 0;
738
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);
739
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);
740
756
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
741
757
  }
@@ -750,6 +766,7 @@
750
766
  position: sticky;
751
767
  inset-block-start: 0;
752
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);
753
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);
754
771
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
755
772
  }
@@ -762,10 +779,96 @@
762
779
  position: sticky;
763
780
  inset-block-end: 0;
764
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);
765
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);
766
784
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
767
785
  }
768
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
+ }
769
872
 
770
873
  .pf-v6-c-page__main-container {
771
874
  display: flex;
@@ -860,7 +963,7 @@
860
963
  padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
861
964
  background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
862
965
  }
863
- .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 {
864
967
  padding-block-end: var(--pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd);
865
968
  }
866
969
 
package/components/Page/page.scss CHANGED
@@ -179,10 +179,19 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
179
179
  --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
180
180
  --#{$page}--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
181
181
  --#{$page}--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
182
+ --#{$page}--section--m-sticky-top--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
182
183
  --#{$page}--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
183
184
  --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
184
185
  --#{$page}--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
185
186
  --#{$page}--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
187
+ --#{$page}--section--m-sticky-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
188
+
189
+ // Sticky - dynamic
190
+ --#{$page}--section--m-sticky-top--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
191
+ --#{$page}--section--m-sticky-top--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
192
+ --#{$page}--section--m-sticky-bottom--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
193
+ --#{$page}--section--m-sticky-bottom--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
194
+
186
195
 
187
196
  // Shadows
188
197
  --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -664,6 +673,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
664
673
  position: sticky;
665
674
  inset-block-start: 0;
666
675
  z-index: var(--#{$page}--section--m-sticky-top--ZIndex);
676
+ background-color: var(--#{$page}--section--m-sticky-top--BackgroundColor);
667
677
  border-block-end: var(--#{$page}--section--m-sticky-top--BorderBlockEndWidth) solid var(--#{$page}--section--m-sticky-top--BorderBlockEndColor);
668
678
  box-shadow: var(--#{$page}--section--m-sticky-top--BoxShadow);
669
679
  }
@@ -672,9 +682,69 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
672
682
  position: sticky;
673
683
  inset-block-end: 0;
674
684
  z-index: var(--#{$page}--section--m-sticky-bottom--ZIndex);
685
+ background-color: var(--#{$page}--section--m-sticky-bottom--BackgroundColor);
675
686
  border-block-start: var(--#{$page}--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--#{$page}--section--m-sticky-bottom--BorderBlockStartColor);
676
687
  box-shadow: var(--#{$page}--section--m-sticky-bottom--BoxShadow);
677
688
  }
689
+
690
+ }
691
+ }
692
+
693
+ // Dynamic sticky modifiers: no shadow + fade transition when stuck
694
+ &.pf-m-sticky-top-base {
695
+ position: sticky;
696
+ inset-block-start: 0;
697
+ z-index: var(--#{$page}--section--m-sticky-top--ZIndex);
698
+ box-shadow: none;
699
+
700
+ &::before {
701
+ position: absolute;
702
+ inset: 0;
703
+ z-index: -1;
704
+ content: "";
705
+ background-color: var(--#{$page}--section--m-sticky-top--BackgroundColor);
706
+ box-shadow: var(--#{$page}--section--m-sticky-top--BoxShadow);
707
+ opacity: 0;
708
+ transition-timing-function: var(--#{$page}--section--m-sticky-top--TransitionTimingFunction);
709
+ transition-duration: var(--#{$page}--section--m-sticky-top--TransitionDuration);
710
+ transition-property: opacity;
711
+ }
712
+ }
713
+
714
+ &.pf-m-sticky-top-base,
715
+ .#{$page}__main-group.pf-m-sticky-top-base &:last-child {
716
+ --#{$page}__main-breadcrumb--PaddingBlockEnd: var(--#{$page}__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
717
+ }
718
+
719
+ &.pf-m-sticky-top-stuck {
720
+ &::before {
721
+ opacity: 1;
722
+ }
723
+ }
724
+
725
+ &.pf-m-sticky-bottom-base {
726
+ position: sticky;
727
+ inset-block-end: 0;
728
+ z-index: var(--#{$page}--section--m-sticky-bottom--ZIndex);
729
+ box-shadow: none;
730
+
731
+ &::before {
732
+ position: absolute;
733
+ inset: 0;
734
+ z-index: -1;
735
+ content: "";
736
+ background-color: var(--#{$page}--section--m-sticky-bottom--BackgroundColor);
737
+ box-shadow: var(--#{$page}--section--m-sticky-bottom--BoxShadow);
738
+ opacity: 0;
739
+ transition-timing-function: var(--#{$page}--section--m-sticky-bottom--TransitionTimingFunction);
740
+ transition-duration: var(--#{$page}--section--m-sticky-bottom--TransitionDuration);
741
+ transition-property: opacity;
742
+ }
743
+ }
744
+
745
+ &.pf-m-sticky-bottom-stuck {
746
+ &::before {
747
+ opacity: 1;
678
748
  }
679
749
  }
680
750
  }
@@ -771,7 +841,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
771
841
  padding-inline-end: var(--#{$page}__main-subnav--PaddingInlineEnd);
772
842
  background-color: var(--#{$page}__main-subnav--BackgroundColor);
773
843
 
774
- &.pf-m-sticky-top {
844
+ &.pf-m-sticky-top,
845
+ &.pf-m-sticky-top-base {
775
846
  padding-block-end: var(--#{$page}__main-subnav--m-sticky-top--PaddingBlockEnd);
776
847
  }
777
848
  }
package/components/_index.css CHANGED
@@ -13807,10 +13807,16 @@ ul.pf-v6-c-list {
13807
13807
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
13808
13808
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
13809
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);
13810
13811
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
13811
13812
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
13812
13813
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13813
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);
13814
13820
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
13815
13821
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
13816
13822
  --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -14274,6 +14280,7 @@ ul.pf-v6-c-list {
14274
14280
  position: sticky;
14275
14281
  inset-block-start: 0;
14276
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);
14277
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);
14278
14285
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14279
14286
  }
@@ -14286,6 +14293,7 @@ ul.pf-v6-c-list {
14286
14293
  position: sticky;
14287
14294
  inset-block-end: 0;
14288
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);
14289
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);
14290
14298
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14291
14299
  }
@@ -14299,6 +14307,7 @@ ul.pf-v6-c-list {
14299
14307
  position: sticky;
14300
14308
  inset-block-start: 0;
14301
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);
14302
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);
14303
14312
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14304
14313
  }
@@ -14311,6 +14320,7 @@ ul.pf-v6-c-list {
14311
14320
  position: sticky;
14312
14321
  inset-block-end: 0;
14313
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);
14314
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);
14315
14325
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14316
14326
  }
@@ -14325,6 +14335,7 @@ ul.pf-v6-c-list {
14325
14335
  position: sticky;
14326
14336
  inset-block-start: 0;
14327
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);
14328
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);
14329
14340
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14330
14341
  }
@@ -14337,6 +14348,7 @@ ul.pf-v6-c-list {
14337
14348
  position: sticky;
14338
14349
  inset-block-end: 0;
14339
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);
14340
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);
14341
14353
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14342
14354
  }
@@ -14351,6 +14363,7 @@ ul.pf-v6-c-list {
14351
14363
  position: sticky;
14352
14364
  inset-block-start: 0;
14353
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);
14354
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);
14355
14368
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14356
14369
  }
@@ -14363,6 +14376,7 @@ ul.pf-v6-c-list {
14363
14376
  position: sticky;
14364
14377
  inset-block-end: 0;
14365
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);
14366
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);
14367
14381
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14368
14382
  }
@@ -14377,6 +14391,7 @@ ul.pf-v6-c-list {
14377
14391
  position: sticky;
14378
14392
  inset-block-start: 0;
14379
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);
14380
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);
14381
14396
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14382
14397
  }
@@ -14389,6 +14404,7 @@ ul.pf-v6-c-list {
14389
14404
  position: sticky;
14390
14405
  inset-block-end: 0;
14391
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);
14392
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);
14393
14409
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14394
14410
  }
@@ -14403,6 +14419,7 @@ ul.pf-v6-c-list {
14403
14419
  position: sticky;
14404
14420
  inset-block-start: 0;
14405
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);
14406
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);
14407
14424
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
14408
14425
  }
@@ -14415,10 +14432,96 @@ ul.pf-v6-c-list {
14415
14432
  position: sticky;
14416
14433
  inset-block-end: 0;
14417
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);
14418
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);
14419
14437
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
14420
14438
  }
14421
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
+ }
14422
14525
 
14423
14526
  .pf-v6-c-page__main-container {
14424
14527
  display: flex;
@@ -14513,7 +14616,7 @@ ul.pf-v6-c-list {
14513
14616
  padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
14514
14617
  background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
14515
14618
  }
14516
- .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 {
14517
14620
  padding-block-end: var(--pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd);
14518
14621
  }
14519
14622
 
package/docs/components/Page/examples/Page.md CHANGED
@@ -619,6 +619,80 @@ wrapperTag: div
619
619
 
620
620
  ```
621
621
 
622
+ ### Sticky section dynamic
623
+
624
+ ```html
625
+ <div class="pf-v6-c-page">
626
+ <header class="pf-v6-c-masthead">
627
+ <div class="pf-v6-c-masthead__main">
628
+ <span class="pf-v6-c-masthead__toggle">
629
+ <button
630
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
631
+ type="button"
632
+ aria-label="Global navigation"
633
+ >
634
+ <span class="pf-v6-c-button__icon">
635
+ <svg
636
+ viewBox="0 0 10 10"
637
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
638
+ width="1em"
639
+ height="1em"
640
+ >
641
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
642
+ <path
643
+ class="pf-v6-c-button--hamburger-icon--middle"
644
+ d="M1,5 L9,5"
645
+ />
646
+ <path
647
+ class="pf-v6-c-button--hamburger-icon--arrow"
648
+ d="M1,5 L1,5 L1,5"
649
+ />
650
+ <path
651
+ class="pf-v6-c-button--hamburger-icon--bottom"
652
+ d="M9,9 L1,9"
653
+ />
654
+ </svg>
655
+ </span>
656
+ </button>
657
+ </span>
658
+ <div class="pf-v6-c-masthead__brand">
659
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
660
+ </div>
661
+ </div>
662
+ <div class="pf-v6-c-masthead__content">
663
+ <span>Content</span>
664
+ </div>
665
+ </header>
666
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
667
+ <main class="pf-v6-c-page__main" tabindex="-1">
668
+ <div
669
+ class="pf-v6-c-page__main-group pf-m-sticky-top-base pf-m-sticky-top-stuck"
670
+ >
671
+ <section class="pf-v6-c-page__main-breadcrumb">Breadcrumb</section>
672
+ <section
673
+ class="pf-v6-c-page__main-section"
674
+ aria-label="Sticky dynamic section title"
675
+ >
676
+ <div class="pf-v6-c-page__main-body">
677
+ This
678
+ <code>.pf-v6-c-page__main-group</code> uses
679
+ <code>.pf-m-sticky-top-base</code> and
680
+ <code>.pf-m-sticky-top-stuck</code> for dynamic sticky positioning with a fade-in background and shadow.
681
+ </div>
682
+ </section>
683
+ </div>
684
+ <section
685
+ class="pf-v6-c-page__main-section"
686
+ aria-label="Sticky dynamic content section"
687
+ >
688
+ <div class="pf-v6-c-page__main-body">Content below the sticky section.</div>
689
+ </section>
690
+ </main>
691
+ </div>
692
+ </div>
693
+
694
+ ```
695
+
622
696
  ## Documentation
623
697
 
624
698
  ### Overview
@@ -667,6 +741,10 @@ This component provides the basic chrome for a page, including sidebar and main
667
741
  | `.pf-m-align-center` | `.pf-v6-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
668
742
  | `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-v6-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
669
743
  | `.pf-m-sticky-bottom{-on-[breakpoint]-height}` | `.pf-v6-c-page__main-*` | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint. |
744
+ | `.pf-m-sticky-top-base` | `.pf-v6-c-page__main-*` | Sets up dynamic sticky top positioning with no background or shadow. Used with `.pf-m-sticky-top-stuck`. |
745
+ | `.pf-m-sticky-top-stuck` | `.pf-v6-c-page__main-*` | Triggers the sticky top stuck state, fading in the background and shadow. Apply via JS when the section becomes stuck. |
746
+ | `.pf-m-sticky-bottom-base` | `.pf-v6-c-page__main-*` | Sets up dynamic sticky bottom positioning with no background or shadow. Used with `.pf-m-sticky-bottom-stuck`. |
747
+ | `.pf-m-sticky-bottom-stuck` | `.pf-v6-c-page__main-*` | Triggers the sticky bottom stuck state, fading in the background and shadow. Apply via JS when the section becomes stuck. |
670
748
  | `.pf-m-shadow-bottom` | `.pf-v6-c-page__main-*` | Modifies a section/group to have a bottom shadow. |
671
749
  | `.pf-m-shadow-top` | `.pf-v6-c-page__main-*` | Modifies a section/group to have a top shadow. |
672
750
  | `.pf-m-overflow-scroll` | `.pf-v6-c-page__main-*` | Modifies a section/group to show a scrollbar if it has overflow content. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.79",
4
+ "version": "6.5.0-prerelease.80",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -69,7 +69,7 @@
69
69
  "@commitlint/config-conventional": "^19.1.0",
70
70
  "@fortawesome/fontawesome": "^1.1.8",
71
71
  "@octokit/rest": "^20.1.0",
72
- "@patternfly/documentation-framework": "6.38.3",
72
+ "@patternfly/documentation-framework": "6.38.5",
73
73
  "@patternfly/patternfly-a11y": "5.1.0",
74
74
  "@patternfly/react-code-editor": "6.4.3",
75
75
  "@patternfly/react-core": "6.4.3",