@patternfly/patternfly 6.0.0-alpha.116 → 6.0.0-alpha.118

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 (80) hide show
  1. package/base/_fonts.scss +7 -95
  2. package/base/_variables.scss +7 -292
  3. package/base/patternfly-fonts.css +6 -76
  4. package/base/patternfly-variables.css +8 -241
  5. package/components/AppLauncher/app-launcher.css +0 -10
  6. package/components/AppLauncher/app-launcher.scss +0 -7
  7. package/components/Button/button.css +1 -1
  8. package/components/Button/button.scss +1 -1
  9. package/components/Chip/chip-group.css +0 -13
  10. package/components/Chip/chip-group.scss +0 -2
  11. package/components/Chip/chip.css +0 -19
  12. package/components/Chip/chip.scss +0 -9
  13. package/components/Content/content.css +86 -60
  14. package/components/Content/content.scss +129 -40
  15. package/components/ContextSelector/context-selector.css +0 -30
  16. package/components/ContextSelector/context-selector.scss +0 -9
  17. package/components/DataList/data-list.css +46 -49
  18. package/components/Divider/divider.css +28 -31
  19. package/components/Dropdown/dropdown.css +0 -22
  20. package/components/Dropdown/dropdown.scss +0 -7
  21. package/components/LogViewer/log-viewer.css +0 -24
  22. package/components/LogViewer/log-viewer.scss +0 -9
  23. package/components/Menu/menu.css +107 -65
  24. package/components/Menu/menu.scss +4 -4
  25. package/components/NumberInput/number-input.css +5 -8
  26. package/components/NumberInput/number-input.scss +1 -1
  27. package/components/OptionsMenu/options-menu.css +0 -15
  28. package/components/OptionsMenu/options-menu.scss +0 -7
  29. package/components/Page/page.css +95 -68
  30. package/components/Page/page.scss +3 -5
  31. package/components/Pagination/pagination.css +8 -8
  32. package/components/Pagination/pagination.scss +1 -1
  33. package/components/Select/select.css +0 -29
  34. package/components/Select/select.scss +0 -9
  35. package/components/Table/table.css +46 -49
  36. package/components/Toolbar/toolbar.css +91 -76
  37. package/components/Toolbar/toolbar.scss +1 -1
  38. package/docs/components/Content/examples/Content.md +254 -61
  39. package/package.json +31 -32
  40. package/patternfly-base-no-globals.css +12 -315
  41. package/patternfly-base.css +12 -315
  42. package/patternfly-charts.css +0 -322
  43. package/patternfly-charts.scss +5 -409
  44. package/patternfly-no-globals.css +548 -757
  45. package/patternfly.css +548 -757
  46. package/patternfly.min.css +1 -1
  47. package/patternfly.min.css.map +1 -1
  48. package/sass-utilities/_all.scss +0 -2
  49. package/sass-utilities/functions.scss +0 -6
  50. package/sass-utilities/mixins.scss +42 -16
  51. package/sass-utilities/scss-variables.scss +0 -211
  52. package/base/_chart-globals.scss +0 -415
  53. package/base/themes/dark/_chart-globals.scss +0 -42
  54. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  55. package/components/Chip/themes/dark/chip.scss +0 -9
  56. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  57. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  58. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  59. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  60. package/components/Select/themes/dark/select.scss +0 -23
  61. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6229
  62. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  63. package/patternfly-base-theme-dark-unversioned.css +0 -6346
  64. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  65. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  66. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  67. package/patternfly-charts-theme-dark.css +0 -70
  68. package/patternfly-charts-theme-dark.scss +0 -8
  69. package/patternfly-theme-dark-unversioned.css +0 -35621
  70. package/patternfly-theme-dark-unversioned.scss +0 -6
  71. package/patternfly-theme-dark.css +0 -0
  72. package/patternfly-theme-dark.scss +0 -1
  73. package/sass-utilities/colors.scss +0 -82
  74. package/sass-utilities/placeholders.scss +0 -72
  75. package/sass-utilities/themes/dark/_all.scss +0 -4
  76. package/sass-utilities/themes/dark/colors.scss +0 -16
  77. package/sass-utilities/themes/dark/mixins.scss +0 -7
  78. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  79. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  80. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
@@ -1,52 +1,3 @@
1
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
2
- --pf-v6-hidden-visible--hidden--Display: none;
3
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4
- display: var(--pf-v6-hidden-visible--Display);
5
- }
6
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden:where(th, td) {
7
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
8
- }
9
- @media screen and (min-width: 576px) {
10
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-sm:where(th, td) {
11
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
12
- }
13
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-sm:where(th, td) {
14
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
15
- }
16
- }
17
- @media screen and (min-width: 768px) {
18
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-md:where(th, td) {
19
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
20
- }
21
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-md:where(th, td) {
22
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
23
- }
24
- }
25
- @media screen and (min-width: 992px) {
26
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-lg:where(th, td) {
27
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
28
- }
29
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-lg:where(th, td) {
30
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
31
- }
32
- }
33
- @media screen and (min-width: 1200px) {
34
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-xl:where(th, td) {
35
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
36
- }
37
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-xl:where(th, td) {
38
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
39
- }
40
- }
41
- @media screen and (min-width: 1450px) {
42
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-2xl:where(th, td) {
43
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
44
- }
45
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-2xl:where(th, td) {
46
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
47
- }
48
- }
49
-
50
1
  :where(:root),
51
2
  :where(.pf-v6-c-table) {
52
3
  --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -239,6 +190,9 @@
239
190
  }
240
191
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
241
192
  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-table--cell--hidden-visible--Display);
193
+ --pf-v6-hidden-visible--hidden--Display: none;
194
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
195
+ display: var(--pf-v6-hidden-visible--Display);
242
196
  position: relative;
243
197
  width: var(--pf-v6-c-table--cell--Width);
244
198
  min-width: var(--pf-v6-c-table--cell--MinWidth);
@@ -256,6 +210,49 @@
256
210
  word-break: var(--pf-v6-c-table--cell--WordBreak);
257
211
  white-space: var(--pf-v6-c-table--cell--WhiteSpace);
258
212
  }
213
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden {
214
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
215
+ }
216
+ @media screen and (min-width: 576px) {
217
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-sm {
218
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
219
+ }
220
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-sm {
221
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
222
+ }
223
+ }
224
+ @media screen and (min-width: 768px) {
225
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-md {
226
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
227
+ }
228
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-md {
229
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
230
+ }
231
+ }
232
+ @media screen and (min-width: 992px) {
233
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-lg {
234
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
235
+ }
236
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-lg {
237
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
238
+ }
239
+ }
240
+ @media screen and (min-width: 1200px) {
241
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-xl {
242
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
243
+ }
244
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-xl {
245
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
246
+ }
247
+ }
248
+ @media screen and (min-width: 1450px) {
249
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-2xl {
250
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
251
+ }
252
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-2xl {
253
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
254
+ }
255
+ }
259
256
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
260
257
  padding-inline-start: calc(var(--pf-v6-c-table--cell--first-last-child--PaddingInline) + var(--pf-v6-c-table--cell--PaddingLeft));
261
258
  }
@@ -1,78 +1,3 @@
1
- .pf-v6-c-toolbar__content-section,
2
- .pf-v6-c-toolbar__group,
3
- .pf-v6-c-toolbar__item,
4
- .pf-v6-c-toolbar__group.pf-m-chip-group-container,
5
- .pf-v6-c-toolbar__group.pf-m-chip-group {
6
- --pf-v6-hidden-visible--hidden--Display: none;
7
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
8
- display: var(--pf-v6-hidden-visible--Display);
9
- }
10
- .pf-m-hidden.pf-v6-c-toolbar__content-section,
11
- .pf-m-hidden.pf-v6-c-toolbar__group,
12
- .pf-m-hidden.pf-v6-c-toolbar__item {
13
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
14
- }
15
- @media screen and (min-width: 576px) {
16
- .pf-m-hidden-on-sm.pf-v6-c-toolbar__content-section,
17
- .pf-m-hidden-on-sm.pf-v6-c-toolbar__group,
18
- .pf-m-hidden-on-sm.pf-v6-c-toolbar__item {
19
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
20
- }
21
- .pf-m-visible-on-sm.pf-v6-c-toolbar__content-section,
22
- .pf-m-visible-on-sm.pf-v6-c-toolbar__group,
23
- .pf-m-visible-on-sm.pf-v6-c-toolbar__item {
24
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
25
- }
26
- }
27
- @media screen and (min-width: 768px) {
28
- .pf-m-hidden-on-md.pf-v6-c-toolbar__content-section,
29
- .pf-m-hidden-on-md.pf-v6-c-toolbar__group,
30
- .pf-m-hidden-on-md.pf-v6-c-toolbar__item {
31
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
32
- }
33
- .pf-m-visible-on-md.pf-v6-c-toolbar__content-section,
34
- .pf-m-visible-on-md.pf-v6-c-toolbar__group,
35
- .pf-m-visible-on-md.pf-v6-c-toolbar__item {
36
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
37
- }
38
- }
39
- @media screen and (min-width: 992px) {
40
- .pf-m-hidden-on-lg.pf-v6-c-toolbar__content-section,
41
- .pf-m-hidden-on-lg.pf-v6-c-toolbar__group,
42
- .pf-m-hidden-on-lg.pf-v6-c-toolbar__item {
43
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
44
- }
45
- .pf-m-visible-on-lg.pf-v6-c-toolbar__content-section,
46
- .pf-m-visible-on-lg.pf-v6-c-toolbar__group,
47
- .pf-m-visible-on-lg.pf-v6-c-toolbar__item {
48
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
49
- }
50
- }
51
- @media screen and (min-width: 1200px) {
52
- .pf-m-hidden-on-xl.pf-v6-c-toolbar__content-section,
53
- .pf-m-hidden-on-xl.pf-v6-c-toolbar__group,
54
- .pf-m-hidden-on-xl.pf-v6-c-toolbar__item {
55
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
56
- }
57
- .pf-m-visible-on-xl.pf-v6-c-toolbar__content-section,
58
- .pf-m-visible-on-xl.pf-v6-c-toolbar__group,
59
- .pf-m-visible-on-xl.pf-v6-c-toolbar__item {
60
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
61
- }
62
- }
63
- @media screen and (min-width: 1450px) {
64
- .pf-m-hidden-on-2xl.pf-v6-c-toolbar__content-section,
65
- .pf-m-hidden-on-2xl.pf-v6-c-toolbar__group,
66
- .pf-m-hidden-on-2xl.pf-v6-c-toolbar__item {
67
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
68
- }
69
- .pf-m-visible-on-2xl.pf-v6-c-toolbar__content-section,
70
- .pf-m-visible-on-2xl.pf-v6-c-toolbar__group,
71
- .pf-m-visible-on-2xl.pf-v6-c-toolbar__item {
72
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
73
- }
74
- }
75
-
76
1
  :where(:root),
77
2
  :where(.pf-v6-c-toolbar) {
78
3
  --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--sm);
@@ -93,7 +18,7 @@
93
18
  --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
94
19
  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
95
20
  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
96
- --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--xs);
21
+ --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
97
22
  --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
98
23
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
99
24
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
@@ -113,8 +38,98 @@
113
38
  .pf-v6-c-toolbar__group.pf-m-chip-group-container,
114
39
  .pf-v6-c-toolbar__group.pf-m-chip-group {
115
40
  --pf-v6-hidden-visible--visible--Display: flex;
41
+ --pf-v6-hidden-visible--hidden--Display: none;
42
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
43
+ display: var(--pf-v6-hidden-visible--Display);
116
44
  flex-wrap: wrap;
117
45
  }
46
+ .pf-v6-c-toolbar__content-section.pf-m-hidden,
47
+ .pf-v6-c-toolbar__group.pf-m-hidden,
48
+ .pf-v6-c-toolbar__item.pf-m-hidden,
49
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-hidden,
50
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-hidden {
51
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
52
+ }
53
+ @media screen and (min-width: 576px) {
54
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
55
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
56
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-sm,
57
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-hidden-on-sm,
58
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-hidden-on-sm {
59
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
60
+ }
61
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-sm,
62
+ .pf-v6-c-toolbar__group.pf-m-visible-on-sm,
63
+ .pf-v6-c-toolbar__item.pf-m-visible-on-sm,
64
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-visible-on-sm,
65
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-visible-on-sm {
66
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
67
+ }
68
+ }
69
+ @media screen and (min-width: 768px) {
70
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-md,
71
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-md,
72
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-md,
73
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-hidden-on-md,
74
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-hidden-on-md {
75
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
76
+ }
77
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-md,
78
+ .pf-v6-c-toolbar__group.pf-m-visible-on-md,
79
+ .pf-v6-c-toolbar__item.pf-m-visible-on-md,
80
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-visible-on-md,
81
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-visible-on-md {
82
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
83
+ }
84
+ }
85
+ @media screen and (min-width: 992px) {
86
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg,
87
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-lg,
88
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-lg,
89
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-hidden-on-lg,
90
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-hidden-on-lg {
91
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
92
+ }
93
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-lg,
94
+ .pf-v6-c-toolbar__group.pf-m-visible-on-lg,
95
+ .pf-v6-c-toolbar__item.pf-m-visible-on-lg,
96
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-visible-on-lg,
97
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-visible-on-lg {
98
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
99
+ }
100
+ }
101
+ @media screen and (min-width: 1200px) {
102
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl,
103
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-xl,
104
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-xl,
105
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-hidden-on-xl,
106
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-hidden-on-xl {
107
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
108
+ }
109
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-xl,
110
+ .pf-v6-c-toolbar__group.pf-m-visible-on-xl,
111
+ .pf-v6-c-toolbar__item.pf-m-visible-on-xl,
112
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-visible-on-xl,
113
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-visible-on-xl {
114
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
115
+ }
116
+ }
117
+ @media screen and (min-width: 1450px) {
118
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl,
119
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-2xl,
120
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-2xl,
121
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-hidden-on-2xl,
122
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-hidden-on-2xl {
123
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
124
+ }
125
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl,
126
+ .pf-v6-c-toolbar__group.pf-m-visible-on-2xl,
127
+ .pf-v6-c-toolbar__item.pf-m-visible-on-2xl,
128
+ .pf-v6-c-toolbar__group.pf-m-chip-group-container.pf-m-visible-on-2xl,
129
+ .pf-v6-c-toolbar__group.pf-m-chip-group.pf-m-visible-on-2xl {
130
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
131
+ }
132
+ }
118
133
 
119
134
  .pf-v6-c-toolbar,
120
135
  .pf-v6-c-toolbar__content {
@@ -38,7 +38,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
38
38
  --#{$toolbar}__content--PaddingInline: var(--#{$toolbar}--PaddingInline);
39
39
 
40
40
  // * Toolbar expandable content
41
- --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--z-index--xs);
41
+ --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
42
42
  --#{$toolbar}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
43
43
  --#{$toolbar}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
44
44