@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.30

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 (158) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/assets/images/img_avatar-rhds.svg +22 -0
  8. package/assets/images/pf-logo-avatar.jpg +0 -0
  9. package/base/patternfly-fonts.css +4 -4
  10. package/base/patternfly-fonts.scss +4 -4
  11. package/base/patternfly-variables.css +8 -6
  12. package/base/tokens/tokens-charts-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  14. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  15. package/base/tokens/tokens-charts.scss +1 -1
  16. package/base/tokens/tokens-dark.scss +1 -1
  17. package/base/tokens/tokens-default.scss +4 -4
  18. package/base/tokens/tokens-felt-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-glass.scss +3 -2
  21. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  22. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  23. package/base/tokens/tokens-felt.scss +1 -1
  24. package/base/tokens/tokens-glass-dark.scss +1 -1
  25. package/base/tokens/tokens-glass.scss +3 -2
  26. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  27. package/base/tokens/tokens-highcontrast.scss +4 -4
  28. package/base/tokens/tokens-palette.scss +1 -1
  29. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  30. package/components/AboutModalBox/about-modal-box.css +1 -1
  31. package/components/AboutModalBox/about-modal-box.scss +1 -1
  32. package/components/Accordion/accordion.css +3 -3
  33. package/components/Accordion/accordion.scss +3 -3
  34. package/components/Alert/alert.css +8 -7
  35. package/components/Alert/alert.scss +8 -7
  36. package/components/Avatar/avatar.css +144 -0
  37. package/components/Avatar/avatar.scss +161 -0
  38. package/components/Banner/banner.css +7 -0
  39. package/components/Banner/banner.scss +7 -0
  40. package/components/Breadcrumb/breadcrumb.css +3 -3
  41. package/components/Breadcrumb/breadcrumb.scss +3 -3
  42. package/components/Button/button.css +20 -4
  43. package/components/Button/button.scss +24 -5
  44. package/components/Card/card.css +4 -4
  45. package/components/Card/card.scss +4 -4
  46. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  47. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  48. package/components/DataList/data-list.css +5 -5
  49. package/components/DataList/data-list.scss +5 -5
  50. package/components/DragDrop/drag-drop.css +4 -0
  51. package/components/DragDrop/drag-drop.scss +4 -0
  52. package/components/DualListSelector/dual-list-selector.css +1 -1
  53. package/components/DualListSelector/dual-list-selector.scss +1 -1
  54. package/components/Form/form.scss +1 -0
  55. package/components/FormControl/form-control.css +12 -2
  56. package/components/FormControl/form-control.scss +14 -2
  57. package/components/Hint/hint.css +2 -2
  58. package/components/Hint/hint.scss +2 -2
  59. package/components/Label/label.css +9 -3
  60. package/components/Label/label.scss +9 -3
  61. package/components/Masthead/masthead.css +1 -1
  62. package/components/Masthead/masthead.scss +1 -1
  63. package/components/Menu/menu.css +2 -2
  64. package/components/Menu/menu.scss +3 -3
  65. package/components/MenuToggle/menu-toggle.css +3 -0
  66. package/components/MenuToggle/menu-toggle.scss +4 -1
  67. package/components/ModalBox/modal-box.css +4 -4
  68. package/components/ModalBox/modal-box.scss +5 -5
  69. package/components/Nav/nav.css +2 -2
  70. package/components/Nav/nav.scss +2 -2
  71. package/components/NotificationDrawer/notification-drawer.css +3 -3
  72. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  73. package/components/Page/page.css +25 -22
  74. package/components/Page/page.scss +28 -28
  75. package/components/Pagination/pagination.css +12 -7
  76. package/components/Pagination/pagination.scss +15 -12
  77. package/components/Panel/panel.css +1 -1
  78. package/components/Panel/panel.scss +2 -2
  79. package/components/Popover/popover.css +1 -1
  80. package/components/Popover/popover.scss +1 -1
  81. package/components/Progress/progress.css +2 -2
  82. package/components/Progress/progress.scss +2 -2
  83. package/components/Sidebar/sidebar.css +4 -7
  84. package/components/Sidebar/sidebar.scss +9 -9
  85. package/components/Table/table-grid.css +25 -13
  86. package/components/Table/table-grid.scss +10 -5
  87. package/components/Table/table-tree-view.css +3 -0
  88. package/components/Table/table-tree-view.scss +2 -0
  89. package/components/Table/table.css +55 -21
  90. package/components/Table/table.scss +82 -34
  91. package/components/Tabs/tabs.css +19 -5
  92. package/components/Tabs/tabs.scss +22 -5
  93. package/components/Title/title.css +1 -1
  94. package/components/Title/title.scss +1 -1
  95. package/components/Tooltip/tooltip.css +1 -1
  96. package/components/Tooltip/tooltip.scss +1 -1
  97. package/components/TreeView/tree-view.css +7 -7
  98. package/components/TreeView/tree-view.scss +7 -7
  99. package/components/Wizard/wizard.css +4 -4
  100. package/components/Wizard/wizard.scss +4 -4
  101. package/components/_index.css +399 -140
  102. package/docs/components/Avatar/examples/Avatar.css +6 -0
  103. package/docs/components/Avatar/examples/Avatar.md +414 -40
  104. package/docs/components/Button/examples/Button.md +2 -2
  105. package/docs/components/CodeEditor/examples/CodeEditor.md +131 -47
  106. package/docs/components/DataList/examples/DataList.md +143 -11
  107. package/docs/components/DatePicker/examples/DatePicker.md +26 -2
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +115 -55
  109. package/docs/components/Drawer/examples/Drawer.md +1 -1
  110. package/docs/components/DualListSelector/examples/DualListSelector.md +355 -139
  111. package/docs/components/EmptyState/examples/EmptyState.md +12 -12
  112. package/docs/components/FileUpload/examples/FileUpload.md +26 -2
  113. package/docs/components/Form/examples/Form.md +140 -16
  114. package/docs/components/FormControl/examples/FormControl.md +260 -20
  115. package/docs/components/HelperText/examples/HelperText.md +139 -11
  116. package/docs/components/Icon/examples/Icon.md +403 -31
  117. package/docs/components/InlineEdit/examples/InlineEdit.md +13 -1
  118. package/docs/components/InputGroup/examples/InputGroup.md +20 -8
  119. package/docs/components/Label/examples/Label.md +4029 -765
  120. package/docs/components/List/examples/List.md +78 -6
  121. package/docs/components/Login/examples/Login.md +104 -8
  122. package/docs/components/Menu/examples/Menu.md +221 -17
  123. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  124. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +247 -19
  125. package/docs/components/NumberInput/examples/NumberInput.md +301 -25
  126. package/docs/components/Pagination/examples/Pagination.md +111 -273
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +169 -13
  128. package/docs/components/Sidebar/examples/Sidebar.md +3 -1
  129. package/docs/components/Switch/examples/Switch.md +52 -4
  130. package/docs/components/Table/examples/Table.css +6 -0
  131. package/docs/components/Table/examples/Table.md +1322 -171
  132. package/docs/components/Tabs/examples/Tabs.md +18 -998
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +355 -115
  134. package/docs/components/Toolbar/examples/Toolbar.md +133 -25
  135. package/docs/components/TreeView/examples/TreeView.md +286 -118
  136. package/docs/components/Wizard/examples/Wizard.md +325 -25
  137. package/docs/demos/Alert/examples/Alert.md +181 -40
  138. package/docs/demos/Button/examples/Button.md +57 -45
  139. package/docs/demos/Card/examples/Card.md +280 -34
  140. package/docs/demos/CardView/examples/CardView.md +12 -12
  141. package/docs/demos/Compass/examples/Compass.md +91 -439
  142. package/docs/demos/Dashboard/examples/Dashboard.md +92 -41
  143. package/docs/demos/DataList/examples/DataList.md +74 -50
  144. package/docs/demos/Form/examples/BasicForms.md +112 -36
  145. package/docs/demos/HelperText/examples/HelperText.md +104 -8
  146. package/docs/demos/Masthead/examples/Masthead.md +52 -4
  147. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +176 -14
  148. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2570 -4968
  149. package/docs/demos/Table/examples/Table.md +407 -179
  150. package/docs/demos/Toolbar/examples/Toolbar.md +139 -46
  151. package/docs/demos/Wizard/examples/Wizard.md +117 -9
  152. package/package.json +7 -7
  153. package/patternfly-base-no-globals.css +12 -10
  154. package/patternfly-base.css +12 -10
  155. package/patternfly-no-globals.css +411 -150
  156. package/patternfly.css +411 -150
  157. package/patternfly.min.css +1 -1
  158. package/patternfly.min.css.map +1 -1
@@ -139,30 +139,6 @@ This demo populates the main Compass section with a card view, which is one of t
139
139
  class="pf-v6-c-tabs pf-m-nav"
140
140
  aria-label="Compass primary"
141
141
  >
142
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
143
- <button
144
- class="pf-v6-c-button pf-m-small pf-m-plain"
145
- type="button"
146
- aria-label="Scroll left"
147
- disabled
148
- >
149
- <span class="pf-v6-c-button__icon">
150
- <svg
151
- class="pf-v6-svg"
152
- fill="currentColor"
153
- viewBox="0 0 20 20"
154
- aria-hidden="true"
155
- role="img"
156
- width="1em"
157
- height="1em"
158
- >
159
- <path
160
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
161
- />
162
- </svg>
163
- </span>
164
- </button>
165
- </div>
166
142
  <ul
167
143
  class="pf-v6-c-tabs__list"
168
144
  role="tablist"
@@ -239,31 +215,6 @@ This demo populates the main Compass section with a card view, which is one of t
239
215
  </a>
240
216
  </li>
241
217
  </ul>
242
-
243
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
244
- <button
245
- class="pf-v6-c-button pf-m-small pf-m-plain"
246
- type="button"
247
- aria-label="Scroll right"
248
- disabled
249
- >
250
- <span class="pf-v6-c-button__icon">
251
- <svg
252
- class="pf-v6-svg"
253
- fill="currentColor"
254
- viewBox="0 0 20 20"
255
- aria-hidden="true"
256
- role="img"
257
- width="1em"
258
- height="1em"
259
- >
260
- <path
261
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
262
- />
263
- </svg>
264
- </span>
265
- </button>
266
- </div>
267
218
  </nav>
268
219
  </div>
269
220
  <div class="pf-v6-c-compass__nav-search">
@@ -302,30 +253,6 @@ This demo populates the main Compass section with a card view, which is one of t
302
253
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
303
254
  aria-label="Compass secondary"
304
255
  >
305
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
306
- <button
307
- class="pf-v6-c-button pf-m-small pf-m-plain"
308
- type="button"
309
- aria-label="Scroll left"
310
- disabled
311
- >
312
- <span class="pf-v6-c-button__icon">
313
- <svg
314
- class="pf-v6-svg"
315
- fill="currentColor"
316
- viewBox="0 0 20 20"
317
- aria-hidden="true"
318
- role="img"
319
- width="1em"
320
- height="1em"
321
- >
322
- <path
323
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
324
- />
325
- </svg>
326
- </span>
327
- </button>
328
- </div>
329
256
  <ul
330
257
  class="pf-v6-c-tabs__list"
331
258
  role="tablist"
@@ -405,31 +332,6 @@ This demo populates the main Compass section with a card view, which is one of t
405
332
  </a>
406
333
  </li>
407
334
  </ul>
408
-
409
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
410
- <button
411
- class="pf-v6-c-button pf-m-small pf-m-plain"
412
- type="button"
413
- aria-label="Scroll right"
414
- disabled
415
- >
416
- <span class="pf-v6-c-button__icon">
417
- <svg
418
- class="pf-v6-svg"
419
- fill="currentColor"
420
- viewBox="0 0 20 20"
421
- aria-hidden="true"
422
- role="img"
423
- width="1em"
424
- height="1em"
425
- >
426
- <path
427
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
428
- />
429
- </svg>
430
- </span>
431
- </button>
432
- </div>
433
335
  </nav>
434
336
  </div>
435
337
  </div>
@@ -444,11 +346,24 @@ This demo populates the main Compass section with a card view, which is one of t
444
346
  aria-expanded="false"
445
347
  >
446
348
  <span class="pf-v6-c-menu-toggle__icon">
447
- <img
448
- class="pf-v6-c-avatar pf-m-md"
449
- alt="Avatar image"
450
- src="/assets/images/img_avatar-light.svg"
451
- />
349
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
350
+ <svg
351
+ aria-hidden="true"
352
+ data-name="Layer 1"
353
+ xmlns="http://www.w3.org/2000/svg"
354
+ version="1.1"
355
+ viewBox="0 0 36 36"
356
+ >
357
+ <path
358
+ fill="currentColor"
359
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
360
+ />
361
+ <path
362
+ fill="currentColor"
363
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
364
+ />
365
+ </svg>
366
+ </div>
452
367
  </span>
453
368
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
454
369
  <span class="pf-v6-c-menu-toggle__controls">
@@ -842,14 +757,14 @@ This demo populates the main Compass section with a card view, which is one of t
842
757
  <svg
843
758
  class="pf-v6-svg"
844
759
  fill="currentColor"
845
- viewBox="0 0 256 512"
760
+ viewBox="0 0 20 20"
846
761
  aria-hidden="true"
847
762
  role="img"
848
763
  width="1em"
849
764
  height="1em"
850
765
  >
851
766
  <path
852
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
767
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
853
768
  />
854
769
  </svg>
855
770
  </span>
@@ -867,14 +782,14 @@ This demo populates the main Compass section with a card view, which is one of t
867
782
  <svg
868
783
  class="pf-v6-svg"
869
784
  fill="currentColor"
870
- viewBox="0 0 256 512"
785
+ viewBox="0 0 20 20"
871
786
  aria-hidden="true"
872
787
  role="img"
873
788
  width="1em"
874
789
  height="1em"
875
790
  >
876
791
  <path
877
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
792
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
878
793
  />
879
794
  </svg>
880
795
  </span>
@@ -1790,30 +1705,6 @@ This demo populates the main Compass section with a dashboard, which is often us
1790
1705
  class="pf-v6-c-tabs pf-m-nav"
1791
1706
  aria-label="Compass primary"
1792
1707
  >
1793
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1794
- <button
1795
- class="pf-v6-c-button pf-m-small pf-m-plain"
1796
- type="button"
1797
- aria-label="Scroll left"
1798
- disabled
1799
- >
1800
- <span class="pf-v6-c-button__icon">
1801
- <svg
1802
- class="pf-v6-svg"
1803
- fill="currentColor"
1804
- viewBox="0 0 20 20"
1805
- aria-hidden="true"
1806
- role="img"
1807
- width="1em"
1808
- height="1em"
1809
- >
1810
- <path
1811
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1812
- />
1813
- </svg>
1814
- </span>
1815
- </button>
1816
- </div>
1817
1708
  <ul
1818
1709
  class="pf-v6-c-tabs__list"
1819
1710
  role="tablist"
@@ -1890,31 +1781,6 @@ This demo populates the main Compass section with a dashboard, which is often us
1890
1781
  </a>
1891
1782
  </li>
1892
1783
  </ul>
1893
-
1894
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1895
- <button
1896
- class="pf-v6-c-button pf-m-small pf-m-plain"
1897
- type="button"
1898
- aria-label="Scroll right"
1899
- disabled
1900
- >
1901
- <span class="pf-v6-c-button__icon">
1902
- <svg
1903
- class="pf-v6-svg"
1904
- fill="currentColor"
1905
- viewBox="0 0 20 20"
1906
- aria-hidden="true"
1907
- role="img"
1908
- width="1em"
1909
- height="1em"
1910
- >
1911
- <path
1912
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1913
- />
1914
- </svg>
1915
- </span>
1916
- </button>
1917
- </div>
1918
1784
  </nav>
1919
1785
  </div>
1920
1786
  <div class="pf-v6-c-compass__nav-search">
@@ -1953,30 +1819,6 @@ This demo populates the main Compass section with a dashboard, which is often us
1953
1819
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
1954
1820
  aria-label="Compass secondary"
1955
1821
  >
1956
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1957
- <button
1958
- class="pf-v6-c-button pf-m-small pf-m-plain"
1959
- type="button"
1960
- aria-label="Scroll left"
1961
- disabled
1962
- >
1963
- <span class="pf-v6-c-button__icon">
1964
- <svg
1965
- class="pf-v6-svg"
1966
- fill="currentColor"
1967
- viewBox="0 0 20 20"
1968
- aria-hidden="true"
1969
- role="img"
1970
- width="1em"
1971
- height="1em"
1972
- >
1973
- <path
1974
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1975
- />
1976
- </svg>
1977
- </span>
1978
- </button>
1979
- </div>
1980
1822
  <ul
1981
1823
  class="pf-v6-c-tabs__list"
1982
1824
  role="tablist"
@@ -2056,31 +1898,6 @@ This demo populates the main Compass section with a dashboard, which is often us
2056
1898
  </a>
2057
1899
  </li>
2058
1900
  </ul>
2059
-
2060
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2061
- <button
2062
- class="pf-v6-c-button pf-m-small pf-m-plain"
2063
- type="button"
2064
- aria-label="Scroll right"
2065
- disabled
2066
- >
2067
- <span class="pf-v6-c-button__icon">
2068
- <svg
2069
- class="pf-v6-svg"
2070
- fill="currentColor"
2071
- viewBox="0 0 20 20"
2072
- aria-hidden="true"
2073
- role="img"
2074
- width="1em"
2075
- height="1em"
2076
- >
2077
- <path
2078
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2079
- />
2080
- </svg>
2081
- </span>
2082
- </button>
2083
- </div>
2084
1901
  </nav>
2085
1902
  </div>
2086
1903
  </div>
@@ -2095,11 +1912,24 @@ This demo populates the main Compass section with a dashboard, which is often us
2095
1912
  aria-expanded="false"
2096
1913
  >
2097
1914
  <span class="pf-v6-c-menu-toggle__icon">
2098
- <img
2099
- class="pf-v6-c-avatar pf-m-md"
2100
- alt="Avatar image"
2101
- src="/assets/images/img_avatar-light.svg"
2102
- />
1915
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
1916
+ <svg
1917
+ aria-hidden="true"
1918
+ data-name="Layer 1"
1919
+ xmlns="http://www.w3.org/2000/svg"
1920
+ version="1.1"
1921
+ viewBox="0 0 36 36"
1922
+ >
1923
+ <path
1924
+ fill="currentColor"
1925
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
1926
+ />
1927
+ <path
1928
+ fill="currentColor"
1929
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
1930
+ />
1931
+ </svg>
1932
+ </div>
2103
1933
  </span>
2104
1934
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
2105
1935
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3726,30 +3556,6 @@ Without a glass panel component wrapping all of the content, there is no rounded
3726
3556
  class="pf-v6-c-tabs pf-m-nav"
3727
3557
  aria-label="Compass primary"
3728
3558
  >
3729
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3730
- <button
3731
- class="pf-v6-c-button pf-m-small pf-m-plain"
3732
- type="button"
3733
- aria-label="Scroll left"
3734
- disabled
3735
- >
3736
- <span class="pf-v6-c-button__icon">
3737
- <svg
3738
- class="pf-v6-svg"
3739
- fill="currentColor"
3740
- viewBox="0 0 20 20"
3741
- aria-hidden="true"
3742
- role="img"
3743
- width="1em"
3744
- height="1em"
3745
- >
3746
- <path
3747
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
3748
- />
3749
- </svg>
3750
- </span>
3751
- </button>
3752
- </div>
3753
3559
  <ul
3754
3560
  class="pf-v6-c-tabs__list"
3755
3561
  role="tablist"
@@ -3826,31 +3632,6 @@ Without a glass panel component wrapping all of the content, there is no rounded
3826
3632
  </a>
3827
3633
  </li>
3828
3634
  </ul>
3829
-
3830
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3831
- <button
3832
- class="pf-v6-c-button pf-m-small pf-m-plain"
3833
- type="button"
3834
- aria-label="Scroll right"
3835
- disabled
3836
- >
3837
- <span class="pf-v6-c-button__icon">
3838
- <svg
3839
- class="pf-v6-svg"
3840
- fill="currentColor"
3841
- viewBox="0 0 20 20"
3842
- aria-hidden="true"
3843
- role="img"
3844
- width="1em"
3845
- height="1em"
3846
- >
3847
- <path
3848
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3849
- />
3850
- </svg>
3851
- </span>
3852
- </button>
3853
- </div>
3854
3635
  </nav>
3855
3636
  </div>
3856
3637
  <div class="pf-v6-c-compass__nav-search">
@@ -3889,30 +3670,6 @@ Without a glass panel component wrapping all of the content, there is no rounded
3889
3670
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
3890
3671
  aria-label="Compass secondary"
3891
3672
  >
3892
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3893
- <button
3894
- class="pf-v6-c-button pf-m-small pf-m-plain"
3895
- type="button"
3896
- aria-label="Scroll left"
3897
- disabled
3898
- >
3899
- <span class="pf-v6-c-button__icon">
3900
- <svg
3901
- class="pf-v6-svg"
3902
- fill="currentColor"
3903
- viewBox="0 0 20 20"
3904
- aria-hidden="true"
3905
- role="img"
3906
- width="1em"
3907
- height="1em"
3908
- >
3909
- <path
3910
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
3911
- />
3912
- </svg>
3913
- </span>
3914
- </button>
3915
- </div>
3916
3673
  <ul
3917
3674
  class="pf-v6-c-tabs__list"
3918
3675
  role="tablist"
@@ -3992,31 +3749,6 @@ Without a glass panel component wrapping all of the content, there is no rounded
3992
3749
  </a>
3993
3750
  </li>
3994
3751
  </ul>
3995
-
3996
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3997
- <button
3998
- class="pf-v6-c-button pf-m-small pf-m-plain"
3999
- type="button"
4000
- aria-label="Scroll right"
4001
- disabled
4002
- >
4003
- <span class="pf-v6-c-button__icon">
4004
- <svg
4005
- class="pf-v6-svg"
4006
- fill="currentColor"
4007
- viewBox="0 0 20 20"
4008
- aria-hidden="true"
4009
- role="img"
4010
- width="1em"
4011
- height="1em"
4012
- >
4013
- <path
4014
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4015
- />
4016
- </svg>
4017
- </span>
4018
- </button>
4019
- </div>
4020
3752
  </nav>
4021
3753
  </div>
4022
3754
  </div>
@@ -4031,11 +3763,24 @@ Without a glass panel component wrapping all of the content, there is no rounded
4031
3763
  aria-expanded="false"
4032
3764
  >
4033
3765
  <span class="pf-v6-c-menu-toggle__icon">
4034
- <img
4035
- class="pf-v6-c-avatar pf-m-md"
4036
- alt="Avatar image"
4037
- src="/assets/images/img_avatar-light.svg"
4038
- />
3766
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
3767
+ <svg
3768
+ aria-hidden="true"
3769
+ data-name="Layer 1"
3770
+ xmlns="http://www.w3.org/2000/svg"
3771
+ version="1.1"
3772
+ viewBox="0 0 36 36"
3773
+ >
3774
+ <path
3775
+ fill="currentColor"
3776
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
3777
+ />
3778
+ <path
3779
+ fill="currentColor"
3780
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
3781
+ />
3782
+ </svg>
3783
+ </div>
4039
3784
  </span>
4040
3785
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
4041
3786
  <span class="pf-v6-c-menu-toggle__controls">
@@ -4437,14 +4182,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
4437
4182
  <svg
4438
4183
  class="pf-v6-svg"
4439
4184
  fill="currentColor"
4440
- viewBox="0 0 256 512"
4185
+ viewBox="0 0 20 20"
4441
4186
  aria-hidden="true"
4442
4187
  role="img"
4443
4188
  width="1em"
4444
4189
  height="1em"
4445
4190
  >
4446
4191
  <path
4447
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
4192
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
4448
4193
  />
4449
4194
  </svg>
4450
4195
  </span>
@@ -4462,14 +4207,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
4462
4207
  <svg
4463
4208
  class="pf-v6-svg"
4464
4209
  fill="currentColor"
4465
- viewBox="0 0 256 512"
4210
+ viewBox="0 0 20 20"
4466
4211
  aria-hidden="true"
4467
4212
  role="img"
4468
4213
  width="1em"
4469
4214
  height="1em"
4470
4215
  >
4471
4216
  <path
4472
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
4217
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4473
4218
  />
4474
4219
  </svg>
4475
4220
  </span>
@@ -5327,14 +5072,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
5327
5072
  <svg
5328
5073
  class="pf-v6-svg"
5329
5074
  fill="currentColor"
5330
- viewBox="0 0 256 512"
5075
+ viewBox="0 0 20 20"
5331
5076
  aria-hidden="true"
5332
5077
  role="img"
5333
5078
  width="1em"
5334
5079
  height="1em"
5335
5080
  >
5336
5081
  <path
5337
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
5082
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
5338
5083
  />
5339
5084
  </svg>
5340
5085
  </span>
@@ -5352,14 +5097,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
5352
5097
  <svg
5353
5098
  class="pf-v6-svg"
5354
5099
  fill="currentColor"
5355
- viewBox="0 0 256 512"
5100
+ viewBox="0 0 20 20"
5356
5101
  aria-hidden="true"
5357
5102
  role="img"
5358
5103
  width="1em"
5359
5104
  height="1em"
5360
5105
  >
5361
5106
  <path
5362
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
5107
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
5363
5108
  />
5364
5109
  </svg>
5365
5110
  </span>
@@ -6277,33 +6022,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
6277
6022
  class="pf-v6-c-tabs pf-m-nav"
6278
6023
  aria-label="Compass primary"
6279
6024
  >
6280
- <div
6281
- class="pf-v6-c-tabs__scroll-button"
6282
- aria-hidden="true"
6283
- >
6284
- <button
6285
- class="pf-v6-c-button pf-m-small pf-m-plain"
6286
- type="button"
6287
- aria-label="Scroll left"
6288
- disabled
6289
- >
6290
- <span class="pf-v6-c-button__icon">
6291
- <svg
6292
- class="pf-v6-svg"
6293
- fill="currentColor"
6294
- viewBox="0 0 20 20"
6295
- aria-hidden="true"
6296
- role="img"
6297
- width="1em"
6298
- height="1em"
6299
- >
6300
- <path
6301
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
6302
- />
6303
- </svg>
6304
- </span>
6305
- </button>
6306
- </div>
6307
6025
  <ul
6308
6026
  class="pf-v6-c-tabs__list"
6309
6027
  role="tablist"
@@ -6397,34 +6115,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
6397
6115
  </a>
6398
6116
  </li>
6399
6117
  </ul>
6400
-
6401
- <div
6402
- class="pf-v6-c-tabs__scroll-button"
6403
- aria-hidden="true"
6404
- >
6405
- <button
6406
- class="pf-v6-c-button pf-m-small pf-m-plain"
6407
- type="button"
6408
- aria-label="Scroll right"
6409
- disabled
6410
- >
6411
- <span class="pf-v6-c-button__icon">
6412
- <svg
6413
- class="pf-v6-svg"
6414
- fill="currentColor"
6415
- viewBox="0 0 20 20"
6416
- aria-hidden="true"
6417
- role="img"
6418
- width="1em"
6419
- height="1em"
6420
- >
6421
- <path
6422
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
6423
- />
6424
- </svg>
6425
- </span>
6426
- </button>
6427
- </div>
6428
6118
  </nav>
6429
6119
  </div>
6430
6120
  <div class="pf-v6-c-compass__nav-search">
@@ -6463,33 +6153,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
6463
6153
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
6464
6154
  aria-label="Compass secondary"
6465
6155
  >
6466
- <div
6467
- class="pf-v6-c-tabs__scroll-button"
6468
- aria-hidden="true"
6469
- >
6470
- <button
6471
- class="pf-v6-c-button pf-m-small pf-m-plain"
6472
- type="button"
6473
- aria-label="Scroll left"
6474
- disabled
6475
- >
6476
- <span class="pf-v6-c-button__icon">
6477
- <svg
6478
- class="pf-v6-svg"
6479
- fill="currentColor"
6480
- viewBox="0 0 20 20"
6481
- aria-hidden="true"
6482
- role="img"
6483
- width="1em"
6484
- height="1em"
6485
- >
6486
- <path
6487
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
6488
- />
6489
- </svg>
6490
- </span>
6491
- </button>
6492
- </div>
6493
6156
  <ul
6494
6157
  class="pf-v6-c-tabs__list"
6495
6158
  role="tablist"
@@ -6586,34 +6249,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
6586
6249
  </a>
6587
6250
  </li>
6588
6251
  </ul>
6589
-
6590
- <div
6591
- class="pf-v6-c-tabs__scroll-button"
6592
- aria-hidden="true"
6593
- >
6594
- <button
6595
- class="pf-v6-c-button pf-m-small pf-m-plain"
6596
- type="button"
6597
- aria-label="Scroll right"
6598
- disabled
6599
- >
6600
- <span class="pf-v6-c-button__icon">
6601
- <svg
6602
- class="pf-v6-svg"
6603
- fill="currentColor"
6604
- viewBox="0 0 20 20"
6605
- aria-hidden="true"
6606
- role="img"
6607
- width="1em"
6608
- height="1em"
6609
- >
6610
- <path
6611
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
6612
- />
6613
- </svg>
6614
- </span>
6615
- </button>
6616
- </div>
6617
6252
  </nav>
6618
6253
  </div>
6619
6254
  </div>
@@ -6628,11 +6263,28 @@ This demo showcases how you can position a side-panel drawer on top of the other
6628
6263
  aria-expanded="false"
6629
6264
  >
6630
6265
  <span class="pf-v6-c-menu-toggle__icon">
6631
- <img
6266
+ <div
6632
6267
  class="pf-v6-c-avatar pf-m-md"
6633
- alt="Avatar image"
6634
- src="/assets/images/img_avatar-light.svg"
6635
- />
6268
+ role="img"
6269
+ aria-hidden="true"
6270
+ >
6271
+ <svg
6272
+ aria-hidden="true"
6273
+ data-name="Layer 1"
6274
+ xmlns="http://www.w3.org/2000/svg"
6275
+ version="1.1"
6276
+ viewBox="0 0 36 36"
6277
+ >
6278
+ <path
6279
+ fill="currentColor"
6280
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
6281
+ />
6282
+ <path
6283
+ fill="currentColor"
6284
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
6285
+ />
6286
+ </svg>
6287
+ </div>
6636
6288
  </span>
6637
6289
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
6638
6290
  <span class="pf-v6-c-menu-toggle__controls">
@@ -7048,14 +6700,14 @@ This demo showcases how you can position a side-panel drawer on top of the other
7048
6700
  <svg
7049
6701
  class="pf-v6-svg"
7050
6702
  fill="currentColor"
7051
- viewBox="0 0 256 512"
6703
+ viewBox="0 0 20 20"
7052
6704
  aria-hidden="true"
7053
6705
  role="img"
7054
6706
  width="1em"
7055
6707
  height="1em"
7056
6708
  >
7057
6709
  <path
7058
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
6710
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
7059
6711
  />
7060
6712
  </svg>
7061
6713
  </span>
@@ -7073,14 +6725,14 @@ This demo showcases how you can position a side-panel drawer on top of the other
7073
6725
  <svg
7074
6726
  class="pf-v6-svg"
7075
6727
  fill="currentColor"
7076
- viewBox="0 0 256 512"
6728
+ viewBox="0 0 20 20"
7077
6729
  aria-hidden="true"
7078
6730
  role="img"
7079
6731
  width="1em"
7080
6732
  height="1em"
7081
6733
  >
7082
6734
  <path
7083
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
6735
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
7084
6736
  />
7085
6737
  </svg>
7086
6738
  </span>