@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.39

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 (76) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  3. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  4. package/assets/images/PF-IconLogo-color.svg +17 -0
  5. package/components/Backdrop/backdrop.css +6 -2
  6. package/components/Backdrop/backdrop.scss +5 -2
  7. package/components/Banner/banner.css +4 -0
  8. package/components/Banner/banner.scss +5 -0
  9. package/components/Card/card.css +3 -0
  10. package/components/Card/card.scss +8 -0
  11. package/components/Divider/divider.css +97 -177
  12. package/components/Divider/divider.scss +60 -79
  13. package/components/Form/form.css +6 -0
  14. package/components/Form/form.scss +4 -1
  15. package/components/Masthead/masthead.css +267 -435
  16. package/components/Masthead/masthead.scss +118 -233
  17. package/components/MenuToggle/menu-toggle.css +1 -0
  18. package/components/MenuToggle/menu-toggle.scss +2 -0
  19. package/components/Popover/popover.css +0 -2
  20. package/components/Popover/popover.scss +2 -2
  21. package/components/SimpleList/simple-list.css +35 -52
  22. package/components/SimpleList/simple-list.scss +41 -51
  23. package/components/Table/table.scss +1 -0
  24. package/components/Tooltip/tooltip.css +0 -2
  25. package/components/Tooltip/tooltip.scss +3 -3
  26. package/components/Truncate/truncate.css +4 -0
  27. package/components/Truncate/truncate.scss +3 -0
  28. package/docs/components/Accordion/examples/Accordion.md +6 -6
  29. package/docs/components/Alert/examples/Alert.md +2 -2
  30. package/docs/components/Brand/examples/Brand.md +9 -33
  31. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  32. package/docs/components/Card/examples/Card.md +18 -20
  33. package/docs/components/Check/examples/Check.md +1 -0
  34. package/docs/components/Content/examples/Content.md +5 -5
  35. package/docs/components/Divider/examples/Divider.css +3 -1
  36. package/docs/components/Divider/examples/Divider.md +4 -5
  37. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  38. package/docs/components/Label/examples/Label.md +11 -11
  39. package/docs/components/Masthead/examples/masthead.md +441 -16
  40. package/docs/components/Nav/examples/Navigation.css +18 -2
  41. package/docs/components/Nav/examples/Navigation.md +1 -1
  42. package/docs/components/Radio/examples/Radio.md +1 -1
  43. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  44. package/docs/components/Table/examples/Table.md +8 -8
  45. package/docs/components/Truncate/examples/Truncate.css +2 -2
  46. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  47. package/docs/demos/Alert/examples/Alert.md +120 -126
  48. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  49. package/docs/demos/Banner/examples/Banner.md +79 -80
  50. package/docs/demos/CardView/examples/CardView.md +40 -42
  51. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  52. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  53. package/docs/demos/DataList/examples/DataList.md +160 -279
  54. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  55. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  56. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  57. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  58. package/docs/demos/Modal/examples/Modal.md +240 -252
  59. package/docs/demos/Nav/examples/Nav.md +320 -336
  60. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  61. package/docs/demos/Page/examples/Page.md +360 -378
  62. package/docs/demos/Page/examples/Penta.md +8 -15
  63. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  64. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  65. package/docs/demos/Table/examples/Table.md +617 -647
  66. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  67. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  68. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  69. package/docs/layouts/Flex/examples/Flex.md +11 -11
  70. package/package.json +32 -32
  71. package/patternfly-no-globals.css +422 -673
  72. package/patternfly-theme-dark-unversioned.css +422 -673
  73. package/patternfly.css +422 -673
  74. package/patternfly.min.css +1 -1
  75. package/patternfly.min.css.map +1 -1
  76. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
@@ -1949,16 +1949,16 @@ This style of label is used to indicate overflow within a label group.
1949
1949
 
1950
1950
  **Note: Editable label behavior must be handled with JavaScript.**
1951
1951
 
1952
- * `.pf-v5-c-label__editable-text` onClick event should:
1953
- * Set `.pf-m-editable-active` on `.pf-v5-c-label`
1954
- * Change `.pf-v5-c-label__editable-text`from a button to an input
1955
- * Return keypress, when content is editable, should:
1956
- * Be captured to prevent line wrapping and save updates to label text
1957
- * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
1958
- * Esc keypress, when content is editable, should:
1959
- * Undo any update to label text
1960
- * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
1961
- * Change `.pf-v5-c-label__editable-text` back to a button
1952
+ * `.pf-v5-c-label__editable-text` onClick event should:
1953
+ * Set `.pf-m-editable-active` on `.pf-v5-c-label`
1954
+ * Change `.pf-v5-c-label__editable-text`from a button to an input
1955
+ * Return keypress, when content is editable, should:
1956
+ * Be captured to prevent line wrapping and save updates to label text
1957
+ * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
1958
+ * Esc keypress, when content is editable, should:
1959
+ * Undo any update to label text
1960
+ * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
1961
+ * Change `.pf-v5-c-label__editable-text` back to a button
1962
1962
 
1963
1963
  ```html isBeta
1964
1964
  <span class="pf-v5-c-label pf-m-editable pf-m-blue">
@@ -2692,7 +2692,7 @@ The contents of a label group can be modified by removing labels or adding new o
2692
2692
 
2693
2693
  In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
2694
2694
 
2695
- * `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
2695
+ * `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
2696
2696
 
2697
2697
  ### Editable labels, dynamic label group
2698
2698
 
@@ -18,7 +18,78 @@ cssPrefix: pf-v5-c-masthead
18
18
  </button>
19
19
  </span>
20
20
  <div class="pf-v5-c-masthead__main">
21
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
21
+ <a class="pf-v5-c-masthead__brand" href="#">
22
+ <svg height="40px" viewBox="0 0 679 158">
23
+ <title>PF-HorizontalLogo-Color</title>
24
+ <defs>
25
+ <linearGradient
26
+ x1="68%"
27
+ y1="2.25860997e-13%"
28
+ x2="32%"
29
+ y2="100%"
30
+ id="linearGradient-basic-masthead"
31
+ >
32
+ <stop stop-color="#2B9AF3" offset="0%" />
33
+ <stop
34
+ stop-color="#73BCF7"
35
+ stop-opacity="0.502212631"
36
+ offset="100%"
37
+ />
38
+ </linearGradient>
39
+ </defs>
40
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
41
+ <g
42
+ transform="translate(206.000000, 45.750000)"
43
+ fill="var(--pf-t--global--text--color--regular)"
44
+ fill-rule="nonzero"
45
+ >
46
+ <path
47
+ 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"
48
+ />
49
+ <path
50
+ 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"
51
+ />
52
+ <path
53
+ 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"
54
+ />
55
+ <path
56
+ 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"
57
+ />
58
+ <path
59
+ 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"
60
+ />
61
+ <path
62
+ 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"
63
+ />
64
+ <path
65
+ 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"
66
+ />
67
+ <polygon
68
+ 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"
69
+ />
70
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
71
+ <path
72
+ 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"
73
+ />
74
+ </g>
75
+ <g transform="translate(0.000000, 0.000000)">
76
+ <path
77
+ 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"
78
+ fill="#0066CC"
79
+ />
80
+ <path
81
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
82
+ fill="url(#linearGradient-basic-masthead)"
83
+ />
84
+ <path
85
+ 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"
86
+ fill="url(#linearGradient-basic-masthead)"
87
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
88
+ />
89
+ </g>
90
+ </g>
91
+ </svg>
92
+ </a>
22
93
  </div>
23
94
  <div class="pf-v5-c-masthead__content">
24
95
  <span>Content</span>
@@ -30,7 +101,7 @@ cssPrefix: pf-v5-c-masthead
30
101
  ### Basic with mixed content
31
102
 
32
103
  ```html
33
- <header class="pf-v5-c-masthead" id="basic-masthead-with-mixed-content">
104
+ <header class="pf-v5-c-masthead" id="basic-masthead-with-mixed-content-example">
34
105
  <span class="pf-v5-c-masthead__toggle">
35
106
  <button
36
107
  class="pf-v5-c-button pf-m-plain"
@@ -41,14 +112,81 @@ cssPrefix: pf-v5-c-masthead
41
112
  </button>
42
113
  </span>
43
114
  <div class="pf-v5-c-masthead__main">
44
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
115
+ <a class="pf-v5-c-masthead__brand" href="#">
116
+ <svg height="40px" viewBox="0 0 679 158">
117
+ <title>PF-HorizontalLogo-Color</title>
118
+ <defs>
119
+ <linearGradient
120
+ x1="68%"
121
+ y1="2.25860997e-13%"
122
+ x2="32%"
123
+ y2="100%"
124
+ id="linearGradient-basic-masthead-with-mixed-content-example"
125
+ >
126
+ <stop stop-color="#2B9AF3" offset="0%" />
127
+ <stop
128
+ stop-color="#73BCF7"
129
+ stop-opacity="0.502212631"
130
+ offset="100%"
131
+ />
132
+ </linearGradient>
133
+ </defs>
134
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
135
+ <g
136
+ transform="translate(206.000000, 45.750000)"
137
+ fill="var(--pf-t--global--text--color--regular)"
138
+ fill-rule="nonzero"
139
+ >
140
+ <path
141
+ 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"
142
+ />
143
+ <path
144
+ 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"
145
+ />
146
+ <path
147
+ 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"
148
+ />
149
+ <path
150
+ 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"
151
+ />
152
+ <path
153
+ 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"
154
+ />
155
+ <path
156
+ 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"
157
+ />
158
+ <path
159
+ 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"
160
+ />
161
+ <polygon
162
+ 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"
163
+ />
164
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
165
+ <path
166
+ 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"
167
+ />
168
+ </g>
169
+ <g transform="translate(0.000000, 0.000000)">
170
+ <path
171
+ 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"
172
+ fill="#0066CC"
173
+ />
174
+ <path
175
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
176
+ fill="url(#linearGradient-basic-masthead-with-mixed-content-example)"
177
+ />
178
+ <path
179
+ 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"
180
+ fill="url(#linearGradient-basic-masthead-with-mixed-content-example)"
181
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
182
+ />
183
+ </g>
184
+ </g>
185
+ </svg>
186
+ </a>
45
187
  </div>
46
188
  <div class="pf-v5-c-masthead__content">
47
- <span>Content</span>
48
- <button
49
- class="pf-v5-c-button pf-m-primary pf-v5-u-text-align-right"
50
- type="button"
51
- >Primary</button>
189
+ <button class="pf-v5-c-button pf-m-primary" type="button">Primary</button>
52
190
  <button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
53
191
  <button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
54
192
  </div>
@@ -59,7 +197,10 @@ cssPrefix: pf-v5-c-masthead
59
197
  ### Display inline
60
198
 
61
199
  ```html
62
- <header class="pf-v5-c-masthead pf-m-display-inline" id="inline-masthead">
200
+ <header
201
+ class="pf-v5-c-masthead pf-m-display-inline"
202
+ id="inline-masthead-example"
203
+ >
63
204
  <span class="pf-v5-c-masthead__toggle">
64
205
  <button
65
206
  class="pf-v5-c-button pf-m-plain"
@@ -70,7 +211,78 @@ cssPrefix: pf-v5-c-masthead
70
211
  </button>
71
212
  </span>
72
213
  <div class="pf-v5-c-masthead__main">
73
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
214
+ <a class="pf-v5-c-masthead__brand" href="#">
215
+ <svg height="40px" viewBox="0 0 679 158">
216
+ <title>PF-HorizontalLogo-Color</title>
217
+ <defs>
218
+ <linearGradient
219
+ x1="68%"
220
+ y1="2.25860997e-13%"
221
+ x2="32%"
222
+ y2="100%"
223
+ id="linearGradient-inline-masthead-example"
224
+ >
225
+ <stop stop-color="#2B9AF3" offset="0%" />
226
+ <stop
227
+ stop-color="#73BCF7"
228
+ stop-opacity="0.502212631"
229
+ offset="100%"
230
+ />
231
+ </linearGradient>
232
+ </defs>
233
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
234
+ <g
235
+ transform="translate(206.000000, 45.750000)"
236
+ fill="var(--pf-t--global--text--color--regular)"
237
+ fill-rule="nonzero"
238
+ >
239
+ <path
240
+ 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"
241
+ />
242
+ <path
243
+ 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"
244
+ />
245
+ <path
246
+ 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"
247
+ />
248
+ <path
249
+ 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"
250
+ />
251
+ <path
252
+ 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"
253
+ />
254
+ <path
255
+ 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"
256
+ />
257
+ <path
258
+ 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"
259
+ />
260
+ <polygon
261
+ 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"
262
+ />
263
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
264
+ <path
265
+ 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"
266
+ />
267
+ </g>
268
+ <g transform="translate(0.000000, 0.000000)">
269
+ <path
270
+ 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"
271
+ fill="#0066CC"
272
+ />
273
+ <path
274
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
275
+ fill="url(#linearGradient-inline-masthead-example)"
276
+ />
277
+ <path
278
+ 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"
279
+ fill="url(#linearGradient-inline-masthead-example)"
280
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
281
+ />
282
+ </g>
283
+ </g>
284
+ </svg>
285
+ </a>
74
286
  </div>
75
287
  <div class="pf-v5-c-masthead__content">
76
288
  <span>Content</span>
@@ -82,7 +294,7 @@ cssPrefix: pf-v5-c-masthead
82
294
  ### Display stack
83
295
 
84
296
  ```html
85
- <header class="pf-v5-c-masthead pf-m-display-stack" id="stack-masthead">
297
+ <header class="pf-v5-c-masthead pf-m-display-stack" id="stack-masthead-example">
86
298
  <span class="pf-v5-c-masthead__toggle">
87
299
  <button
88
300
  class="pf-v5-c-button pf-m-plain"
@@ -93,7 +305,78 @@ cssPrefix: pf-v5-c-masthead
93
305
  </button>
94
306
  </span>
95
307
  <div class="pf-v5-c-masthead__main">
96
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
308
+ <a class="pf-v5-c-masthead__brand" href="#">
309
+ <svg height="40px" viewBox="0 0 679 158">
310
+ <title>PF-HorizontalLogo-Color</title>
311
+ <defs>
312
+ <linearGradient
313
+ x1="68%"
314
+ y1="2.25860997e-13%"
315
+ x2="32%"
316
+ y2="100%"
317
+ id="linearGradient-stack-masthead-example"
318
+ >
319
+ <stop stop-color="#2B9AF3" offset="0%" />
320
+ <stop
321
+ stop-color="#73BCF7"
322
+ stop-opacity="0.502212631"
323
+ offset="100%"
324
+ />
325
+ </linearGradient>
326
+ </defs>
327
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
328
+ <g
329
+ transform="translate(206.000000, 45.750000)"
330
+ fill="var(--pf-t--global--text--color--regular)"
331
+ fill-rule="nonzero"
332
+ >
333
+ <path
334
+ 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"
335
+ />
336
+ <path
337
+ 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"
338
+ />
339
+ <path
340
+ 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"
341
+ />
342
+ <path
343
+ 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"
344
+ />
345
+ <path
346
+ 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"
347
+ />
348
+ <path
349
+ 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"
350
+ />
351
+ <path
352
+ 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"
353
+ />
354
+ <polygon
355
+ 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"
356
+ />
357
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
358
+ <path
359
+ 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"
360
+ />
361
+ </g>
362
+ <g transform="translate(0.000000, 0.000000)">
363
+ <path
364
+ 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"
365
+ fill="#0066CC"
366
+ />
367
+ <path
368
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
369
+ fill="url(#linearGradient-stack-masthead-example)"
370
+ />
371
+ <path
372
+ 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"
373
+ fill="url(#linearGradient-stack-masthead-example)"
374
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
375
+ />
376
+ </g>
377
+ </g>
378
+ </svg>
379
+ </a>
97
380
  </div>
98
381
  <div class="pf-v5-c-masthead__content">
99
382
  <span>Content</span>
@@ -107,7 +390,7 @@ cssPrefix: pf-v5-c-masthead
107
390
  ```html
108
391
  <header
109
392
  class="pf-v5-c-masthead pf-m-display-inline pf-m-display-stack-on-lg pf-m-display-inline-on-2xl"
110
- id="stack-inline-masthead"
393
+ id="stack-inline-masthead-example"
111
394
  >
112
395
  <span class="pf-v5-c-masthead__toggle">
113
396
  <button
@@ -119,7 +402,78 @@ cssPrefix: pf-v5-c-masthead
119
402
  </button>
120
403
  </span>
121
404
  <div class="pf-v5-c-masthead__main">
122
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
405
+ <a class="pf-v5-c-masthead__brand" href="#">
406
+ <svg height="40px" viewBox="0 0 679 158">
407
+ <title>PF-HorizontalLogo-Color</title>
408
+ <defs>
409
+ <linearGradient
410
+ x1="68%"
411
+ y1="2.25860997e-13%"
412
+ x2="32%"
413
+ y2="100%"
414
+ id="linearGradient-stack-inline-masthead-example"
415
+ >
416
+ <stop stop-color="#2B9AF3" offset="0%" />
417
+ <stop
418
+ stop-color="#73BCF7"
419
+ stop-opacity="0.502212631"
420
+ offset="100%"
421
+ />
422
+ </linearGradient>
423
+ </defs>
424
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
425
+ <g
426
+ transform="translate(206.000000, 45.750000)"
427
+ fill="var(--pf-t--global--text--color--regular)"
428
+ fill-rule="nonzero"
429
+ >
430
+ <path
431
+ 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"
432
+ />
433
+ <path
434
+ 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"
435
+ />
436
+ <path
437
+ 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"
438
+ />
439
+ <path
440
+ 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"
441
+ />
442
+ <path
443
+ 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"
444
+ />
445
+ <path
446
+ 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"
447
+ />
448
+ <path
449
+ 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"
450
+ />
451
+ <polygon
452
+ 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"
453
+ />
454
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
455
+ <path
456
+ 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"
457
+ />
458
+ </g>
459
+ <g transform="translate(0.000000, 0.000000)">
460
+ <path
461
+ 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"
462
+ fill="#0066CC"
463
+ />
464
+ <path
465
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
466
+ fill="url(#linearGradient-stack-inline-masthead-example)"
467
+ />
468
+ <path
469
+ 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"
470
+ fill="url(#linearGradient-stack-inline-masthead-example)"
471
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
472
+ />
473
+ </g>
474
+ </g>
475
+ </svg>
476
+ </a>
123
477
  </div>
124
478
  <div class="pf-v5-c-masthead__content">
125
479
  <span>Content</span>
@@ -131,7 +485,7 @@ cssPrefix: pf-v5-c-masthead
131
485
  ### Insets
132
486
 
133
487
  ```html
134
- <header class="pf-v5-c-masthead pf-m-inset-sm" id="inset-masthead">
488
+ <header class="pf-v5-c-masthead pf-m-inset-sm" id="inset-masthead-example">
135
489
  <span class="pf-v5-c-masthead__toggle">
136
490
  <button
137
491
  class="pf-v5-c-button pf-m-plain"
@@ -142,7 +496,78 @@ cssPrefix: pf-v5-c-masthead
142
496
  </button>
143
497
  </span>
144
498
  <div class="pf-v5-c-masthead__main">
145
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
499
+ <a class="pf-v5-c-masthead__brand" href="#">
500
+ <svg height="40px" viewBox="0 0 679 158">
501
+ <title>PF-HorizontalLogo-Color</title>
502
+ <defs>
503
+ <linearGradient
504
+ x1="68%"
505
+ y1="2.25860997e-13%"
506
+ x2="32%"
507
+ y2="100%"
508
+ id="linearGradient-inset-masthead-example"
509
+ >
510
+ <stop stop-color="#2B9AF3" offset="0%" />
511
+ <stop
512
+ stop-color="#73BCF7"
513
+ stop-opacity="0.502212631"
514
+ offset="100%"
515
+ />
516
+ </linearGradient>
517
+ </defs>
518
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
519
+ <g
520
+ transform="translate(206.000000, 45.750000)"
521
+ fill="var(--pf-t--global--text--color--regular)"
522
+ fill-rule="nonzero"
523
+ >
524
+ <path
525
+ 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"
526
+ />
527
+ <path
528
+ 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"
529
+ />
530
+ <path
531
+ 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"
532
+ />
533
+ <path
534
+ 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"
535
+ />
536
+ <path
537
+ 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"
538
+ />
539
+ <path
540
+ 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"
541
+ />
542
+ <path
543
+ 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"
544
+ />
545
+ <polygon
546
+ 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"
547
+ />
548
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
549
+ <path
550
+ 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"
551
+ />
552
+ </g>
553
+ <g transform="translate(0.000000, 0.000000)">
554
+ <path
555
+ 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"
556
+ fill="#0066CC"
557
+ />
558
+ <path
559
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
560
+ fill="url(#linearGradient-inset-masthead-example)"
561
+ />
562
+ <path
563
+ 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"
564
+ fill="url(#linearGradient-inset-masthead-example)"
565
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
566
+ />
567
+ </g>
568
+ </g>
569
+ </svg>
570
+ </a>
146
571
  </div>
147
572
  <div class="pf-v5-c-masthead__content">
148
573
  <span>Content</span>
@@ -1,6 +1,22 @@
1
- .ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
1
+ #ws-core-c-navigation-default,
2
+ #ws-core-c-navigation-basic,
3
+ #ws-core-c-navigation-grouped,
4
+ #ws-core-c-navigation-grouped-nav,
5
+ #ws-core-c-navigation-grouped-nav-no-titles,
6
+ #ws-core-c-navigation-expanded,
7
+ #ws-core-c-navigation-expanded-with-subnav-titles,
8
+ #ws-core-c-navigation-mixed,
9
+ #ws-core-c-navigation-horizontal,
10
+ #ws-core-c-navigation-horizontal-overflow,
11
+ #ws-core-c-navigation-horizontal-subnav,
12
+ #ws-core-c-navigation-horizontal-subnav-overflow,
13
+ #ws-core-c-navigation-drilldown,
14
+ #ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
15
+ #ws-core-c-navigation-level-2-drilldown,
16
+ #ws-core-c-navigation-level-3-drilldown,
17
+ #ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
18
+ #ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
2
19
  padding: 0;
3
- background-color: var(--pf-v5-global--BackgroundColor--dark-300);
4
20
  }
5
21
 
6
22
  #ws-core-c-navigation-horizontal-in-masthead,
@@ -2614,7 +2614,7 @@ When using anything other than a text node for the link text, wrap the link text
2614
2614
 
2615
2615
  The navigation system relies on several different sub-components:
2616
2616
 
2617
- * `.pf-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
2617
+ * `.pf-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
2618
2618
 
2619
2619
  ### Accessibility
2620
2620
 
@@ -107,7 +107,7 @@ cssPrefix: pf-v5-c-radio
107
107
  <label
108
108
  class="pf-v5-c-radio__label pf-m-disabled"
109
109
  for="radio-disabled-checked-example-input"
110
- >Radio disabled</label>
110
+ >Radio disabled checked</label>
111
111
  </div>
112
112
 
113
113
  ```