@patternfly/patternfly 6.0.0-alpha.161 → 6.0.0-alpha.162

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 (22) hide show
  1. package/components/Page/page.css +38 -54
  2. package/components/Page/page.scss +19 -32
  3. package/components/Toolbar/toolbar.css +1 -0
  4. package/components/Toolbar/toolbar.scss +1 -0
  5. package/components/_index.css +39 -54
  6. package/docs/components/Page/examples/Page.css +5 -9
  7. package/docs/components/Page/examples/Page.md +71 -32
  8. package/docs/demos/Alert/examples/Alert.md +393 -374
  9. package/docs/demos/CardView/examples/CardView.md +717 -708
  10. package/docs/demos/DataList/examples/DataList.md +2574 -2500
  11. package/docs/demos/Drawer/examples/Drawer.md +190 -182
  12. package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
  13. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
  14. package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
  15. package/docs/demos/Table/examples/Table.md +9458 -9105
  16. package/docs/demos/Tabs/examples/Tabs.md +889 -885
  17. package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
  18. package/package.json +1 -1
  19. package/patternfly-no-globals.css +39 -54
  20. package/patternfly.css +39 -54
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -36,11 +36,11 @@
36
36
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
37
37
  --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
38
38
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
39
- --pf-v6-c-page__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
40
- --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
41
- --pf-v6-c-page__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
42
- --pf-v6-c-page__main-section--PaddingBlockEnd: 0;
43
- --pf-v6-c-page__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
39
+ --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
40
+ --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
41
+ --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
42
+ --pf-v6-c-page__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg);
43
+ --pf-v6-c-page__main-section--RowGap: var(--pf-t--global--spacer--lg);
44
44
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
45
45
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
46
46
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -75,6 +75,7 @@
75
75
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
76
76
  --pf-v6-c-page__main-tabs--PaddingInlineEnd: 0;
77
77
  --pf-v6-c-page__main-tabs--PaddingBlockEnd: 0;
78
+ --pf-v6-c-page__main-tabs--PaddingInlineStart: 0;
78
79
  --pf-v6-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
79
80
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
80
81
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
@@ -186,21 +187,11 @@
186
187
  flex-grow: 0;
187
188
  }
188
189
 
189
- .pf-v6-c-page__main-nav.pf-m-limit-width,
190
- .pf-v6-c-page__main-breadcrumb.pf-m-limit-width,
191
- .pf-v6-c-page__main-tabs.pf-m-limit-width,
192
- .pf-v6-c-page__main-section.pf-m-limit-width,
193
- .pf-v6-c-page__main-wizard.pf-m-limit-width {
194
- display: flex;
195
- flex-direction: column;
196
- padding: 0;
197
- }
198
190
  .pf-v6-c-page__main-nav.pf-m-limit-width > .pf-v6-c-page__main-body,
199
191
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
200
192
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
201
193
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
202
194
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
203
- flex: 1;
204
195
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
205
196
  }
206
197
  .pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
@@ -225,6 +216,8 @@
225
216
  .pf-v6-c-page__main-wizard,
226
217
  .pf-v6-c-page__main-group,
227
218
  .pf-v6-c-page__main-subnav {
219
+ display: flex;
220
+ flex-direction: column;
228
221
  flex-shrink: 0;
229
222
  }
230
223
  .pf-v6-c-page__main-nav.pf-m-overflow-scroll,
@@ -445,6 +438,7 @@
445
438
  .pf-v6-c-page__main-list {
446
439
  display: flex;
447
440
  flex-direction: column;
441
+ flex-grow: 1;
448
442
  }
449
443
 
450
444
  .pf-v6-c-page__main-nav {
@@ -559,10 +553,11 @@
559
553
  }
560
554
 
561
555
  .pf-v6-c-page__main-section {
556
+ gap: var(--pf-v6-c-page__main-section--RowGap);
562
557
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
563
558
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
564
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
565
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
559
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
560
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
566
561
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
567
562
  }
568
563
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -571,8 +566,8 @@
571
566
  .pf-v6-c-page__main-section.pf-m-padding {
572
567
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
573
568
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
574
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
575
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
569
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
570
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
576
571
  }
577
572
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width {
578
573
  padding: 0;
@@ -580,8 +575,8 @@
580
575
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v6-c-page__main-body {
581
576
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
582
577
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
583
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
584
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
578
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
579
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
585
580
  }
586
581
  .pf-v6-c-page__main-section.pf-m-no-padding, .pf-v6-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v6-c-page__main-body {
587
582
  padding: 0;
@@ -590,8 +585,8 @@
590
585
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
591
586
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
592
587
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
593
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
594
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
588
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
589
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
595
590
  }
596
591
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
597
592
  padding: 0;
@@ -599,8 +594,8 @@
599
594
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
600
595
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
601
596
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
602
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
603
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
597
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
598
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
604
599
  }
605
600
  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm, .pf-v6-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
606
601
  padding: 0;
@@ -610,8 +605,8 @@
610
605
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
611
606
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
612
607
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
613
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
614
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
608
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
609
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
615
610
  }
616
611
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
617
612
  padding: 0;
@@ -619,8 +614,8 @@
619
614
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
620
615
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
621
616
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
622
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
623
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
617
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
618
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
624
619
  }
625
620
  .pf-v6-c-page__main-section.pf-m-no-padding-on-md, .pf-v6-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
626
621
  padding: 0;
@@ -630,8 +625,8 @@
630
625
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
631
626
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
632
627
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
633
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
634
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
628
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
629
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
635
630
  }
636
631
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
637
632
  padding: 0;
@@ -639,8 +634,8 @@
639
634
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
640
635
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
641
636
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
642
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
643
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
637
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
638
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
644
639
  }
645
640
  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg, .pf-v6-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
646
641
  padding: 0;
@@ -650,8 +645,8 @@
650
645
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
651
646
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
652
647
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
653
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
654
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
648
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
649
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
655
650
  }
656
651
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
657
652
  padding: 0;
@@ -659,8 +654,8 @@
659
654
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
660
655
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
661
656
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
662
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
663
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
657
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
658
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
664
659
  }
665
660
  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
666
661
  padding: 0;
@@ -670,8 +665,8 @@
670
665
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
671
666
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
672
667
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
673
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
674
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
668
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
669
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
675
670
  }
676
671
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
677
672
  padding: 0;
@@ -679,8 +674,8 @@
679
674
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
680
675
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
681
676
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
682
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
683
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
677
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
678
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
684
679
  }
685
680
  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
686
681
  padding: 0;
@@ -706,25 +701,14 @@
706
701
  }
707
702
 
708
703
  .pf-v6-c-page__main-nav .pf-v6-c-page__main-body {
709
- padding-block-start: var(--pf-v6-c-page__main-nav--PaddingBlockStart);
710
704
  padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
711
705
  padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
712
706
  }
713
707
  .pf-v6-c-page__main-breadcrumb .pf-v6-c-page__main-body {
714
- padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart);
715
- padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd);
716
- padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart);
717
- padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd);
718
- }
719
- .pf-v6-c-page__main-section .pf-v6-c-page__main-body {
720
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
721
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
722
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
723
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
708
+ padding-inline-start: 0;
709
+ padding-inline-end: 0;
724
710
  }
725
711
  .pf-v6-c-page__main-tabs .pf-v6-c-page__main-body {
726
- padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart);
727
- padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd);
728
712
  padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
729
713
  padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
730
714
  }
package/components/Page/page.scss CHANGED
@@ -64,11 +64,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
64
64
  --#{$page}__main-container--BorderColor: var(--#{$page}__main-container--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
65
65
 
66
66
  // Main section
67
- --#{$page}__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
68
- --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
69
- --#{$page}__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section - TODO, see if we can remove the need for this calc(), or possibly move it down to the property definition so a user can theme this without a calc()
70
- --#{$page}__main-section--PaddingBlockEnd: 0;
71
- --#{$page}__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
67
+ --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
68
+ --#{$page}__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
69
+ --#{$page}__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
70
+ --#{$page}__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
71
+ --#{$page}__main-section--RowGap: var(--pf-t--global--spacer--lg);
72
72
  --#{$page}__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
73
73
  --#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
74
74
  --#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -77,7 +77,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
77
77
 
78
78
  // Limit width
79
79
  --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
80
-
80
+
81
81
  // Sticky
82
82
  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
83
83
  --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -117,6 +117,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
117
117
  --#{$page}__main-tabs--PaddingBlockStart: 0;
118
118
  --#{$page}__main-tabs--PaddingInlineEnd: 0;
119
119
  --#{$page}__main-tabs--PaddingBlockEnd: 0;
120
+ --#{$page}__main-tabs--PaddingInlineStart: 0;
120
121
  --#{$page}__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
121
122
 
122
123
  // Wizard main section
@@ -244,12 +245,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
244
245
  .#{$page}__main-section,
245
246
  .#{$page}__main-wizard {
246
247
  &.pf-m-limit-width {
247
- display: flex;
248
- flex-direction: column;
249
- padding: 0;
250
-
251
248
  > .#{$page}__main-body {
252
- flex: 1;
253
249
  max-width: var(--#{$page}--section--m-limit-width--MaxWidth);
254
250
  }
255
251
 
@@ -270,6 +266,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
270
266
  .#{$page}__main-wizard,
271
267
  .#{$page}__main-group,
272
268
  .#{$page}__main-subnav {
269
+ display: flex;
270
+ flex-direction: column;
273
271
  flex-shrink: 0;
274
272
 
275
273
  &.pf-m-overflow-scroll {
@@ -344,6 +342,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
344
342
  .#{$page}__main-list {
345
343
  display: flex;
346
344
  flex-direction: column;
345
+ flex-grow: 1;
347
346
  }
348
347
 
349
348
  .#{$page}__main-nav {
@@ -428,10 +427,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
428
427
  }
429
428
 
430
429
  .#{$page}__main-section {
430
+ gap: var(--#{$page}__main-section--RowGap);
431
431
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
432
432
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
433
- padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
434
- padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
433
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
434
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
435
435
  background-color: var(--#{$page}__main-section--BackgroundColor);
436
436
 
437
437
  &.pf-m-secondary {
@@ -446,8 +446,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
446
446
  &.pf-m-padding#{$breakpoint-name} {
447
447
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
448
448
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
449
- padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
450
- padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
449
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
450
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
451
451
 
452
452
  &.pf-m-limit-width {
453
453
  padding: 0;
@@ -455,8 +455,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
455
455
  .#{$page}__main-body {
456
456
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
457
457
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
458
- padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
459
- padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
458
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
459
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
460
460
  }
461
461
  }
462
462
  }
@@ -493,28 +493,16 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
493
493
 
494
494
  .#{$page}__main-body {
495
495
  .#{$page}__main-nav & {
496
- padding-block-start: var(--#{$page}__main-nav--PaddingBlockStart);
497
496
  padding-inline-start: var(--#{$page}__main-nav--PaddingInlineStart);
498
497
  padding-inline-end: var(--#{$page}__main-nav--PaddingInlineEnd);
499
498
  }
500
499
 
501
500
  .#{$page}__main-breadcrumb & {
502
- padding-block-start: var(--#{$page}__main-breadcrumb--PaddingBlockStart);
503
- padding-block-end: var(--#{$page}__main-breadcrumb--PaddingBlockEnd);
504
- padding-inline-start: var(--#{$page}__main-breadcrumb--PaddingInlineStart);
505
- padding-inline-end: var(--#{$page}__main-breadcrumb--PaddingInlineEnd);
506
- }
507
-
508
- .#{$page}__main-section & {
509
- padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
510
- padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
511
- padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
512
- padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
501
+ padding-inline-start: 0;
502
+ padding-inline-end: 0;
513
503
  }
514
504
 
515
505
  .#{$page}__main-tabs & {
516
- padding-block-start: var(--#{$page}__main-tabs--PaddingBlockStart);
517
- padding-block-end: var(--#{$page}__main-tabs--PaddingBlockEnd);
518
506
  padding-inline-start: var(--#{$page}__main-tabs--PaddingInlineStart);
519
507
  padding-inline-end: var(--#{$page}__main-tabs--PaddingInlineEnd);
520
508
  }
@@ -527,4 +515,3 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
527
515
  flex: 1 0 auto;
528
516
  }
529
517
  }
530
-
package/components/Toolbar/toolbar.css CHANGED
@@ -17,6 +17,7 @@
17
17
  --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
18
18
  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
19
19
  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
20
+ --pf-v6-c-toolbar__content--PaddingBlockStart: 0;
20
21
  --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
21
22
  --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
22
23
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
package/components/Toolbar/toolbar.scss CHANGED
@@ -37,6 +37,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
37
37
  --#{$toolbar}__content--RowGap: var(--pf-t--global--spacer--sm);
38
38
  --#{$toolbar}__content--PaddingBlock: var(--pf-t--global--spacer--md);
39
39
  --#{$toolbar}__content--PaddingInline: var(--#{$toolbar}--PaddingInline);
40
+ --#{$toolbar}__content--PaddingBlockStart: 0;
40
41
 
41
42
  // * Toolbar expandable content
42
43
  --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
package/components/_index.css CHANGED
@@ -11526,11 +11526,11 @@ ul.pf-v6-c-list {
11526
11526
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
11527
11527
  --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
11528
11528
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
11529
- --pf-v6-c-page__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
11530
- --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11531
- --pf-v6-c-page__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
11532
- --pf-v6-c-page__main-section--PaddingBlockEnd: 0;
11533
- --pf-v6-c-page__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
11529
+ --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11530
+ --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11531
+ --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11532
+ --pf-v6-c-page__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11533
+ --pf-v6-c-page__main-section--RowGap: var(--pf-t--global--spacer--lg);
11534
11534
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11535
11535
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11536
11536
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -11565,6 +11565,7 @@ ul.pf-v6-c-list {
11565
11565
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
11566
11566
  --pf-v6-c-page__main-tabs--PaddingInlineEnd: 0;
11567
11567
  --pf-v6-c-page__main-tabs--PaddingBlockEnd: 0;
11568
+ --pf-v6-c-page__main-tabs--PaddingInlineStart: 0;
11568
11569
  --pf-v6-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11569
11570
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11570
11571
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
@@ -11676,21 +11677,11 @@ ul.pf-v6-c-list {
11676
11677
  flex-grow: 0;
11677
11678
  }
11678
11679
 
11679
- .pf-v6-c-page__main-nav.pf-m-limit-width,
11680
- .pf-v6-c-page__main-breadcrumb.pf-m-limit-width,
11681
- .pf-v6-c-page__main-tabs.pf-m-limit-width,
11682
- .pf-v6-c-page__main-section.pf-m-limit-width,
11683
- .pf-v6-c-page__main-wizard.pf-m-limit-width {
11684
- display: flex;
11685
- flex-direction: column;
11686
- padding: 0;
11687
- }
11688
11680
  .pf-v6-c-page__main-nav.pf-m-limit-width > .pf-v6-c-page__main-body,
11689
11681
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
11690
11682
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
11691
11683
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
11692
11684
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
11693
- flex: 1;
11694
11685
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
11695
11686
  }
11696
11687
  .pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
@@ -11715,6 +11706,8 @@ ul.pf-v6-c-list {
11715
11706
  .pf-v6-c-page__main-wizard,
11716
11707
  .pf-v6-c-page__main-group,
11717
11708
  .pf-v6-c-page__main-subnav {
11709
+ display: flex;
11710
+ flex-direction: column;
11718
11711
  flex-shrink: 0;
11719
11712
  }
11720
11713
  .pf-v6-c-page__main-nav.pf-m-overflow-scroll,
@@ -11935,6 +11928,7 @@ ul.pf-v6-c-list {
11935
11928
  .pf-v6-c-page__main-list {
11936
11929
  display: flex;
11937
11930
  flex-direction: column;
11931
+ flex-grow: 1;
11938
11932
  }
11939
11933
 
11940
11934
  .pf-v6-c-page__main-nav {
@@ -12049,10 +12043,11 @@ ul.pf-v6-c-list {
12049
12043
  }
12050
12044
 
12051
12045
  .pf-v6-c-page__main-section {
12046
+ gap: var(--pf-v6-c-page__main-section--RowGap);
12052
12047
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12053
12048
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12054
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12055
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12049
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12050
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12056
12051
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
12057
12052
  }
12058
12053
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -12061,8 +12056,8 @@ ul.pf-v6-c-list {
12061
12056
  .pf-v6-c-page__main-section.pf-m-padding {
12062
12057
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12063
12058
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12064
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12065
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12059
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12060
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12066
12061
  }
12067
12062
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width {
12068
12063
  padding: 0;
@@ -12070,8 +12065,8 @@ ul.pf-v6-c-list {
12070
12065
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v6-c-page__main-body {
12071
12066
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12072
12067
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12073
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12074
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12068
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12069
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12075
12070
  }
12076
12071
  .pf-v6-c-page__main-section.pf-m-no-padding, .pf-v6-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v6-c-page__main-body {
12077
12072
  padding: 0;
@@ -12080,8 +12075,8 @@ ul.pf-v6-c-list {
12080
12075
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
12081
12076
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12082
12077
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12083
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12084
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12078
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12079
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12085
12080
  }
12086
12081
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
12087
12082
  padding: 0;
@@ -12089,8 +12084,8 @@ ul.pf-v6-c-list {
12089
12084
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
12090
12085
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12091
12086
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12092
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12093
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12087
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12088
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12094
12089
  }
12095
12090
  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm, .pf-v6-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
12096
12091
  padding: 0;
@@ -12100,8 +12095,8 @@ ul.pf-v6-c-list {
12100
12095
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
12101
12096
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12102
12097
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12103
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12104
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12098
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12099
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12105
12100
  }
12106
12101
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
12107
12102
  padding: 0;
@@ -12109,8 +12104,8 @@ ul.pf-v6-c-list {
12109
12104
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
12110
12105
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12111
12106
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12112
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12113
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12107
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12108
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12114
12109
  }
12115
12110
  .pf-v6-c-page__main-section.pf-m-no-padding-on-md, .pf-v6-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
12116
12111
  padding: 0;
@@ -12120,8 +12115,8 @@ ul.pf-v6-c-list {
12120
12115
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
12121
12116
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12122
12117
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12123
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12124
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12118
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12119
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12125
12120
  }
12126
12121
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
12127
12122
  padding: 0;
@@ -12129,8 +12124,8 @@ ul.pf-v6-c-list {
12129
12124
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
12130
12125
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12131
12126
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12132
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12133
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12127
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12128
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12134
12129
  }
12135
12130
  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg, .pf-v6-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
12136
12131
  padding: 0;
@@ -12140,8 +12135,8 @@ ul.pf-v6-c-list {
12140
12135
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
12141
12136
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12142
12137
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12143
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12144
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12138
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12139
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12145
12140
  }
12146
12141
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
12147
12142
  padding: 0;
@@ -12149,8 +12144,8 @@ ul.pf-v6-c-list {
12149
12144
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
12150
12145
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12151
12146
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12152
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12153
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12147
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12148
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12154
12149
  }
12155
12150
  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
12156
12151
  padding: 0;
@@ -12160,8 +12155,8 @@ ul.pf-v6-c-list {
12160
12155
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
12161
12156
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12162
12157
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12163
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12164
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12158
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12159
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12165
12160
  }
12166
12161
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
12167
12162
  padding: 0;
@@ -12169,8 +12164,8 @@ ul.pf-v6-c-list {
12169
12164
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
12170
12165
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12171
12166
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12172
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12173
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12167
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12168
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12174
12169
  }
12175
12170
  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
12176
12171
  padding: 0;
@@ -12196,25 +12191,14 @@ ul.pf-v6-c-list {
12196
12191
  }
12197
12192
 
12198
12193
  .pf-v6-c-page__main-nav .pf-v6-c-page__main-body {
12199
- padding-block-start: var(--pf-v6-c-page__main-nav--PaddingBlockStart);
12200
12194
  padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
12201
12195
  padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
12202
12196
  }
12203
12197
  .pf-v6-c-page__main-breadcrumb .pf-v6-c-page__main-body {
12204
- padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart);
12205
- padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd);
12206
- padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart);
12207
- padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd);
12208
- }
12209
- .pf-v6-c-page__main-section .pf-v6-c-page__main-body {
12210
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12211
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12212
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12213
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12198
+ padding-inline-start: 0;
12199
+ padding-inline-end: 0;
12214
12200
  }
12215
12201
  .pf-v6-c-page__main-tabs .pf-v6-c-page__main-body {
12216
- padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart);
12217
- padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd);
12218
12202
  padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
12219
12203
  padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
12220
12204
  }
@@ -19548,6 +19532,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19548
19532
  --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
19549
19533
  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
19550
19534
  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
19535
+ --pf-v6-c-toolbar__content--PaddingBlockStart: 0;
19551
19536
  --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
19552
19537
  --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19553
19538
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
package/docs/components/Page/examples/Page.css CHANGED
@@ -1,9 +1,5 @@
1
- #ws-core-c-page-with-or-without-fill .ws-preview-html,
2
- #ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
3
- height: 500px;
4
- }
5
-
6
- #ws-core-c-page-multiple-sidebar-body-elements .ws-preview-html,
7
- #ws-core-c-page-using-flex-layout .ws-preview-html {
8
- height: 100%;
9
- }
1
+ /* Because the page component has height:100dvh, override it just for the embedded examples */
2
+ .ws-mdx-content-content [id^=ws-core-c-page-] .ws-preview-html .pf-v6-c-page {
3
+ height: min-content;
4
+ min-height: 30em;
5
+ }