@patternfly/patternfly 6.5.0-prerelease.60 → 6.5.0-prerelease.61

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 +107 -17
  2. package/components/Drawer/drawer.scss +109 -17
  3. package/components/_index.css +107 -17
  4. package/package.json +2 -2
  5. package/patternfly-no-globals.css +107 -17
  6. package/patternfly.css +107 -17
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -15632,45 +15632,85 @@ ul) {
15632
15632
  --pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15633
15633
  --pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15634
15634
  --pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
15635
- --pf-v6-c-drawer__splitter--Height: 0.5625rem;
15635
+ --pf-v6-c-drawer__splitter--Height: 0.75rem;
15636
15636
  --pf-v6-c-drawer__splitter--Width: 100%;
15637
- --pf-v6-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15637
+ --pf-v6-c-drawer__splitter--BackgroundColor: transparent;
15638
15638
  --pf-v6-c-drawer__splitter--Cursor: row-resize;
15639
15639
  --pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
15640
- --pf-v6-c-drawer__splitter--m-vertical--Width: 0.5625rem;
15640
+ --pf-v6-c-drawer__splitter--m-vertical--Width: 0.75rem;
15641
15641
  --pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
15642
+ --pf-v6-c-drawer__splitter--focus--OutlineOffset: -0.0625rem;
15642
15643
  --pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
15643
15644
  --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
15645
+ --pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--default);
15646
+ --pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--default);
15647
+ --pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-t--global--border--color--default);
15644
15648
  --pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
15645
15649
  --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
15646
15650
  --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
15647
15651
  --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
15648
15652
  --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
15653
+ --pf-v6-c-drawer__splitter--after--InsetBlockStart: 0;
15654
+ --pf-v6-c-drawer__splitter--after--InsetBlockEnd: 0;
15655
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: 0;
15656
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: 0;
15657
+ --pf-v6-c-drawer__splitter--after--Width: auto;
15658
+ --pf-v6-c-drawer__splitter--after--Height: auto;
15649
15659
  --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
15650
15660
  --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
15651
- --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
15661
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--Width: 0.625rem;
15662
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--Height: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
15663
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
15664
+ --pf-v6-c-drawer--m-pill__splitter--after--BorderColor: transparent;
15665
+ --pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth: 0;
15666
+ --pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
15667
+ --pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
15668
+ --pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor: var(--pf-t--global--border--color--clicked);
15669
+ --pf-v6-c-drawer--m-pill__splitter--after--Width: 0.0625rem;
15670
+ --pf-v6-c-drawer--m-pill__splitter--after--Height: auto;
15671
+ --pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart: 50%;
15672
+ --pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd: auto;
15673
+ --pf-v6-c-drawer--m-pill__splitter--after--TranslateX: -50%;
15674
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height: 0.5rem;
15675
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
15676
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
15677
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width: auto;
15678
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height: 0.0625rem;
15679
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
15680
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth: 0;
15681
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart: 50%;
15682
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd: auto;
15683
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart: 0;
15684
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd: 0;
15685
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY: -50%;
15686
+ --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.75rem;
15652
15687
  --pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
15653
- --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
15688
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.75rem;
15654
15689
  --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
15655
15690
  --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
15656
15691
  --pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
15657
- --pf-v6-c-drawer__splitter-handle--InsetInlineStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
15692
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: 50%;
15658
15693
  --pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
15659
- --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
15660
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
15694
+ --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
15695
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-t--global--border--color--control--default);
15696
+ --pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor: var(--pf-t--global--border--color--hover);
15697
+ --pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
15698
+ --pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
15699
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
15661
15700
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
15662
15701
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
15663
15702
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
15664
15703
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
15665
- --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
15704
+ --pf-v6-c-drawer__splitter-handle--after--BorderRadius: var(--pf-t--global--border--radius--pill);
15705
+ --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--color--brand--hover);
15666
15706
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
15667
15707
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
15668
15708
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
15669
15709
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
15670
- --pf-v6-c-drawer__splitter-handle--after--Width: 0.75rem;
15710
+ --pf-v6-c-drawer__splitter-handle--after--Width: 2.1875rem;
15671
15711
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
15672
15712
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
15673
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
15713
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 2.1875rem;
15674
15714
  }
15675
15715
  @media screen and (min-width: 75rem) {
15676
15716
  .pf-v6-c-drawer {
@@ -15782,6 +15822,19 @@ ul) {
15782
15822
  --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
15783
15823
  --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
15784
15824
  --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
15825
+ --pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Width);
15826
+ --pf-v6-c-drawer__splitter--m-vertical--Height: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Height);
15827
+ --pf-v6-c-drawer__splitter--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart);
15828
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderColor);
15829
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth);
15830
+ --pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor);
15831
+ --pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor);
15832
+ --pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor);
15833
+ --pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill__splitter--after--Width);
15834
+ --pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill__splitter--after--Height);
15835
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart);
15836
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd);
15837
+ --pf-v6-c-drawer__splitter--after--TranslateX: var(--pf-v6-c-drawer--m-pill__splitter--after--TranslateX);
15785
15838
  }
15786
15839
  .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15787
15840
  border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
@@ -15790,6 +15843,25 @@ ul) {
15790
15843
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
15791
15844
  }
15792
15845
  }
15846
+ @media screen and (min-width: 48rem) {
15847
+ .pf-v6-c-drawer.pf-m-pill.pf-m-panel-bottom {
15848
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height);
15849
+ --pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width);
15850
+ --pf-v6-c-drawer__splitter--MarginBlockStart: 0;
15851
+ --pf-v6-c-drawer__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart);
15852
+ --pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width);
15853
+ --pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height);
15854
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth);
15855
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
15856
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
15857
+ --pf-v6-c-drawer__splitter--after--InsetBlockStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart);
15858
+ --pf-v6-c-drawer__splitter--after--InsetBlockEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd);
15859
+ --pf-v6-c-drawer__splitter--after--TranslateX: initial;
15860
+ --pf-v6-c-drawer__splitter--after--TranslateY: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY);
15861
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart);
15862
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd);
15863
+ }
15864
+ }
15793
15865
 
15794
15866
  .pf-v6-c-drawer__section {
15795
15867
  flex-grow: 0;
@@ -15954,8 +16026,11 @@ ul) {
15954
16026
  display: none;
15955
16027
  width: var(--pf-v6-c-drawer__splitter--Width);
15956
16028
  height: var(--pf-v6-c-drawer__splitter--Height);
16029
+ margin-block-start: var(--pf-v6-c-drawer__splitter--MarginBlockStart, 0);
16030
+ margin-inline-start: var(--pf-v6-c-drawer__splitter--MarginInlineStart, 0);
15957
16031
  cursor: var(--pf-v6-c-drawer__splitter--Cursor);
15958
16032
  background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
16033
+ outline-offset: var(--pf-v6-c-drawer__splitter--focus--OutlineOffset);
15959
16034
  }
15960
16035
  .pf-v6-c-drawer__splitter.pf-m-vertical {
15961
16036
  --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
@@ -15968,21 +16043,34 @@ ul) {
15968
16043
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
15969
16044
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
15970
16045
  }
15971
- .pf-v6-c-drawer__splitter:hover, .pf-v6-c-drawer__splitter:focus {
15972
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
16046
+ .pf-v6-c-drawer__splitter:hover {
16047
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor);
16048
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover--after--BorderColor);
16049
+ }
16050
+ .pf-v6-c-drawer__splitter:focus {
16051
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor);
16052
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--focus--after--BorderColor);
16053
+ }
16054
+ .pf-v6-c-drawer__splitter:active {
16055
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor);
16056
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--active--after--BorderColor);
15973
16057
  }
15974
16058
  .pf-v6-c-drawer__splitter::after {
15975
16059
  position: absolute;
15976
- inset-block-start: 0;
15977
- inset-block-end: 0;
15978
- inset-inline-start: 0;
15979
- inset-inline-end: 0;
16060
+ inset-block-start: var(--pf-v6-c-drawer__splitter--after--InsetBlockStart);
16061
+ inset-block-end: var(--pf-v6-c-drawer__splitter--after--InsetBlockEnd);
16062
+ inset-inline-start: var(--pf-v6-c-drawer__splitter--after--InsetInlineStart);
16063
+ inset-inline-end: var(--pf-v6-c-drawer__splitter--after--InsetInlineEnd);
16064
+ z-index: -1;
16065
+ width: var(--pf-v6-c-drawer__splitter--after--Width);
16066
+ height: var(--pf-v6-c-drawer__splitter--after--Height);
15980
16067
  content: "";
15981
16068
  border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
15982
16069
  border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
15983
16070
  border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
15984
16071
  border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
15985
16072
  border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
16073
+ translate: var(--pf-v6-c-drawer__splitter--after--TranslateX, 0) var(--pf-v6-c-drawer__splitter--after--TranslateY, 0);
15986
16074
  }
15987
16075
 
15988
16076
  .pf-v6-c-drawer__splitter-handle {
@@ -16000,12 +16088,14 @@ ul) {
16000
16088
  width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
16001
16089
  height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
16002
16090
  content: "";
16091
+ background-color: var(--pf-v6-c-drawer__splitter-handle--after--BackgroundColor);
16003
16092
  border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
16004
16093
  border-style: solid;
16005
16094
  border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
16006
16095
  border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
16007
16096
  border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
16008
16097
  border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
16098
+ border-radius: var(--pf-v6-c-drawer__splitter-handle--after--BorderRadius);
16009
16099
  }
16010
16100
 
16011
16101
  @media screen and (min-width: 48rem) {