@patternfly/patternfly 5.0.0-alpha.75 → 5.0.0-alpha.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 (37) hide show
  1. package/components/Masthead/masthead.css +15 -3
  2. package/components/Masthead/masthead.scss +16 -4
  3. package/components/Toolbar/toolbar.css +2 -1
  4. package/components/Toolbar/toolbar.scss +2 -1
  5. package/docs/components/Alert/examples/Alert.md +1 -1
  6. package/docs/components/AppLauncher/deprecated/application-launcher.css +25 -0
  7. package/docs/components/AppLauncher/{examples → deprecated}/application-launcher.md +1 -0
  8. package/docs/components/Card/examples/Card.md +10 -10
  9. package/docs/components/Chip/examples/Chip.md +1 -1
  10. package/docs/components/ContextSelector/deprecated/context-selector.css +7 -0
  11. package/docs/components/ContextSelector/{examples → deprecated}/context-selector.md +1 -0
  12. package/docs/components/Label/examples/Label.md +1 -1
  13. package/docs/components/Nav/examples/Navigation.md +4 -4
  14. package/docs/components/OptionsMenu/deprecated/options-menu.css +25 -0
  15. package/docs/components/OptionsMenu/{examples → deprecated}/options-menu.md +1 -0
  16. package/docs/components/Page/deprecated/PageHeader.css +17 -0
  17. package/docs/components/Page/deprecated/PageHeader.md +261 -0
  18. package/docs/components/Page/examples/Page.md +106 -51
  19. package/docs/components/Tabs/examples/Tabs.md +6 -6
  20. package/docs/components/Toolbar/examples/Toolbar.md +15 -15
  21. package/docs/demos/ContextSelector/examples/ContextSelector.md +1 -0
  22. package/docs/demos/Dashboard/examples/Dashboard.md +0 -1
  23. package/docs/demos/DataList/examples/DataList.md +6 -6
  24. package/docs/demos/Masthead/examples/Masthead.md +9 -9
  25. package/docs/demos/Nav/examples/Nav.md +2 -2
  26. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -18
  27. package/docs/demos/Table/examples/Table.md +36 -42
  28. package/docs/demos/Toolbar/examples/Toolbar.md +12 -12
  29. package/package.json +5 -5
  30. package/patternfly-no-globals.css +17 -4
  31. package/patternfly-theme-dark-unversioned.css +17 -4
  32. package/patternfly.css +17 -4
  33. package/patternfly.min.css +1 -1
  34. package/patternfly.min.css.map +1 -1
  35. package/docs/components/AppLauncher/examples/application-launcher.css +0 -25
  36. package/docs/components/ContextSelector/examples/context-selector.css +0 -7
  37. package/docs/components/OptionsMenu/examples/options-menu.css +0 -25
package/docs/demos/Table/examples/Table.md CHANGED
@@ -1006,7 +1006,7 @@ wrapperTag: div
1006
1006
  aria-label="search filter"
1007
1007
  role="group"
1008
1008
  >
1009
- <div class="pf-v5-c-input-group__item pf-m-fill">
1009
+ <div class="pf-v5-c-input-group__item">
1010
1010
  <div class="pf-v5-c-select" style="width: 124px">
1011
1011
  <span id="-select-name-label" hidden>Choose one</span>
1012
1012
 
@@ -1074,8 +1074,8 @@ wrapperTag: div
1074
1074
  </ul>
1075
1075
  </div>
1076
1076
  </div>
1077
- <div class="pf-v5-c-input-group__item">
1078
- <div class="pf-v5-c-text-input-group" style="width: auto">
1077
+ <div class="pf-v5-c-input-group__item pf-m-fill">
1078
+ <div class="pf-v5-c-text-input-group">
1079
1079
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
1080
1080
  <span class="pf-v5-c-text-input-group__text">
1081
1081
  <span class="pf-v5-c-text-input-group__icon">
@@ -2879,7 +2879,7 @@ wrapperTag: div
2879
2879
  aria-label="search filter"
2880
2880
  role="group"
2881
2881
  >
2882
- <div class="pf-v5-c-input-group__item pf-m-fill">
2882
+ <div class="pf-v5-c-input-group__item">
2883
2883
  <div class="pf-v5-c-select" style="width: 124px">
2884
2884
  <span id="-select-name-label" hidden>Choose one</span>
2885
2885
 
@@ -2947,8 +2947,8 @@ wrapperTag: div
2947
2947
  </ul>
2948
2948
  </div>
2949
2949
  </div>
2950
- <div class="pf-v5-c-input-group__item">
2951
- <div class="pf-v5-c-text-input-group" style="width: auto">
2950
+ <div class="pf-v5-c-input-group__item pf-m-fill">
2951
+ <div class="pf-v5-c-text-input-group">
2952
2952
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
2953
2953
  <span class="pf-v5-c-text-input-group__text">
2954
2954
  <span class="pf-v5-c-text-input-group__icon">
@@ -4908,7 +4908,7 @@ wrapperTag: div
4908
4908
  aria-label="search filter"
4909
4909
  role="group"
4910
4910
  >
4911
- <div class="pf-v5-c-input-group__item pf-m-fill">
4911
+ <div class="pf-v5-c-input-group__item">
4912
4912
  <div class="pf-v5-c-select" style="width: 124px">
4913
4913
  <span id="-select-name-label" hidden>Choose one</span>
4914
4914
 
@@ -4976,8 +4976,8 @@ wrapperTag: div
4976
4976
  </ul>
4977
4977
  </div>
4978
4978
  </div>
4979
- <div class="pf-v5-c-input-group__item">
4980
- <div class="pf-v5-c-text-input-group" style="width: auto">
4979
+ <div class="pf-v5-c-input-group__item pf-m-fill">
4980
+ <div class="pf-v5-c-text-input-group">
4981
4981
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
4982
4982
  <span class="pf-v5-c-text-input-group__text">
4983
4983
  <span class="pf-v5-c-text-input-group__icon">
@@ -7182,7 +7182,7 @@ wrapperTag: div
7182
7182
  aria-label="search filter"
7183
7183
  role="group"
7184
7184
  >
7185
- <div class="pf-v5-c-input-group__item pf-m-fill">
7185
+ <div class="pf-v5-c-input-group__item">
7186
7186
  <div class="pf-v5-c-select" style="width: 124px">
7187
7187
  <span id="-select-name-label" hidden>Choose one</span>
7188
7188
 
@@ -7250,8 +7250,8 @@ wrapperTag: div
7250
7250
  </ul>
7251
7251
  </div>
7252
7252
  </div>
7253
- <div class="pf-v5-c-input-group__item">
7254
- <div class="pf-v5-c-text-input-group" style="width: auto">
7253
+ <div class="pf-v5-c-input-group__item pf-m-fill">
7254
+ <div class="pf-v5-c-text-input-group">
7255
7255
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
7256
7256
  <span class="pf-v5-c-text-input-group__text">
7257
7257
  <span class="pf-v5-c-text-input-group__icon">
@@ -9126,7 +9126,7 @@ wrapperTag: div
9126
9126
  aria-label="search filter"
9127
9127
  role="group"
9128
9128
  >
9129
- <div class="pf-v5-c-input-group__item pf-m-fill">
9129
+ <div class="pf-v5-c-input-group__item">
9130
9130
  <div class="pf-v5-c-select" style="width: 124px">
9131
9131
  <span id="-select-name-label" hidden>Choose one</span>
9132
9132
 
@@ -9194,8 +9194,8 @@ wrapperTag: div
9194
9194
  </ul>
9195
9195
  </div>
9196
9196
  </div>
9197
- <div class="pf-v5-c-input-group__item">
9198
- <div class="pf-v5-c-text-input-group" style="width: auto">
9197
+ <div class="pf-v5-c-input-group__item pf-m-fill">
9198
+ <div class="pf-v5-c-text-input-group">
9199
9199
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
9200
9200
  <span class="pf-v5-c-text-input-group__text">
9201
9201
  <span class="pf-v5-c-text-input-group__icon">
@@ -16974,7 +16974,7 @@ wrapperTag: div
16974
16974
  aria-label="search filter"
16975
16975
  role="group"
16976
16976
  >
16977
- <div class="pf-v5-c-input-group__item pf-m-fill">
16977
+ <div class="pf-v5-c-input-group__item">
16978
16978
  <div class="pf-v5-c-select" style="width: 124px">
16979
16979
  <span id="-select-name-label" hidden>Choose one</span>
16980
16980
 
@@ -17042,8 +17042,8 @@ wrapperTag: div
17042
17042
  </ul>
17043
17043
  </div>
17044
17044
  </div>
17045
- <div class="pf-v5-c-input-group__item">
17046
- <div class="pf-v5-c-text-input-group" style="width: auto">
17045
+ <div class="pf-v5-c-input-group__item pf-m-fill">
17046
+ <div class="pf-v5-c-text-input-group">
17047
17047
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
17048
17048
  <span class="pf-v5-c-text-input-group__text">
17049
17049
  <span class="pf-v5-c-text-input-group__icon">
@@ -19013,7 +19013,7 @@ wrapperTag: div
19013
19013
  aria-label="search filter"
19014
19014
  role="group"
19015
19015
  >
19016
- <div class="pf-v5-c-input-group__item pf-m-fill">
19016
+ <div class="pf-v5-c-input-group__item">
19017
19017
  <div class="pf-v5-c-select" style="width: 124px">
19018
19018
  <span id="-select-name-label" hidden>Choose one</span>
19019
19019
 
@@ -19081,8 +19081,8 @@ wrapperTag: div
19081
19081
  </ul>
19082
19082
  </div>
19083
19083
  </div>
19084
- <div class="pf-v5-c-input-group__item">
19085
- <div class="pf-v5-c-text-input-group" style="width: auto">
19084
+ <div class="pf-v5-c-input-group__item pf-m-fill">
19085
+ <div class="pf-v5-c-text-input-group">
19086
19086
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
19087
19087
  <span class="pf-v5-c-text-input-group__text">
19088
19088
  <span class="pf-v5-c-text-input-group__icon">
@@ -21155,7 +21155,7 @@ wrapperTag: div
21155
21155
  aria-label="search filter"
21156
21156
  role="group"
21157
21157
  >
21158
- <div class="pf-v5-c-input-group__item pf-m-fill">
21158
+ <div class="pf-v5-c-input-group__item">
21159
21159
  <div class="pf-v5-c-select" style="width: 124px">
21160
21160
  <span id="-select-name-label" hidden>Choose one</span>
21161
21161
 
@@ -21223,8 +21223,8 @@ wrapperTag: div
21223
21223
  </ul>
21224
21224
  </div>
21225
21225
  </div>
21226
- <div class="pf-v5-c-input-group__item">
21227
- <div class="pf-v5-c-text-input-group" style="width: auto">
21226
+ <div class="pf-v5-c-input-group__item pf-m-fill">
21227
+ <div class="pf-v5-c-text-input-group">
21228
21228
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
21229
21229
  <span class="pf-v5-c-text-input-group__text">
21230
21230
  <span class="pf-v5-c-text-input-group__icon">
@@ -23195,7 +23195,7 @@ wrapperTag: div
23195
23195
  aria-label="search filter"
23196
23196
  role="group"
23197
23197
  >
23198
- <div class="pf-v5-c-input-group__item pf-m-fill">
23198
+ <div class="pf-v5-c-input-group__item">
23199
23199
  <div class="pf-v5-c-select" style="width: 124px">
23200
23200
  <span id="-select-name-label" hidden>Choose one</span>
23201
23201
 
@@ -23263,11 +23263,8 @@ wrapperTag: div
23263
23263
  </ul>
23264
23264
  </div>
23265
23265
  </div>
23266
- <div class="pf-v5-c-input-group__item">
23267
- <div
23268
- class="pf-v5-c-text-input-group"
23269
- style="width: auto"
23270
- >
23266
+ <div class="pf-v5-c-input-group__item pf-m-fill">
23267
+ <div class="pf-v5-c-text-input-group">
23271
23268
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
23272
23269
  <span class="pf-v5-c-text-input-group__text">
23273
23270
  <span class="pf-v5-c-text-input-group__icon">
@@ -25074,7 +25071,7 @@ wrapperTag: div
25074
25071
  aria-label="search filter"
25075
25072
  role="group"
25076
25073
  >
25077
- <div class="pf-v5-c-input-group__item pf-m-fill">
25074
+ <div class="pf-v5-c-input-group__item">
25078
25075
  <div class="pf-v5-c-select" style="width: 124px">
25079
25076
  <span id="-select-name-label" hidden>Choose one</span>
25080
25077
 
@@ -25142,11 +25139,8 @@ wrapperTag: div
25142
25139
  </ul>
25143
25140
  </div>
25144
25141
  </div>
25145
- <div class="pf-v5-c-input-group__item">
25146
- <div
25147
- class="pf-v5-c-text-input-group"
25148
- style="width: auto"
25149
- >
25142
+ <div class="pf-v5-c-input-group__item pf-m-fill">
25143
+ <div class="pf-v5-c-text-input-group">
25150
25144
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
25151
25145
  <span class="pf-v5-c-text-input-group__text">
25152
25146
  <span class="pf-v5-c-text-input-group__icon">
@@ -26974,7 +26968,7 @@ wrapperTag: div
26974
26968
  aria-label="search filter"
26975
26969
  role="group"
26976
26970
  >
26977
- <div class="pf-v5-c-input-group__item pf-m-fill">
26971
+ <div class="pf-v5-c-input-group__item">
26978
26972
  <div class="pf-v5-c-select" style="width: 124px">
26979
26973
  <span id="-select-name-label" hidden>Choose one</span>
26980
26974
 
@@ -27042,8 +27036,8 @@ wrapperTag: div
27042
27036
  </ul>
27043
27037
  </div>
27044
27038
  </div>
27045
- <div class="pf-v5-c-input-group__item">
27046
- <div class="pf-v5-c-text-input-group" style="width: auto">
27039
+ <div class="pf-v5-c-input-group__item pf-m-fill">
27040
+ <div class="pf-v5-c-text-input-group">
27047
27041
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
27048
27042
  <span class="pf-v5-c-text-input-group__text">
27049
27043
  <span class="pf-v5-c-text-input-group__icon">
@@ -28870,7 +28864,7 @@ wrapperTag: div
28870
28864
  aria-label="search filter"
28871
28865
  role="group"
28872
28866
  >
28873
- <div class="pf-v5-c-input-group__item pf-m-fill">
28867
+ <div class="pf-v5-c-input-group__item">
28874
28868
  <div class="pf-v5-c-select" style="width: 124px">
28875
28869
  <span id="-select-name-label" hidden>Choose one</span>
28876
28870
 
@@ -28938,8 +28932,8 @@ wrapperTag: div
28938
28932
  </ul>
28939
28933
  </div>
28940
28934
  </div>
28941
- <div class="pf-v5-c-input-group__item">
28942
- <div class="pf-v5-c-text-input-group" style="width: auto">
28935
+ <div class="pf-v5-c-input-group__item pf-m-fill">
28936
+ <div class="pf-v5-c-text-input-group">
28943
28937
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
28944
28938
  <span class="pf-v5-c-text-input-group__text">
28945
28939
  <span class="pf-v5-c-text-input-group__icon">
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -32,7 +32,7 @@ section: components
32
32
  aria-label="search filter"
33
33
  role="group"
34
34
  >
35
- <div class="pf-v5-c-input-group__item pf-m-fill">
35
+ <div class="pf-v5-c-input-group__item">
36
36
  <div class="pf-v5-c-select" style="width: 124px">
37
37
  <span
38
38
  id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
@@ -100,8 +100,8 @@ section: components
100
100
  </ul>
101
101
  </div>
102
102
  </div>
103
- <div class="pf-v5-c-input-group__item">
104
- <div class="pf-v5-c-text-input-group" style="width: auto">
103
+ <div class="pf-v5-c-input-group__item pf-m-fill">
104
+ <div class="pf-v5-c-text-input-group">
105
105
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
106
106
  <span class="pf-v5-c-text-input-group__text">
107
107
  <span class="pf-v5-c-text-input-group__icon">
@@ -1371,7 +1371,7 @@ section: components
1371
1371
  aria-label="search filter"
1372
1372
  role="group"
1373
1373
  >
1374
- <div class="pf-v5-c-input-group__item pf-m-fill">
1374
+ <div class="pf-v5-c-input-group__item">
1375
1375
  <div class="pf-v5-c-select" style="width: 160px">
1376
1376
  <span
1377
1377
  id="toolbar-with-validation-example-select-name-label"
@@ -1442,8 +1442,8 @@ section: components
1442
1442
  </ul>
1443
1443
  </div>
1444
1444
  </div>
1445
- <div class="pf-v5-c-input-group__item">
1446
- <div class="pf-v5-c-text-input-group" style="width: auto">
1445
+ <div class="pf-v5-c-input-group__item pf-m-fill">
1446
+ <div class="pf-v5-c-text-input-group">
1447
1447
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
1448
1448
  <span class="pf-v5-c-text-input-group__text">
1449
1449
  <span class="pf-v5-c-text-input-group__icon">
@@ -2163,7 +2163,7 @@ section: components
2163
2163
  aria-label="search filter"
2164
2164
  role="group"
2165
2165
  >
2166
- <div class="pf-v5-c-input-group__item pf-m-fill">
2166
+ <div class="pf-v5-c-input-group__item">
2167
2167
  <div class="pf-v5-c-select" style="width: 124px">
2168
2168
  <span
2169
2169
  id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
@@ -2231,8 +2231,8 @@ section: components
2231
2231
  </ul>
2232
2232
  </div>
2233
2233
  </div>
2234
- <div class="pf-v5-c-input-group__item">
2235
- <div class="pf-v5-c-text-input-group" style="width: auto">
2234
+ <div class="pf-v5-c-input-group__item pf-m-fill">
2235
+ <div class="pf-v5-c-text-input-group">
2236
2236
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
2237
2237
  <span class="pf-v5-c-text-input-group__text">
2238
2238
  <span class="pf-v5-c-text-input-group__icon">
@@ -4573,7 +4573,7 @@ section: components
4573
4573
  aria-label="search filter"
4574
4574
  role="group"
4575
4575
  >
4576
- <div class="pf-v5-c-input-group__item pf-m-fill">
4576
+ <div class="pf-v5-c-input-group__item">
4577
4577
  <div class="pf-v5-c-select" style="width: 124px">
4578
4578
  <span
4579
4579
  id="toolbar-pagination-management-example-toolbar-select-name-label"
@@ -4644,8 +4644,8 @@ section: components
4644
4644
  </ul>
4645
4645
  </div>
4646
4646
  </div>
4647
- <div class="pf-v5-c-input-group__item">
4648
- <div class="pf-v5-c-text-input-group" style="width: auto">
4647
+ <div class="pf-v5-c-input-group__item pf-m-fill">
4648
+ <div class="pf-v5-c-text-input-group">
4649
4649
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
4650
4650
  <span class="pf-v5-c-text-input-group__text">
4651
4651
  <span class="pf-v5-c-text-input-group__icon">
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": "5.0.0-alpha.75",
4
+ "version": "5.0.0-alpha.77",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -42,11 +42,11 @@
42
42
  "@commitlint/config-conventional": "^17.4.2",
43
43
  "@fortawesome/fontawesome": "^1.1.8",
44
44
  "@octokit/rest": "^19.0.7",
45
- "@patternfly/documentation-framework": "2.0.0-alpha.41",
45
+ "@patternfly/documentation-framework": "2.0.0-alpha.50",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
- "@patternfly/react-code-editor": "5.0.0-alpha.105",
48
- "@patternfly/react-core": "5.0.0-alpha.104",
49
- "@patternfly/react-table": "5.0.0-alpha.106",
47
+ "@patternfly/react-code-editor": "5.0.0-alpha.116",
48
+ "@patternfly/react-core": "5.0.0-alpha.115",
49
+ "@patternfly/react-table": "5.0.0-alpha.117",
50
50
  "@starptech/prettyhtml": "^0.10.0",
51
51
  "cheerio": "^1.0.0-rc.12",
52
52
  "commander": "^10.0.0",
package/patternfly-no-globals.css CHANGED
@@ -10909,6 +10909,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10909
10909
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
10910
10910
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
10911
10911
  --pf-v5-c-toolbar__expandable-content--Display: grid;
10912
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
10912
10913
  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
10913
10914
  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
10914
10915
  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -11248,7 +11249,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11248
11249
  z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
11249
11250
  display: none;
11250
11251
  width: 100%;
11251
- padding: 0 var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11252
+ padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11252
11253
  background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
11253
11254
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
11254
11255
  }
@@ -17024,6 +17025,7 @@ ul.pf-v5-c-list {
17024
17025
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17025
17026
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17026
17027
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17028
+ --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17027
17029
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17028
17030
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
17029
17031
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -17031,8 +17033,8 @@ ul.pf-v5-c-list {
17031
17033
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
17032
17034
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
17033
17035
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
17034
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17035
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17036
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17037
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17036
17038
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
17037
17039
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
17038
17040
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -17097,6 +17099,7 @@ ul.pf-v5-c-list {
17097
17099
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
17098
17100
  }
17099
17101
  .pf-v5-c-masthead .pf-v5-c-toolbar {
17102
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
17100
17103
  --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
17101
17104
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
17102
17105
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -17110,7 +17113,17 @@ ul.pf-v5-c-list {
17110
17113
  flex-wrap: nowrap;
17111
17114
  }
17112
17115
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
17113
- border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
17116
+ top: 100%;
17117
+ }
17118
+ .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
17119
+ position: absolute;
17120
+ top: 0;
17121
+ right: 0;
17122
+ bottom: 0;
17123
+ left: 0;
17124
+ content: "";
17125
+ border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
17126
+ box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
17114
17127
  }
17115
17128
  .pf-v5-c-masthead .pf-v5-c-menu-toggle {
17116
17129
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -11026,6 +11026,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11026
11026
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
11027
11027
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
11028
11028
  --pf-v5-c-toolbar__expandable-content--Display: grid;
11029
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
11029
11030
  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
11030
11031
  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
11031
11032
  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -11365,7 +11366,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11365
11366
  z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
11366
11367
  display: none;
11367
11368
  width: 100%;
11368
- padding: 0 var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11369
+ padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11369
11370
  background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
11370
11371
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
11371
11372
  }
@@ -17141,6 +17142,7 @@ ul.pf-v5-c-list {
17141
17142
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17142
17143
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17143
17144
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17145
+ --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17144
17146
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17145
17147
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
17146
17148
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -17148,8 +17150,8 @@ ul.pf-v5-c-list {
17148
17150
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
17149
17151
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
17150
17152
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
17151
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17152
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17153
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17154
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17153
17155
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
17154
17156
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
17155
17157
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -17214,6 +17216,7 @@ ul.pf-v5-c-list {
17214
17216
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
17215
17217
  }
17216
17218
  .pf-v5-c-masthead .pf-v5-c-toolbar {
17219
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
17217
17220
  --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
17218
17221
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
17219
17222
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -17227,7 +17230,17 @@ ul.pf-v5-c-list {
17227
17230
  flex-wrap: nowrap;
17228
17231
  }
17229
17232
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
17230
- border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
17233
+ top: 100%;
17234
+ }
17235
+ .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
17236
+ position: absolute;
17237
+ top: 0;
17238
+ right: 0;
17239
+ bottom: 0;
17240
+ left: 0;
17241
+ content: "";
17242
+ border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
17243
+ box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
17231
17244
  }
17232
17245
  .pf-v5-c-masthead .pf-v5-c-menu-toggle {
17233
17246
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
package/patternfly.css CHANGED
@@ -11026,6 +11026,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11026
11026
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
11027
11027
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
11028
11028
  --pf-v5-c-toolbar__expandable-content--Display: grid;
11029
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
11029
11030
  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
11030
11031
  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
11031
11032
  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -11365,7 +11366,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11365
11366
  z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
11366
11367
  display: none;
11367
11368
  width: 100%;
11368
- padding: 0 var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11369
+ padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11369
11370
  background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
11370
11371
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
11371
11372
  }
@@ -17141,6 +17142,7 @@ ul.pf-v5-c-list {
17141
17142
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17142
17143
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17143
17144
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17145
+ --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17144
17146
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17145
17147
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
17146
17148
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -17148,8 +17150,8 @@ ul.pf-v5-c-list {
17148
17150
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
17149
17151
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
17150
17152
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
17151
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17152
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17153
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17154
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17153
17155
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
17154
17156
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
17155
17157
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -17214,6 +17216,7 @@ ul.pf-v5-c-list {
17214
17216
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
17215
17217
  }
17216
17218
  .pf-v5-c-masthead .pf-v5-c-toolbar {
17219
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
17217
17220
  --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
17218
17221
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
17219
17222
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -17227,7 +17230,17 @@ ul.pf-v5-c-list {
17227
17230
  flex-wrap: nowrap;
17228
17231
  }
17229
17232
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
17230
- border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
17233
+ top: 100%;
17234
+ }
17235
+ .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
17236
+ position: absolute;
17237
+ top: 0;
17238
+ right: 0;
17239
+ bottom: 0;
17240
+ left: 0;
17241
+ content: "";
17242
+ border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
17243
+ box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
17231
17244
  }
17232
17245
  .pf-v5-c-masthead .pf-v5-c-menu-toggle {
17233
17246
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);