@patternfly/patternfly 6.5.0-prerelease.50 → 6.5.0-prerelease.52

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 (47) hide show
  1. package/components/Button/button.css +22 -2
  2. package/components/Button/button.scss +26 -2
  3. package/components/Masthead/masthead.css +38 -4
  4. package/components/Masthead/masthead.scss +52 -4
  5. package/components/MenuToggle/menu-toggle.css +26 -2
  6. package/components/MenuToggle/menu-toggle.scss +30 -2
  7. package/components/Nav/nav.css +16 -8
  8. package/components/Nav/nav.scss +16 -8
  9. package/components/Page/page.css +59 -7
  10. package/components/Page/page.scss +79 -15
  11. package/components/_index.css +161 -23
  12. package/docs/components/Breadcrumb/examples/Breadcrumb.md +0 -1
  13. package/docs/components/Button/examples/Button.md +339 -0
  14. package/docs/components/Masthead/examples/masthead.md +1 -1
  15. package/docs/components/Menu/examples/Menu.md +0 -2
  16. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -4
  17. package/docs/components/ModalBox/examples/ModalBox.md +4 -4
  18. package/docs/components/Pagination/examples/Pagination.md +0 -13
  19. package/docs/components/Toolbar/examples/Toolbar.md +0 -2
  20. package/docs/demos/AboutModal/examples/AboutModal.md +1 -0
  21. package/docs/demos/Alert/examples/Alert.md +3 -0
  22. package/docs/demos/BackToTop/examples/BackToTop.md +1 -0
  23. package/docs/demos/Banner/examples/Banner.md +2 -0
  24. package/docs/demos/CardView/examples/CardView.md +1 -2
  25. package/docs/demos/Compass/examples/Compass.md +158 -52
  26. package/docs/demos/Dashboard/examples/Dashboard.md +1 -0
  27. package/docs/demos/DataList/examples/DataList.md +4 -8
  28. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -0
  29. package/docs/demos/Drawer/examples/Drawer.md +5 -0
  30. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -0
  31. package/docs/demos/Masthead/examples/Masthead.md +9 -58
  32. package/docs/demos/Modal/examples/Modal.md +6 -0
  33. package/docs/demos/Nav/examples/Nav.md +305 -160
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -0
  35. package/docs/demos/Page/examples/Page.md +14 -0
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -6
  37. package/docs/demos/Skeleton/examples/Skeleton.md +1 -0
  38. package/docs/demos/Table/examples/Table.md +16 -27
  39. package/docs/demos/Tabs/examples/Tabs.md +6 -0
  40. package/docs/demos/Toolbar/examples/Toolbar.md +2 -8
  41. package/docs/demos/Wizard/examples/Wizard.md +9 -0
  42. package/package.json +1 -1
  43. package/patternfly-no-globals.css +161 -23
  44. package/patternfly.css +161 -23
  45. package/patternfly.min.css +1 -1
  46. package/patternfly.min.css.map +1 -1
  47. package/sass-utilities/scss-variables.scss +3 -0
@@ -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">
@@ -15,6 +15,7 @@ section: patterns
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="card-view-basic-example-docked">
19
20
  <div class="pf-v6-c-masthead__main">
20
21
  <span class="pf-v6-c-masthead__toggle">
@@ -560,7 +561,6 @@ section: patterns
560
561
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
561
562
  type="button"
562
563
  aria-expanded="false"
563
- aria-label="Menu toggle"
564
564
  id="card-view-basic-example-toolbar-top-pagination"
565
565
  >
566
566
  <span class="pf-v6-c-menu-toggle__text">
@@ -1132,7 +1132,6 @@ section: patterns
1132
1132
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1133
1133
  type="button"
1134
1134
  aria-expanded="false"
1135
- aria-label="Menu toggle"
1136
1135
  id="pagination-menu-toggle-bottom-example"
1137
1136
  >
1138
1137
  <span class="pf-v6-c-menu-toggle__text">
@@ -431,7 +431,6 @@ This demo populates the main Compass section with a card view, which is one of t
431
431
  class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
432
432
  type="button"
433
433
  aria-expanded="false"
434
- aria-label="Menu toggle"
435
434
  >
436
435
  <span class="pf-v6-c-menu-toggle__icon">
437
436
  <img
@@ -708,7 +707,6 @@ This demo populates the main Compass section with a card view, which is one of t
708
707
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
709
708
  type="button"
710
709
  aria-expanded="false"
711
- aria-label="Menu toggle"
712
710
  id="-toolbar-top-pagination"
713
711
  >
714
712
  <span class="pf-v6-c-menu-toggle__text">
@@ -1830,7 +1828,6 @@ This demo populates the main Compass section with a dashboard, which is often us
1830
1828
  class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
1831
1829
  type="button"
1832
1830
  aria-expanded="false"
1833
- aria-label="Menu toggle"
1834
1831
  >
1835
1832
  <span class="pf-v6-c-menu-toggle__icon">
1836
1833
  <img
@@ -3466,7 +3463,6 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3466
3463
  class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
3467
3464
  type="button"
3468
3465
  aria-expanded="false"
3469
- aria-label="Menu toggle"
3470
3466
  >
3471
3467
  <span class="pf-v6-c-menu-toggle__icon">
3472
3468
  <img
@@ -3752,7 +3748,6 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3752
3748
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3753
3749
  type="button"
3754
3750
  aria-expanded="false"
3755
- aria-label="Menu toggle"
3756
3751
  id="-toolbar-top-pagination"
3757
3752
  >
3758
3753
  <span class="pf-v6-c-menu-toggle__text">
@@ -4436,7 +4431,6 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4436
4431
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
4437
4432
  type="button"
4438
4433
  aria-expanded="false"
4439
- aria-label="Menu toggle"
4440
4434
  id="-toolbar-top-pagination"
4441
4435
  >
4442
4436
  <span class="pf-v6-c-menu-toggle__text">
@@ -5584,7 +5578,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
5584
5578
  class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
5585
5579
  type="button"
5586
5580
  aria-expanded="false"
5587
- aria-label="Menu toggle"
5588
5581
  >
5589
5582
  <span class="pf-v6-c-menu-toggle__icon">
5590
5583
  <img
@@ -5879,7 +5872,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
5879
5872
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5880
5873
  type="button"
5881
5874
  aria-expanded="false"
5882
- aria-label="Menu toggle"
5883
5875
  id="-toolbar-top-pagination"
5884
5876
  >
5885
5877
  <span class="pf-v6-c-menu-toggle__text">
@@ -6643,10 +6635,123 @@ This demo showcases how you can position a side-panel drawer on top of the other
6643
6635
  <span class="pf-v6-c-button__text">Skip to content</span>
6644
6636
  </a>
6645
6637
  </div>
6638
+
6646
6639
  <header class="pf-v6-c-masthead pf-m-docked">
6647
6640
  <div class="pf-v6-c-masthead__main">
6641
+ <span class="pf-v6-c-masthead__toggle">
6642
+ <button
6643
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
6644
+ type="button"
6645
+ aria-label="Global navigation"
6646
+ >
6647
+ <span class="pf-v6-c-button__icon">
6648
+ <svg
6649
+ viewBox="0 0 10 10"
6650
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
6651
+ width="1em"
6652
+ height="1em"
6653
+ >
6654
+ <path
6655
+ class="pf-v6-c-button--hamburger-icon--top"
6656
+ d="M1,1 L9,1"
6657
+ />
6658
+ <path
6659
+ class="pf-v6-c-button--hamburger-icon--middle"
6660
+ d="M1,5 L9,5"
6661
+ />
6662
+ <path
6663
+ class="pf-v6-c-button--hamburger-icon--arrow"
6664
+ d="M1,5 L1,5 L1,5"
6665
+ />
6666
+ <path
6667
+ class="pf-v6-c-button--hamburger-icon--bottom"
6668
+ d="M9,9 L1,9"
6669
+ />
6670
+ </svg>
6671
+ </span>
6672
+ </button>
6673
+ </span>
6648
6674
  <div class="pf-v6-c-masthead__brand">
6649
6675
  <a class="pf-v6-c-masthead__logo" href="#">
6676
+ <svg height="37px" viewBox="0 0 679 158">
6677
+ <title>PF-HorizontalLogo-Color</title>
6678
+ <defs>
6679
+ <linearGradient
6680
+ x1="68%"
6681
+ y1="2.25860997e-13%"
6682
+ x2="32%"
6683
+ y2="100%"
6684
+ id="linearGradient-"
6685
+ >
6686
+ <stop stop-color="#2B9AF3" offset="0%" />
6687
+ <stop
6688
+ stop-color="#73BCF7"
6689
+ stop-opacity="0.502212631"
6690
+ offset="100%"
6691
+ />
6692
+ </linearGradient>
6693
+ </defs>
6694
+ <g
6695
+ stroke="none"
6696
+ stroke-width="1"
6697
+ fill="none"
6698
+ fill-rule="evenodd"
6699
+ >
6700
+ <g
6701
+ transform="translate(206.000000, 45.750000)"
6702
+ fill="var(--pf-t--global--text--color--regular)"
6703
+ fill-rule="nonzero"
6704
+ >
6705
+ <path
6706
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
6707
+ />
6708
+ <path
6709
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
6710
+ />
6711
+ <path
6712
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
6713
+ />
6714
+ <path
6715
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
6716
+ />
6717
+ <path
6718
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
6719
+ />
6720
+ <path
6721
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
6722
+ />
6723
+ <path
6724
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
6725
+ />
6726
+ <polygon
6727
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
6728
+ />
6729
+ <polygon
6730
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
6731
+ />
6732
+ <path
6733
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
6734
+ />
6735
+ </g>
6736
+ <g transform="translate(0.000000, 0.000000)">
6737
+ <path
6738
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
6739
+ fill="#0066CC"
6740
+ />
6741
+ <path
6742
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
6743
+ fill="url(#linearGradient-)"
6744
+ />
6745
+ <path
6746
+ 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"
6747
+ fill="url(#linearGradient-)"
6748
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
6749
+ />
6750
+ </g>
6751
+ </g>
6752
+ </svg>
6753
+ </a>
6754
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
6650
6755
  <svg width="37px" height="37px" viewBox="0 0 158 158">
6651
6756
  <title>PF-HorizontalLogo-Color</title>
6652
6757
  <defs>
@@ -6707,6 +6812,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6707
6812
  <span class="pf-v6-c-nav__link-icon">
6708
6813
  <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
6709
6814
  </span>
6815
+ <span class="pf-v6-c-nav__link-text">System panel</span>
6710
6816
  </a>
6711
6817
  </li>
6712
6818
  <li class="pf-v6-c-nav__item">
@@ -6719,6 +6825,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6719
6825
  <span class="pf-v6-c-nav__link-icon">
6720
6826
  <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
6721
6827
  </span>
6828
+ <span class="pf-v6-c-nav__link-text">Policy</span>
6722
6829
  </a>
6723
6830
  </li>
6724
6831
  <li class="pf-v6-c-nav__item">
@@ -6726,6 +6833,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6726
6833
  <span class="pf-v6-c-nav__link-icon">
6727
6834
  <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
6728
6835
  </span>
6836
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
6729
6837
  </a>
6730
6838
  </li>
6731
6839
  <li class="pf-v6-c-nav__item">
@@ -6733,6 +6841,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6733
6841
  <span class="pf-v6-c-nav__link-icon">
6734
6842
  <i class="fas fa-fw fa-code" aria-hidden="true"></i>
6735
6843
  </span>
6844
+ <span class="pf-v6-c-nav__link-text">Network services</span>
6736
6845
  </a>
6737
6846
  </li>
6738
6847
  </ul>
@@ -6741,57 +6850,54 @@ This demo showcases how you can position a side-panel drawer on top of the other
6741
6850
  <div
6742
6851
  class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
6743
6852
  >
6744
- <div
6745
- class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
6746
- >
6747
- <div class="pf-v6-c-toolbar__item">
6748
- <button
6749
- class="pf-v6-c-menu-toggle pf-m-plain"
6750
- type="button"
6751
- aria-expanded="false"
6752
- aria-label="Application launcher"
6753
- >
6754
- <span class="pf-v6-c-menu-toggle__icon">
6755
- <i class="fas fa-th" aria-hidden="true"></i>
6756
- </span>
6757
- </button>
6758
- </div>
6759
- <div class="pf-v6-c-toolbar__item">
6760
- <button
6761
- class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
6762
- type="button"
6763
- aria-expanded="false"
6764
- aria-label="Settings"
6765
- >
6766
- <span class="pf-v6-c-menu-toggle__icon">
6767
- <i class="fas fa-cog" aria-hidden="true"></i>
6768
- </span>
6769
- </button>
6770
- </div>
6771
- <div class="pf-v6-c-toolbar__item">
6772
- <button
6773
- class="pf-v6-c-menu-toggle pf-m-plain"
6774
- type="button"
6775
- aria-expanded="false"
6776
- aria-label="Help"
6777
- >
6778
- <span class="pf-v6-c-menu-toggle__icon">
6779
- <i class="fas fa-question-circle" aria-hidden="true"></i>
6780
- </span>
6781
- </button>
6782
- </div>
6853
+ <div class="pf-v6-c-toolbar__item">
6854
+ <button
6855
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
6856
+ type="button"
6857
+ aria-expanded="false"
6858
+ aria-label="Applications"
6859
+ >
6860
+ <span class="pf-v6-c-menu-toggle__icon">
6861
+ <i class="fas fa-th" aria-hidden="true"></i>
6862
+ </span>
6863
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
6864
+ </button>
6783
6865
  </div>
6784
-
6785
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
6866
+ <div class="pf-v6-c-toolbar__item">
6786
6867
  <button
6787
- class="pf-v6-c-menu-toggle pf-m-plain"
6868
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
6869
+ type="button"
6870
+ aria-label="Settings"
6871
+ >
6872
+ <span class="pf-v6-c-button__icon pf-m-start">
6873
+ <svg
6874
+ class="pf-v6-svg"
6875
+ viewBox="0 0 32 32"
6876
+ fill="currentColor"
6877
+ aria-hidden="true"
6878
+ role="img"
6879
+ width="1em"
6880
+ height="1em"
6881
+ >
6882
+ <path
6883
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
6884
+ />
6885
+ </svg>
6886
+ </span>
6887
+ <span class="pf-v6-c-button__text">Settings</span>
6888
+ </button>
6889
+ </div>
6890
+ <div class="pf-v6-c-toolbar__item">
6891
+ <button
6892
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
6788
6893
  type="button"
6789
6894
  aria-expanded="false"
6790
- aria-label="Actions"
6895
+ aria-label="Help"
6791
6896
  >
6792
6897
  <span class="pf-v6-c-menu-toggle__icon">
6793
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6898
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
6794
6899
  </span>
6900
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
6795
6901
  </button>
6796
6902
  </div>
6797
6903
  </div>
@@ -13,6 +13,7 @@ cssPrefix: pf-d-dashboard
13
13
  <span class="pf-v6-c-button__text">Skip to content</span>
14
14
  </a>
15
15
  </div>
16
+
16
17
  <header class="pf-v6-c-masthead" id="dashboard-demo-docked">
17
18
  <div class="pf-v6-c-masthead__main">
18
19
  <span class="pf-v6-c-masthead__toggle">
@@ -16,6 +16,7 @@ wrapperTag: div
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="data-list-basic-example-docked">
20
21
  <div class="pf-v6-c-masthead__main">
21
22
  <span class="pf-v6-c-masthead__toggle">
@@ -397,7 +398,6 @@ wrapperTag: div
397
398
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
398
399
  type="button"
399
400
  aria-expanded="false"
400
- aria-label="Menu toggle"
401
401
  id="data-list-basic-example-toolbar-top-pagination"
402
402
  >
403
403
  <span class="pf-v6-c-menu-toggle__text">
@@ -925,7 +925,6 @@ wrapperTag: div
925
925
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
926
926
  type="button"
927
927
  aria-expanded="false"
928
- aria-label="Menu toggle"
929
928
  id="{{page--id}}-pagination-menu-toggle-bottom-example"
930
929
  >
931
930
  <span class="pf-v6-c-menu-toggle__text">
@@ -1069,6 +1068,7 @@ wrapperTag: div
1069
1068
  <span class="pf-v6-c-button__text">Skip to content</span>
1070
1069
  </a>
1071
1070
  </div>
1071
+
1072
1072
  <header class="pf-v6-c-masthead" id="data-list-actionable-example-docked">
1073
1073
  <div class="pf-v6-c-masthead__main">
1074
1074
  <span class="pf-v6-c-masthead__toggle">
@@ -1482,7 +1482,6 @@ wrapperTag: div
1482
1482
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1483
1483
  type="button"
1484
1484
  aria-expanded="false"
1485
- aria-label="Menu toggle"
1486
1485
  id="data-list-actionable-example-toolbar-top-pagination"
1487
1486
  >
1488
1487
  <span class="pf-v6-c-menu-toggle__text">
@@ -1952,7 +1951,6 @@ wrapperTag: div
1952
1951
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1953
1952
  type="button"
1954
1953
  aria-expanded="false"
1955
- aria-label="Menu toggle"
1956
1954
  id="{{page--id}}-pagination-menu-toggle-bottom-example"
1957
1955
  >
1958
1956
  <span class="pf-v6-c-menu-toggle__text">
@@ -2096,6 +2094,7 @@ wrapperTag: div
2096
2094
  <span class="pf-v6-c-button__text">Skip to content</span>
2097
2095
  </a>
2098
2096
  </div>
2097
+
2099
2098
  <header class="pf-v6-c-masthead" id="data-list-expandable-example-docked">
2100
2099
  <div class="pf-v6-c-masthead__main">
2101
2100
  <span class="pf-v6-c-masthead__toggle">
@@ -2580,7 +2579,6 @@ wrapperTag: div
2580
2579
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2581
2580
  type="button"
2582
2581
  aria-expanded="false"
2583
- aria-label="Menu toggle"
2584
2582
  id="data-list-expandable-example-toolbar-top-pagination"
2585
2583
  >
2586
2584
  <span class="pf-v6-c-menu-toggle__text">
@@ -3769,7 +3767,6 @@ wrapperTag: div
3769
3767
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3770
3768
  type="button"
3771
3769
  aria-expanded="false"
3772
- aria-label="Menu toggle"
3773
3770
  id="{{page--id}}-pagination-menu-toggle-bottom-example"
3774
3771
  >
3775
3772
  <span class="pf-v6-c-menu-toggle__text">
@@ -3913,6 +3910,7 @@ wrapperTag: div
3913
3910
  <span class="pf-v6-c-button__text">Skip to content</span>
3914
3911
  </a>
3915
3912
  </div>
3913
+
3916
3914
  <header class="pf-v6-c-masthead" id="data-list-static-bottom-example-docked">
3917
3915
  <div class="pf-v6-c-masthead__main">
3918
3916
  <span class="pf-v6-c-masthead__toggle">
@@ -4339,7 +4337,6 @@ wrapperTag: div
4339
4337
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
4340
4338
  type="button"
4341
4339
  aria-expanded="false"
4342
- aria-label="Menu toggle"
4343
4340
  id="data-list-static-bottom-example-toolbar-top-pagination"
4344
4341
  >
4345
4342
  <span class="pf-v6-c-menu-toggle__text">
@@ -4867,7 +4864,6 @@ wrapperTag: div
4867
4864
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
4868
4865
  type="button"
4869
4866
  aria-expanded="false"
4870
- aria-label="Menu toggle"
4871
4867
  id="{{page--id}}pagination-menu-toggle-bottom-example-static"
4872
4868
  >
4873
4869
  <span class="pf-v6-c-menu-toggle__text">
@@ -16,6 +16,7 @@ cssPrefix: pf-d-description-list
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="description-list-basic-example-docked">
20
21
  <div class="pf-v6-c-masthead__main">
21
22
  <span class="pf-v6-c-masthead__toggle">
@@ -438,6 +439,7 @@ cssPrefix: pf-d-description-list
438
439
  <span class="pf-v6-c-button__text">Skip to content</span>
439
440
  </a>
440
441
  </div>
442
+
441
443
  <header
442
444
  class="pf-v6-c-masthead"
443
445
  id="description-list-in-drawer-example-docked"
@@ -1149,6 +1151,7 @@ cssPrefix: pf-d-description-list
1149
1151
  <span class="pf-v6-c-button__text">Skip to content</span>
1150
1152
  </a>
1151
1153
  </div>
1154
+
1152
1155
  <header
1153
1156
  class="pf-v6-c-masthead"
1154
1157
  id="description-list-complex-content-example-docked"
@@ -16,6 +16,7 @@ wrapperTag: div
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="drawer-collapsed-example-docked">
20
21
  <div class="pf-v6-c-masthead__main">
21
22
  <span class="pf-v6-c-masthead__toggle">
@@ -559,6 +560,7 @@ wrapperTag: div
559
560
  <span class="pf-v6-c-button__text">Skip to content</span>
560
561
  </a>
561
562
  </div>
563
+
562
564
  <header class="pf-v6-c-masthead" id="drawer-expanded-example-docked">
563
565
  <div class="pf-v6-c-masthead__main">
564
566
  <span class="pf-v6-c-masthead__toggle">
@@ -938,6 +940,7 @@ wrapperTag: div
938
940
  <span class="pf-v6-c-button__text">Skip to content</span>
939
941
  </a>
940
942
  </div>
943
+
941
944
  <header class="pf-v6-c-masthead" id="drawer-expanded-bottom-example-docked">
942
945
  <div class="pf-v6-c-masthead__main">
943
946
  <span class="pf-v6-c-masthead__toggle">
@@ -1317,6 +1320,7 @@ wrapperTag: div
1317
1320
  <span class="pf-v6-c-button__text">Skip to content</span>
1318
1321
  </a>
1319
1322
  </div>
1323
+
1320
1324
  <header class="pf-v6-c-masthead" id="drawer-jump-links-docked">
1321
1325
  <div class="pf-v6-c-masthead__main">
1322
1326
  <span class="pf-v6-c-masthead__toggle">
@@ -1760,6 +1764,7 @@ wrapperTag: div
1760
1764
  <span class="pf-v6-c-button__text">Skip to content</span>
1761
1765
  </a>
1762
1766
  </div>
1767
+
1763
1768
  <header class="pf-v6-c-masthead" id="drawer-expanded-jump-links-docked">
1764
1769
  <div class="pf-v6-c-masthead__main">
1765
1770
  <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
19
20
  class="pf-v6-c-masthead"
20
21
  id="jump-links-collapsed-mobile-example-docked"
@@ -494,6 +495,7 @@ section: components
494
495
  <span class="pf-v6-c-button__text">Skip to content</span>
495
496
  </a>
496
497
  </div>
498
+
497
499
  <header
498
500
  class="pf-v6-c-masthead"
499
501
  id="jump-links-vertical-expanded-mobile-example-docked"
@@ -973,6 +975,7 @@ section: components
973
975
  <span class="pf-v6-c-button__text">Skip to content</span>
974
976
  </a>
975
977
  </div>
978
+
976
979
  <header
977
980
  class="pf-v6-c-masthead"
978
981
  id="jump-links-vertical-toggle-text-mobile-example-docked"
@@ -1452,6 +1455,7 @@ section: components
1452
1455
  <span class="pf-v6-c-button__text">Skip to content</span>
1453
1456
  </a>
1454
1457
  </div>
1458
+
1455
1459
  <header class="pf-v6-c-masthead" id="jump-links-horizontal-example-docked">
1456
1460
  <div class="pf-v6-c-masthead__main">
1457
1461
  <span class="pf-v6-c-masthead__toggle">
@@ -1865,6 +1869,7 @@ section: components
1865
1869
  <span class="pf-v6-c-button__text">Skip to content</span>
1866
1870
  </a>
1867
1871
  </div>
1872
+
1868
1873
  <header class="pf-v6-c-masthead" id="jump-links-drawer-docked">
1869
1874
  <div class="pf-v6-c-masthead__main">
1870
1875
  <span class="pf-v6-c-masthead__toggle">
@@ -2308,6 +2313,7 @@ section: components
2308
2313
  <span class="pf-v6-c-button__text">Skip to content</span>
2309
2314
  </a>
2310
2315
  </div>
2316
+
2311
2317
  <header class="pf-v6-c-masthead" id="jump-links-drawer-expanded-docked">
2312
2318
  <div class="pf-v6-c-masthead__main">
2313
2319
  <span class="pf-v6-c-masthead__toggle">