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

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/Table/table-scrollable.css +1 -1
  2. package/components/Table/table-scrollable.scss +1 -1
  3. package/components/Toolbar/toolbar.css +48 -1
  4. package/components/Toolbar/toolbar.scss +53 -1
  5. package/components/_index.css +49 -2
  6. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  7. package/docs/components/Toolbar/examples/Toolbar.md +44 -0
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +49 -2
  10. package/patternfly.css +49 -2
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
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
  &,
package/components/_index.css CHANGED
@@ -19985,7 +19985,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19985
19985
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
19986
19986
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
19987
19987
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
19988
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19988
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
19989
19989
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
19990
19990
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
19991
19991
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
@@ -22451,10 +22451,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22451
22451
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
22452
22452
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
22453
22453
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
22454
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
22455
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
22454
22456
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
22455
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22457
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
22456
22458
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
22457
22459
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
22460
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
22461
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
22462
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
22463
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
22464
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
22465
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
22466
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
22467
+ }
22468
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
22469
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
22470
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
22471
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
22472
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
22473
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
22474
+ }
22475
+ .pf-v6-c-toolbar {
22458
22476
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
22459
22477
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
22460
22478
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -22731,6 +22749,35 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22731
22749
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
22732
22750
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
22733
22751
  }
22752
+ .pf-v6-c-toolbar.pf-m-sticky-base {
22753
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
22754
+ position: sticky;
22755
+ inset-block-start: 0;
22756
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
22757
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
22758
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
22759
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
22760
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
22761
+ background: transparent;
22762
+ border-radius: inherit;
22763
+ }
22764
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
22765
+ position: absolute;
22766
+ inset: 0;
22767
+ z-index: -1;
22768
+ content: "";
22769
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
22770
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
22771
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
22772
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
22773
+ opacity: 0;
22774
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
22775
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
22776
+ transition-property: opacity;
22777
+ }
22778
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
22779
+ opacity: 1;
22780
+ }
22734
22781
  .pf-v6-c-toolbar.pf-m-static,
22735
22782
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
22736
22783
  position: static;
package/docs/components/Toolbar/examples/Toolbar.css CHANGED
@@ -75,7 +75,7 @@
75
75
  background-color: var(--pf-t--global--background--color--secondary--default);
76
76
  }
77
77
 
78
- #ws-core-c-toolbar-sticky-toolbar .ws-preview-html {
78
+ #ws-core-c-toolbar-sticky-toolbar .ws-preview-html, #ws-core-c-toolbar-dynamic-sticky-toolbar .ws-preview-html {
79
79
  height: 200px;
80
80
  overflow: auto;
81
81
  }
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -3560,6 +3560,50 @@ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse por
3560
3560
 
3561
3561
  ```
3562
3562
 
3563
+ ### Dynamic sticky toolbar
3564
+
3565
+ This example shows the use of `.pf-m-sticky-base` and `.pf-m-sticky-stuck`. `.pf-m-sticky-stuck` can be applied dynamically as the page has scrolled to only show sticky styles when the toolbar is "stuck" and floating above the content.
3566
+
3567
+ ```html
3568
+ <div
3569
+ class="pf-v6-c-toolbar pf-m-sticky-base pf-m-sticky-stuck"
3570
+ id="toolbar-sticky-stuck-example"
3571
+ >
3572
+ <div class="pf-v6-c-toolbar__content">
3573
+ <div class="pf-v6-c-toolbar__content-section">
3574
+ <div class="pf-v6-c-toolbar__item">Item</div>
3575
+ <div class="pf-v6-c-toolbar__item">Item</div>
3576
+ <div class="pf-v6-c-toolbar__item">Item</div>
3577
+ <hr class="pf-v6-c-divider pf-m-vertical" />
3578
+
3579
+ <div class="pf-v6-c-toolbar__group">
3580
+ <div class="pf-v6-c-toolbar__item">Item</div>
3581
+ <div class="pf-v6-c-toolbar__item">Item</div>
3582
+ <div class="pf-v6-c-toolbar__item">Item</div>
3583
+ </div>
3584
+
3585
+ <hr class="pf-v6-c-divider pf-m-vertical" />
3586
+ <div class="pf-v6-c-toolbar__item">Item</div>
3587
+ <div class="pf-v6-c-toolbar__item">Item</div>
3588
+ <div class="pf-v6-c-toolbar__item">Item</div>
3589
+ </div>
3590
+ </div>
3591
+ </div>
3592
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor mattis massa dignissim blandit. Mauris pellentesque nisi a erat ultricies, mollis auctor nulla volutpat. Donec eu nisl magna. Donec nisi nulla, blandit et mauris in, lobortis elementum neque. Nunc pharetra eleifend purus, in commodo nisl accumsan in. Vestibulum feugiat nisl eu venenatis feugiat. Morbi ornare velit vitae tellus sollicitudin, sed ornare neque sagittis. Proin sodales, libero et vestibulum luctus, nunc mi euismod dui, vel accumsan lacus odio vel nibh. Etiam at mattis purus, sit amet vestibulum metus. Maecenas feugiat condimentum ligula eget hendrerit. Nullam eleifend convallis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam rhoncus consectetur enim, at interdum mi tincidunt eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
3593
+ <br />
3594
+ <br />
3595
+ Maecenas vel sollicitudin ipsum, pulvinar pharetra magna. Aenean vel ipsum vel purus malesuada sagittis eget ac odio. Nullam vitae diam mollis, consectetur est vitae, sodales diam. Vivamus eu lectus quis mi maximus porta. Praesent erat sapien, vestibulum nec libero non, tincidunt congue mauris. Pellentesque vitae imperdiet mi. Nulla in ipsum neque. Cras a quam ut sem venenatis euismod non at tortor. Mauris porta purus augue, ut pharetra elit varius at. Vestibulum fringilla ligula ac leo tristique, porta venenatis nibh convallis.
3596
+ <br />
3597
+ <br />
3598
+ Vestibulum vel orci mattis magna tristique suscipit. In vel tellus tempor, consectetur mi at, pellentesque enim. Cras venenatis tellus eget velit porttitor, sit amet malesuada tortor venenatis. Maecenas vitae augue ac orci volutpat gravida. In fermentum, orci eget tincidunt lobortis, turpis orci porta nibh, cursus dignissim lectus sapien at felis. Nulla facilisi. Aenean lectus justo, pellentesque sed nulla ut, pulvinar pellentesque tortor. Ut tempus euismod dolor gravida rhoncus. Quisque sed lorem sit amet erat tincidunt aliquet quis in nulla. Maecenas arcu erat, hendrerit a dui eget, convallis pharetra sapien. Nunc tellus enim, dictum eu egestas vel, ultrices eget est. Etiam quis vehicula sem. Nulla facilisi. Donec ante ipsum, fringilla iaculis ex a, tincidunt lobortis mi.
3599
+ <br />
3600
+ <br />
3601
+ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse porttitor sem quis ante consequat, vitae commodo nulla ultricies. Nulla fermentum ipsum ac dolor elementum, eu luctus ex condimentum. Sed sed arcu aliquam, porta metus in, sollicitudin felis. Sed faucibus lacus consectetur orci ultricies laoreet. Morbi sed lectus dictum sem tempor porta. Donec ut diam tempor, venenatis erat vitae, accumsan diam. Etiam sed purus eget lacus vehicula iaculis non euismod dolor. Quisque ultricies eget est in semper.
3602
+ <br />
3603
+ <br />Fusce tristique nulla id vestibulum maximus. Morbi sit amet nisi nec orci pulvinar interdum. Duis convallis, nunc vel pharetra blandit, urna neque eleifend nunc, maximus faucibus tellus nisl a velit. Aliquam quis turpis tempor nisi ultricies fermentum at et ipsum. Pellentesque vel tincidunt nisl. Donec elit ante, sodales ac ultrices vitae, egestas ut magna. Nulla sollicitudin ornare mi, a porttitor sem fermentum vitae. Praesent maximus fringilla gravida. Sed ultricies turpis ut lacus sodales, et aliquet risus accumsan. Pellentesque lacus sapien, cursus vitae nulla vel, bibendum tristique risus.
3604
+
3605
+ ```
3606
+
3563
3607
  ### Vertical
3564
3608
 
3565
3609
  ```html isBeta
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.5.0-prerelease.76",
4
+ "version": "6.5.0-prerelease.77",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -29132,7 +29132,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29132
29132
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
29133
29133
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
29134
29134
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
29135
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29135
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
29136
29136
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
29137
29137
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
29138
29138
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
@@ -31598,10 +31598,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31598
31598
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
31599
31599
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
31600
31600
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
31601
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
31602
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
31601
31603
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
31602
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
31604
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
31603
31605
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
31604
31606
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
31607
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
31608
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
31609
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
31610
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
31611
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
31612
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
31613
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
31614
+ }
31615
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
31616
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
31617
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
31618
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
31619
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
31620
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
31621
+ }
31622
+ .pf-v6-c-toolbar {
31605
31623
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
31606
31624
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
31607
31625
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -31878,6 +31896,35 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31878
31896
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
31879
31897
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
31880
31898
  }
31899
+ .pf-v6-c-toolbar.pf-m-sticky-base {
31900
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
31901
+ position: sticky;
31902
+ inset-block-start: 0;
31903
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
31904
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
31905
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
31906
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
31907
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
31908
+ background: transparent;
31909
+ border-radius: inherit;
31910
+ }
31911
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
31912
+ position: absolute;
31913
+ inset: 0;
31914
+ z-index: -1;
31915
+ content: "";
31916
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
31917
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
31918
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
31919
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
31920
+ opacity: 0;
31921
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
31922
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
31923
+ transition-property: opacity;
31924
+ }
31925
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
31926
+ opacity: 1;
31927
+ }
31881
31928
  .pf-v6-c-toolbar.pf-m-static,
31882
31929
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
31883
31930
  position: static;
package/patternfly.css CHANGED
@@ -29279,7 +29279,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29279
29279
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
29280
29280
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
29281
29281
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
29282
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29282
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
29283
29283
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
29284
29284
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
29285
29285
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
@@ -31745,10 +31745,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31745
31745
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
31746
31746
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
31747
31747
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
31748
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
31749
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
31748
31750
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
31749
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
31751
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
31750
31752
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
31751
31753
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
31754
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
31755
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
31756
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
31757
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
31758
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
31759
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
31760
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
31761
+ }
31762
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
31763
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
31764
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
31765
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
31766
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
31767
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
31768
+ }
31769
+ .pf-v6-c-toolbar {
31752
31770
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
31753
31771
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
31754
31772
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -32025,6 +32043,35 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
32025
32043
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
32026
32044
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
32027
32045
  }
32046
+ .pf-v6-c-toolbar.pf-m-sticky-base {
32047
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
32048
+ position: sticky;
32049
+ inset-block-start: 0;
32050
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
32051
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
32052
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
32053
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
32054
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
32055
+ background: transparent;
32056
+ border-radius: inherit;
32057
+ }
32058
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
32059
+ position: absolute;
32060
+ inset: 0;
32061
+ z-index: -1;
32062
+ content: "";
32063
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
32064
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
32065
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
32066
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
32067
+ opacity: 0;
32068
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
32069
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
32070
+ transition-property: opacity;
32071
+ }
32072
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
32073
+ opacity: 1;
32074
+ }
32028
32075
  .pf-v6-c-toolbar.pf-m-static,
32029
32076
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
32030
32077
  position: static;