@patternfly/patternfly 6.5.0-prerelease.76 → 6.5.0-prerelease.78

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 (24) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +1 -1
  3. package/components/Compass/compass.css +147 -3
  4. package/components/Compass/compass.scss +142 -3
  5. package/components/Masthead/masthead.css +3 -3
  6. package/components/Masthead/masthead.scss +1 -1
  7. package/components/MenuToggle/menu-toggle.css +3 -3
  8. package/components/MenuToggle/menu-toggle.scss +1 -1
  9. package/components/Nav/nav.css +2 -2
  10. package/components/Nav/nav.scss +1 -1
  11. package/components/Table/table-scrollable.css +1 -1
  12. package/components/Table/table-scrollable.scss +1 -1
  13. package/components/Toolbar/toolbar.css +48 -1
  14. package/components/Toolbar/toolbar.scss +53 -1
  15. package/components/_index.css +206 -15
  16. package/docs/components/Compass/examples/Compass.md +4 -1
  17. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  18. package/docs/components/Toolbar/examples/Toolbar.md +44 -0
  19. package/docs/demos/Compass/examples/Compass.md +1915 -266
  20. package/package.json +1 -1
  21. package/patternfly-no-globals.css +206 -15
  22. package/patternfly.css +206 -15
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -862,11 +862,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
862
862
  display: none;
863
863
  }
864
864
  }
865
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
865
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
866
866
  justify-content: flex-start;
867
867
  width: 100%;
868
868
  }
869
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
869
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
870
870
  display: revert;
871
871
  }
872
872
 
package/components/Button/button.scss CHANGED
@@ -992,7 +992,7 @@
992
992
  }
993
993
  }
994
994
 
995
- @at-root .#{$page}__dock.pf-m-text-expanded &,
995
+ @at-root :is(.#{$page}__dock, .#{$compass}__dock).pf-m-text-expanded &,
996
996
  &.pf-m-text-expanded {
997
997
  justify-content: flex-start;
998
998
  width: 100%;
package/components/Compass/compass.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --pf-v6-c-compass__message-bar--Width: 450px;
23
23
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
24
24
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
25
+ --pf-v6-c-compass--m-docked__masthead--BackgroundColor: var(--pf-t--global--background--color--primary--default);
25
26
  --pf-v6-c-compass--section--slide--length--header: 100%;
26
27
  --pf-v6-c-compass--section--slide--length--sidebar: 100%;
27
28
  --pf-v6-c-compass--section--slide--length--main-footer: 100%;
@@ -34,6 +35,23 @@
34
35
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
35
36
  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
36
37
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
38
+ --pf-v6-c-compass__dock--Width: 15.625rem;
39
+ --pf-v6-c-compass__dock--desktop--Width: auto;
40
+ --pf-v6-c-compass__dock--ZIndex: var(--pf-t--global--z-index--md);
41
+ --pf-v6-c-compass__dock--TransitionDuration--slide: 0s;
42
+ --pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide: 0s;
43
+ --pf-v6-c-compass__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
44
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
45
+ --pf-v6-c-compass__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
46
+ --pf-v6-c-compass__dock-main--BoxShadow: none;
47
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
48
+ --pf-v6-c-compass__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
49
+ --pf-v6-c-compass__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
50
+ --pf-v6-c-compass__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
51
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: transparent;
52
+ --pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
53
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
54
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
37
55
  }
38
56
  @media screen and (prefers-reduced-motion: no-preference) {
39
57
  .pf-v6-c-compass {
@@ -69,18 +87,90 @@
69
87
  background-size: cover;
70
88
  }
71
89
  .pf-v6-c-compass.pf-m-docked {
72
- grid-template-areas: "dock main";
73
- grid-template-rows: auto;
74
- grid-template-columns: auto 1fr;
90
+ grid-template-areas: "header" "main";
91
+ grid-template-rows: max-content 1fr;
92
+ grid-template-columns: 1fr;
75
93
  align-items: stretch;
76
94
  padding: 0;
77
95
  }
78
96
  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
79
97
  padding: var(--pf-v6-c-compass--Padding);
80
98
  }
99
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
100
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
101
+ grid-area: header;
102
+ }
81
103
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
82
104
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
83
105
  }
106
+ @media (min-width: 62rem) {
107
+ .pf-v6-c-compass.pf-m-docked {
108
+ grid-template-areas: "dock main";
109
+ grid-template-rows: auto;
110
+ grid-template-columns: auto 1fr;
111
+ row-gap: var(--pf-v6-c-compass__main--RowGap);
112
+ align-items: stretch;
113
+ padding: 0;
114
+ }
115
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
116
+ display: none;
117
+ }
118
+ }
119
+ .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
120
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
121
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
122
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
123
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
124
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
125
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
126
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
127
+ }
128
+ .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
129
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
130
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
131
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
132
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
133
+ --pf-v6-c-button__icon--ScaleX: 1;
134
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
135
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
136
+ }
137
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
138
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
139
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
140
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
141
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
142
+ --pf-v6-c-button__icon--ScaleX: 1;
143
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
144
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
145
+ }
146
+ @media (min-width: 62rem) {
147
+ .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
148
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
149
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
150
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
151
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
152
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
153
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
154
+ }
155
+ .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
156
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
157
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
158
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
159
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
160
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
161
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
162
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
163
+ }
164
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
165
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
166
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
167
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
168
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
169
+ --pf-v6-c-button__icon--ScaleX: 1;
170
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
171
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
172
+ }
173
+ }
84
174
 
85
175
  .pf-v6-c-compass__header,
86
176
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
@@ -198,6 +288,60 @@
198
288
  margin-inline-start: var(--pf-v6-c-compass--Gap);
199
289
  }
200
290
 
291
+ .pf-v6-c-compass__dock {
292
+ position: fixed;
293
+ inset-block-start: 0;
294
+ inset-block-end: 0;
295
+ inset-inline-start: 0;
296
+ z-index: var(--pf-v6-c-compass__dock--ZIndex);
297
+ display: flex;
298
+ flex-direction: column;
299
+ grid-area: dock;
300
+ width: var(--pf-v6-c-compass__dock--Width);
301
+ transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
302
+ translate: -100% 0;
303
+ }
304
+ .pf-v6-c-compass__dock.pf-m-expanded {
305
+ --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
306
+ translate: 0;
307
+ }
308
+ @media (min-width: 62rem) {
309
+ .pf-v6-c-compass__dock {
310
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-v6-c-compass__dock-main--desktop--BackgroundColor);
311
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
312
+ position: revert;
313
+ inset: revert;
314
+ width: auto;
315
+ translate: 0;
316
+ }
317
+ }
318
+ .pf-v6-c-compass__dock .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__content-section, .pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item) {
319
+ align-items: stretch;
320
+ }
321
+ .pf-v6-c-compass__dock.pf-m-text-expanded {
322
+ width: var(--pf-v6-c-compass__dock--Width);
323
+ }
324
+
325
+ .pf-v6-c-compass__dock-main {
326
+ flex-grow: 1;
327
+ background-color: var(--pf-v6-c-compass__dock-main--BackgroundColor);
328
+ backdrop-filter: var(--pf-v6-c-compass__dock-main--BackdropFilter);
329
+ border-inline-end: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock-main--BorderInlineEndColor);
330
+ box-shadow: var(--pf-v6-c-compass__dock-main--BoxShadow);
331
+ }
332
+ .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-compass__dock-main {
333
+ border-inline-end: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor);
334
+ box-shadow: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow);
335
+ }
336
+ @media (min-width: 62rem) {
337
+ .pf-v6-c-compass__dock-main {
338
+ --pf-v6-c-compass__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
339
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
340
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth);
341
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
342
+ }
343
+ }
344
+
201
345
  .pf-v6-c-compass__main {
202
346
  display: flex;
203
347
  flex-direction: column;
package/components/Compass/compass.scss CHANGED
@@ -25,6 +25,9 @@
25
25
  --#{$compass}__message-bar--MinWidth: 300px;
26
26
  --#{$compass}__message-bar--MaxWidth: 600px;
27
27
 
28
+ // Docked
29
+ --#{$compass}--m-docked__masthead--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30
+
28
31
  // Section animation
29
32
  --#{$compass}--section--slide--length--header: 100%;
30
33
  --#{$compass}--section--slide--length--sidebar: 100%;
@@ -39,6 +42,27 @@
39
42
  --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
40
43
  --#{$compass}--section--m-expanded--TransitionDelay: 0s;
41
44
 
45
+ // Dock
46
+ --#{$compass}__dock--Width: #{pf-size-prem(250px)};
47
+ --#{$compass}__dock--desktop--Width: auto;
48
+ --#{$compass}__dock--ZIndex: var(--pf-t--global--z-index--md);
49
+ --#{$compass}__dock--TransitionDuration--slide: 0s;
50
+ --#{$compass}__dock--m-expanded--TransitionDuration--slide: 0s;
51
+ --#{$compass}__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
52
+
53
+ // Dock main
54
+ --#{$compass}__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
55
+ --#{$compass}__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
56
+ --#{$compass}__dock-main--BoxShadow: none;
57
+ --#{$compass}__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
58
+ --#{$compass}__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
59
+ --#{$compass}__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
60
+ --#{$compass}__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
61
+ --#{$compass}__dock-main--BorderInlineEndColor: transparent;
62
+ --#{$compass}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
63
+ --#{$compass}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
64
+ --#{$compass}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
65
+
42
66
  @media screen and (prefers-reduced-motion: no-preference) {
43
67
  --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), 0s, 0s, 0s;
44
68
  --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
@@ -76,20 +100,76 @@
76
100
  background-size: cover;
77
101
 
78
102
  &.pf-m-docked {
79
- grid-template-areas: "dock main";
80
- grid-template-rows: auto;
81
- grid-template-columns: auto 1fr;
103
+ grid-template-areas:
104
+ "header"
105
+ "main";
106
+ grid-template-rows: max-content 1fr;
107
+ grid-template-columns: 1fr;
82
108
  align-items: stretch;
83
109
  padding: 0;
84
110
 
85
111
  .#{$compass}__main {
86
112
  padding: var(--#{$compass}--Padding);
87
113
  }
114
+
115
+ > .#{$masthead} {
116
+ --#{$masthead}--BackgroundColor: var(--#{$compass}--m-docked__masthead--BackgroundColor);
117
+
118
+ grid-area: header;
119
+ }
88
120
  }
89
121
 
90
122
  :root:where(.#{$pf-prefix}theme-dark) & {
91
123
  --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
92
124
  }
125
+
126
+ @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
127
+ &.pf-m-docked {
128
+ grid-template-areas: "dock main";
129
+ grid-template-rows: auto;
130
+ grid-template-columns: auto 1fr;
131
+ row-gap: var(--#{$compass}__main--RowGap);
132
+ align-items: stretch;
133
+ padding: 0;
134
+
135
+ > .#{$masthead} {
136
+ display: none;
137
+ }
138
+ }
139
+ }
140
+
141
+ // Masthead hamburger
142
+ > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
143
+ @include pf-v6-hamburger;
144
+ }
145
+
146
+ // mobile - show collapse when sidebar expanded
147
+ &:where(:has(> .#{$compass}__dock.pf-m-expanded)) > .#{$masthead} .#{$masthead}__toggle :is(.#{$button}.pf-m-hamburger, .#{$button}.pf-m-hamburger:hover, .#{$button}.pf-m-hamburger:focus-visible) {
148
+ @include pf-v6-hamburger($collapse: true);
149
+ }
150
+
151
+ // Docked masthead hamburger
152
+ .#{$compass}__dock.pf-m-expanded .#{$masthead}__toggle .#{$button}.pf-m-hamburger {
153
+ @include pf-v6-hamburger($collapse: true);
154
+ }
155
+
156
+ @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
157
+ // desktop - reset dock internal toggle to bars
158
+ .#{$compass}__dock .#{$masthead}__toggle .#{$button}.pf-m-hamburger,
159
+ .#{$compass}__dock.pf-m-expanded .#{$masthead}__toggle .#{$button}.pf-m-hamburger {
160
+ @include pf-v6-hamburger($reset: true);
161
+ }
162
+
163
+ // desktop - show expand arrow on hover
164
+ .#{$compass}__dock .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
165
+ @include pf-v6-hamburger;
166
+ }
167
+
168
+ // desktop - show collapse arrow on hover when text expanded
169
+ .#{$compass}__dock.pf-m-text-expanded .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
170
+ @include pf-v6-hamburger($collapse: true);
171
+ }
172
+ }
93
173
  }
94
174
 
95
175
  .#{$compass}__header,
@@ -214,6 +294,65 @@
214
294
  }
215
295
  }
216
296
 
297
+ // Dock
298
+ .#{$compass}__dock {
299
+ position: fixed;
300
+ inset-block-start: 0;
301
+ inset-block-end: 0;
302
+ inset-inline-start: 0;
303
+ z-index: var(--#{$compass}__dock--ZIndex);
304
+ display: flex;
305
+ flex-direction: column;
306
+ grid-area: dock;
307
+ width: var(--#{$compass}__dock--Width);
308
+ transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide);
309
+ translate: -100% 0;
310
+
311
+ &.pf-m-expanded {
312
+ --#{$compass}__dock--TransitionDuration--slide: var(--#{$compass}__dock--m-expanded--TransitionDuration--slide);
313
+
314
+ translate: 0;
315
+ }
316
+
317
+ @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
318
+ --#{$compass}__dock-main--BackgroundColor: var(--#{$compass}__dock-main--desktop--BackgroundColor);
319
+ --#{$compass}__dock-main--BorderInlineEndColor: var(--#{$compass}__dock-main--desktop--BorderInlineEndColor);
320
+
321
+ position: revert;
322
+ inset: revert;
323
+ width: auto;
324
+ translate: 0;
325
+ }
326
+
327
+ .#{$toolbar}.pf-m-vertical :is(.#{$toolbar}__content-section, .#{$toolbar}__group, .#{$toolbar}__item) {
328
+ align-items: stretch;
329
+ }
330
+
331
+ &.pf-m-text-expanded {
332
+ width: var(--#{$compass}__dock--Width);
333
+ }
334
+ }
335
+
336
+ .#{$compass}__dock-main {
337
+ flex-grow: 1;
338
+ background-color: var(--#{$compass}__dock-main--BackgroundColor);
339
+ backdrop-filter: var(--#{$compass}__dock-main--BackdropFilter);
340
+ border-inline-end: var(--#{$compass}__dock-main--BorderInlineEndWidth) solid var(--#{$compass}__dock-main--BorderInlineEndColor);
341
+ box-shadow: var(--#{$compass}__dock-main--BoxShadow);
342
+
343
+ .#{$compass}__dock.pf-m-expanded & {
344
+ border-inline-end: var(--#{$compass}__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--#{$compass}__dock--m-expanded__dock-main--BorderInlineEndColor);
345
+ box-shadow: var(--#{$compass}__dock--m-expanded__dock-main--BoxShadow);
346
+ }
347
+
348
+ @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
349
+ --#{$compass}__dock-main--BoxShadow: var(--#{$compass}__dock-main--desktop--BoxShadow);
350
+ --#{$compass}__dock--m-expanded__dock-main--BoxShadow: var(--#{$compass}__dock-main--desktop--BoxShadow);
351
+ --#{$compass}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--#{$compass}__dock-main--BorderInlineEndWidth);
352
+ --#{$compass}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--#{$compass}__dock-main--desktop--BorderInlineEndColor);
353
+ }
354
+ }
355
+
217
356
  .#{$compass}__main {
218
357
  display: flex;
219
358
  flex-direction: column;
package/components/Masthead/masthead.css CHANGED
@@ -167,13 +167,13 @@
167
167
  display: revert;
168
168
  }
169
169
  }
170
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
170
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
171
171
  display: revert;
172
172
  }
173
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
173
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
174
174
  display: none;
175
175
  }
176
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
176
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
177
177
  align-items: flex-start;
178
178
  }
179
179
 
package/components/Masthead/masthead.scss CHANGED
@@ -210,7 +210,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
210
210
  }
211
211
  }
212
212
 
213
- @at-root .#{$page}__dock.pf-m-text-expanded & {
213
+ @at-root :is(.#{$page}__dock, .#{$compass}__dock).pf-m-text-expanded & {
214
214
  .#{$masthead}__logo {
215
215
  display: revert;
216
216
 
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -367,12 +367,12 @@
367
367
  display: none;
368
368
  }
369
369
  }
370
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
370
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
371
371
  justify-content: flex-start;
372
372
  width: 100%;
373
373
  }
374
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
375
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
374
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
375
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
376
376
  .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
377
377
  display: revert;
378
378
  }
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -449,7 +449,7 @@
449
449
  }
450
450
  }
451
451
 
452
- @at-root .#{$page}__dock.pf-m-text-expanded &,
452
+ @at-root :is(.#{$page}__dock, .#{$compass}__dock).pf-m-text-expanded &,
453
453
  &.pf-m-text-expanded {
454
454
  justify-content: flex-start;
455
455
  width: 100%;
package/components/Nav/nav.css CHANGED
@@ -168,10 +168,10 @@
168
168
  display: none;
169
169
  }
170
170
  }
171
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
171
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
172
172
  width: 100%;
173
173
  }
174
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
174
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
175
175
  display: revert;
176
176
  }
177
177
 
package/components/Nav/nav.scss CHANGED
@@ -208,7 +208,7 @@
208
208
  }
209
209
  }
210
210
 
211
- @at-root .#{$page}__dock.pf-m-text-expanded &,
211
+ @at-root :is(.#{$page}__dock, .#{$compass}__dock).pf-m-text-expanded &,
212
212
  &.pf-m-text-expanded {
213
213
  width: 100%;
214
214
 
package/components/Table/table-scrollable.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
5
5
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
6
6
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
7
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
8
8
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
9
9
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
10
10
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
package/components/Table/table-scrollable.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
8
8
  --#{$table}__sticky-cell--InsetInlineEnd: auto;
9
9
  --#{$table}__sticky-cell--InsetInlineStart: auto;
10
- --#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
10
+ --#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
11
11
  --#{$table}__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
12
12
  --#{$table}__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
13
13
  --#{$table}__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
package/components/Toolbar/toolbar.css CHANGED
@@ -36,10 +36,28 @@
36
36
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
37
37
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
38
38
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
39
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
40
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
39
41
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
40
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
42
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
41
43
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
42
44
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
45
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
46
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
47
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
48
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
49
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
50
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
51
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
52
+ }
53
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
54
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
55
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
56
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
57
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
58
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
59
+ }
60
+ .pf-v6-c-toolbar {
43
61
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
44
62
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
45
63
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -316,6 +334,35 @@
316
334
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
317
335
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
318
336
  }
337
+ .pf-v6-c-toolbar.pf-m-sticky-base {
338
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
339
+ position: sticky;
340
+ inset-block-start: 0;
341
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
342
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
343
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
344
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
345
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
346
+ background: transparent;
347
+ border-radius: inherit;
348
+ }
349
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
350
+ position: absolute;
351
+ inset: 0;
352
+ z-index: -1;
353
+ content: "";
354
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
355
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
356
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
357
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
358
+ opacity: 0;
359
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
360
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
361
+ transition-property: opacity;
362
+ }
363
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
364
+ opacity: 1;
365
+ }
319
366
  .pf-v6-c-toolbar.pf-m-static,
320
367
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
321
368
  position: static;
package/components/Toolbar/toolbar.scss CHANGED
@@ -64,10 +64,27 @@ $pf-v6--include-toolbar-breakpoints: true !default;
64
64
  --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
65
65
  --#{$toolbar}--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
66
66
  --#{$toolbar}--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
67
+ --#{$toolbar}--m-sticky--PaddingInlineStart: 0;
68
+ --#{$toolbar}--m-sticky--PaddingInlineEnd: 0;
67
69
  --#{$toolbar}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
68
- --#{$toolbar}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
70
+ --#{$toolbar}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
69
71
  --#{$toolbar}--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
70
72
  --#{$toolbar}--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
73
+ --#{$toolbar}--m-sticky--BorderRadius: 0;
74
+ --#{$toolbar}--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
75
+ --#{$toolbar}--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
76
+ --#{$toolbar}--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
77
+ --#{$toolbar}--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
78
+ --#{$toolbar}--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
79
+ --#{$toolbar}--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
80
+
81
+ :where(.pf-v6-theme-glass) & {
82
+ --#{$toolbar}--m-sticky--BorderBlockEndWidth: 0;
83
+ --#{$toolbar}--m-sticky--BoxShadow: var(--#{$toolbar}--m-sticky--BoxShadow--glass);
84
+ --#{$toolbar}--m-sticky--BorderRadius: var(--#{$toolbar}--m-sticky--BorderRadius--glass);
85
+ --#{$toolbar}--m-sticky--PaddingInlineStart: var(--#{$toolbar}--m-sticky--PaddingInlineStart--glass);
86
+ --#{$toolbar}--m-sticky--PaddingInlineEnd: var(--#{$toolbar}--m-sticky--PaddingInlineEnd--glass);
87
+ }
71
88
 
72
89
  // * Toolbar vertical
73
90
  --#{$toolbar}--m-vertical--Width: fit-content;
@@ -153,6 +170,41 @@ $pf-v6--include-toolbar-breakpoints: true !default;
153
170
  box-shadow: var(--#{$toolbar}--m-sticky--BoxShadow);
154
171
  }
155
172
 
173
+ &.pf-m-sticky-base {
174
+ --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-sticky--BackgroundColor);
175
+
176
+ position: sticky;
177
+ inset-block-start: 0;
178
+ z-index: var(--#{$toolbar}--m-sticky--ZIndex);
179
+ padding-block-start: var(--#{$toolbar}--m-sticky--PaddingBlockStart);
180
+ padding-block-end: var(--#{$toolbar}--m-sticky--PaddingBlockEnd);
181
+ padding-inline-start: var(--#{$toolbar}--m-sticky--PaddingInlineStart);
182
+ padding-inline-end: var(--#{$toolbar}--m-sticky--PaddingInlineEnd);
183
+ background: transparent;
184
+ border-radius: inherit;
185
+
186
+ &::before {
187
+ position: absolute;
188
+ inset: 0;
189
+ z-index: -1;
190
+ content: '';
191
+ background: var(--#{$toolbar}--BackgroundColor);
192
+ border-block-end: var(--#{$toolbar}--m-sticky--BorderBlockEndWidth) solid var(--#{$toolbar}--m-sticky--BorderBlockEndColor);
193
+ border-radius: var(--#{$toolbar}--m-sticky--BorderRadius);
194
+ box-shadow: var(--#{$toolbar}--m-sticky--BoxShadow);
195
+ opacity: 0;
196
+ transition-timing-function: var(--#{$toolbar}--m-sticky--TransitionTimingFunction--BackgroundColor);
197
+ transition-duration: var(--#{$toolbar}--m-sticky--TransitionDuration--BackgroundColor);
198
+ transition-property: opacity;
199
+ }
200
+ }
201
+
202
+ &.pf-m-sticky-stuck {
203
+ &::before {
204
+ opacity: 1;
205
+ }
206
+ }
207
+
156
208
  // - Toolbar static
157
209
  &.pf-m-static {
158
210
  &,