@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/components/JumpLinks/jump-links.css CHANGED
@@ -41,18 +41,14 @@
41
41
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
42
42
  --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
43
43
  --pf-v6-c-jump-links__label--Display: block;
44
- --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
45
- --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
46
- --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
47
- --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));
48
- --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
44
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
45
+ --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
49
46
  --pf-v6-c-jump-links__toggle--Display: none;
50
- --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
47
+ --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
51
48
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
52
49
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
53
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
54
50
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
55
- --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
51
+ --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
56
52
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
57
53
  }
58
54
 
@@ -236,13 +232,7 @@
236
232
 
237
233
  .pf-v6-c-jump-links__toggle {
238
234
  display: var(--pf-v6-c-jump-links__toggle--Display);
239
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
240
235
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
241
- margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
242
- }
243
- .pf-v6-c-jump-links__toggle .pf-v6-c-button {
244
- display: flex;
245
- align-items: center;
246
236
  }
247
237
 
248
238
  .pf-v6-c-jump-links__toggle-icon {
package/components/JumpLinks/jump-links.scss CHANGED
@@ -56,22 +56,18 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
56
56
  --#{$jump-links}__label--Display: block;
57
57
 
58
58
  // toggle
59
- --#{$jump-links}__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
60
- --#{$jump-links}__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
61
- --#{$jump-links}__toggle--MarginBlockEnd: var(--#{$jump-links}__toggle--MarginBlockEnd--base);
62
- --#{$jump-links}--m-expanded__toggle--MarginBlockEnd: calc(var(--#{$jump-links}__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
63
- --#{$jump-links}__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
59
+ --#{$jump-links}__toggle--MarginBlockEnd: 0;
60
+ --#{$jump-links}--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
64
61
  --#{$jump-links}__toggle--Display: none;
65
62
 
66
63
  // toggle icon
67
- --#{$jump-links}__toggle-icon--Color: currentcolor;
64
+ --#{$jump-links}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
68
65
  --#{$jump-links}__toggle-icon--Transition: var(--pf-t--global--transition);
69
66
  --#{$jump-links}__toggle-icon--Rotate: 0;
70
- --#{$jump-links}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
71
67
  --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
72
68
 
73
69
  // toggle text
74
- --#{$jump-links}__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
70
+ --#{$jump-links}__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
75
71
  --#{$jump-links}__toggle-text--Color: var(--pf-t--global--text--color--regular);
76
72
  }
77
73
 
@@ -218,14 +214,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
218
214
 
219
215
  .#{$jump-links}__toggle {
220
216
  display: var(--#{$jump-links}__toggle--Display);
221
- margin-block-start: var(--#{$jump-links}__toggle--MarginBlockStart);
222
217
  margin-block-end: var(--#{$jump-links}__toggle--MarginBlockEnd);
223
- margin-inline-start: var(--#{$jump-links}__toggle--MarginInlineStart);
224
-
225
- .#{$button} {
226
- display: flex;
227
- align-items: center;
228
- }
229
218
  }
230
219
 
231
220
  .#{$jump-links}__toggle-icon {
package/components/Panel/panel.css CHANGED
@@ -2,43 +2,44 @@
2
2
  --pf-v6-c-panel--Width: auto;
3
3
  --pf-v6-c-panel--MinWidth: auto;
4
4
  --pf-v6-c-panel--MaxWidth: none;
5
- --pf-v6-c-panel--ZIndex: auto;
6
5
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
6
  --pf-v6-c-panel--BoxShadow: none;
7
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
8
8
  --pf-v6-c-panel--before--BorderWidth: 0;
9
9
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
10
10
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
11
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
12
12
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
13
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
14
13
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
15
14
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
16
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
17
16
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
17
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
19
18
  --pf-v6-c-panel__main--MaxHeight: none;
20
19
  --pf-v6-c-panel__main--Overflow: visible;
21
20
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
22
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
21
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
23
22
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
24
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
25
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
26
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
27
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
28
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
23
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
24
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
26
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
27
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
29
28
  --pf-v6-c-panel__footer--BoxShadow: none;
30
29
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
31
30
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
32
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
31
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
32
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
33
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
33
34
  }
34
35
 
35
36
  .pf-v6-c-panel {
36
37
  position: relative;
37
- z-index: var(--pf-v6-c-panel--ZIndex);
38
38
  width: var(--pf-v6-c-panel--Width);
39
39
  min-width: var(--pf-v6-c-panel--MinWidth);
40
40
  max-width: var(--pf-v6-c-panel--MaxWidth);
41
41
  background-color: var(--pf-v6-c-panel--BackgroundColor);
42
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
42
43
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
43
44
  }
44
45
  .pf-v6-c-panel::before {
@@ -47,6 +48,7 @@
47
48
  pointer-events: none;
48
49
  content: "";
49
50
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
51
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
50
52
  }
51
53
  .pf-v6-c-panel.pf-m-bordered {
52
54
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -57,12 +59,13 @@
57
59
  .pf-v6-c-panel.pf-m-raised {
58
60
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
59
61
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
60
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
61
62
  }
62
63
  .pf-v6-c-panel.pf-m-scrollable {
63
64
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
64
65
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
65
66
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
67
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
68
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
66
69
  }
67
70
 
68
71
  .pf-v6-c-panel__header {
package/components/Panel/panel.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  --#{$panel}--Width: auto;
5
5
  --#{$panel}--MinWidth: auto;
6
6
  --#{$panel}--MaxWidth: none;
7
- --#{$panel}--ZIndex: auto;
8
7
  --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9
8
  --#{$panel}--BoxShadow: none;
9
+ --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--small);
10
10
 
11
11
  // border
12
12
  --#{$panel}--before--BorderWidth: 0;
@@ -16,18 +16,17 @@
16
16
  --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
17
17
 
18
18
  // bordered
19
- --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
19
+ --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
20
20
 
21
21
  // raised
22
22
  --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
23
- --#{$panel}--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
24
23
  --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
25
24
 
26
25
  // header
27
26
  --#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
28
- --#{$panel}__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
27
+ --#{$panel}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
29
28
  --#{$panel}__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
30
- --#{$panel}__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
29
+ --#{$panel}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
31
30
 
32
31
  // main
33
32
  --#{$panel}__main--MaxHeight: none;
@@ -35,30 +34,32 @@
35
34
 
36
35
  // body
37
36
  --#{$panel}__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
38
- --#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
37
+ --#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
39
38
  --#{$panel}__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
40
- --#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
39
+ --#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
41
40
 
42
41
  // footer
43
- --#{$panel}__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
44
- --#{$panel}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
45
- --#{$panel}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
46
- --#{$panel}__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
42
+ --#{$panel}__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
43
+ --#{$panel}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
44
+ --#{$panel}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
45
+ --#{$panel}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
47
46
  --#{$panel}__footer--BoxShadow: none;
48
47
 
49
48
  // scrollable
50
49
  --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
51
50
  --#{$panel}--m-scrollable__main--Overflow: auto;
52
- --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} rgba(0 0 0 / 16%); // insets the shadow so it doesn't show on left/right sides
51
+ --#{$panel}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
52
+ --#{$panel}--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
53
+ --#{$panel}--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
53
54
  }
54
55
 
55
56
  .#{$panel} {
56
57
  position: relative;
57
- z-index: var(--#{$panel}--ZIndex);
58
58
  width: var(--#{$panel}--Width);
59
59
  min-width: var(--#{$panel}--MinWidth);
60
60
  max-width: var(--#{$panel}--MaxWidth);
61
61
  background-color: var(--#{$panel}--BackgroundColor);
62
+ border-radius: var(--#{$panel}--BorderRadius);
62
63
  box-shadow: var(--#{$panel}--BoxShadow);
63
64
 
64
65
  &::before {
@@ -67,6 +68,7 @@
67
68
  pointer-events: none;
68
69
  content: "";
69
70
  border: var(--#{$panel}--before--BorderWidth) solid var(--#{$panel}--before--BorderColor);
71
+ border-radius: var(--#{$panel}--BorderRadius);
70
72
  }
71
73
 
72
74
  &.pf-m-bordered {
@@ -80,13 +82,14 @@
80
82
  &.pf-m-raised {
81
83
  --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
82
84
  --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
83
- --#{$panel}--ZIndex: var(--#{$panel}--m-raised--ZIndex);
84
85
  }
85
86
 
86
87
  &.pf-m-scrollable {
87
88
  --#{$panel}__main--MaxHeight: var(--#{$panel}--m-scrollable__main--MaxHeight);
88
89
  --#{$panel}__main--Overflow: var(--#{$panel}--m-scrollable__main--Overflow);
89
90
  --#{$panel}__footer--BoxShadow: var(--#{$panel}--m-scrollable__footer--BoxShadow);
91
+ --#{$panel}__footer--PaddingBlockStart: var(--#{$panel}--m-scrollable__footer--PaddingBlockStart);
92
+ --#{$panel}__footer--PaddingBlockEnd: var(--#{$panel}--m-scrollable__footer--PaddingBlockEnd);
90
93
  }
91
94
  }
92
95
 
package/components/_index.css CHANGED
@@ -7581,18 +7581,14 @@ label.pf-v6-c-input-group__text {
7581
7581
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
7582
7582
  --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
7583
7583
  --pf-v6-c-jump-links__label--Display: block;
7584
- --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
7585
- --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
7586
- --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
7587
- --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));
7588
- --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
7584
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
7585
+ --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
7589
7586
  --pf-v6-c-jump-links__toggle--Display: none;
7590
- --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
7587
+ --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7591
7588
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
7592
7589
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
7593
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7594
7590
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
7595
- --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
7591
+ --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
7596
7592
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
7597
7593
  }
7598
7594
 
@@ -7776,13 +7772,7 @@ label.pf-v6-c-input-group__text {
7776
7772
 
7777
7773
  .pf-v6-c-jump-links__toggle {
7778
7774
  display: var(--pf-v6-c-jump-links__toggle--Display);
7779
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
7780
7775
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
7781
- margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
7782
- }
7783
- .pf-v6-c-jump-links__toggle .pf-v6-c-button {
7784
- display: flex;
7785
- align-items: center;
7786
7776
  }
7787
7777
 
7788
7778
  .pf-v6-c-jump-links__toggle-icon {
@@ -12553,43 +12543,44 @@ ul.pf-v6-c-list {
12553
12543
  --pf-v6-c-panel--Width: auto;
12554
12544
  --pf-v6-c-panel--MinWidth: auto;
12555
12545
  --pf-v6-c-panel--MaxWidth: none;
12556
- --pf-v6-c-panel--ZIndex: auto;
12557
12546
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12558
12547
  --pf-v6-c-panel--BoxShadow: none;
12548
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
12559
12549
  --pf-v6-c-panel--before--BorderWidth: 0;
12560
12550
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
12561
12551
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12562
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
12552
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
12563
12553
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
12564
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
12565
12554
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
12566
12555
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
12567
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12556
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12568
12557
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12569
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
12558
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12570
12559
  --pf-v6-c-panel__main--MaxHeight: none;
12571
12560
  --pf-v6-c-panel__main--Overflow: visible;
12572
12561
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
12573
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12562
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12574
12563
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12575
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
12576
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
12577
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12578
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12579
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
12564
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12565
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12566
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12567
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12568
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12580
12569
  --pf-v6-c-panel__footer--BoxShadow: none;
12581
12570
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
12582
12571
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
12583
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
12572
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
12573
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
12574
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12584
12575
  }
12585
12576
 
12586
12577
  .pf-v6-c-panel {
12587
12578
  position: relative;
12588
- z-index: var(--pf-v6-c-panel--ZIndex);
12589
12579
  width: var(--pf-v6-c-panel--Width);
12590
12580
  min-width: var(--pf-v6-c-panel--MinWidth);
12591
12581
  max-width: var(--pf-v6-c-panel--MaxWidth);
12592
12582
  background-color: var(--pf-v6-c-panel--BackgroundColor);
12583
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
12593
12584
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
12594
12585
  }
12595
12586
  .pf-v6-c-panel::before {
@@ -12598,6 +12589,7 @@ ul.pf-v6-c-list {
12598
12589
  pointer-events: none;
12599
12590
  content: "";
12600
12591
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
12592
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
12601
12593
  }
12602
12594
  .pf-v6-c-panel.pf-m-bordered {
12603
12595
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -12608,12 +12600,13 @@ ul.pf-v6-c-list {
12608
12600
  .pf-v6-c-panel.pf-m-raised {
12609
12601
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
12610
12602
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
12611
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
12612
12603
  }
12613
12604
  .pf-v6-c-panel.pf-m-scrollable {
12614
12605
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
12615
12606
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
12616
12607
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
12608
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
12609
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
12617
12610
  }
12618
12611
 
12619
12612
  .pf-v6-c-panel__header {
package/docs/components/Panel/examples/Panel.md CHANGED
@@ -167,6 +167,7 @@ cssPrefix: pf-v6-c-panel
167
167
  | `.pf-v6-c-panel__header` | `<div>` | Initiates the panel header. |
168
168
  | `.pf-v6-c-panel__main` | `<div>` | Initiates the panel main content. |
169
169
  | `.pf-v6-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
170
+ | `.pf-v6-c-panel__menu` | `<div>` | Initiates a panel menu container. |
170
171
  | `.pf-v6-c-panel__footer` | `<div>` | Initiates the panel footer. |
171
172
  | `.pf-m-bordered` | `.pf-v6-c-panel` | Modifies the panel for bordered styles. |
172
173
  | `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
package/docs/demos/Panel/Panel.md ADDED
@@ -0,0 +1,88 @@
1
+ ---
2
+ id: Panel
3
+ section: components
4
+ ---## Demos
5
+
6
+ ### With a menu
7
+
8
+ ```html
9
+ <div class="pf-v6-c-panel pf-m-raised">
10
+ <div class="pf-v6-c-panel__header">Header content</div>
11
+ <hr class="pf-v6-c-divider" />
12
+ <div class="pf-v6-c-panel__main">
13
+ <div class="pf-v6-c-panel__menu">
14
+ <div class="pf-v6-c-menu pf-m-plain">
15
+ <div class="pf-v6-c-menu__content">
16
+ <ul class="pf-v6-c-menu__list" role="menu">
17
+ <li class="pf-v6-c-menu__list-item" role="none">
18
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
19
+ <span class="pf-v6-c-menu__item-main">
20
+ <span class="pf-v6-c-menu__item-text">Action</span>
21
+ </span>
22
+ </button>
23
+ </li>
24
+ <li class="pf-v6-c-menu__list-item" role="none">
25
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
26
+ <span class="pf-v6-c-menu__item-main">
27
+ <span class="pf-v6-c-menu__item-text">Link</span>
28
+ </span>
29
+ </a>
30
+ </li>
31
+ <li class="pf-v6-c-menu__list-item pf-m-disabled" role="none">
32
+ <button
33
+ class="pf-v6-c-menu__item"
34
+ type="button"
35
+ disabled
36
+ role="menuitem"
37
+ >
38
+ <span class="pf-v6-c-menu__item-main">
39
+ <span class="pf-v6-c-menu__item-text">Disabled action</span>
40
+ </span>
41
+ </button>
42
+ </li>
43
+ <li class="pf-v6-c-menu__list-item pf-m-disabled" role="none">
44
+ <a
45
+ class="pf-v6-c-menu__item"
46
+ href="#"
47
+ aria-disabled="true"
48
+ tabindex="-1"
49
+ role="menuitem"
50
+ >
51
+ <span class="pf-v6-c-menu__item-main">
52
+ <span class="pf-v6-c-menu__item-text">Disabled link</span>
53
+ </span>
54
+ </a>
55
+ </li>
56
+ <li class="pf-v6-c-menu__list-item pf-m-aria-disabled" role="none">
57
+ <button
58
+ class="pf-v6-c-menu__item"
59
+ type="button"
60
+ aria-disabled="true"
61
+ role="menuitem"
62
+ >
63
+ <span class="pf-v6-c-menu__item-main">
64
+ <span class="pf-v6-c-menu__item-text">Aria-disabled action</span>
65
+ </span>
66
+ </button>
67
+ </li>
68
+ <li class="pf-v6-c-menu__list-item pf-m-aria-disabled" role="none">
69
+ <a
70
+ class="pf-v6-c-menu__item"
71
+ href="#"
72
+ aria-disabled="true"
73
+ role="menuitem"
74
+ >
75
+ <span class="pf-v6-c-menu__item-main">
76
+ <span class="pf-v6-c-menu__item-text">Aria-disabled link</span>
77
+ </span>
78
+ </a>
79
+ </li>
80
+ </ul>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ <div class="pf-v6-c-panel__footer">Footer content</div>
86
+ </div>
87
+
88
+ ```
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.0.0-alpha.163",
4
+ "version": "6.0.0-alpha.165",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -13619,18 +13619,14 @@ label.pf-v6-c-input-group__text {
13619
13619
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
13620
13620
  --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
13621
13621
  --pf-v6-c-jump-links__label--Display: block;
13622
- --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
13623
- --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
13624
- --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
13625
- --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));
13626
- --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
13622
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
13623
+ --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
13627
13624
  --pf-v6-c-jump-links__toggle--Display: none;
13628
- --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
13625
+ --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
13629
13626
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
13630
13627
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
13631
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
13632
13628
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
13633
- --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
13629
+ --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
13634
13630
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
13635
13631
  }
13636
13632
 
@@ -13814,13 +13810,7 @@ label.pf-v6-c-input-group__text {
13814
13810
 
13815
13811
  .pf-v6-c-jump-links__toggle {
13816
13812
  display: var(--pf-v6-c-jump-links__toggle--Display);
13817
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
13818
13813
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
13819
- margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
13820
- }
13821
- .pf-v6-c-jump-links__toggle .pf-v6-c-button {
13822
- display: flex;
13823
- align-items: center;
13824
13814
  }
13825
13815
 
13826
13816
  .pf-v6-c-jump-links__toggle-icon {
@@ -18591,43 +18581,44 @@ ul.pf-v6-c-list {
18591
18581
  --pf-v6-c-panel--Width: auto;
18592
18582
  --pf-v6-c-panel--MinWidth: auto;
18593
18583
  --pf-v6-c-panel--MaxWidth: none;
18594
- --pf-v6-c-panel--ZIndex: auto;
18595
18584
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18596
18585
  --pf-v6-c-panel--BoxShadow: none;
18586
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
18597
18587
  --pf-v6-c-panel--before--BorderWidth: 0;
18598
18588
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
18599
18589
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18600
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
18590
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
18601
18591
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
18602
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
18603
18592
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
18604
18593
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
18605
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18594
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18606
18595
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18607
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
18596
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18608
18597
  --pf-v6-c-panel__main--MaxHeight: none;
18609
18598
  --pf-v6-c-panel__main--Overflow: visible;
18610
18599
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
18611
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18600
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18612
18601
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18613
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
18614
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18615
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18616
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18617
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
18602
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18603
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18604
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18605
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18606
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18618
18607
  --pf-v6-c-panel__footer--BoxShadow: none;
18619
18608
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
18620
18609
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
18621
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
18610
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
18611
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18612
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18622
18613
  }
18623
18614
 
18624
18615
  .pf-v6-c-panel {
18625
18616
  position: relative;
18626
- z-index: var(--pf-v6-c-panel--ZIndex);
18627
18617
  width: var(--pf-v6-c-panel--Width);
18628
18618
  min-width: var(--pf-v6-c-panel--MinWidth);
18629
18619
  max-width: var(--pf-v6-c-panel--MaxWidth);
18630
18620
  background-color: var(--pf-v6-c-panel--BackgroundColor);
18621
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18631
18622
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
18632
18623
  }
18633
18624
  .pf-v6-c-panel::before {
@@ -18636,6 +18627,7 @@ ul.pf-v6-c-list {
18636
18627
  pointer-events: none;
18637
18628
  content: "";
18638
18629
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
18630
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18639
18631
  }
18640
18632
  .pf-v6-c-panel.pf-m-bordered {
18641
18633
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -18646,12 +18638,13 @@ ul.pf-v6-c-list {
18646
18638
  .pf-v6-c-panel.pf-m-raised {
18647
18639
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
18648
18640
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
18649
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
18650
18641
  }
18651
18642
  .pf-v6-c-panel.pf-m-scrollable {
18652
18643
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
18653
18644
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
18654
18645
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
18646
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
18647
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
18655
18648
  }
18656
18649
 
18657
18650
  .pf-v6-c-panel__header {