@patternfly/patternfly 6.5.0-prerelease.31 → 6.5.0-prerelease.32

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 (44) hide show
  1. package/components/Compass/compass.css +14 -4
  2. package/components/Compass/compass.scss +16 -4
  3. package/components/Masthead/masthead.css +40 -0
  4. package/components/Masthead/masthead.scss +47 -0
  5. package/components/Nav/nav.css +55 -0
  6. package/components/Nav/nav.scss +70 -3
  7. package/components/Page/page.css +20 -0
  8. package/components/Page/page.scss +27 -0
  9. package/components/Toolbar/toolbar.css +32 -6
  10. package/components/Toolbar/toolbar.scss +28 -4
  11. package/components/_index.css +161 -10
  12. package/docs/components/Compass/examples/Compass.css +8 -2
  13. package/docs/components/Compass/examples/Compass.md +22 -1
  14. package/docs/components/Masthead/examples/masthead.md +67 -0
  15. package/docs/components/Nav/examples/Navigation.md +44 -0
  16. package/docs/components/Page/examples/Page.md +37 -0
  17. package/docs/components/Toolbar/examples/Toolbar.md +28 -0
  18. package/docs/demos/AboutModal/examples/AboutModal.md +5 -5
  19. package/docs/demos/Alert/examples/Alert.md +15 -15
  20. package/docs/demos/BackToTop/examples/BackToTop.md +5 -5
  21. package/docs/demos/Banner/examples/Banner.md +10 -10
  22. package/docs/demos/CardView/examples/CardView.md +5 -5
  23. package/docs/demos/Compass/examples/Compass.md +208 -0
  24. package/docs/demos/Dashboard/examples/Dashboard.md +5 -5
  25. package/docs/demos/DataList/examples/DataList.md +20 -23
  26. package/docs/demos/DescriptionList/examples/DescriptionList.md +15 -15
  27. package/docs/demos/Drawer/examples/Drawer.md +25 -25
  28. package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -30
  29. package/docs/demos/Masthead/examples/Masthead.md +55 -58
  30. package/docs/demos/Modal/examples/Modal.md +30 -33
  31. package/docs/demos/Nav/examples/Nav.md +299 -62
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +25 -25
  33. package/docs/demos/Page/examples/Page.md +70 -79
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
  35. package/docs/demos/Skeleton/examples/Skeleton.md +5 -5
  36. package/docs/demos/Table/examples/Table.md +75 -78
  37. package/docs/demos/Tabs/examples/Tabs.md +30 -30
  38. package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
  39. package/docs/demos/Wizard/examples/Wizard.md +45 -48
  40. package/package.json +1 -1
  41. package/patternfly-no-globals.css +161 -10
  42. package/patternfly.css +161 -10
  43. package/patternfly.min.css +1 -1
  44. package/patternfly.min.css.map +1 -1
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -15,7 +15,7 @@ section: components
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
- <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-masthead">
18
+ <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-docked">
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
@@ -57,7 +57,7 @@ section: components
57
57
  y1="2.25860997e-13%"
58
58
  x2="32%"
59
59
  y2="100%"
60
- id="linearGradient-tabs-tables-and-tabs-example-masthead"
60
+ id="linearGradient-tabs-tables-and-tabs-example-docked"
61
61
  >
62
62
  <stop stop-color="#2B9AF3" offset="0%" />
63
63
  <stop
@@ -111,11 +111,11 @@ section: components
111
111
  />
112
112
  <path
113
113
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
114
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
115
115
  />
116
116
  <path
117
117
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
118
- fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
118
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
119
119
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
120
  />
121
121
  </g>
@@ -127,7 +127,7 @@ section: components
127
127
  <div class="pf-v6-c-masthead__content">
128
128
  <div
129
129
  class="pf-v6-c-toolbar pf-m-static"
130
- id="tabs-tables-and-tabs-example-masthead-toolbar"
130
+ id="tabs-tables-and-tabs-example-docked-toolbar"
131
131
  >
132
132
  <div class="pf-v6-c-toolbar__content">
133
133
  <div class="pf-v6-c-toolbar__content-section">
@@ -608,7 +608,7 @@ section: components
608
608
  <span class="pf-v6-c-button__text">Skip to content</span>
609
609
  </a>
610
610
  </div>
611
- <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-masthead">
611
+ <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-docked">
612
612
  <div class="pf-v6-c-masthead__main">
613
613
  <span class="pf-v6-c-masthead__toggle">
614
614
  <button
@@ -650,7 +650,7 @@ section: components
650
650
  y1="2.25860997e-13%"
651
651
  x2="32%"
652
652
  y2="100%"
653
- id="linearGradient-tabs-tables-and-tabs-example-masthead"
653
+ id="linearGradient-tabs-tables-and-tabs-example-docked"
654
654
  >
655
655
  <stop stop-color="#2B9AF3" offset="0%" />
656
656
  <stop
@@ -704,11 +704,11 @@ section: components
704
704
  />
705
705
  <path
706
706
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
707
- fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
707
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
708
708
  />
709
709
  <path
710
710
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
711
- fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
711
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
712
712
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
713
713
  />
714
714
  </g>
@@ -720,7 +720,7 @@ section: components
720
720
  <div class="pf-v6-c-masthead__content">
721
721
  <div
722
722
  class="pf-v6-c-toolbar pf-m-static"
723
- id="tabs-tables-and-tabs-example-masthead-toolbar"
723
+ id="tabs-tables-and-tabs-example-docked-toolbar"
724
724
  >
725
725
  <div class="pf-v6-c-toolbar__content">
726
726
  <div class="pf-v6-c-toolbar__content-section">
@@ -1208,7 +1208,7 @@ section: components
1208
1208
  <span class="pf-v6-c-button__text">Skip to content</span>
1209
1209
  </a>
1210
1210
  </div>
1211
- <header class="pf-v6-c-masthead" id="nested-tabs-example-masthead">
1211
+ <header class="pf-v6-c-masthead" id="nested-tabs-example-docked">
1212
1212
  <div class="pf-v6-c-masthead__main">
1213
1213
  <span class="pf-v6-c-masthead__toggle">
1214
1214
  <button
@@ -1250,7 +1250,7 @@ section: components
1250
1250
  y1="2.25860997e-13%"
1251
1251
  x2="32%"
1252
1252
  y2="100%"
1253
- id="linearGradient-nested-tabs-example-masthead"
1253
+ id="linearGradient-nested-tabs-example-docked"
1254
1254
  >
1255
1255
  <stop stop-color="#2B9AF3" offset="0%" />
1256
1256
  <stop
@@ -1304,11 +1304,11 @@ section: components
1304
1304
  />
1305
1305
  <path
1306
1306
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1307
- fill="url(#linearGradient-nested-tabs-example-masthead)"
1307
+ fill="url(#linearGradient-nested-tabs-example-docked)"
1308
1308
  />
1309
1309
  <path
1310
1310
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1311
- fill="url(#linearGradient-nested-tabs-example-masthead)"
1311
+ fill="url(#linearGradient-nested-tabs-example-docked)"
1312
1312
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1313
1313
  />
1314
1314
  </g>
@@ -1320,7 +1320,7 @@ section: components
1320
1320
  <div class="pf-v6-c-masthead__content">
1321
1321
  <div
1322
1322
  class="pf-v6-c-toolbar pf-m-static"
1323
- id="nested-tabs-example-masthead-toolbar"
1323
+ id="nested-tabs-example-docked-toolbar"
1324
1324
  >
1325
1325
  <div class="pf-v6-c-toolbar__content">
1326
1326
  <div class="pf-v6-c-toolbar__content-section">
@@ -1725,7 +1725,7 @@ section: components
1725
1725
  <span class="pf-v6-c-button__text">Skip to content</span>
1726
1726
  </a>
1727
1727
  </div>
1728
- <header class="pf-v6-c-masthead" id="table-tabs-example-masthead">
1728
+ <header class="pf-v6-c-masthead" id="table-tabs-example-docked">
1729
1729
  <div class="pf-v6-c-masthead__main">
1730
1730
  <span class="pf-v6-c-masthead__toggle">
1731
1731
  <button
@@ -1767,7 +1767,7 @@ section: components
1767
1767
  y1="2.25860997e-13%"
1768
1768
  x2="32%"
1769
1769
  y2="100%"
1770
- id="linearGradient-table-tabs-example-masthead"
1770
+ id="linearGradient-table-tabs-example-docked"
1771
1771
  >
1772
1772
  <stop stop-color="#2B9AF3" offset="0%" />
1773
1773
  <stop
@@ -1821,11 +1821,11 @@ section: components
1821
1821
  />
1822
1822
  <path
1823
1823
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1824
- fill="url(#linearGradient-table-tabs-example-masthead)"
1824
+ fill="url(#linearGradient-table-tabs-example-docked)"
1825
1825
  />
1826
1826
  <path
1827
1827
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1828
- fill="url(#linearGradient-table-tabs-example-masthead)"
1828
+ fill="url(#linearGradient-table-tabs-example-docked)"
1829
1829
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1830
1830
  />
1831
1831
  </g>
@@ -1837,7 +1837,7 @@ section: components
1837
1837
  <div class="pf-v6-c-masthead__content">
1838
1838
  <div
1839
1839
  class="pf-v6-c-toolbar pf-m-static"
1840
- id="table-tabs-example-masthead-toolbar"
1840
+ id="table-tabs-example-docked-toolbar"
1841
1841
  >
1842
1842
  <div class="pf-v6-c-toolbar__content">
1843
1843
  <div class="pf-v6-c-toolbar__content-section">
@@ -3003,7 +3003,7 @@ section: components
3003
3003
  <span class="pf-v6-c-button__text">Skip to content</span>
3004
3004
  </a>
3005
3005
  </div>
3006
- <header class="pf-v6-c-masthead" id="modal-tabs-example-masthead">
3006
+ <header class="pf-v6-c-masthead" id="modal-tabs-example-docked">
3007
3007
  <div class="pf-v6-c-masthead__main">
3008
3008
  <span class="pf-v6-c-masthead__toggle">
3009
3009
  <button
@@ -3045,7 +3045,7 @@ section: components
3045
3045
  y1="2.25860997e-13%"
3046
3046
  x2="32%"
3047
3047
  y2="100%"
3048
- id="linearGradient-modal-tabs-example-masthead"
3048
+ id="linearGradient-modal-tabs-example-docked"
3049
3049
  >
3050
3050
  <stop stop-color="#2B9AF3" offset="0%" />
3051
3051
  <stop
@@ -3099,11 +3099,11 @@ section: components
3099
3099
  />
3100
3100
  <path
3101
3101
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3102
- fill="url(#linearGradient-modal-tabs-example-masthead)"
3102
+ fill="url(#linearGradient-modal-tabs-example-docked)"
3103
3103
  />
3104
3104
  <path
3105
3105
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3106
- fill="url(#linearGradient-modal-tabs-example-masthead)"
3106
+ fill="url(#linearGradient-modal-tabs-example-docked)"
3107
3107
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3108
3108
  />
3109
3109
  </g>
@@ -3115,7 +3115,7 @@ section: components
3115
3115
  <div class="pf-v6-c-masthead__content">
3116
3116
  <div
3117
3117
  class="pf-v6-c-toolbar pf-m-static"
3118
- id="modal-tabs-example-masthead-toolbar"
3118
+ id="modal-tabs-example-docked-toolbar"
3119
3119
  >
3120
3120
  <div class="pf-v6-c-toolbar__content">
3121
3121
  <div class="pf-v6-c-toolbar__content-section">
@@ -3327,7 +3327,7 @@ section: components
3327
3327
  <span class="pf-v6-c-button__text">Skip to content</span>
3328
3328
  </a>
3329
3329
  </div>
3330
- <header class="pf-v6-c-masthead" id="gray-tabs-example-masthead">
3330
+ <header class="pf-v6-c-masthead" id="gray-tabs-example-docked">
3331
3331
  <div class="pf-v6-c-masthead__main">
3332
3332
  <span class="pf-v6-c-masthead__toggle">
3333
3333
  <button
@@ -3369,7 +3369,7 @@ section: components
3369
3369
  y1="2.25860997e-13%"
3370
3370
  x2="32%"
3371
3371
  y2="100%"
3372
- id="linearGradient-gray-tabs-example-masthead"
3372
+ id="linearGradient-gray-tabs-example-docked"
3373
3373
  >
3374
3374
  <stop stop-color="#2B9AF3" offset="0%" />
3375
3375
  <stop
@@ -3423,11 +3423,11 @@ section: components
3423
3423
  />
3424
3424
  <path
3425
3425
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3426
- fill="url(#linearGradient-gray-tabs-example-masthead)"
3426
+ fill="url(#linearGradient-gray-tabs-example-docked)"
3427
3427
  />
3428
3428
  <path
3429
3429
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3430
- fill="url(#linearGradient-gray-tabs-example-masthead)"
3430
+ fill="url(#linearGradient-gray-tabs-example-docked)"
3431
3431
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3432
3432
  />
3433
3433
  </g>
@@ -3439,7 +3439,7 @@ section: components
3439
3439
  <div class="pf-v6-c-masthead__content">
3440
3440
  <div
3441
3441
  class="pf-v6-c-toolbar pf-m-static"
3442
- id="gray-tabs-example-masthead-toolbar"
3442
+ id="gray-tabs-example-docked-toolbar"
3443
3443
  >
3444
3444
  <div class="pf-v6-c-toolbar__content">
3445
3445
  <div class="pf-v6-c-toolbar__content-section">
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -185,7 +185,7 @@ section: components
185
185
  </div>
186
186
  <header
187
187
  class="pf-v6-c-masthead"
188
- id="toolbar-pagination-management-example-masthead"
188
+ id="toolbar-pagination-management-example-docked"
189
189
  >
190
190
  <div class="pf-v6-c-masthead__main">
191
191
  <span class="pf-v6-c-masthead__toggle">
@@ -228,7 +228,7 @@ section: components
228
228
  y1="2.25860997e-13%"
229
229
  x2="32%"
230
230
  y2="100%"
231
- id="linearGradient-toolbar-pagination-management-example-masthead"
231
+ id="linearGradient-toolbar-pagination-management-example-docked"
232
232
  >
233
233
  <stop stop-color="#2B9AF3" offset="0%" />
234
234
  <stop
@@ -282,11 +282,11 @@ section: components
282
282
  />
283
283
  <path
284
284
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
285
- fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
285
+ fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
286
286
  />
287
287
  <path
288
288
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
289
- fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
289
+ fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
290
290
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
291
291
  />
292
292
  </g>
@@ -298,7 +298,7 @@ section: components
298
298
  <div class="pf-v6-c-masthead__content">
299
299
  <div
300
300
  class="pf-v6-c-toolbar pf-m-static"
301
- id="toolbar-pagination-management-example-masthead-toolbar"
301
+ id="toolbar-pagination-management-example-docked-toolbar"
302
302
  >
303
303
  <div class="pf-v6-c-toolbar__content">
304
304
  <div class="pf-v6-c-toolbar__content-section">
@@ -2480,7 +2480,7 @@ section: components
2480
2480
  </div>
2481
2481
  <header
2482
2482
  class="pf-v6-c-masthead"
2483
- id="toolbar-pagination-management-example-masthead"
2483
+ id="toolbar-pagination-management-example-docked"
2484
2484
  >
2485
2485
  <div class="pf-v6-c-masthead__main">
2486
2486
  <span class="pf-v6-c-masthead__toggle">
@@ -2523,7 +2523,7 @@ section: components
2523
2523
  y1="2.25860997e-13%"
2524
2524
  x2="32%"
2525
2525
  y2="100%"
2526
- id="linearGradient-toolbar-pagination-management-example-masthead"
2526
+ id="linearGradient-toolbar-pagination-management-example-docked"
2527
2527
  >
2528
2528
  <stop stop-color="#2B9AF3" offset="0%" />
2529
2529
  <stop
@@ -2577,11 +2577,11 @@ section: components
2577
2577
  />
2578
2578
  <path
2579
2579
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2580
- fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2580
+ fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
2581
2581
  />
2582
2582
  <path
2583
2583
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2584
- fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2584
+ fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
2585
2585
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2586
2586
  />
2587
2587
  </g>
@@ -2593,7 +2593,7 @@ section: components
2593
2593
  <div class="pf-v6-c-masthead__content">
2594
2594
  <div
2595
2595
  class="pf-v6-c-toolbar pf-m-static"
2596
- id="toolbar-pagination-management-example-masthead-toolbar"
2596
+ id="toolbar-pagination-management-example-docked-toolbar"
2597
2597
  >
2598
2598
  <div class="pf-v6-c-toolbar__content">
2599
2599
  <div class="pf-v6-c-toolbar__content-section">