@patternfly/patternfly 6.5.0-prerelease.75 → 6.5.0-prerelease.77

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 (15) hide show
  1. package/components/Button/button.css +42 -37
  2. package/components/Button/button.scss +48 -43
  3. package/components/Table/table-scrollable.css +1 -1
  4. package/components/Table/table-scrollable.scss +1 -1
  5. package/components/Toolbar/toolbar.css +48 -1
  6. package/components/Toolbar/toolbar.scss +53 -1
  7. package/components/_index.css +91 -39
  8. package/docs/components/Button/examples/Button.md +298 -1
  9. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  10. package/docs/components/Toolbar/examples/Toolbar.md +44 -0
  11. package/package.json +2 -2
  12. package/patternfly-no-globals.css +91 -39
  13. package/patternfly.css +91 -39
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -584,43 +584,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
584
584
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
585
585
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
586
586
  }
587
- .pf-v6-c-button.pf-m-stateful {
588
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
589
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
590
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
591
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
592
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
593
- }
594
- .pf-v6-c-button.pf-m-read {
595
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
596
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
597
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
598
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
599
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
600
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
601
- }
602
- .pf-v6-c-button.pf-m-unread {
603
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
604
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
605
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
606
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
607
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
608
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
609
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
610
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
611
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
612
- }
613
- .pf-v6-c-button.pf-m-attention {
614
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
615
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
616
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
617
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
618
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
619
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
620
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
621
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
622
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
623
- }
624
587
  .pf-v6-c-button.pf-m-plain {
625
588
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
626
589
  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
@@ -644,6 +607,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
644
607
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
645
608
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
646
609
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
610
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
611
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
612
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
613
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
614
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
647
615
  }
648
616
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
649
617
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
@@ -660,6 +628,43 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
660
628
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
661
629
  background: var(--pf-v6-c-button--BackgroundColor);
662
630
  }
631
+ .pf-v6-c-button.pf-m-stateful {
632
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
633
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
634
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
635
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
636
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
637
+ }
638
+ .pf-v6-c-button.pf-m-read {
639
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
640
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
641
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
642
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
643
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
644
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
645
+ }
646
+ .pf-v6-c-button.pf-m-unread {
647
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
648
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
649
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
650
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
651
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
652
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
653
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
654
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
655
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
656
+ }
657
+ .pf-v6-c-button.pf-m-attention {
658
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
659
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
660
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
661
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
662
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
663
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
664
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
665
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
666
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
667
+ }
663
668
  .pf-v6-c-button.pf-m-block {
664
669
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
665
670
  width: var(--pf-v6-c-button--m-block--Width);
package/components/Button/button.scss CHANGED
@@ -673,6 +673,54 @@
673
673
  --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-control--m-small--PaddingInlineStart);
674
674
  }
675
675
 
676
+ // Icon buttons
677
+ &.pf-m-plain {
678
+ --#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth);
679
+ --#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor);
680
+ --#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth);
681
+ --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor);
682
+ --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth);
683
+ --#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor);
684
+ --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
685
+ --#{$button}--Color: var(--#{$button}--m-plain--Color);
686
+ --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
687
+ --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
688
+ --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
689
+ --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
690
+ --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
691
+ --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
692
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
693
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
694
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
695
+ --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
696
+ --#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
697
+ --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
698
+ --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
699
+ --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-small--PaddingInlineStart);
700
+ --#{$button}--m-stateful--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
701
+ --#{$button}--m-stateful--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
702
+ --#{$button}--m-read--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
703
+ --#{$button}--m-read--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
704
+ --#{$button}--m-read--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
705
+
706
+ &.pf-m-no-padding {
707
+ --#{$button}__icon--Color: var(--#{$button}--m-plain--m-no-padding__icon--Color);
708
+ --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
709
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
710
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
711
+ --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
712
+ --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
713
+ --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
714
+ --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
715
+ --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
716
+ --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
717
+ --#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset);
718
+
719
+ min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
720
+ background: var(--#{$button}--BackgroundColor); // override the ripple background
721
+ }
722
+ }
723
+
676
724
  // Stateful
677
725
  &.pf-m-stateful {
678
726
  --#{$button}--BorderRadius: var(--#{$button}--m-stateful--BorderRadius);
@@ -718,49 +766,6 @@
718
766
  --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-attention--m-clicked__icon--Color);
719
767
  }
720
768
 
721
- // Icon buttons
722
- &.pf-m-plain {
723
- --#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth);
724
- --#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor);
725
- --#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth);
726
- --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor);
727
- --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth);
728
- --#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor);
729
- --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
730
- --#{$button}--Color: var(--#{$button}--m-plain--Color);
731
- --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
732
- --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
733
- --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
734
- --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
735
- --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
736
- --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
737
- --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
738
- --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
739
- --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
740
- --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
741
- --#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
742
- --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
743
- --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
744
- --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-small--PaddingInlineStart);
745
-
746
- &.pf-m-no-padding {
747
- --#{$button}__icon--Color: var(--#{$button}--m-plain--m-no-padding__icon--Color);
748
- --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
749
- --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
750
- --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
751
- --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
752
- --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
753
- --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
754
- --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
755
- --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
756
- --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
757
- --#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset);
758
-
759
- min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
760
- background: var(--#{$button}--BackgroundColor); // override the ripple background
761
- }
762
- }
763
-
764
769
  &.pf-m-block {
765
770
  --#{$button}--Display: var(--#{$button}--m-block--Display);
766
771
 
package/components/Table/table-scrollable.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
5
5
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
6
6
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
7
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
8
8
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
9
9
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
10
10
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
package/components/Table/table-scrollable.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
8
8
  --#{$table}__sticky-cell--InsetInlineEnd: auto;
9
9
  --#{$table}__sticky-cell--InsetInlineStart: auto;
10
- --#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
10
+ --#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
11
11
  --#{$table}__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
12
12
  --#{$table}__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
13
13
  --#{$table}__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
package/components/Toolbar/toolbar.css CHANGED
@@ -36,10 +36,28 @@
36
36
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
37
37
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
38
38
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
39
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
40
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
39
41
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
40
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
42
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
41
43
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
42
44
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
45
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
46
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
47
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
48
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
49
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
50
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
51
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
52
+ }
53
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
54
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
55
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
56
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
57
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
58
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
59
+ }
60
+ .pf-v6-c-toolbar {
43
61
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
44
62
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
45
63
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -316,6 +334,35 @@
316
334
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
317
335
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
318
336
  }
337
+ .pf-v6-c-toolbar.pf-m-sticky-base {
338
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
339
+ position: sticky;
340
+ inset-block-start: 0;
341
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
342
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
343
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
344
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
345
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
346
+ background: transparent;
347
+ border-radius: inherit;
348
+ }
349
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
350
+ position: absolute;
351
+ inset: 0;
352
+ z-index: -1;
353
+ content: "";
354
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
355
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
356
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
357
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
358
+ opacity: 0;
359
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
360
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
361
+ transition-property: opacity;
362
+ }
363
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
364
+ opacity: 1;
365
+ }
319
366
  .pf-v6-c-toolbar.pf-m-static,
320
367
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
321
368
  position: static;
package/components/Toolbar/toolbar.scss CHANGED
@@ -64,10 +64,27 @@ $pf-v6--include-toolbar-breakpoints: true !default;
64
64
  --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
65
65
  --#{$toolbar}--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
66
66
  --#{$toolbar}--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
67
+ --#{$toolbar}--m-sticky--PaddingInlineStart: 0;
68
+ --#{$toolbar}--m-sticky--PaddingInlineEnd: 0;
67
69
  --#{$toolbar}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
68
- --#{$toolbar}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
70
+ --#{$toolbar}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
69
71
  --#{$toolbar}--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
70
72
  --#{$toolbar}--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
73
+ --#{$toolbar}--m-sticky--BorderRadius: 0;
74
+ --#{$toolbar}--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
75
+ --#{$toolbar}--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
76
+ --#{$toolbar}--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
77
+ --#{$toolbar}--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
78
+ --#{$toolbar}--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
79
+ --#{$toolbar}--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
80
+
81
+ :where(.pf-v6-theme-glass) & {
82
+ --#{$toolbar}--m-sticky--BorderBlockEndWidth: 0;
83
+ --#{$toolbar}--m-sticky--BoxShadow: var(--#{$toolbar}--m-sticky--BoxShadow--glass);
84
+ --#{$toolbar}--m-sticky--BorderRadius: var(--#{$toolbar}--m-sticky--BorderRadius--glass);
85
+ --#{$toolbar}--m-sticky--PaddingInlineStart: var(--#{$toolbar}--m-sticky--PaddingInlineStart--glass);
86
+ --#{$toolbar}--m-sticky--PaddingInlineEnd: var(--#{$toolbar}--m-sticky--PaddingInlineEnd--glass);
87
+ }
71
88
 
72
89
  // * Toolbar vertical
73
90
  --#{$toolbar}--m-vertical--Width: fit-content;
@@ -153,6 +170,41 @@ $pf-v6--include-toolbar-breakpoints: true !default;
153
170
  box-shadow: var(--#{$toolbar}--m-sticky--BoxShadow);
154
171
  }
155
172
 
173
+ &.pf-m-sticky-base {
174
+ --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-sticky--BackgroundColor);
175
+
176
+ position: sticky;
177
+ inset-block-start: 0;
178
+ z-index: var(--#{$toolbar}--m-sticky--ZIndex);
179
+ padding-block-start: var(--#{$toolbar}--m-sticky--PaddingBlockStart);
180
+ padding-block-end: var(--#{$toolbar}--m-sticky--PaddingBlockEnd);
181
+ padding-inline-start: var(--#{$toolbar}--m-sticky--PaddingInlineStart);
182
+ padding-inline-end: var(--#{$toolbar}--m-sticky--PaddingInlineEnd);
183
+ background: transparent;
184
+ border-radius: inherit;
185
+
186
+ &::before {
187
+ position: absolute;
188
+ inset: 0;
189
+ z-index: -1;
190
+ content: '';
191
+ background: var(--#{$toolbar}--BackgroundColor);
192
+ border-block-end: var(--#{$toolbar}--m-sticky--BorderBlockEndWidth) solid var(--#{$toolbar}--m-sticky--BorderBlockEndColor);
193
+ border-radius: var(--#{$toolbar}--m-sticky--BorderRadius);
194
+ box-shadow: var(--#{$toolbar}--m-sticky--BoxShadow);
195
+ opacity: 0;
196
+ transition-timing-function: var(--#{$toolbar}--m-sticky--TransitionTimingFunction--BackgroundColor);
197
+ transition-duration: var(--#{$toolbar}--m-sticky--TransitionDuration--BackgroundColor);
198
+ transition-property: opacity;
199
+ }
200
+ }
201
+
202
+ &.pf-m-sticky-stuck {
203
+ &::before {
204
+ opacity: 1;
205
+ }
206
+ }
207
+
156
208
  // - Toolbar static
157
209
  &.pf-m-static {
158
210
  &,
package/components/_index.css CHANGED
@@ -2199,43 +2199,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2199
2199
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
2200
2200
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
2201
2201
  }
2202
- .pf-v6-c-button.pf-m-stateful {
2203
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
2204
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
2205
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
2206
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
2207
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
2208
- }
2209
- .pf-v6-c-button.pf-m-read {
2210
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
2211
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
2212
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
2213
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
2214
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
2215
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
2216
- }
2217
- .pf-v6-c-button.pf-m-unread {
2218
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
2219
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
2220
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
2221
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
2222
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
2223
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
2224
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
2225
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
2226
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
2227
- }
2228
- .pf-v6-c-button.pf-m-attention {
2229
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
2230
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
2231
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
2232
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
2233
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
2234
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
2235
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
2236
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
2237
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
2238
- }
2239
2202
  .pf-v6-c-button.pf-m-plain {
2240
2203
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
2241
2204
  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
@@ -2259,6 +2222,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2259
2222
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
2260
2223
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
2261
2224
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
2225
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
2226
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
2227
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
2228
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
2229
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
2262
2230
  }
2263
2231
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
2264
2232
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
@@ -2275,6 +2243,43 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2275
2243
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
2276
2244
  background: var(--pf-v6-c-button--BackgroundColor);
2277
2245
  }
2246
+ .pf-v6-c-button.pf-m-stateful {
2247
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
2248
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
2249
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
2250
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
2251
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
2252
+ }
2253
+ .pf-v6-c-button.pf-m-read {
2254
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
2255
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
2256
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
2257
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
2258
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
2259
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
2260
+ }
2261
+ .pf-v6-c-button.pf-m-unread {
2262
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
2263
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
2264
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
2265
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
2266
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
2267
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
2268
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
2269
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
2270
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
2271
+ }
2272
+ .pf-v6-c-button.pf-m-attention {
2273
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
2274
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
2275
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
2276
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
2277
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
2278
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
2279
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
2280
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
2281
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
2282
+ }
2278
2283
  .pf-v6-c-button.pf-m-block {
2279
2284
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
2280
2285
  width: var(--pf-v6-c-button--m-block--Width);
@@ -19980,7 +19985,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19980
19985
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
19981
19986
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
19982
19987
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
19983
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19988
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
19984
19989
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
19985
19990
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
19986
19991
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
@@ -22446,10 +22451,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22446
22451
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
22447
22452
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
22448
22453
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
22454
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
22455
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
22449
22456
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
22450
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22457
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
22451
22458
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
22452
22459
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
22460
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
22461
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
22462
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
22463
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
22464
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
22465
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
22466
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
22467
+ }
22468
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
22469
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
22470
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
22471
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
22472
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
22473
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
22474
+ }
22475
+ .pf-v6-c-toolbar {
22453
22476
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
22454
22477
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
22455
22478
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -22726,6 +22749,35 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22726
22749
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
22727
22750
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
22728
22751
  }
22752
+ .pf-v6-c-toolbar.pf-m-sticky-base {
22753
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
22754
+ position: sticky;
22755
+ inset-block-start: 0;
22756
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
22757
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
22758
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
22759
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
22760
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
22761
+ background: transparent;
22762
+ border-radius: inherit;
22763
+ }
22764
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
22765
+ position: absolute;
22766
+ inset: 0;
22767
+ z-index: -1;
22768
+ content: "";
22769
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
22770
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
22771
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
22772
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
22773
+ opacity: 0;
22774
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
22775
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
22776
+ transition-property: opacity;
22777
+ }
22778
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
22779
+ opacity: 1;
22780
+ }
22729
22781
  .pf-v6-c-toolbar.pf-m-static,
22730
22782
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
22731
22783
  position: static;