@patternfly/patternfly 6.5.0-prerelease.51 → 6.5.0-prerelease.53

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 (49) hide show
  1. package/components/Button/button.css +22 -2
  2. package/components/Button/button.scss +26 -2
  3. package/components/Card/card.css +20 -8
  4. package/components/Card/card.scss +26 -7
  5. package/components/Masthead/masthead.css +38 -4
  6. package/components/Masthead/masthead.scss +52 -4
  7. package/components/MenuToggle/menu-toggle.css +26 -2
  8. package/components/MenuToggle/menu-toggle.scss +30 -2
  9. package/components/Nav/nav.css +16 -8
  10. package/components/Nav/nav.scss +16 -8
  11. package/components/Page/page.css +59 -7
  12. package/components/Page/page.scss +79 -15
  13. package/components/_index.css +181 -31
  14. package/docs/components/Breadcrumb/examples/Breadcrumb.md +0 -1
  15. package/docs/components/Button/examples/Button.md +339 -0
  16. package/docs/components/Masthead/examples/masthead.md +1 -1
  17. package/docs/components/Menu/examples/Menu.md +0 -2
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -4
  19. package/docs/components/Pagination/examples/Pagination.md +0 -13
  20. package/docs/components/Toolbar/examples/Toolbar.md +0 -2
  21. package/docs/demos/AboutModal/examples/AboutModal.md +1 -0
  22. package/docs/demos/Alert/examples/Alert.md +3 -0
  23. package/docs/demos/BackToTop/examples/BackToTop.md +1 -0
  24. package/docs/demos/Banner/examples/Banner.md +2 -0
  25. package/docs/demos/Card/examples/Card.md +564 -86
  26. package/docs/demos/CardView/examples/CardView.md +16 -3
  27. package/docs/demos/Compass/examples/Compass.md +551 -134
  28. package/docs/demos/Dashboard/examples/Dashboard.md +435 -100
  29. package/docs/demos/DataList/examples/DataList.md +4 -8
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -0
  31. package/docs/demos/Drawer/examples/Drawer.md +5 -0
  32. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -0
  33. package/docs/demos/Masthead/examples/Masthead.md +9 -58
  34. package/docs/demos/Modal/examples/Modal.md +6 -0
  35. package/docs/demos/Nav/examples/Nav.md +305 -160
  36. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -0
  37. package/docs/demos/Page/examples/Page.md +14 -0
  38. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -6
  39. package/docs/demos/Skeleton/examples/Skeleton.md +1 -0
  40. package/docs/demos/Table/examples/Table.md +16 -27
  41. package/docs/demos/Tabs/examples/Tabs.md +6 -0
  42. package/docs/demos/Toolbar/examples/Toolbar.md +2 -8
  43. package/docs/demos/Wizard/examples/Wizard.md +9 -0
  44. package/package.json +1 -1
  45. package/patternfly-no-globals.css +181 -31
  46. package/patternfly.css +181 -31
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/sass-utilities/scss-variables.scss +3 -0
@@ -66,6 +66,25 @@ cssPrefix: pf-v6-c-button
66
66
  </span>
67
67
  </button>
68
68
 
69
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
70
+ <span class="pf-v6-c-button__icon pf-m-start">
71
+ <svg
72
+ class="pf-v6-svg"
73
+ viewBox="0 0 352 512"
74
+ fill="currentColor"
75
+ aria-hidden="true"
76
+ role="img"
77
+ width="1em"
78
+ height="1em"
79
+ >
80
+ <path
81
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
82
+ />
83
+ </svg>
84
+ </span>
85
+ <span class="pf-v6-c-button__text">Plain with text</span>
86
+ </button>
87
+
69
88
  <br />
70
89
  <br />
71
90
 
@@ -293,6 +312,25 @@ cssPrefix: pf-v6-c-button
293
312
  </span>
294
313
  </button>
295
314
 
315
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
316
+ <span class="pf-v6-c-button__icon pf-m-start">
317
+ <svg
318
+ class="pf-v6-svg"
319
+ viewBox="0 0 352 512"
320
+ fill="currentColor"
321
+ aria-hidden="true"
322
+ role="img"
323
+ width="1em"
324
+ height="1em"
325
+ >
326
+ <path
327
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
328
+ />
329
+ </svg>
330
+ </span>
331
+ <span class="pf-v6-c-button__text">Plain with text</span>
332
+ </button>
333
+
296
334
  <br />
297
335
  <br />
298
336
 
@@ -535,6 +573,25 @@ cssPrefix: pf-v6-c-button
535
573
  </span>
536
574
  </button>
537
575
 
576
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
577
+ <span class="pf-v6-c-button__text">Plain with text</span>
578
+ <span class="pf-v6-c-button__icon pf-m-end">
579
+ <svg
580
+ class="pf-v6-svg"
581
+ viewBox="0 0 352 512"
582
+ fill="currentColor"
583
+ aria-hidden="true"
584
+ role="img"
585
+ width="1em"
586
+ height="1em"
587
+ >
588
+ <path
589
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
590
+ />
591
+ </svg>
592
+ </span>
593
+ </button>
594
+
538
595
  <br />
539
596
  <br />
540
597
 
@@ -648,6 +705,29 @@ cssPrefix: pf-v6-c-button
648
705
  </span>
649
706
  </button>
650
707
 
708
+ <button
709
+ class="pf-v6-c-button pf-m-clicked pf-m-plain"
710
+ type="button"
711
+ aria-label="Remove"
712
+ >
713
+ <span class="pf-v6-c-button__icon pf-m-start">
714
+ <svg
715
+ class="pf-v6-svg"
716
+ viewBox="0 0 352 512"
717
+ fill="currentColor"
718
+ aria-hidden="true"
719
+ role="img"
720
+ width="1em"
721
+ height="1em"
722
+ >
723
+ <path
724
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
725
+ />
726
+ </svg>
727
+ </span>
728
+ <span class="pf-v6-c-button__text">Plain with text</span>
729
+ </button>
730
+
651
731
  <br />
652
732
  <br />
653
733
 
@@ -882,6 +962,29 @@ cssPrefix: pf-v6-c-button
882
962
  </span>
883
963
  </button>
884
964
 
965
+ <button
966
+ class="pf-v6-c-button pf-m-clicked pf-m-plain"
967
+ type="button"
968
+ aria-label="Remove"
969
+ >
970
+ <span class="pf-v6-c-button__icon pf-m-start">
971
+ <svg
972
+ class="pf-v6-svg"
973
+ viewBox="0 0 352 512"
974
+ fill="currentColor"
975
+ aria-hidden="true"
976
+ role="img"
977
+ width="1em"
978
+ height="1em"
979
+ >
980
+ <path
981
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
982
+ />
983
+ </svg>
984
+ </span>
985
+ <span class="pf-v6-c-button__text">Plain with text</span>
986
+ </button>
987
+
885
988
  <br />
886
989
  <br />
887
990
 
@@ -1131,6 +1234,29 @@ cssPrefix: pf-v6-c-button
1131
1234
  </span>
1132
1235
  </button>
1133
1236
 
1237
+ <button
1238
+ class="pf-v6-c-button pf-m-clicked pf-m-plain"
1239
+ type="button"
1240
+ aria-label="Remove"
1241
+ >
1242
+ <span class="pf-v6-c-button__text">Plain with text</span>
1243
+ <span class="pf-v6-c-button__icon pf-m-end">
1244
+ <svg
1245
+ class="pf-v6-svg"
1246
+ viewBox="0 0 352 512"
1247
+ fill="currentColor"
1248
+ aria-hidden="true"
1249
+ role="img"
1250
+ width="1em"
1251
+ height="1em"
1252
+ >
1253
+ <path
1254
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1255
+ />
1256
+ </svg>
1257
+ </span>
1258
+ </button>
1259
+
1134
1260
  <br />
1135
1261
  <br />
1136
1262
 
@@ -1244,6 +1370,29 @@ cssPrefix: pf-v6-c-button
1244
1370
  </span>
1245
1371
  </button>
1246
1372
 
1373
+ <button
1374
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1375
+ type="button"
1376
+ aria-label="Remove"
1377
+ >
1378
+ <span class="pf-v6-c-button__icon pf-m-start">
1379
+ <svg
1380
+ class="pf-v6-svg"
1381
+ viewBox="0 0 352 512"
1382
+ fill="currentColor"
1383
+ aria-hidden="true"
1384
+ role="img"
1385
+ width="1em"
1386
+ height="1em"
1387
+ >
1388
+ <path
1389
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1390
+ />
1391
+ </svg>
1392
+ </span>
1393
+ <span class="pf-v6-c-button__text">Plain with text</span>
1394
+ </button>
1395
+
1247
1396
  <br />
1248
1397
  <br />
1249
1398
 
@@ -1478,6 +1627,29 @@ cssPrefix: pf-v6-c-button
1478
1627
  </span>
1479
1628
  </button>
1480
1629
 
1630
+ <button
1631
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1632
+ type="button"
1633
+ aria-label="Remove"
1634
+ >
1635
+ <span class="pf-v6-c-button__icon pf-m-start">
1636
+ <svg
1637
+ class="pf-v6-svg"
1638
+ viewBox="0 0 352 512"
1639
+ fill="currentColor"
1640
+ aria-hidden="true"
1641
+ role="img"
1642
+ width="1em"
1643
+ height="1em"
1644
+ >
1645
+ <path
1646
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1647
+ />
1648
+ </svg>
1649
+ </span>
1650
+ <span class="pf-v6-c-button__text">Plain with text</span>
1651
+ </button>
1652
+
1481
1653
  <br />
1482
1654
  <br />
1483
1655
 
@@ -1727,6 +1899,29 @@ cssPrefix: pf-v6-c-button
1727
1899
  </span>
1728
1900
  </button>
1729
1901
 
1902
+ <button
1903
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1904
+ type="button"
1905
+ aria-label="Remove"
1906
+ >
1907
+ <span class="pf-v6-c-button__text">Plain with text</span>
1908
+ <span class="pf-v6-c-button__icon pf-m-end">
1909
+ <svg
1910
+ class="pf-v6-svg"
1911
+ viewBox="0 0 352 512"
1912
+ fill="currentColor"
1913
+ aria-hidden="true"
1914
+ role="img"
1915
+ width="1em"
1916
+ height="1em"
1917
+ >
1918
+ <path
1919
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1920
+ />
1921
+ </svg>
1922
+ </span>
1923
+ </button>
1924
+
1730
1925
  <br />
1731
1926
  <br />
1732
1927
 
@@ -1842,6 +2037,30 @@ cssPrefix: pf-v6-c-button
1842
2037
  </span>
1843
2038
  </button>
1844
2039
 
2040
+ <button
2041
+ class="pf-v6-c-button pf-m-plain"
2042
+ type="button"
2043
+ aria-label="Remove"
2044
+ disabled
2045
+ >
2046
+ <span class="pf-v6-c-button__icon pf-m-start">
2047
+ <svg
2048
+ class="pf-v6-svg"
2049
+ viewBox="0 0 352 512"
2050
+ fill="currentColor"
2051
+ aria-hidden="true"
2052
+ role="img"
2053
+ width="1em"
2054
+ height="1em"
2055
+ >
2056
+ <path
2057
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2058
+ />
2059
+ </svg>
2060
+ </span>
2061
+ <span class="pf-v6-c-button__text">Plain with text</span>
2062
+ </button>
2063
+
1845
2064
  <br />
1846
2065
  <br />
1847
2066
 
@@ -2079,6 +2298,30 @@ cssPrefix: pf-v6-c-button
2079
2298
  </span>
2080
2299
  </button>
2081
2300
 
2301
+ <button
2302
+ class="pf-v6-c-button pf-m-plain"
2303
+ type="button"
2304
+ aria-label="Remove"
2305
+ disabled
2306
+ >
2307
+ <span class="pf-v6-c-button__icon pf-m-start">
2308
+ <svg
2309
+ class="pf-v6-svg"
2310
+ viewBox="0 0 352 512"
2311
+ fill="currentColor"
2312
+ aria-hidden="true"
2313
+ role="img"
2314
+ width="1em"
2315
+ height="1em"
2316
+ >
2317
+ <path
2318
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2319
+ />
2320
+ </svg>
2321
+ </span>
2322
+ <span class="pf-v6-c-button__text">Plain with text</span>
2323
+ </button>
2324
+
2082
2325
  <br />
2083
2326
  <br />
2084
2327
 
@@ -2331,6 +2574,30 @@ cssPrefix: pf-v6-c-button
2331
2574
  </span>
2332
2575
  </button>
2333
2576
 
2577
+ <button
2578
+ class="pf-v6-c-button pf-m-plain"
2579
+ type="button"
2580
+ aria-label="Remove"
2581
+ disabled
2582
+ >
2583
+ <span class="pf-v6-c-button__text">Plain with text</span>
2584
+ <span class="pf-v6-c-button__icon pf-m-end">
2585
+ <svg
2586
+ class="pf-v6-svg"
2587
+ viewBox="0 0 352 512"
2588
+ fill="currentColor"
2589
+ aria-hidden="true"
2590
+ role="img"
2591
+ width="1em"
2592
+ height="1em"
2593
+ >
2594
+ <path
2595
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2596
+ />
2597
+ </svg>
2598
+ </span>
2599
+ </button>
2600
+
2334
2601
  <br />
2335
2602
  <br />
2336
2603
 
@@ -2479,6 +2746,30 @@ cssPrefix: pf-v6-c-button
2479
2746
  </span>
2480
2747
  </button>
2481
2748
 
2749
+ <button
2750
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
2751
+ type="button"
2752
+ aria-label="Remove"
2753
+ aria-disabled="true"
2754
+ >
2755
+ <span class="pf-v6-c-button__icon pf-m-start">
2756
+ <svg
2757
+ class="pf-v6-svg"
2758
+ viewBox="0 0 352 512"
2759
+ fill="currentColor"
2760
+ aria-hidden="true"
2761
+ role="img"
2762
+ width="1em"
2763
+ height="1em"
2764
+ >
2765
+ <path
2766
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2767
+ />
2768
+ </svg>
2769
+ </span>
2770
+ <span class="pf-v6-c-button__text">Plain with text</span>
2771
+ </button>
2772
+
2482
2773
  <br />
2483
2774
  <br />
2484
2775
 
@@ -2752,6 +3043,30 @@ cssPrefix: pf-v6-c-button
2752
3043
  </span>
2753
3044
  </button>
2754
3045
 
3046
+ <button
3047
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
3048
+ type="button"
3049
+ aria-label="Remove"
3050
+ aria-disabled="true"
3051
+ >
3052
+ <span class="pf-v6-c-button__icon pf-m-start">
3053
+ <svg
3054
+ class="pf-v6-svg"
3055
+ viewBox="0 0 352 512"
3056
+ fill="currentColor"
3057
+ aria-hidden="true"
3058
+ role="img"
3059
+ width="1em"
3060
+ height="1em"
3061
+ >
3062
+ <path
3063
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
3064
+ />
3065
+ </svg>
3066
+ </span>
3067
+ <span class="pf-v6-c-button__text">Plain with text</span>
3068
+ </button>
3069
+
2755
3070
  <br />
2756
3071
  <br />
2757
3072
 
@@ -3040,6 +3355,30 @@ cssPrefix: pf-v6-c-button
3040
3355
  </span>
3041
3356
  </button>
3042
3357
 
3358
+ <button
3359
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
3360
+ type="button"
3361
+ aria-label="Remove"
3362
+ aria-disabled="true"
3363
+ >
3364
+ <span class="pf-v6-c-button__text">Plain with text</span>
3365
+ <span class="pf-v6-c-button__icon pf-m-end">
3366
+ <svg
3367
+ class="pf-v6-svg"
3368
+ viewBox="0 0 352 512"
3369
+ fill="currentColor"
3370
+ aria-hidden="true"
3371
+ role="img"
3372
+ width="1em"
3373
+ height="1em"
3374
+ >
3375
+ <path
3376
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
3377
+ />
3378
+ </svg>
3379
+ </span>
3380
+ </button>
3381
+
3043
3382
  <br />
3044
3383
  <br />
3045
3384
 
@@ -690,7 +690,7 @@ cssPrefix: pf-v6-c-masthead
690
690
  <header class="pf-v6-c-masthead pf-m-docked" id="docked-masthead-example">
691
691
  <div class="pf-v6-c-masthead__main">
692
692
  <div class="pf-v6-c-masthead__brand">
693
- <a class="pf-v6-c-masthead__logo" href="#">
693
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
694
694
  <svg width="37px" height="37px" viewBox="0 0 158 158">
695
695
  <title>PF-HorizontalLogo-Color</title>
696
696
  <defs>
@@ -5806,7 +5806,6 @@ cssPrefix: pf-v6-c-menu
5806
5806
  class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
5807
5807
  type="button"
5808
5808
  aria-expanded="false"
5809
- aria-label="Menu toggle"
5810
5809
  >
5811
5810
  <span class="pf-v6-c-menu-toggle__count">
5812
5811
  <span class="pf-v6-c-badge pf-m-read">1</span>
@@ -6110,7 +6109,6 @@ cssPrefix: pf-v6-c-menu
6110
6109
  class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
6111
6110
  type="button"
6112
6111
  aria-expanded="false"
6113
- aria-label="Menu toggle"
6114
6112
  >
6115
6113
  <span class="pf-v6-c-menu-toggle__count">
6116
6114
  <span class="pf-v6-c-badge pf-m-read">2</span>
@@ -78,7 +78,6 @@ cssPrefix: pf-v6-c-menu-toggle
78
78
  class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
79
79
  type="button"
80
80
  aria-expanded="false"
81
- aria-label="Menu toggle"
82
81
  >
83
82
  <span class="pf-v6-c-menu-toggle__count">
84
83
  <span class="pf-v6-c-badge pf-m-unread">
@@ -308,7 +307,6 @@ cssPrefix: pf-v6-c-menu-toggle
308
307
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
309
308
  type="button"
310
309
  aria-expanded="false"
311
- aria-label="Menu toggle"
312
310
  >
313
311
  <span class="pf-v6-c-menu-toggle__text">Custom text</span>
314
312
  <span class="pf-v6-c-menu-toggle__controls">
@@ -323,7 +321,6 @@ cssPrefix: pf-v6-c-menu-toggle
323
321
  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-text pf-m-plain"
324
322
  type="button"
325
323
  aria-expanded="true"
326
- aria-label="Menu toggle"
327
324
  >
328
325
  <span class="pf-v6-c-menu-toggle__text">Custom text</span>
329
326
  <span class="pf-v6-c-menu-toggle__controls">
@@ -339,7 +336,6 @@ cssPrefix: pf-v6-c-menu-toggle
339
336
  type="button"
340
337
  aria-expanded="false"
341
338
  disabled
342
- aria-label="Menu toggle"
343
339
  >
344
340
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
345
341
  <span class="pf-v6-c-menu-toggle__controls">
@@ -2248,3 +2244,4 @@ Shown with default, primary, and secondary styling
2248
2244
  | `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
2249
2245
  | `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
2250
2246
  | `.pf-m-placeholder` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle text for placeholder styles. |
2247
+ | `.pf-m-text-expanded` | `.pf-v6-c-menu-toggle` | Modifies a dock menu toggle to show its text. |
@@ -17,7 +17,6 @@ cssPrefix: pf-v6-c-pagination
17
17
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
18
18
  type="button"
19
19
  aria-expanded="false"
20
- aria-label="Menu toggle"
21
20
  id="pagination-menu-toggle-top-example"
22
21
  >
23
22
  <span class="pf-v6-c-menu-toggle__text">
@@ -160,7 +159,6 @@ cssPrefix: pf-v6-c-pagination
160
159
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
161
160
  type="button"
162
161
  aria-expanded="false"
163
- aria-label="Menu toggle"
164
162
  id="pagination-menu-toggle-top-sticky-example"
165
163
  >
166
164
  <span class="pf-v6-c-menu-toggle__text">
@@ -313,7 +311,6 @@ cssPrefix: pf-v6-c-pagination
313
311
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
314
312
  type="button"
315
313
  aria-expanded="false"
316
- aria-label="Menu toggle"
317
314
  id="pagination-menu-toggle-top-indeterminate-example"
318
315
  >
319
316
  <span class="pf-v6-c-menu-toggle__text">
@@ -461,7 +458,6 @@ cssPrefix: pf-v6-c-pagination
461
458
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
462
459
  type="button"
463
460
  aria-expanded="false"
464
- aria-label="Menu toggle"
465
461
  id="pagination-menu-toggle-bottom-example"
466
462
  >
467
463
  <span class="pf-v6-c-menu-toggle__text">
@@ -610,7 +606,6 @@ cssPrefix: pf-v6-c-pagination
610
606
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
611
607
  type="button"
612
608
  aria-expanded="false"
613
- aria-label="Menu toggle"
614
609
  id="pagination-menu-toggle-bottom-sticky-example"
615
610
  >
616
611
  <span class="pf-v6-c-menu-toggle__text">
@@ -759,7 +754,6 @@ cssPrefix: pf-v6-c-pagination
759
754
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
760
755
  type="button"
761
756
  aria-expanded="false"
762
- aria-label="Menu toggle"
763
757
  id="pagination-menu-toggle-bottom-sticky-example"
764
758
  >
765
759
  <span class="pf-v6-c-menu-toggle__text">
@@ -903,7 +897,6 @@ cssPrefix: pf-v6-c-pagination
903
897
  type="button"
904
898
  aria-expanded="false"
905
899
  disabled
906
- aria-label="Menu toggle"
907
900
  id="pagination-menu-toggle-top-disabled-example"
908
901
  >
909
902
  <span class="pf-v6-c-menu-toggle__text">
@@ -1048,7 +1041,6 @@ cssPrefix: pf-v6-c-pagination
1048
1041
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1049
1042
  type="button"
1050
1043
  aria-expanded="false"
1051
- aria-label="Menu toggle"
1052
1044
  id="pagination-menu-toggle-compact-example"
1053
1045
  >
1054
1046
  <span class="pf-v6-c-menu-toggle__text">
@@ -1131,7 +1123,6 @@ cssPrefix: pf-v6-c-pagination
1131
1123
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1132
1124
  type="button"
1133
1125
  aria-expanded="false"
1134
- aria-label="Menu toggle"
1135
1126
  id="pagination-top-with-summary-modifier-menu-toggle"
1136
1127
  >
1137
1128
  <span class="pf-v6-c-menu-toggle__text">
@@ -1274,7 +1265,6 @@ cssPrefix: pf-v6-c-pagination
1274
1265
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1275
1266
  type="button"
1276
1267
  aria-expanded="false"
1277
- aria-label="Menu toggle"
1278
1268
  id="pagination-top-with-full-modifier-menu-toggle"
1279
1269
  >
1280
1270
  <span class="pf-v6-c-menu-toggle__text">
@@ -1419,7 +1409,6 @@ cssPrefix: pf-v6-c-pagination
1419
1409
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1420
1410
  type="button"
1421
1411
  aria-expanded="false"
1422
- aria-label="Menu toggle"
1423
1412
  id="pagination-top-with-responsive-summary-navigation-modifiers-menu-toggle"
1424
1413
  >
1425
1414
  <span class="pf-v6-c-menu-toggle__text">
@@ -1562,7 +1551,6 @@ cssPrefix: pf-v6-c-pagination
1562
1551
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1563
1552
  type="button"
1564
1553
  aria-expanded="false"
1565
- aria-label="Menu toggle"
1566
1554
  id="pagination-compact-with-full-modifier-menu-toggle"
1567
1555
  >
1568
1556
  <span class="pf-v6-c-menu-toggle__text">
@@ -1647,7 +1635,6 @@ cssPrefix: pf-v6-c-pagination
1647
1635
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1648
1636
  type="button"
1649
1637
  aria-expanded="false"
1650
- aria-label="Menu toggle"
1651
1638
  id="pagination-inset-menu-toggle"
1652
1639
  >
1653
1640
  <span class="pf-v6-c-menu-toggle__text">
@@ -2227,7 +2227,6 @@ Several components in the following examples do not include functional and/or ac
2227
2227
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2228
2228
  type="button"
2229
2229
  aria-expanded="false"
2230
- aria-label="Menu toggle"
2231
2230
  id="toolbar-stacked-example-pagination-menu-toggle"
2232
2231
  >
2233
2232
  <span class="pf-v6-c-menu-toggle__text">
@@ -2768,7 +2767,6 @@ Several components in the following examples do not include functional and/or ac
2768
2767
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2769
2768
  type="button"
2770
2769
  aria-expanded="false"
2771
- aria-label="Menu toggle"
2772
2770
  id="toolbar-stacked-collapsed-example-pagination-menu-toggle"
2773
2771
  >
2774
2772
  <span class="pf-v6-c-menu-toggle__text">
@@ -17,6 +17,7 @@ This demo implements the about modal, including the backdrop.
17
17
  <span class="pf-v6-c-button__text">Skip to content</span>
18
18
  </a>
19
19
  </div>
20
+
20
21
  <header class="pf-v6-c-masthead" id="modal-basic-example-docked">
21
22
  <div class="pf-v6-c-masthead__main">
22
23
  <span class="pf-v6-c-masthead__toggle">
@@ -15,6 +15,7 @@ section: components
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
+
18
19
  <header class="pf-v6-c-masthead" id="alert-basic-example-docked">
19
20
  <div class="pf-v6-c-masthead__main">
20
21
  <span class="pf-v6-c-masthead__toggle">
@@ -521,6 +522,7 @@ section: components
521
522
  <span class="pf-v6-c-button__text">Skip to content</span>
522
523
  </a>
523
524
  </div>
525
+
524
526
  <header class="pf-v6-c-masthead" id="alert-horizontal-example-docked">
525
527
  <div class="pf-v6-c-masthead__main">
526
528
  <span class="pf-v6-c-masthead__toggle">
@@ -1070,6 +1072,7 @@ section: components
1070
1072
  <span class="pf-v6-c-button__text">Skip to content</span>
1071
1073
  </a>
1072
1074
  </div>
1075
+
1073
1076
  <header class="pf-v6-c-masthead" id="alert-stacked-example-docked">
1074
1077
  <div class="pf-v6-c-masthead__main">
1075
1078
  <span class="pf-v6-c-masthead__toggle">
@@ -16,6 +16,7 @@ cssPrefix: pf-d-back-to-top
16
16
  <span class="pf-v6-c-button__text">Skip to content</span>
17
17
  </a>
18
18
  </div>
19
+
19
20
  <header class="pf-v6-c-masthead" id="back-to-top-basic-example-docked">
20
21
  <div class="pf-v6-c-masthead__main">
21
22
  <span class="pf-v6-c-masthead__toggle">
@@ -17,6 +17,7 @@ wrapperTag: div
17
17
  <span class="pf-v6-c-button__text">Skip to content</span>
18
18
  </a>
19
19
  </div>
20
+
20
21
  <header class="pf-v6-c-masthead" id="banner-basic-example-docked">
21
22
  <div class="pf-v6-c-masthead__main">
22
23
  <span class="pf-v6-c-masthead__toggle">
@@ -532,6 +533,7 @@ wrapperTag: div
532
533
  <span class="pf-v6-c-button__text">Skip to content</span>
533
534
  </a>
534
535
  </div>
536
+
535
537
  <header class="pf-v6-c-masthead" id="banner-top-bottom-example-docked">
536
538
  <div class="pf-v6-c-masthead__main">
537
539
  <span class="pf-v6-c-masthead__toggle">