@patternfly/patternfly 6.3.0-prerelease.54 → 6.3.0-prerelease.55

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 (8) hide show
  1. package/components/Page/page.css +61 -22
  2. package/components/Page/page.scss +42 -13
  3. package/components/_index.css +61 -22
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +61 -22
  6. package/patternfly.css +61 -22
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/_index.css CHANGED
@@ -12462,7 +12462,7 @@ ul.pf-v6-c-list {
12462
12462
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
12463
12463
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
12464
12464
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12465
- --pf-v6-c-page__sidebar--BoxShadow: none;
12465
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
12466
12466
  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
12467
12467
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12468
12468
  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
@@ -12477,6 +12477,8 @@ ul.pf-v6-c-list {
12477
12477
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
12478
12478
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
12479
12479
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
12480
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
12481
+ --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
12480
12482
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12481
12483
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
12482
12484
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -12501,13 +12503,19 @@ ul.pf-v6-c-list {
12501
12503
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
12502
12504
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
12503
12505
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
12504
- --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--border--width--main--default);
12506
+ --pf-v6-c-page__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default);
12507
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default);
12508
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
12509
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
12505
12510
  --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
12506
12511
  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
12507
12512
  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
12508
12513
  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
12509
12514
  --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
12510
12515
  --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
12516
+ --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
12517
+ --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
12518
+ --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
12511
12519
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
12512
12520
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12513
12521
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12520,22 +12528,30 @@ ul.pf-v6-c-list {
12520
12528
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
12521
12529
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
12522
12530
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
12531
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
12532
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
12523
12533
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
12524
12534
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
12535
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12536
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
12525
12537
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
12526
12538
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
12539
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
12540
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
12527
12541
  --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
12528
12542
  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
12543
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12544
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
12529
12545
  --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12530
12546
  --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
12531
12547
  --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0;
12532
- --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
12533
- --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
12548
+ --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
12549
+ --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
12534
12550
  --pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12535
12551
  --pf-v6-c-page__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
12536
- --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
12552
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
12537
12553
  --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: 0;
12538
- --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
12554
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
12539
12555
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12540
12556
  --pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12541
12557
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
@@ -12558,6 +12574,7 @@ ul.pf-v6-c-list {
12558
12574
  .pf-v6-c-page {
12559
12575
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
12560
12576
  --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
12577
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
12561
12578
  }
12562
12579
  }
12563
12580
 
@@ -12651,6 +12668,7 @@ ul.pf-v6-c-list {
12651
12668
  overflow-y: auto;
12652
12669
  -webkit-overflow-scrolling: touch;
12653
12670
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
12671
+ border-inline-end: var(--pf-v6-c-page__sidebar--BorderInlineEndWidth) solid var(--pf-v6-c-page__sidebar--BorderInlineEndColor);
12654
12672
  opacity: var(--pf-v6-c-page__sidebar--Opacity);
12655
12673
  transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
12656
12674
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
@@ -12666,7 +12684,7 @@ ul.pf-v6-c-list {
12666
12684
  }
12667
12685
  @media screen and (min-width: 75rem) {
12668
12686
  .pf-v6-c-page__sidebar.pf-m-expanded {
12669
- --pf-v6-c-page__sidebar--BoxShadow: none;
12687
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-v6-c-page__sidebar--BoxShadow);
12670
12688
  }
12671
12689
  }
12672
12690
  .pf-v6-c-page__sidebar.pf-m-collapsed {
@@ -12763,6 +12781,7 @@ ul.pf-v6-c-list {
12763
12781
  .pf-v6-c-page__main-group.pf-m-shadow-bottom,
12764
12782
  .pf-v6-c-page__main-subnav.pf-m-shadow-bottom {
12765
12783
  z-index: var(--pf-v6-c-page--section--m-shadow-bottom--ZIndex);
12784
+ border-block-end: var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor);
12766
12785
  box-shadow: var(--pf-v6-c-page--section--m-shadow-bottom--BoxShadow);
12767
12786
  }
12768
12787
  .pf-v6-c-page__main-breadcrumb.pf-m-shadow-top,
@@ -12772,6 +12791,7 @@ ul.pf-v6-c-list {
12772
12791
  .pf-v6-c-page__main-group.pf-m-shadow-top,
12773
12792
  .pf-v6-c-page__main-subnav.pf-m-shadow-top {
12774
12793
  z-index: var(--pf-v6-c-page--section--m-shadow-top--ZIndex);
12794
+ border-block-start: var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor);
12775
12795
  box-shadow: var(--pf-v6-c-page--section--m-shadow-top--BoxShadow);
12776
12796
  }
12777
12797
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top,
@@ -12783,6 +12803,7 @@ ul.pf-v6-c-list {
12783
12803
  position: sticky;
12784
12804
  inset-block-start: 0;
12785
12805
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12806
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12786
12807
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12787
12808
  }
12788
12809
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom,
@@ -12794,6 +12815,7 @@ ul.pf-v6-c-list {
12794
12815
  position: sticky;
12795
12816
  inset-block-end: 0;
12796
12817
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12818
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12797
12819
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12798
12820
  }
12799
12821
  @media (min-height: 0) {
@@ -12806,6 +12828,7 @@ ul.pf-v6-c-list {
12806
12828
  position: sticky;
12807
12829
  inset-block-start: 0;
12808
12830
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12831
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12809
12832
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12810
12833
  }
12811
12834
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
@@ -12817,6 +12840,7 @@ ul.pf-v6-c-list {
12817
12840
  position: sticky;
12818
12841
  inset-block-end: 0;
12819
12842
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12843
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12820
12844
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12821
12845
  }
12822
12846
  }
@@ -12830,6 +12854,7 @@ ul.pf-v6-c-list {
12830
12854
  position: sticky;
12831
12855
  inset-block-start: 0;
12832
12856
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12857
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12833
12858
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12834
12859
  }
12835
12860
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
@@ -12841,6 +12866,7 @@ ul.pf-v6-c-list {
12841
12866
  position: sticky;
12842
12867
  inset-block-end: 0;
12843
12868
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12869
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12844
12870
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12845
12871
  }
12846
12872
  }
@@ -12854,6 +12880,7 @@ ul.pf-v6-c-list {
12854
12880
  position: sticky;
12855
12881
  inset-block-start: 0;
12856
12882
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12883
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12857
12884
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12858
12885
  }
12859
12886
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
@@ -12865,6 +12892,7 @@ ul.pf-v6-c-list {
12865
12892
  position: sticky;
12866
12893
  inset-block-end: 0;
12867
12894
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12895
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12868
12896
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12869
12897
  }
12870
12898
  }
@@ -12878,6 +12906,7 @@ ul.pf-v6-c-list {
12878
12906
  position: sticky;
12879
12907
  inset-block-start: 0;
12880
12908
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12909
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12881
12910
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12882
12911
  }
12883
12912
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
@@ -12889,6 +12918,7 @@ ul.pf-v6-c-list {
12889
12918
  position: sticky;
12890
12919
  inset-block-end: 0;
12891
12920
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12921
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12892
12922
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12893
12923
  }
12894
12924
  }
@@ -12902,6 +12932,7 @@ ul.pf-v6-c-list {
12902
12932
  position: sticky;
12903
12933
  inset-block-start: 0;
12904
12934
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12935
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12905
12936
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12906
12937
  }
12907
12938
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
@@ -12913,6 +12944,7 @@ ul.pf-v6-c-list {
12913
12944
  position: sticky;
12914
12945
  inset-block-end: 0;
12915
12946
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12947
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12916
12948
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12917
12949
  }
12918
12950
  }
@@ -12925,7 +12957,11 @@ ul.pf-v6-c-list {
12925
12957
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
12926
12958
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
12927
12959
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
12928
- border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
12960
+ border: solid var(--pf-v6-c-page__main-container--BorderColor);
12961
+ border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
12962
+ border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
12963
+ border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth);
12964
+ border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
12929
12965
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
12930
12966
  }
12931
12967
  @media screen and (max-width: calc(48rem - 1px)) {
@@ -12935,6 +12971,9 @@ ul.pf-v6-c-list {
12935
12971
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12936
12972
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
12937
12973
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
12974
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
12975
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
12976
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
12938
12977
  }
12939
12978
  }
12940
12979
 
@@ -13055,8 +13094,8 @@ ul.pf-v6-c-list {
13055
13094
  gap: var(--pf-v6-c-page__main-section--RowGap);
13056
13095
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13057
13096
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13058
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13059
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13097
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13098
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13060
13099
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
13061
13100
  }
13062
13101
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -13065,8 +13104,8 @@ ul.pf-v6-c-list {
13065
13104
  .pf-v6-c-page__main-section.pf-m-padding {
13066
13105
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13067
13106
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13068
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13069
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13107
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13108
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13070
13109
  }
13071
13110
  .pf-v6-c-page__main-section.pf-m-no-padding {
13072
13111
  padding: 0;
@@ -13075,8 +13114,8 @@ ul.pf-v6-c-list {
13075
13114
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
13076
13115
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13077
13116
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13078
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13079
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13117
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13118
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13080
13119
  }
13081
13120
  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm {
13082
13121
  padding: 0;
@@ -13086,8 +13125,8 @@ ul.pf-v6-c-list {
13086
13125
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
13087
13126
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13088
13127
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13089
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13090
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13128
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13129
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13091
13130
  }
13092
13131
  .pf-v6-c-page__main-section.pf-m-no-padding-on-md {
13093
13132
  padding: 0;
@@ -13097,8 +13136,8 @@ ul.pf-v6-c-list {
13097
13136
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
13098
13137
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13099
13138
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13100
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13101
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13139
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13140
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13102
13141
  }
13103
13142
  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg {
13104
13143
  padding: 0;
@@ -13108,8 +13147,8 @@ ul.pf-v6-c-list {
13108
13147
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
13109
13148
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13110
13149
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13111
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13112
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13150
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13151
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13113
13152
  }
13114
13153
  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl {
13115
13154
  padding: 0;
@@ -13119,8 +13158,8 @@ ul.pf-v6-c-list {
13119
13158
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
13120
13159
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13121
13160
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13122
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13123
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13161
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13162
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13124
13163
  }
13125
13164
  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl {
13126
13165
  padding: 0;
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.3.0-prerelease.54",
4
+ "version": "6.3.0-prerelease.55",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
package/patternfly-no-globals.css CHANGED
@@ -21165,7 +21165,7 @@ ul.pf-v6-c-list {
21165
21165
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
21166
21166
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
21167
21167
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21168
- --pf-v6-c-page__sidebar--BoxShadow: none;
21168
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
21169
21169
  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
21170
21170
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
21171
21171
  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
@@ -21180,6 +21180,8 @@ ul.pf-v6-c-list {
21180
21180
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
21181
21181
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
21182
21182
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
21183
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21184
+ --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
21183
21185
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
21184
21186
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
21185
21187
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -21204,13 +21206,19 @@ ul.pf-v6-c-list {
21204
21206
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
21205
21207
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
21206
21208
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
21207
- --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--border--width--main--default);
21209
+ --pf-v6-c-page__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default);
21210
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default);
21211
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
21212
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
21208
21213
  --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
21209
21214
  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
21210
21215
  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
21211
21216
  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
21212
21217
  --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
21213
21218
  --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
21219
+ --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
21220
+ --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
21221
+ --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
21214
21222
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
21215
21223
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
21216
21224
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -21223,22 +21231,30 @@ ul.pf-v6-c-list {
21223
21231
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
21224
21232
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
21225
21233
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
21234
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21235
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
21226
21236
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
21227
21237
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21238
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
21239
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
21228
21240
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
21229
21241
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
21242
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21243
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
21230
21244
  --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21231
21245
  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
21246
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
21247
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
21232
21248
  --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21233
21249
  --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
21234
21250
  --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0;
21235
- --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
21236
- --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
21251
+ --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
21252
+ --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
21237
21253
  --pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
21238
21254
  --pf-v6-c-page__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
21239
- --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
21255
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
21240
21256
  --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: 0;
21241
- --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
21257
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
21242
21258
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21243
21259
  --pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
21244
21260
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
@@ -21261,6 +21277,7 @@ ul.pf-v6-c-list {
21261
21277
  .pf-v6-c-page {
21262
21278
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
21263
21279
  --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
21280
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
21264
21281
  }
21265
21282
  }
21266
21283
 
@@ -21354,6 +21371,7 @@ ul.pf-v6-c-list {
21354
21371
  overflow-y: auto;
21355
21372
  -webkit-overflow-scrolling: touch;
21356
21373
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
21374
+ border-inline-end: var(--pf-v6-c-page__sidebar--BorderInlineEndWidth) solid var(--pf-v6-c-page__sidebar--BorderInlineEndColor);
21357
21375
  opacity: var(--pf-v6-c-page__sidebar--Opacity);
21358
21376
  transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
21359
21377
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
@@ -21369,7 +21387,7 @@ ul.pf-v6-c-list {
21369
21387
  }
21370
21388
  @media screen and (min-width: 75rem) {
21371
21389
  .pf-v6-c-page__sidebar.pf-m-expanded {
21372
- --pf-v6-c-page__sidebar--BoxShadow: none;
21390
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-v6-c-page__sidebar--BoxShadow);
21373
21391
  }
21374
21392
  }
21375
21393
  .pf-v6-c-page__sidebar.pf-m-collapsed {
@@ -21466,6 +21484,7 @@ ul.pf-v6-c-list {
21466
21484
  .pf-v6-c-page__main-group.pf-m-shadow-bottom,
21467
21485
  .pf-v6-c-page__main-subnav.pf-m-shadow-bottom {
21468
21486
  z-index: var(--pf-v6-c-page--section--m-shadow-bottom--ZIndex);
21487
+ border-block-end: var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor);
21469
21488
  box-shadow: var(--pf-v6-c-page--section--m-shadow-bottom--BoxShadow);
21470
21489
  }
21471
21490
  .pf-v6-c-page__main-breadcrumb.pf-m-shadow-top,
@@ -21475,6 +21494,7 @@ ul.pf-v6-c-list {
21475
21494
  .pf-v6-c-page__main-group.pf-m-shadow-top,
21476
21495
  .pf-v6-c-page__main-subnav.pf-m-shadow-top {
21477
21496
  z-index: var(--pf-v6-c-page--section--m-shadow-top--ZIndex);
21497
+ border-block-start: var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor);
21478
21498
  box-shadow: var(--pf-v6-c-page--section--m-shadow-top--BoxShadow);
21479
21499
  }
21480
21500
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top,
@@ -21486,6 +21506,7 @@ ul.pf-v6-c-list {
21486
21506
  position: sticky;
21487
21507
  inset-block-start: 0;
21488
21508
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
21509
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
21489
21510
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
21490
21511
  }
21491
21512
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom,
@@ -21497,6 +21518,7 @@ ul.pf-v6-c-list {
21497
21518
  position: sticky;
21498
21519
  inset-block-end: 0;
21499
21520
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
21521
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
21500
21522
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
21501
21523
  }
21502
21524
  @media (min-height: 0) {
@@ -21509,6 +21531,7 @@ ul.pf-v6-c-list {
21509
21531
  position: sticky;
21510
21532
  inset-block-start: 0;
21511
21533
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
21534
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
21512
21535
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
21513
21536
  }
21514
21537
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
@@ -21520,6 +21543,7 @@ ul.pf-v6-c-list {
21520
21543
  position: sticky;
21521
21544
  inset-block-end: 0;
21522
21545
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
21546
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
21523
21547
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
21524
21548
  }
21525
21549
  }
@@ -21533,6 +21557,7 @@ ul.pf-v6-c-list {
21533
21557
  position: sticky;
21534
21558
  inset-block-start: 0;
21535
21559
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
21560
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
21536
21561
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
21537
21562
  }
21538
21563
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
@@ -21544,6 +21569,7 @@ ul.pf-v6-c-list {
21544
21569
  position: sticky;
21545
21570
  inset-block-end: 0;
21546
21571
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
21572
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
21547
21573
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
21548
21574
  }
21549
21575
  }
@@ -21557,6 +21583,7 @@ ul.pf-v6-c-list {
21557
21583
  position: sticky;
21558
21584
  inset-block-start: 0;
21559
21585
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
21586
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
21560
21587
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
21561
21588
  }
21562
21589
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
@@ -21568,6 +21595,7 @@ ul.pf-v6-c-list {
21568
21595
  position: sticky;
21569
21596
  inset-block-end: 0;
21570
21597
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
21598
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
21571
21599
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
21572
21600
  }
21573
21601
  }
@@ -21581,6 +21609,7 @@ ul.pf-v6-c-list {
21581
21609
  position: sticky;
21582
21610
  inset-block-start: 0;
21583
21611
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
21612
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
21584
21613
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
21585
21614
  }
21586
21615
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
@@ -21592,6 +21621,7 @@ ul.pf-v6-c-list {
21592
21621
  position: sticky;
21593
21622
  inset-block-end: 0;
21594
21623
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
21624
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
21595
21625
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
21596
21626
  }
21597
21627
  }
@@ -21605,6 +21635,7 @@ ul.pf-v6-c-list {
21605
21635
  position: sticky;
21606
21636
  inset-block-start: 0;
21607
21637
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
21638
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
21608
21639
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
21609
21640
  }
21610
21641
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
@@ -21616,6 +21647,7 @@ ul.pf-v6-c-list {
21616
21647
  position: sticky;
21617
21648
  inset-block-end: 0;
21618
21649
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
21650
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
21619
21651
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
21620
21652
  }
21621
21653
  }
@@ -21628,7 +21660,11 @@ ul.pf-v6-c-list {
21628
21660
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
21629
21661
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
21630
21662
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
21631
- border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
21663
+ border: solid var(--pf-v6-c-page__main-container--BorderColor);
21664
+ border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
21665
+ border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
21666
+ border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth);
21667
+ border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
21632
21668
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
21633
21669
  }
21634
21670
  @media screen and (max-width: calc(48rem - 1px)) {
@@ -21638,6 +21674,9 @@ ul.pf-v6-c-list {
21638
21674
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
21639
21675
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
21640
21676
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
21677
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
21678
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
21679
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
21641
21680
  }
21642
21681
  }
21643
21682
 
@@ -21758,8 +21797,8 @@ ul.pf-v6-c-list {
21758
21797
  gap: var(--pf-v6-c-page__main-section--RowGap);
21759
21798
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
21760
21799
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
21761
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
21762
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
21800
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
21801
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
21763
21802
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
21764
21803
  }
21765
21804
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -21768,8 +21807,8 @@ ul.pf-v6-c-list {
21768
21807
  .pf-v6-c-page__main-section.pf-m-padding {
21769
21808
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
21770
21809
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
21771
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
21772
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
21810
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
21811
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
21773
21812
  }
21774
21813
  .pf-v6-c-page__main-section.pf-m-no-padding {
21775
21814
  padding: 0;
@@ -21778,8 +21817,8 @@ ul.pf-v6-c-list {
21778
21817
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
21779
21818
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
21780
21819
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
21781
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
21782
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
21820
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
21821
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
21783
21822
  }
21784
21823
  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm {
21785
21824
  padding: 0;
@@ -21789,8 +21828,8 @@ ul.pf-v6-c-list {
21789
21828
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
21790
21829
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
21791
21830
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
21792
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
21793
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
21831
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
21832
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
21794
21833
  }
21795
21834
  .pf-v6-c-page__main-section.pf-m-no-padding-on-md {
21796
21835
  padding: 0;
@@ -21800,8 +21839,8 @@ ul.pf-v6-c-list {
21800
21839
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
21801
21840
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
21802
21841
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
21803
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
21804
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
21842
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
21843
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
21805
21844
  }
21806
21845
  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg {
21807
21846
  padding: 0;
@@ -21811,8 +21850,8 @@ ul.pf-v6-c-list {
21811
21850
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
21812
21851
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
21813
21852
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
21814
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
21815
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
21853
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
21854
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
21816
21855
  }
21817
21856
  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl {
21818
21857
  padding: 0;
@@ -21822,8 +21861,8 @@ ul.pf-v6-c-list {
21822
21861
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
21823
21862
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
21824
21863
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
21825
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
21826
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
21864
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
21865
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
21827
21866
  }
21828
21867
  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl {
21829
21868
  padding: 0;