@patternfly/patternfly 6.0.0-alpha.163 → 6.0.0-alpha.165

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 (12) hide show
  1. package/components/JumpLinks/jump-links.css +4 -14
  2. package/components/JumpLinks/jump-links.scss +4 -15
  3. package/components/Panel/panel.css +17 -14
  4. package/components/Panel/panel.scss +17 -14
  5. package/components/_index.css +21 -28
  6. package/docs/components/Panel/examples/Panel.md +1 -0
  7. package/docs/demos/Panel/Panel.md +88 -0
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +21 -28
  10. package/patternfly.css +21 -28
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -13740,18 +13740,14 @@ label.pf-v6-c-input-group__text {
13740
13740
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
13741
13741
  --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
13742
13742
  --pf-v6-c-jump-links__label--Display: block;
13743
- --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
13744
- --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
13745
- --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
13746
- --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: calc(var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
13747
- --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
13743
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
13744
+ --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
13748
13745
  --pf-v6-c-jump-links__toggle--Display: none;
13749
- --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
13746
+ --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
13750
13747
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
13751
13748
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
13752
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
13753
13749
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
13754
- --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
13750
+ --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
13755
13751
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
13756
13752
  }
13757
13753
 
@@ -13935,13 +13931,7 @@ label.pf-v6-c-input-group__text {
13935
13931
 
13936
13932
  .pf-v6-c-jump-links__toggle {
13937
13933
  display: var(--pf-v6-c-jump-links__toggle--Display);
13938
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
13939
13934
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
13940
- margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
13941
- }
13942
- .pf-v6-c-jump-links__toggle .pf-v6-c-button {
13943
- display: flex;
13944
- align-items: center;
13945
13935
  }
13946
13936
 
13947
13937
  .pf-v6-c-jump-links__toggle-icon {
@@ -18712,43 +18702,44 @@ ul.pf-v6-c-list {
18712
18702
  --pf-v6-c-panel--Width: auto;
18713
18703
  --pf-v6-c-panel--MinWidth: auto;
18714
18704
  --pf-v6-c-panel--MaxWidth: none;
18715
- --pf-v6-c-panel--ZIndex: auto;
18716
18705
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18717
18706
  --pf-v6-c-panel--BoxShadow: none;
18707
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
18718
18708
  --pf-v6-c-panel--before--BorderWidth: 0;
18719
18709
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
18720
18710
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18721
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
18711
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
18722
18712
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
18723
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
18724
18713
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
18725
18714
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
18726
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18715
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18727
18716
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18728
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
18717
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18729
18718
  --pf-v6-c-panel__main--MaxHeight: none;
18730
18719
  --pf-v6-c-panel__main--Overflow: visible;
18731
18720
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
18732
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18721
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18733
18722
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18734
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
18735
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18736
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18737
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18738
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
18723
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18724
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18725
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18726
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18727
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18739
18728
  --pf-v6-c-panel__footer--BoxShadow: none;
18740
18729
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
18741
18730
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
18742
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
18731
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
18732
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18733
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18743
18734
  }
18744
18735
 
18745
18736
  .pf-v6-c-panel {
18746
18737
  position: relative;
18747
- z-index: var(--pf-v6-c-panel--ZIndex);
18748
18738
  width: var(--pf-v6-c-panel--Width);
18749
18739
  min-width: var(--pf-v6-c-panel--MinWidth);
18750
18740
  max-width: var(--pf-v6-c-panel--MaxWidth);
18751
18741
  background-color: var(--pf-v6-c-panel--BackgroundColor);
18742
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18752
18743
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
18753
18744
  }
18754
18745
  .pf-v6-c-panel::before {
@@ -18757,6 +18748,7 @@ ul.pf-v6-c-list {
18757
18748
  pointer-events: none;
18758
18749
  content: "";
18759
18750
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
18751
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18760
18752
  }
18761
18753
  .pf-v6-c-panel.pf-m-bordered {
18762
18754
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -18767,12 +18759,13 @@ ul.pf-v6-c-list {
18767
18759
  .pf-v6-c-panel.pf-m-raised {
18768
18760
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
18769
18761
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
18770
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
18771
18762
  }
18772
18763
  .pf-v6-c-panel.pf-m-scrollable {
18773
18764
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
18774
18765
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
18775
18766
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
18767
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
18768
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
18776
18769
  }
18777
18770
 
18778
18771
  .pf-v6-c-panel__header {