@patternfly/patternfly 6.5.0-prerelease.30 → 6.5.0-prerelease.31

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/Drawer/drawer.css +30 -26
  2. package/components/Drawer/drawer.scss +7 -3
  3. package/components/_index.css +30 -26
  4. package/package.json +2 -2
  5. package/patternfly-no-globals.css +30 -26
  6. package/patternfly.css +30 -26
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Drawer/drawer.css CHANGED
@@ -173,7 +173,7 @@
173
173
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
174
174
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
175
175
  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
176
- --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
176
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
177
177
  }
178
178
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
179
179
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -202,7 +202,7 @@
202
202
  visibility: visible;
203
203
  }
204
204
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
205
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
205
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
206
206
  }
207
207
 
208
208
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -551,82 +551,86 @@
551
551
  }
552
552
  @media (min-width: 48rem) {
553
553
  .pf-v6-c-drawer__panel.pf-m-width-25 {
554
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
554
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
555
555
  }
556
556
  .pf-v6-c-drawer__panel.pf-m-width-33 {
557
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
557
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
558
558
  }
559
559
  .pf-v6-c-drawer__panel.pf-m-width-50 {
560
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
560
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
561
561
  }
562
562
  .pf-v6-c-drawer__panel.pf-m-width-66 {
563
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
563
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
564
564
  }
565
565
  .pf-v6-c-drawer__panel.pf-m-width-75 {
566
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
566
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
567
567
  }
568
568
  .pf-v6-c-drawer__panel.pf-m-width-100 {
569
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
569
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
570
+ --pf-v6-c-drawer__main--Gap: 0;
570
571
  }
571
572
  }
572
573
  @media (min-width: 62rem) {
573
574
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
574
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
575
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
575
576
  }
576
577
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
577
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
578
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
578
579
  }
579
580
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
580
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
581
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
581
582
  }
582
583
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
583
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
584
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
584
585
  }
585
586
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
586
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
587
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
587
588
  }
588
589
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
589
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
590
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
591
+ --pf-v6-c-drawer__main--Gap: 0;
590
592
  }
591
593
  }
592
594
  @media (min-width: 75rem) {
593
595
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
594
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
596
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
595
597
  }
596
598
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
597
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
599
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
598
600
  }
599
601
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
600
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
602
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
601
603
  }
602
604
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
603
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
605
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
604
606
  }
605
607
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
606
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
608
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
607
609
  }
608
610
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
609
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
611
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
612
+ --pf-v6-c-drawer__main--Gap: 0;
610
613
  }
611
614
  }
612
615
  @media (min-width: 90.625rem) {
613
616
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
614
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
617
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
615
618
  }
616
619
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
617
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
620
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
618
621
  }
619
622
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
620
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
623
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
621
624
  }
622
625
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
623
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
626
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
624
627
  }
625
628
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
626
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
629
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
627
630
  }
628
631
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
629
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
632
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
633
+ --pf-v6-c-drawer__main--Gap: 0;
630
634
  }
631
635
  }
632
636
  @media (min-width: 48rem) {
package/components/Drawer/drawer.scss CHANGED
@@ -215,7 +215,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
215
215
  --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-inline--BackgroundColor);
216
216
  --#{$drawer}__panel--BorderInlineStartWidth: var(--#{$drawer}--m-inline__panel--after--Width);
217
217
  --#{$drawer}--m-pill__main--Gap: var(--#{$drawer}--m-pill--m-inline__main--Gap);
218
- --#{$drawer}--m-pill--m-expanded__panel--inset: 0;
218
+ --#{$drawer}--m-pill--m-expanded__panel--inset: 0px;
219
219
 
220
220
  > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
221
221
  padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingInlineStart);
@@ -252,7 +252,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
252
252
  @include pf-v6-bidirectional-style(
253
253
  $prop: transform,
254
254
  $ltr-val: translateX(calc(-100% - var(--#{$drawer}--m-expanded__panel--inset))),
255
- $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
255
+ $rtl-val: translateX(#{pf-v6-calc-inverse(calc(-100% - var(--#{$drawer}--m-expanded__panel--inset)))}),
256
256
  );
257
257
 
258
258
  --#{$drawer}__panel--Opacity: var(--#{$drawer}--m-expanded__panel--Opacity);
@@ -712,7 +712,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
712
712
  @include pf-v6-apply-breakpoint($breakpoint) {
713
713
  @each $width-value in $pf-v6-c-drawer__panel--list--width {
714
714
  .#{$drawer}__panel.pf-m-width-#{$width-value}#{$breakpoint-name} {
715
- --#{$drawer}__panel--md--FlexBasis: #{percentage(math.div($width-value, 100))};
715
+ --#{$drawer}__panel--md--FlexBasis: calc(#{percentage(math.div($width-value, 100))} - (2 * var(--#{$drawer}--m-expanded__panel--inset)));
716
+
717
+ @if $width-value == 100 {
718
+ --#{$drawer}__main--Gap: 0; // Reset gap for width-100 inline pill drawers to prevent misalignment
719
+ }
716
720
  }
717
721
  }
718
722
  }
package/components/_index.css CHANGED
@@ -6247,7 +6247,7 @@ ul) {
6247
6247
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
6248
6248
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
6249
6249
  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
6250
- --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
6250
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
6251
6251
  }
6252
6252
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6253
6253
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -6276,7 +6276,7 @@ ul) {
6276
6276
  visibility: visible;
6277
6277
  }
6278
6278
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6279
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
6279
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
6280
6280
  }
6281
6281
 
6282
6282
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -6625,82 +6625,86 @@ ul) {
6625
6625
  }
6626
6626
  @media (min-width: 48rem) {
6627
6627
  .pf-v6-c-drawer__panel.pf-m-width-25 {
6628
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6628
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6629
6629
  }
6630
6630
  .pf-v6-c-drawer__panel.pf-m-width-33 {
6631
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6631
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6632
6632
  }
6633
6633
  .pf-v6-c-drawer__panel.pf-m-width-50 {
6634
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6634
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6635
6635
  }
6636
6636
  .pf-v6-c-drawer__panel.pf-m-width-66 {
6637
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6637
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6638
6638
  }
6639
6639
  .pf-v6-c-drawer__panel.pf-m-width-75 {
6640
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6640
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6641
6641
  }
6642
6642
  .pf-v6-c-drawer__panel.pf-m-width-100 {
6643
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6643
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6644
+ --pf-v6-c-drawer__main--Gap: 0;
6644
6645
  }
6645
6646
  }
6646
6647
  @media (min-width: 62rem) {
6647
6648
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
6648
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6649
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6649
6650
  }
6650
6651
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
6651
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6652
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6652
6653
  }
6653
6654
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
6654
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6655
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6655
6656
  }
6656
6657
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
6657
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6658
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6658
6659
  }
6659
6660
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
6660
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6661
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6661
6662
  }
6662
6663
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
6663
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6664
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6665
+ --pf-v6-c-drawer__main--Gap: 0;
6664
6666
  }
6665
6667
  }
6666
6668
  @media (min-width: 75rem) {
6667
6669
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
6668
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6670
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6669
6671
  }
6670
6672
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
6671
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6673
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6672
6674
  }
6673
6675
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
6674
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6676
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6675
6677
  }
6676
6678
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
6677
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6679
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6678
6680
  }
6679
6681
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
6680
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6682
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6681
6683
  }
6682
6684
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
6683
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6685
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6686
+ --pf-v6-c-drawer__main--Gap: 0;
6684
6687
  }
6685
6688
  }
6686
6689
  @media (min-width: 90.625rem) {
6687
6690
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
6688
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6691
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6689
6692
  }
6690
6693
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
6691
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6694
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6692
6695
  }
6693
6696
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
6694
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6697
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6695
6698
  }
6696
6699
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
6697
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6700
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6698
6701
  }
6699
6702
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
6700
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6703
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6701
6704
  }
6702
6705
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
6703
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6706
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6707
+ --pf-v6-c-drawer__main--Gap: 0;
6704
6708
  }
6705
6709
  }
6706
6710
  @media (min-width: 48rem) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.30",
4
+ "version": "6.5.0-prerelease.31",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -48,7 +48,7 @@
48
48
  "@commitlint/config-conventional": "^19.1.0",
49
49
  "@fortawesome/fontawesome": "^1.1.8",
50
50
  "@octokit/rest": "^20.1.0",
51
- "@patternfly/documentation-framework": "6.31.13",
51
+ "@patternfly/documentation-framework": "6.31.15",
52
52
  "@patternfly/patternfly-a11y": "5.1.0",
53
53
  "@patternfly/react-code-editor": "6.4.0",
54
54
  "@patternfly/react-core": "6.4.0",
package/patternfly-no-globals.css CHANGED
@@ -15002,7 +15002,7 @@ ul) {
15002
15002
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
15003
15003
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
15004
15004
  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
15005
- --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
15005
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
15006
15006
  }
15007
15007
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
15008
15008
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -15031,7 +15031,7 @@ ul) {
15031
15031
  visibility: visible;
15032
15032
  }
15033
15033
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15034
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
15034
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
15035
15035
  }
15036
15036
 
15037
15037
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -15380,82 +15380,86 @@ ul) {
15380
15380
  }
15381
15381
  @media (min-width: 48rem) {
15382
15382
  .pf-v6-c-drawer__panel.pf-m-width-25 {
15383
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15383
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15384
15384
  }
15385
15385
  .pf-v6-c-drawer__panel.pf-m-width-33 {
15386
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15386
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15387
15387
  }
15388
15388
  .pf-v6-c-drawer__panel.pf-m-width-50 {
15389
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15389
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15390
15390
  }
15391
15391
  .pf-v6-c-drawer__panel.pf-m-width-66 {
15392
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15392
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15393
15393
  }
15394
15394
  .pf-v6-c-drawer__panel.pf-m-width-75 {
15395
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15395
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15396
15396
  }
15397
15397
  .pf-v6-c-drawer__panel.pf-m-width-100 {
15398
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15398
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15399
+ --pf-v6-c-drawer__main--Gap: 0;
15399
15400
  }
15400
15401
  }
15401
15402
  @media (min-width: 62rem) {
15402
15403
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
15403
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15404
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15404
15405
  }
15405
15406
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
15406
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15407
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15407
15408
  }
15408
15409
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
15409
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15410
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15410
15411
  }
15411
15412
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
15412
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15413
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15413
15414
  }
15414
15415
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
15415
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15416
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15416
15417
  }
15417
15418
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
15418
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15419
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15420
+ --pf-v6-c-drawer__main--Gap: 0;
15419
15421
  }
15420
15422
  }
15421
15423
  @media (min-width: 75rem) {
15422
15424
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
15423
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15425
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15424
15426
  }
15425
15427
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
15426
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15428
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15427
15429
  }
15428
15430
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
15429
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15431
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15430
15432
  }
15431
15433
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
15432
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15434
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15433
15435
  }
15434
15436
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
15435
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15437
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15436
15438
  }
15437
15439
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
15438
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15440
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15441
+ --pf-v6-c-drawer__main--Gap: 0;
15439
15442
  }
15440
15443
  }
15441
15444
  @media (min-width: 90.625rem) {
15442
15445
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
15443
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15446
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15444
15447
  }
15445
15448
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
15446
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15449
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15447
15450
  }
15448
15451
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
15449
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15452
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15450
15453
  }
15451
15454
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
15452
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15455
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15453
15456
  }
15454
15457
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
15455
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15458
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15456
15459
  }
15457
15460
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
15458
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15461
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15462
+ --pf-v6-c-drawer__main--Gap: 0;
15459
15463
  }
15460
15464
  }
15461
15465
  @media (min-width: 48rem) {
package/patternfly.css CHANGED
@@ -15149,7 +15149,7 @@ ul) {
15149
15149
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
15150
15150
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
15151
15151
  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
15152
- --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
15152
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
15153
15153
  }
15154
15154
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
15155
15155
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -15178,7 +15178,7 @@ ul) {
15178
15178
  visibility: visible;
15179
15179
  }
15180
15180
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15181
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
15181
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
15182
15182
  }
15183
15183
 
15184
15184
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -15527,82 +15527,86 @@ ul) {
15527
15527
  }
15528
15528
  @media (min-width: 48rem) {
15529
15529
  .pf-v6-c-drawer__panel.pf-m-width-25 {
15530
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15530
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15531
15531
  }
15532
15532
  .pf-v6-c-drawer__panel.pf-m-width-33 {
15533
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15533
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15534
15534
  }
15535
15535
  .pf-v6-c-drawer__panel.pf-m-width-50 {
15536
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15536
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15537
15537
  }
15538
15538
  .pf-v6-c-drawer__panel.pf-m-width-66 {
15539
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15539
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15540
15540
  }
15541
15541
  .pf-v6-c-drawer__panel.pf-m-width-75 {
15542
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15542
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15543
15543
  }
15544
15544
  .pf-v6-c-drawer__panel.pf-m-width-100 {
15545
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15545
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15546
+ --pf-v6-c-drawer__main--Gap: 0;
15546
15547
  }
15547
15548
  }
15548
15549
  @media (min-width: 62rem) {
15549
15550
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
15550
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15551
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15551
15552
  }
15552
15553
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
15553
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15554
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15554
15555
  }
15555
15556
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
15556
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15557
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15557
15558
  }
15558
15559
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
15559
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15560
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15560
15561
  }
15561
15562
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
15562
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15563
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15563
15564
  }
15564
15565
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
15565
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15566
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15567
+ --pf-v6-c-drawer__main--Gap: 0;
15566
15568
  }
15567
15569
  }
15568
15570
  @media (min-width: 75rem) {
15569
15571
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
15570
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15572
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15571
15573
  }
15572
15574
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
15573
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15575
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15574
15576
  }
15575
15577
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
15576
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15578
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15577
15579
  }
15578
15580
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
15579
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15581
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15580
15582
  }
15581
15583
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
15582
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15584
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15583
15585
  }
15584
15586
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
15585
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15587
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15588
+ --pf-v6-c-drawer__main--Gap: 0;
15586
15589
  }
15587
15590
  }
15588
15591
  @media (min-width: 90.625rem) {
15589
15592
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
15590
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15593
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15591
15594
  }
15592
15595
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
15593
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15596
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15594
15597
  }
15595
15598
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
15596
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15599
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15597
15600
  }
15598
15601
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
15599
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15602
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15600
15603
  }
15601
15604
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
15602
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15605
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15603
15606
  }
15604
15607
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
15605
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15608
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15609
+ --pf-v6-c-drawer__main--Gap: 0;
15606
15610
  }
15607
15611
  }
15608
15612
  @media (min-width: 48rem) {