@patternfly/patternfly 6.5.0-prerelease.23 → 6.5.0-prerelease.25

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 (10) hide show
  1. package/components/Compass/compass.css +42 -6
  2. package/components/Compass/compass.scss +43 -7
  3. package/components/_index.css +42 -6
  4. package/docs/components/Compass/examples/Compass.md +22 -5
  5. package/docs/demos/Compass/examples/Compass.md +1048 -708
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +42 -6
  8. package/patternfly.css +42 -6
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Compass/compass.css CHANGED
@@ -6,6 +6,12 @@
6
6
  --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
7
7
  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
8
8
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
10
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
11
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
13
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9
15
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
10
16
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
11
17
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
@@ -14,7 +20,10 @@
14
20
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
15
21
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
16
22
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
17
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
23
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
24
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
25
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
26
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
18
27
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
19
28
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
20
29
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -25,9 +34,10 @@
25
34
 
26
35
  .pf-v6-c-compass {
27
36
  display: grid;
28
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
29
- grid-template-rows: auto 1fr auto;
37
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
38
+ grid-template-rows: auto 1fr;
30
39
  grid-template-columns: auto 1fr auto;
40
+ grid-auto-rows: auto;
31
41
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
32
42
  align-items: center;
33
43
  justify-content: center;
@@ -58,6 +68,10 @@
58
68
  }
59
69
 
60
70
  .pf-v6-c-compass__nav {
71
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
72
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
73
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
74
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
61
75
  display: flex;
62
76
  flex-direction: column;
63
77
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -65,8 +79,21 @@
65
79
  justify-self: stretch;
66
80
  }
67
81
 
82
+ .pf-v6-c-compass__nav-content {
83
+ display: flex;
84
+ align-items: center;
85
+ }
86
+
87
+ .pf-v6-c-compass__nav-main {
88
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
89
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
90
+ }
91
+
68
92
  .pf-v6-c-compass__sidebar {
69
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
93
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
94
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
95
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
96
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
70
97
  }
71
98
  .pf-v6-c-compass__sidebar.pf-m-start {
72
99
  grid-area: sidebar-start;
@@ -102,6 +129,12 @@
102
129
  max-height: 100%;
103
130
  }
104
131
 
132
+ .pf-v6-c-compass__main-footer {
133
+ display: flex;
134
+ justify-content: center;
135
+ margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
136
+ }
137
+
105
138
  .pf-v6-c-compass__sidebar.pf-m-end {
106
139
  grid-area: sidebar-end;
107
140
  padding: var(--pf-t--global--spacer--sm);
@@ -109,7 +142,7 @@
109
142
 
110
143
  .pf-v6-c-compass__footer {
111
144
  display: flex;
112
- grid-area: footer;
145
+ grid-column: 1/-1;
113
146
  justify-content: center;
114
147
  }
115
148
 
@@ -120,7 +153,10 @@
120
153
  }
121
154
 
122
155
  .pf-v6-c-compass__panel {
123
- padding: var(--pf-v6-c-compass__panel--Padding);
156
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
157
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
158
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
159
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
124
160
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
125
161
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
126
162
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
package/components/Compass/compass.scss CHANGED
@@ -8,6 +8,12 @@
8
8
  --#{$compass}--RowGap: var(--pf-t--global--spacer--xl);
9
9
  --#{$compass}--ColumnGap: var(--pf-t--global--spacer--xl);
10
10
  --#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
11
+ --#{$compass}__nav--PaddingBlockStart: 0;
12
+ --#{$compass}__nav--PaddingBlockEnd: 0;
13
+ --#{$compass}__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
14
+ --#{$compass}__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15
+ --#{$compass}__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16
+ --#{$compass}__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11
17
  --#{$compass}__sidebar--Padding: var(--pf-t--global--spacer--sm);
12
18
  --#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
13
19
  --#{$compass}__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
@@ -16,7 +22,10 @@
16
22
  --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
17
23
  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
18
24
  --#{$compass}__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
19
- --#{$compass}__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
25
+ --#{$compass}__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
26
+ --#{$compass}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
27
+ --#{$compass}__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
28
+ --#{$compass}__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
20
29
  --#{$compass}__panel--BorderWidth: var(--pf-t--global--border--width--regular);
21
30
  --#{$compass}__panel--BorderColor: var(--pf-t--global--border--color--alt);
22
31
  --#{$compass}__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -29,10 +38,10 @@
29
38
  display: grid;
30
39
  grid-template-areas:
31
40
  "header header header"
32
- "sidebar-start main sidebar-end"
33
- "footer footer footer";
34
- grid-template-rows: auto 1fr auto;
41
+ "sidebar-start main sidebar-end";
42
+ grid-template-rows: auto 1fr;
35
43
  grid-template-columns: auto 1fr auto;
44
+ grid-auto-rows: auto;
36
45
  gap: var(--#{$compass}--RowGap) var(--#{$compass}--ColumnGap);
37
46
  align-items: center;
38
47
  justify-content: center;
@@ -70,6 +79,11 @@
70
79
  }
71
80
 
72
81
  .#{$compass}__nav {
82
+ --#{$compass}__panel--PaddingBlockStart: var(--#{$compass}__nav--PaddingBlockStart);
83
+ --#{$compass}__panel--PaddingBlockEnd: var(--#{$compass}__nav--PaddingBlockEnd);
84
+ --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__nav--PaddingInlineStart);
85
+ --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__nav--PaddingInlineEnd);
86
+
73
87
  display: flex;
74
88
  flex-direction: column;
75
89
  gap: var(--#{$compass}__nav--RowGap);
@@ -77,8 +91,21 @@
77
91
  justify-self: stretch;
78
92
  }
79
93
 
94
+ .#{$compass}__nav-content {
95
+ display: flex;
96
+ align-items: center;
97
+ }
98
+
99
+ .#{$compass}__nav-main {
100
+ padding-inline-start: var(--#{$compass}__nav-main--PaddingInlineStart);
101
+ padding-inline-end: var(--#{$compass}__nav-main--PaddingInlineEnd);
102
+ }
103
+
80
104
  .#{$compass}__sidebar {
81
- --#{$compass}__panel--Padding: var(--#{$compass}__sidebar--Padding);
105
+ --#{$compass}__panel--PaddingBlockStart: var(--#{$compass}__sidebar--PaddingBlockStart);
106
+ --#{$compass}__panel--PaddingBlockEnd: var(--#{$compass}__sidebar--PaddingBlockEnd);
107
+ --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
108
+ --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
82
109
 
83
110
  &.pf-m-start {
84
111
  grid-area: sidebar-start;
@@ -124,6 +151,12 @@
124
151
  }
125
152
  }
126
153
 
154
+ .#{$compass}__main-footer {
155
+ display: flex;
156
+ justify-content: center;
157
+ margin-block-start: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--RowGap)); // Creates same gap as parent compass grid, mimicking the compass footer
158
+ }
159
+
127
160
  .#{$compass}__sidebar.pf-m-end {
128
161
  grid-area: sidebar-end;
129
162
  padding: var(--pf-t--global--spacer--sm);
@@ -131,7 +164,7 @@
131
164
 
132
165
  .#{$compass}__footer {
133
166
  display: flex;
134
- grid-area: footer;
167
+ grid-column: 1 / -1;
135
168
  justify-content: center;
136
169
  }
137
170
 
@@ -142,7 +175,10 @@
142
175
  }
143
176
 
144
177
  .#{$compass}__panel {
145
- padding: var(--#{$compass}__panel--Padding);
178
+ padding-block-start: var(--#{$compass}__panel--PaddingBlockStart);
179
+ padding-block-end: var(--#{$compass}__panel--PaddingBlockEnd);
180
+ padding-inline-start: var(--#{$compass}__panel--PaddingInlineStart);
181
+ padding-inline-end: var(--#{$compass}__panel--PaddingInlineEnd);
146
182
  background-color: var(--#{$compass}__panel--BackgroundColor);
147
183
  backdrop-filter: var(--#{$compass}__panel--BackdropFilter);
148
184
  border: var(--#{$compass}__panel--BorderWidth) solid var(--#{$compass}__panel--BorderColor);
package/components/_index.css CHANGED
@@ -3515,6 +3515,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3515
3515
  --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
3516
3516
  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
3517
3517
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3518
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3519
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
3520
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3521
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3522
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3523
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
3518
3524
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3519
3525
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3520
3526
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
@@ -3523,7 +3529,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3523
3529
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3524
3530
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3525
3531
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3526
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3532
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3533
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3534
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3535
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3527
3536
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3528
3537
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3529
3538
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3534,9 +3543,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3534
3543
 
3535
3544
  .pf-v6-c-compass {
3536
3545
  display: grid;
3537
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
3538
- grid-template-rows: auto 1fr auto;
3546
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3547
+ grid-template-rows: auto 1fr;
3539
3548
  grid-template-columns: auto 1fr auto;
3549
+ grid-auto-rows: auto;
3540
3550
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
3541
3551
  align-items: center;
3542
3552
  justify-content: center;
@@ -3567,6 +3577,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3567
3577
  }
3568
3578
 
3569
3579
  .pf-v6-c-compass__nav {
3580
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3581
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3582
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3583
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3570
3584
  display: flex;
3571
3585
  flex-direction: column;
3572
3586
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -3574,8 +3588,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3574
3588
  justify-self: stretch;
3575
3589
  }
3576
3590
 
3591
+ .pf-v6-c-compass__nav-content {
3592
+ display: flex;
3593
+ align-items: center;
3594
+ }
3595
+
3596
+ .pf-v6-c-compass__nav-main {
3597
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
3598
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
3599
+ }
3600
+
3577
3601
  .pf-v6-c-compass__sidebar {
3578
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
3602
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3603
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3604
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3605
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3579
3606
  }
3580
3607
  .pf-v6-c-compass__sidebar.pf-m-start {
3581
3608
  grid-area: sidebar-start;
@@ -3611,6 +3638,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3611
3638
  max-height: 100%;
3612
3639
  }
3613
3640
 
3641
+ .pf-v6-c-compass__main-footer {
3642
+ display: flex;
3643
+ justify-content: center;
3644
+ margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
3645
+ }
3646
+
3614
3647
  .pf-v6-c-compass__sidebar.pf-m-end {
3615
3648
  grid-area: sidebar-end;
3616
3649
  padding: var(--pf-t--global--spacer--sm);
@@ -3618,7 +3651,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3618
3651
 
3619
3652
  .pf-v6-c-compass__footer {
3620
3653
  display: flex;
3621
- grid-area: footer;
3654
+ grid-column: 1/-1;
3622
3655
  justify-content: center;
3623
3656
  }
3624
3657
 
@@ -3629,7 +3662,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3629
3662
  }
3630
3663
 
3631
3664
  .pf-v6-c-compass__panel {
3632
- padding: var(--pf-v6-c-compass__panel--Padding);
3665
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
3666
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
3667
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
3668
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
3633
3669
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3634
3670
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3635
3671
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -15,8 +15,17 @@ cssPrefix: pf-v6-c-compass
15
15
  <div class="pf-v6-c-compass__header">
16
16
  <div class="pf-v6-c-compass__logo">logo</div>
17
17
 
18
- <div class="pf-v6-c-compass__nav">nav</div>
18
+ <div class="pf-v6-c-compass__nav">
19
+ <div class="pf-v6-c-compass__panel">
20
+ <div class="pf-v6-c-compass__nav-content">
21
+ <div class="pf-v6-c-compass__nav-home">home</div>
22
+
23
+ <div class="pf-v6-c-compass__nav-main">main</div>
19
24
 
25
+ <div class="pf-v6-c-compass__nav-search">search</div>
26
+ </div>
27
+ </div>
28
+ </div>
20
29
  <div class="pf-v6-c-compass__profile">profile</div>
21
30
  </div>
22
31
  <div class="pf-v6-c-compass__sidebar pf-m-start">sidebar (start)</div>
@@ -31,12 +40,14 @@ cssPrefix: pf-v6-c-compass
31
40
  </div>
32
41
  </div>
33
42
  <div class="pf-v6-c-compass__content">content</div>
43
+
44
+ <div class="pf-v6-c-compass__main-footer">
45
+ <div class="pf-v6-c-compass__message-bar">message bar</div>
46
+ </div>
34
47
  </div>
35
48
  <div class="pf-v6-c-compass__sidebar pf-m-end">sidebar (end)</div>
36
49
 
37
- <div class="pf-v6-c-compass__footer">
38
- <div class="pf-v6-c-compass__message-bar">message bar</div>
39
- </div>
50
+ <div class="pf-v6-c-compass__footer">footer</div>
40
51
  </div>
41
52
 
42
53
  ```
@@ -59,9 +70,15 @@ cssPrefix: pf-v6-c-compass
59
70
  | `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the compass main header content. |
60
71
  | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the compass main header content. |
61
72
  | `.pf-v6-c-compass__content` | `<div>` | Initiates the compass content. **Required** |
73
+ | `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the compass main footer. **Required** |
62
74
  | `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
75
+ | `.pf-v6-c-compass__nav` | `<div>` | Initiates a compass container for site navigation. |
76
+ | `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a compass container for navigation content. |
77
+ | `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for compass home button. |
78
+ | `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for compass navigation main content. |
79
+ | `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for compass search button. |
63
80
  | `.pf-v6-c-compass__hero` | `<div>` | Initiates a compass hero. |
64
- | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. **Required** |
81
+ | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. |
65
82
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
66
83
  | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
67
84
  | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for start styles. **Required** |