@patternfly/patternfly 6.3.1 → 6.4.0-prerelease.2

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 (140) hide show
  1. package/README.md +23 -15
  2. package/base/normalize.scss +4 -0
  3. package/base/patternfly-variables.css +1172 -1
  4. package/base/patternfly-variables.scss +10 -0
  5. package/base/tokens/tokens-charts-dark.scss +1 -1
  6. package/base/tokens/tokens-charts.scss +1 -1
  7. package/base/tokens/tokens-dark.scss +13 -1
  8. package/base/tokens/tokens-default.scss +60 -2
  9. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  10. package/base/tokens/tokens-highcontrast.scss +703 -0
  11. package/base/tokens/tokens-local.scss +1 -0
  12. package/base/tokens/tokens-palette.scss +9 -1
  13. package/components/Accordion/accordion.css +42 -15
  14. package/components/Accordion/accordion.scss +48 -18
  15. package/components/Alert/alert-group.css +17 -15
  16. package/components/Alert/alert-group.scss +22 -18
  17. package/components/Badge/badge.css +2 -0
  18. package/components/Badge/badge.scss +2 -0
  19. package/components/Banner/banner.css +4 -0
  20. package/components/Banner/banner.scss +4 -0
  21. package/components/Button/button.css +34 -4
  22. package/components/Button/button.scss +36 -6
  23. package/components/CalendarMonth/calendar-month.css +35 -4
  24. package/components/CalendarMonth/calendar-month.scss +38 -4
  25. package/components/Card/card.css +7 -4
  26. package/components/Card/card.scss +7 -4
  27. package/components/CodeBlock/code-block.css +3 -0
  28. package/components/CodeBlock/code-block.scss +3 -0
  29. package/components/CodeEditor/code-editor.css +23 -3
  30. package/components/CodeEditor/code-editor.scss +28 -5
  31. package/components/DatePicker/date-picker.css +3 -0
  32. package/components/DatePicker/date-picker.scss +4 -0
  33. package/components/Divider/divider.css +2 -0
  34. package/components/Divider/divider.scss +2 -0
  35. package/components/Drawer/drawer.css +46 -41
  36. package/components/Drawer/drawer.scss +45 -36
  37. package/components/DualListSelector/dual-list-selector.css +21 -4
  38. package/components/DualListSelector/dual-list-selector.scss +23 -4
  39. package/components/ExpandableSection/expandable-section.css +6 -2
  40. package/components/ExpandableSection/expandable-section.scss +7 -3
  41. package/components/FormControl/form-control.css +6 -7
  42. package/components/FormControl/form-control.scss +8 -10
  43. package/components/Label/label.css +20 -11
  44. package/components/Label/label.scss +21 -11
  45. package/components/Login/login.css +3 -0
  46. package/components/Login/login.scss +3 -0
  47. package/components/Menu/menu.css +18 -0
  48. package/components/Menu/menu.scss +19 -1
  49. package/components/MenuToggle/menu-toggle.css +13 -6
  50. package/components/MenuToggle/menu-toggle.scss +13 -6
  51. package/components/ModalBox/modal-box.css +3 -0
  52. package/components/ModalBox/modal-box.scss +3 -0
  53. package/components/Nav/nav.css +17 -0
  54. package/components/Nav/nav.scss +20 -0
  55. package/components/Page/page.css +73 -25
  56. package/components/Page/page.scss +60 -19
  57. package/components/Pagination/pagination.css +15 -2
  58. package/components/Pagination/pagination.scss +15 -2
  59. package/components/Panel/panel.css +14 -1
  60. package/components/Panel/panel.scss +14 -1
  61. package/components/Popover/popover.css +4 -0
  62. package/components/Popover/popover.scss +4 -0
  63. package/components/Progress/progress.css +19 -0
  64. package/components/Progress/progress.scss +22 -0
  65. package/components/Sidebar/sidebar.css +7 -0
  66. package/components/Sidebar/sidebar.scss +7 -0
  67. package/components/SimpleList/simple-list.css +15 -0
  68. package/components/SimpleList/simple-list.scss +17 -1
  69. package/components/Slider/slider.css +9 -0
  70. package/components/Slider/slider.scss +9 -0
  71. package/components/Switch/switch.css +7 -1
  72. package/components/Switch/switch.scss +7 -1
  73. package/components/Table/table.css +29 -0
  74. package/components/Table/table.scss +33 -0
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +3 -0
  78. package/components/TextInputGroup/text-input-group.scss +4 -1
  79. package/components/ToggleGroup/toggle-group.css +18 -9
  80. package/components/ToggleGroup/toggle-group.scss +24 -17
  81. package/components/Toolbar/toolbar.css +7 -0
  82. package/components/Toolbar/toolbar.scss +7 -0
  83. package/components/TreeView/tree-view.css +15 -0
  84. package/components/TreeView/tree-view.scss +17 -0
  85. package/components/Wizard/wizard.css +37 -6
  86. package/components/Wizard/wizard.scss +44 -10
  87. package/components/_index.css +615 -167
  88. package/docs/components/Alert/examples/Alert.md +3 -4
  89. package/docs/components/Button/examples/Button.md +1 -3
  90. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +25 -33
  91. package/docs/components/CodeBlock/examples/CodeBlock.md +13 -7
  92. package/docs/components/CodeEditor/examples/CodeEditor.md +20 -6
  93. package/docs/components/DataList/examples/DataList.md +66 -184
  94. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  95. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  96. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  97. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  98. package/docs/components/ExpandableSection/examples/ExpandableSection.md +92 -18
  99. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  100. package/docs/components/Form/examples/Form.md +19 -18
  101. package/docs/components/HelperText/examples/HelperText.md +65 -75
  102. package/docs/components/Hint/examples/Hint.md +3 -3
  103. package/docs/components/Icon/examples/Icon.md +0 -10
  104. package/docs/components/InlineEdit/examples/InlineEdit.md +0 -4
  105. package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
  106. package/docs/components/Label/examples/Label.md +2 -2
  107. package/docs/components/Login/examples/Login.md +42 -37
  108. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +32 -6
  109. package/docs/components/Pagination/examples/Pagination.md +111 -0
  110. package/docs/components/Popover/examples/Popover.md +0 -4
  111. package/docs/components/Progress/examples/Progress.md +223 -210
  112. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  113. package/docs/components/Table/examples/Table.md +947 -1423
  114. package/docs/components/TextInputGroup/examples/TextInputGroup.md +126 -47
  115. package/docs/components/Title/examples/Title.md +8 -8
  116. package/docs/components/Truncate/examples/Truncate.md +8 -6
  117. package/docs/components/Wizard/examples/Wizard.md +583 -0
  118. package/docs/demos/Alert/examples/Alert.md +28 -19
  119. package/docs/demos/Card/examples/Card.md +8 -5
  120. package/docs/demos/CardView/examples/CardView.md +81 -85
  121. package/docs/demos/Dashboard/examples/Dashboard.md +10 -22
  122. package/docs/demos/DataList/examples/DataList.md +528 -168
  123. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  124. package/docs/demos/Drawer/examples/Drawer.md +0 -2
  125. package/docs/demos/Form/examples/BasicForms.md +93 -62
  126. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  127. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
  128. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4 -4
  129. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  130. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  131. package/docs/demos/Skeleton/examples/Skeleton.md +3 -1
  132. package/docs/demos/Table/examples/Table.md +5 -20
  133. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  134. package/package.json +9 -7
  135. package/patternfly-base-no-globals.css +1172 -1
  136. package/patternfly-base.css +1176 -1
  137. package/patternfly-no-globals.css +1787 -168
  138. package/patternfly.css +1822 -199
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -13,7 +13,7 @@ cssPrefix: pf-v6-c-data-list
13
13
  aria-label="Basic data list example"
14
14
  id="data-list-basic"
15
15
  >
16
- <li class="pf-v6-c-data-list__item" aria-labelledby="data-list-basic-item-1">
16
+ <li class="pf-v6-c-data-list__item">
17
17
  <div class="pf-v6-c-data-list__item-row">
18
18
  <div class="pf-v6-c-data-list__item-content">
19
19
  <div class="pf-v6-c-data-list__cell">
@@ -24,7 +24,7 @@ cssPrefix: pf-v6-c-data-list
24
24
  </div>
25
25
  </li>
26
26
 
27
- <li class="pf-v6-c-data-list__item" aria-labelledby="data-list-basic-item-2">
27
+ <li class="pf-v6-c-data-list__item">
28
28
  <div class="pf-v6-c-data-list__item-row">
29
29
  <div class="pf-v6-c-data-list__item-content">
30
30
  <div class="pf-v6-c-data-list__cell pf-m-no-fill">
@@ -72,10 +72,7 @@ cssPrefix: pf-v6-c-data-list
72
72
  aria-label="With headings data list example"
73
73
  id="data-list-with-headings"
74
74
  >
75
- <li
76
- class="pf-v6-c-data-list__item"
77
- aria-labelledby="data-list-with-headings-item-1"
78
- >
75
+ <li class="pf-v6-c-data-list__item">
79
76
  <div class="pf-v6-c-data-list__item-row">
80
77
  <div class="pf-v6-c-data-list__item-content">
81
78
  <div class="pf-v6-c-data-list__cell">
@@ -86,10 +83,7 @@ cssPrefix: pf-v6-c-data-list
86
83
  </div>
87
84
  </li>
88
85
 
89
- <li
90
- class="pf-v6-c-data-list__item"
91
- aria-labelledby="data-list-with-headings-item-2"
92
- >
86
+ <li class="pf-v6-c-data-list__item">
93
87
  <div class="pf-v6-c-data-list__item-row">
94
88
  <div class="pf-v6-c-data-list__item-content">
95
89
  <div class="pf-v6-c-data-list__cell pf-m-no-fill">
@@ -120,10 +114,7 @@ When a list item includes more than one block of content, it can be difficult fo
120
114
  aria-label="Checkbox and action data list example"
121
115
  id="data-list-checkboxes-actions-addl-cells"
122
116
  >
123
- <li
124
- class="pf-v6-c-data-list__item"
125
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1"
126
- >
117
+ <li class="pf-v6-c-data-list__item">
127
118
  <div class="pf-v6-c-data-list__item-row">
128
119
  <div class="pf-v6-c-data-list__item-control">
129
120
  <div class="pf-v6-c-data-list__check">
@@ -176,10 +167,7 @@ When a list item includes more than one block of content, it can be difficult fo
176
167
  </div>
177
168
  </li>
178
169
 
179
- <li
180
- class="pf-v6-c-data-list__item"
181
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2"
182
- >
170
+ <li class="pf-v6-c-data-list__item">
183
171
  <div class="pf-v6-c-data-list__item-row">
184
172
  <div class="pf-v6-c-data-list__item-control">
185
173
  <div class="pf-v6-c-data-list__check">
@@ -233,10 +221,7 @@ When a list item includes more than one block of content, it can be difficult fo
233
221
  </div>
234
222
  </li>
235
223
 
236
- <li
237
- class="pf-v6-c-data-list__item"
238
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3"
239
- >
224
+ <li class="pf-v6-c-data-list__item">
240
225
  <div class="pf-v6-c-data-list__item-row">
241
226
  <div class="pf-v6-c-data-list__item-control">
242
227
  <div class="pf-v6-c-data-list__check">
@@ -328,17 +313,14 @@ When a list item includes more than one block of content, it can be difficult fo
328
313
  aria-label="Expandable data list example"
329
314
  id="data-list-expandable"
330
315
  >
331
- <li
332
- class="pf-v6-c-data-list__item pf-m-expanded"
333
- aria-labelledby="data-list-expandable-item-1"
334
- >
316
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
335
317
  <div class="pf-v6-c-data-list__item-row">
336
318
  <div class="pf-v6-c-data-list__item-control">
337
319
  <div class="pf-v6-c-data-list__toggle">
338
320
  <button
339
321
  class="pf-v6-c-button pf-m-plain"
340
322
  type="button"
341
- aria-labelledby="data-list-expandable-toggle1 data-list-expandable-item1"
323
+ aria-labelledby="data-list-expandable-toggle1 data-list-expandable-item-1"
342
324
  id="data-list-expandable-toggle1"
343
325
  aria-label="Toggle details for"
344
326
  aria-expanded="true"
@@ -393,17 +375,14 @@ When a list item includes more than one block of content, it can be difficult fo
393
375
  </section>
394
376
  </li>
395
377
 
396
- <li
397
- class="pf-v6-c-data-list__item"
398
- aria-labelledby="data-list-expandable-item-2"
399
- >
378
+ <li class="pf-v6-c-data-list__item">
400
379
  <div class="pf-v6-c-data-list__item-row">
401
380
  <div class="pf-v6-c-data-list__item-control">
402
381
  <div class="pf-v6-c-data-list__toggle">
403
382
  <button
404
383
  class="pf-v6-c-button pf-m-plain"
405
384
  type="button"
406
- aria-labelledby="data-list-expandable-toggle2 data-list-expandable-item2"
385
+ aria-labelledby="data-list-expandable-toggle2 data-list-expandable-item-2"
407
386
  id="data-list-expandable-toggle2"
408
387
  aria-label="Toggle details for"
409
388
  aria-expanded="false"
@@ -455,17 +434,14 @@ When a list item includes more than one block of content, it can be difficult fo
455
434
  </section>
456
435
  </li>
457
436
 
458
- <li
459
- class="pf-v6-c-data-list__item pf-m-expanded"
460
- aria-labelledby="data-list-expandable-item-3"
461
- >
437
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
462
438
  <div class="pf-v6-c-data-list__item-row">
463
439
  <div class="pf-v6-c-data-list__item-control">
464
440
  <div class="pf-v6-c-data-list__toggle">
465
441
  <button
466
442
  class="pf-v6-c-button pf-m-plain"
467
443
  type="button"
468
- aria-labelledby="data-list-expandable-toggle3 data-list-expandable-item3"
444
+ aria-labelledby="data-list-expandable-toggle3 data-list-expandable-item-3"
469
445
  id="data-list-expandable-toggle3"
470
446
  aria-label="Toggle details for"
471
447
  aria-expanded="true"
@@ -531,17 +507,14 @@ When a list item includes more than one block of content, it can be difficult fo
531
507
  aria-label="Expandable data list example"
532
508
  id="data-list-expandable-compact"
533
509
  >
534
- <li
535
- class="pf-v6-c-data-list__item pf-m-expanded"
536
- aria-labelledby="data-list-expandable-compact-item-1"
537
- >
510
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
538
511
  <div class="pf-v6-c-data-list__item-row">
539
512
  <div class="pf-v6-c-data-list__item-control">
540
513
  <div class="pf-v6-c-data-list__toggle">
541
514
  <button
542
515
  class="pf-v6-c-button pf-m-plain"
543
516
  type="button"
544
- aria-labelledby="data-list-expandable-compact-toggle1 data-list-expandable-compact-item1"
517
+ aria-labelledby="data-list-expandable-compact-toggle1 data-list-expandable-compact-item-1"
545
518
  id="data-list-expandable-compact-toggle1"
546
519
  aria-label="Toggle details for"
547
520
  aria-expanded="true"
@@ -596,17 +569,14 @@ When a list item includes more than one block of content, it can be difficult fo
596
569
  </section>
597
570
  </li>
598
571
 
599
- <li
600
- class="pf-v6-c-data-list__item"
601
- aria-labelledby="data-list-expandable-compact-item-2"
602
- >
572
+ <li class="pf-v6-c-data-list__item">
603
573
  <div class="pf-v6-c-data-list__item-row">
604
574
  <div class="pf-v6-c-data-list__item-control">
605
575
  <div class="pf-v6-c-data-list__toggle">
606
576
  <button
607
577
  class="pf-v6-c-button pf-m-plain"
608
578
  type="button"
609
- aria-labelledby="data-list-expandable-compact-toggle2 data-list-expandable-compact-item2"
579
+ aria-labelledby="data-list-expandable-compact-toggle2 data-list-expandable-compact-item-2"
610
580
  id="data-list-expandable-compact-toggle2"
611
581
  aria-label="Toggle details for"
612
582
  aria-expanded="false"
@@ -661,17 +631,14 @@ When a list item includes more than one block of content, it can be difficult fo
661
631
  </section>
662
632
  </li>
663
633
 
664
- <li
665
- class="pf-v6-c-data-list__item pf-m-expanded"
666
- aria-labelledby="data-list-expandable-compact-item-3"
667
- >
634
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
668
635
  <div class="pf-v6-c-data-list__item-row">
669
636
  <div class="pf-v6-c-data-list__item-control">
670
637
  <div class="pf-v6-c-data-list__toggle">
671
638
  <button
672
639
  class="pf-v6-c-button pf-m-plain"
673
640
  type="button"
674
- aria-labelledby="data-list-expandable-compact-toggle3 data-list-expandable-compact-item3"
641
+ aria-labelledby="data-list-expandable-compact-toggle3 data-list-expandable-compact-item-3"
675
642
  id="data-list-expandable-compact-toggle3"
676
643
  aria-label="Toggle details for"
677
644
  aria-expanded="true"
@@ -737,17 +704,14 @@ When a list item includes more than one block of content, it can be difficult fo
737
704
  aria-label="Expandable nested data list example"
738
705
  id="data-list-expandable-nested"
739
706
  >
740
- <li
741
- class="pf-v6-c-data-list__item pf-m-expanded"
742
- aria-labelledby="data-list-expandable-nested-item-1"
743
- >
707
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
744
708
  <div class="pf-v6-c-data-list__item-row">
745
709
  <div class="pf-v6-c-data-list__item-control">
746
710
  <div class="pf-v6-c-data-list__toggle">
747
711
  <button
748
712
  class="pf-v6-c-button pf-m-plain"
749
713
  type="button"
750
- aria-labelledby="data-list-expandable-nested-toggle1 data-list-expandable-nested-item1"
714
+ aria-labelledby="data-list-expandable-nested-toggle1 data-list-expandable-nested-item-1"
751
715
  id="data-list-expandable-nested-toggle1"
752
716
  aria-label="Toggle details for"
753
717
  aria-expanded="true"
@@ -803,17 +767,14 @@ When a list item includes more than one block of content, it can be difficult fo
803
767
  aria-label="Expandable nested nested data list example"
804
768
  id="data-list-expandable-nested-nested"
805
769
  >
806
- <li
807
- class="pf-v6-c-data-list__item pf-m-expanded"
808
- aria-labelledby="data-list-expandable-nested-nested-item-1"
809
- >
770
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
810
771
  <div class="pf-v6-c-data-list__item-row">
811
772
  <div class="pf-v6-c-data-list__item-control">
812
773
  <div class="pf-v6-c-data-list__toggle">
813
774
  <button
814
775
  class="pf-v6-c-button pf-m-plain"
815
776
  type="button"
816
- aria-labelledby="data-list-expandable-nested-nested-toggle1 data-list-expandable-nested-nested-item1"
777
+ aria-labelledby="data-list-expandable-nested-nested-toggle1 data-list-expandable-nested-nested-item-1"
817
778
  id="data-list-expandable-nested-nested-toggle1"
818
779
  aria-label="Toggle details for"
819
780
  aria-expanded="true"
@@ -846,17 +807,14 @@ When a list item includes more than one block of content, it can be difficult fo
846
807
  </section>
847
808
  </li>
848
809
 
849
- <li
850
- class="pf-v6-c-data-list__item"
851
- aria-labelledby="data-list-expandable-nested-nested-item-2"
852
- >
810
+ <li class="pf-v6-c-data-list__item">
853
811
  <div class="pf-v6-c-data-list__item-row">
854
812
  <div class="pf-v6-c-data-list__item-control">
855
813
  <div class="pf-v6-c-data-list__toggle">
856
814
  <button
857
815
  class="pf-v6-c-button pf-m-plain"
858
816
  type="button"
859
- aria-labelledby="data-list-expandable-nested-nested-toggle2 data-list-expandable-nested-nested-item2"
817
+ aria-labelledby="data-list-expandable-nested-nested-toggle2 data-list-expandable-nested-nested-item-2"
860
818
  id="data-list-expandable-nested-nested-toggle2"
861
819
  aria-label="Toggle details for"
862
820
  aria-expanded="false"
@@ -890,17 +848,14 @@ When a list item includes more than one block of content, it can be difficult fo
890
848
  </section>
891
849
  </li>
892
850
 
893
- <li
894
- class="pf-v6-c-data-list__item pf-m-expanded"
895
- aria-labelledby="data-list-expandable-nested-nested-item-3"
896
- >
851
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
897
852
  <div class="pf-v6-c-data-list__item-row">
898
853
  <div class="pf-v6-c-data-list__item-control">
899
854
  <div class="pf-v6-c-data-list__toggle">
900
855
  <button
901
856
  class="pf-v6-c-button pf-m-plain"
902
857
  type="button"
903
- aria-labelledby="data-list-expandable-nested-nested-toggle3 data-list-expandable-nested-nested-item3"
858
+ aria-labelledby="data-list-expandable-nested-nested-toggle3 data-list-expandable-nested-nested-item-3"
904
859
  id="data-list-expandable-nested-nested-toggle3"
905
860
  aria-label="Toggle details for"
906
861
  aria-expanded="true"
@@ -937,17 +892,14 @@ When a list item includes more than one block of content, it can be difficult fo
937
892
  </section>
938
893
  </li>
939
894
 
940
- <li
941
- class="pf-v6-c-data-list__item"
942
- aria-labelledby="data-list-expandable-nested-item-2"
943
- >
895
+ <li class="pf-v6-c-data-list__item">
944
896
  <div class="pf-v6-c-data-list__item-row">
945
897
  <div class="pf-v6-c-data-list__item-control">
946
898
  <div class="pf-v6-c-data-list__toggle">
947
899
  <button
948
900
  class="pf-v6-c-button pf-m-plain"
949
901
  type="button"
950
- aria-labelledby="data-list-expandable-nested-toggle2 data-list-expandable-nested-item2"
902
+ aria-labelledby="data-list-expandable-nested-toggle2 data-list-expandable-nested-item-2"
951
903
  id="data-list-expandable-nested-toggle2"
952
904
  aria-label="Toggle details for"
953
905
  aria-expanded="false"
@@ -999,17 +951,14 @@ When a list item includes more than one block of content, it can be difficult fo
999
951
  </section>
1000
952
  </li>
1001
953
 
1002
- <li
1003
- class="pf-v6-c-data-list__item pf-m-expanded"
1004
- aria-labelledby="data-list-expandable-nested-item-3"
1005
- >
954
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
1006
955
  <div class="pf-v6-c-data-list__item-row">
1007
956
  <div class="pf-v6-c-data-list__item-control">
1008
957
  <div class="pf-v6-c-data-list__toggle">
1009
958
  <button
1010
959
  class="pf-v6-c-button pf-m-plain"
1011
960
  type="button"
1012
- aria-labelledby="data-list-expandable-nested-toggle3 data-list-expandable-nested-item3"
961
+ aria-labelledby="data-list-expandable-nested-toggle3 data-list-expandable-nested-item-3"
1013
962
  id="data-list-expandable-nested-toggle3"
1014
963
  aria-label="Toggle details for"
1015
964
  aria-expanded="true"
@@ -1075,10 +1024,7 @@ When a list item includes more than one block of content, it can be difficult fo
1075
1024
  aria-label="Compact data list example"
1076
1025
  id="data-list-compact"
1077
1026
  >
1078
- <li
1079
- class="pf-v6-c-data-list__item"
1080
- aria-labelledby="data-list-compact-item-1"
1081
- >
1027
+ <li class="pf-v6-c-data-list__item">
1082
1028
  <div class="pf-v6-c-data-list__item-row">
1083
1029
  <div class="pf-v6-c-data-list__item-control">
1084
1030
  <div class="pf-v6-c-data-list__check">
@@ -1129,10 +1075,7 @@ When a list item includes more than one block of content, it can be difficult fo
1129
1075
  </div>
1130
1076
  </li>
1131
1077
 
1132
- <li
1133
- class="pf-v6-c-data-list__item"
1134
- aria-labelledby="data-list-compact-item-2"
1135
- >
1078
+ <li class="pf-v6-c-data-list__item">
1136
1079
  <div class="pf-v6-c-data-list__item-row">
1137
1080
  <div class="pf-v6-c-data-list__item-control">
1138
1081
  <div class="pf-v6-c-data-list__check">
@@ -1184,10 +1127,7 @@ When a list item includes more than one block of content, it can be difficult fo
1184
1127
  </div>
1185
1128
  </li>
1186
1129
 
1187
- <li
1188
- class="pf-v6-c-data-list__item"
1189
- aria-labelledby="data-list-compact-item-3"
1190
- >
1130
+ <li class="pf-v6-c-data-list__item">
1191
1131
  <div class="pf-v6-c-data-list__item-row">
1192
1132
  <div class="pf-v6-c-data-list__item-control">
1193
1133
  <div class="pf-v6-c-data-list__check">
@@ -1283,10 +1223,7 @@ When a list item includes more than one block of content, it can be difficult fo
1283
1223
  aria-label="Width modifier data list example 1"
1284
1224
  id="data-list-default-fitting"
1285
1225
  >
1286
- <li
1287
- class="pf-v6-c-data-list__item"
1288
- aria-labelledby="data-list-default-fitting-item-1"
1289
- >
1226
+ <li class="pf-v6-c-data-list__item">
1290
1227
  <div class="pf-v6-c-data-list__item-row">
1291
1228
  <div class="pf-v6-c-data-list__item-control">
1292
1229
  <div class="pf-v6-c-data-list__check">
@@ -1329,10 +1266,7 @@ When a list item includes more than one block of content, it can be difficult fo
1329
1266
  aria-label="Width modifier data list example 2"
1330
1267
  id="data-list-flex-modifiers"
1331
1268
  >
1332
- <li
1333
- class="pf-v6-c-data-list__item"
1334
- aria-labelledby="data-list-flex-modifiers-item-1"
1335
- >
1269
+ <li class="pf-v6-c-data-list__item">
1336
1270
  <div class="pf-v6-c-data-list__item-row">
1337
1271
  <div class="pf-v6-c-data-list__item-control">
1338
1272
  <div class="pf-v6-c-data-list__check">
@@ -1388,17 +1322,14 @@ When a list item includes more than one block of content, it can be difficult fo
1388
1322
  aria-label="Width modifier data list example 3"
1389
1323
  id="data-list-flex-modifiers-2"
1390
1324
  >
1391
- <li
1392
- class="pf-v6-c-data-list__item pf-m-expanded"
1393
- aria-labelledby="data-list-flex-modifiers-2-item-1"
1394
- >
1325
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
1395
1326
  <div class="pf-v6-c-data-list__item-row">
1396
1327
  <div class="pf-v6-c-data-list__item-control">
1397
1328
  <div class="pf-v6-c-data-list__toggle">
1398
1329
  <button
1399
1330
  class="pf-v6-c-button pf-m-plain"
1400
1331
  type="button"
1401
- aria-labelledby="data-list-flex-modifiers-2-toggle1 data-list-flex-modifiers-2-item1"
1332
+ aria-labelledby="data-list-flex-modifiers-2-toggle1 data-list-flex-modifiers-2-item-1"
1402
1333
  id="data-list-flex-modifiers-2-toggle1"
1403
1334
  aria-label="Toggle details for"
1404
1335
  aria-expanded="true"
@@ -1502,11 +1433,7 @@ When a list item includes more than one block of content, it can be difficult fo
1502
1433
  aria-label="Clickable rows data list example"
1503
1434
  id="data-list-clickable-rows"
1504
1435
  >
1505
- <li
1506
- class="pf-v6-c-data-list__item pf-m-clickable pf-m-selected"
1507
- aria-labelledby="data-list-clickable-rows-item-1"
1508
- tabindex="0"
1509
- >
1436
+ <li class="pf-v6-c-data-list__item pf-m-clickable pf-m-selected" tabindex="0">
1510
1437
  <div class="pf-v6-c-data-list__item-row">
1511
1438
  <div class="pf-v6-c-data-list__item-content">
1512
1439
  <div class="pf-v6-c-data-list__cell">
@@ -1516,11 +1443,7 @@ When a list item includes more than one block of content, it can be difficult fo
1516
1443
  </div>
1517
1444
  </li>
1518
1445
 
1519
- <li
1520
- class="pf-v6-c-data-list__item pf-m-clickable"
1521
- aria-labelledby="data-list-clickable-rows-item-2"
1522
- tabindex="0"
1523
- >
1446
+ <li class="pf-v6-c-data-list__item pf-m-clickable" tabindex="0">
1524
1447
  <div class="pf-v6-c-data-list__item-row">
1525
1448
  <div class="pf-v6-c-data-list__item-content">
1526
1449
  <div class="pf-v6-c-data-list__cell">
@@ -1530,11 +1453,7 @@ When a list item includes more than one block of content, it can be difficult fo
1530
1453
  </div>
1531
1454
  </li>
1532
1455
 
1533
- <li
1534
- class="pf-v6-c-data-list__item pf-m-clickable"
1535
- aria-labelledby="data-list-clickable-rows-item-3"
1536
- tabindex="0"
1537
- >
1456
+ <li class="pf-v6-c-data-list__item pf-m-clickable" tabindex="0">
1538
1457
  <div class="pf-v6-c-data-list__item-row">
1539
1458
  <div class="pf-v6-c-data-list__item-content">
1540
1459
  <div class="pf-v6-c-data-list__cell">
@@ -1571,7 +1490,6 @@ When a list item includes more than one block of content, it can be difficult fo
1571
1490
  >
1572
1491
  <li
1573
1492
  class="pf-v6-c-data-list__item pf-m-expanded pf-m-clickable pf-m-selected"
1574
- aria-labelledby="data-list-clickable-expandable-rows-item-1"
1575
1493
  tabindex="0"
1576
1494
  >
1577
1495
  <div class="pf-v6-c-data-list__item-row">
@@ -1580,7 +1498,7 @@ When a list item includes more than one block of content, it can be difficult fo
1580
1498
  <button
1581
1499
  class="pf-v6-c-button pf-m-plain"
1582
1500
  type="button"
1583
- aria-labelledby="data-list-clickable-expandable-rows-toggle1 data-list-clickable-expandable-rows-item1"
1501
+ aria-labelledby="data-list-clickable-expandable-rows-toggle1 data-list-clickable-expandable-rows-item-1"
1584
1502
  id="data-list-clickable-expandable-rows-toggle1"
1585
1503
  aria-label="Toggle details for"
1586
1504
  aria-expanded="true"
@@ -1613,18 +1531,14 @@ When a list item includes more than one block of content, it can be difficult fo
1613
1531
  </section>
1614
1532
  </li>
1615
1533
 
1616
- <li
1617
- class="pf-v6-c-data-list__item pf-m-clickable"
1618
- aria-labelledby="data-list-clickable-expandable-rows-item-2"
1619
- tabindex="0"
1620
- >
1534
+ <li class="pf-v6-c-data-list__item pf-m-clickable" tabindex="0">
1621
1535
  <div class="pf-v6-c-data-list__item-row">
1622
1536
  <div class="pf-v6-c-data-list__item-control">
1623
1537
  <div class="pf-v6-c-data-list__toggle">
1624
1538
  <button
1625
1539
  class="pf-v6-c-button pf-m-plain"
1626
1540
  type="button"
1627
- aria-labelledby="data-list-clickable-expandable-rows-toggle2 data-list-clickable-expandable-rows-item2"
1541
+ aria-labelledby="data-list-clickable-expandable-rows-toggle2 data-list-clickable-expandable-rows-item-2"
1628
1542
  id="data-list-clickable-expandable-rows-toggle2"
1629
1543
  aria-label="Toggle details for"
1630
1544
  aria-expanded="false"
@@ -1658,18 +1572,14 @@ When a list item includes more than one block of content, it can be difficult fo
1658
1572
  </section>
1659
1573
  </li>
1660
1574
 
1661
- <li
1662
- class="pf-v6-c-data-list__item pf-m-expanded pf-m-clickable"
1663
- aria-labelledby="data-list-clickable-expandable-rows-item-3"
1664
- tabindex="0"
1665
- >
1575
+ <li class="pf-v6-c-data-list__item pf-m-expanded pf-m-clickable" tabindex="0">
1666
1576
  <div class="pf-v6-c-data-list__item-row">
1667
1577
  <div class="pf-v6-c-data-list__item-control">
1668
1578
  <div class="pf-v6-c-data-list__toggle">
1669
1579
  <button
1670
1580
  class="pf-v6-c-button pf-m-plain"
1671
1581
  type="button"
1672
- aria-labelledby="data-list-clickable-expandable-rows-toggle3 data-list-clickable-expandable-rows-item3"
1582
+ aria-labelledby="data-list-clickable-expandable-rows-toggle3 data-list-clickable-expandable-rows-item-3"
1673
1583
  id="data-list-clickable-expandable-rows-toggle3"
1674
1584
  aria-label="Toggle details for"
1675
1585
  aria-expanded="true"
@@ -1702,18 +1612,14 @@ When a list item includes more than one block of content, it can be difficult fo
1702
1612
  </section>
1703
1613
  </li>
1704
1614
 
1705
- <li
1706
- class="pf-v6-c-data-list__item pf-m-clickable"
1707
- aria-labelledby="data-list-clickable-expandable-rows-item-4"
1708
- tabindex="0"
1709
- >
1615
+ <li class="pf-v6-c-data-list__item pf-m-clickable" tabindex="0">
1710
1616
  <div class="pf-v6-c-data-list__item-row">
1711
1617
  <div class="pf-v6-c-data-list__item-control">
1712
1618
  <div class="pf-v6-c-data-list__toggle">
1713
1619
  <button
1714
1620
  class="pf-v6-c-button pf-m-plain"
1715
1621
  type="button"
1716
- aria-labelledby="data-list-clickable-expandable-rows-toggle4 data-list-clickable-expandable-rows-item4"
1622
+ aria-labelledby="data-list-clickable-expandable-rows-toggle4 data-list-clickable-expandable-rows-item-4"
1717
1623
  id="data-list-clickable-expandable-rows-toggle4"
1718
1624
  aria-label="Toggle details for"
1719
1625
  aria-expanded="false"
@@ -1762,10 +1668,7 @@ When a list item includes more than one block of content, it can be difficult fo
1762
1668
  aria-label="Draggable data list rows"
1763
1669
  id="data-list-draggable"
1764
1670
  >
1765
- <li
1766
- class="pf-v6-c-data-list__item"
1767
- aria-labelledby="data-list-draggable-item-1"
1768
- >
1671
+ <li class="pf-v6-c-data-list__item">
1769
1672
  <div class="pf-v6-c-data-list__item-row">
1770
1673
  <div class="pf-v6-c-data-list__item-control">
1771
1674
  <button
@@ -1808,10 +1711,7 @@ When a list item includes more than one block of content, it can be difficult fo
1808
1711
  </div>
1809
1712
  </li>
1810
1713
 
1811
- <li
1812
- class="pf-v6-c-data-list__item"
1813
- aria-labelledby="data-list-draggable-item-2"
1814
- >
1714
+ <li class="pf-v6-c-data-list__item">
1815
1715
  <div class="pf-v6-c-data-list__item-row">
1816
1716
  <div class="pf-v6-c-data-list__item-control">
1817
1717
  <button
@@ -1853,10 +1753,7 @@ When a list item includes more than one block of content, it can be difficult fo
1853
1753
  </div>
1854
1754
  </li>
1855
1755
 
1856
- <li
1857
- class="pf-v6-c-data-list__item pf-m-ghost-row"
1858
- aria-labelledby="data-list-draggable-item-3"
1859
- >
1756
+ <li class="pf-v6-c-data-list__item pf-m-ghost-row">
1860
1757
  <div class="pf-v6-c-data-list__item-row">
1861
1758
  <div class="pf-v6-c-data-list__item-control">
1862
1759
  <button
@@ -1899,10 +1796,7 @@ When a list item includes more than one block of content, it can be difficult fo
1899
1796
  </div>
1900
1797
  </li>
1901
1798
 
1902
- <li
1903
- class="pf-v6-c-data-list__item"
1904
- aria-labelledby="data-list-draggable-item-4"
1905
- >
1799
+ <li class="pf-v6-c-data-list__item">
1906
1800
  <div class="pf-v6-c-data-list__item-row">
1907
1801
  <div class="pf-v6-c-data-list__item-control">
1908
1802
  <button
@@ -1981,10 +1875,7 @@ When a list item includes more than one block of content, it can be difficult fo
1981
1875
  aria-label="Data list with text modifiers"
1982
1876
  id="data-list-with-text-modifiers"
1983
1877
  >
1984
- <li
1985
- class="pf-v6-c-data-list__item"
1986
- aria-labelledby="data-list-with-text-modifiers-item"
1987
- >
1878
+ <li class="pf-v6-c-data-list__item">
1988
1879
  <div class="pf-v6-c-data-list__item-row">
1989
1880
  <div class="pf-v6-c-data-list__item-content">
1990
1881
  <div class="pf-v6-c-data-list__cell">
@@ -1994,6 +1885,7 @@ When a list item includes more than one block of content, it can be difficult fo
1994
1885
  </div>
1995
1886
  <div
1996
1887
  class="pf-v6-c-data-list__cell pf-m-truncate"
1888
+ tabindex="0"
1997
1889
  >This text will truncate because it is very very long.</div>
1998
1890
  <div
1999
1891
  class="pf-v6-c-data-list__cell pf-m-break-word"
@@ -2007,15 +1899,19 @@ When a list item includes more than one block of content, it can be difficult fo
2007
1899
  <div class="pf-v6-c-data-list__item-content">
2008
1900
  <div
2009
1901
  class="pf-v6-c-data-list__cell"
1902
+ tabindex="0"
2010
1903
  >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
2011
1904
  <div
2012
1905
  class="pf-v6-c-data-list__cell"
1906
+ tabindex="0"
2013
1907
  >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
2014
1908
  <div
2015
1909
  class="pf-v6-c-data-list__cell"
1910
+ tabindex="0"
2016
1911
  >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
2017
1912
  <div
2018
1913
  class="pf-v6-c-data-list__cell"
1914
+ tabindex="0"
2019
1915
  >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
2020
1916
  </div>
2021
1917
  </div>
@@ -2057,10 +1953,7 @@ When a list item includes more than one block of content, it can be difficult fo
2057
1953
  aria-label="Data list with modifiers and text"
2058
1954
  id="data-list-with-text-modifiers-and-text"
2059
1955
  >
2060
- <li
2061
- class="pf-v6-c-data-list__item"
2062
- aria-labelledby="data-list-with-text-modifiers-and-text-item-1"
2063
- >
1956
+ <li class="pf-v6-c-data-list__item">
2064
1957
  <div class="pf-v6-c-data-list__item-row">
2065
1958
  <div class="pf-v6-c-data-list__item-content">
2066
1959
  <div class="pf-v6-c-data-list__cell">
@@ -2069,6 +1962,7 @@ When a list item includes more than one block of content, it can be difficult fo
2069
1962
  >This text will wrap to the next line because it has the default behavior of the data list cell.</span>
2070
1963
  <span
2071
1964
  class="pf-v6-c-data-list__text pf-m-truncate"
1965
+ tabindex="0"
2072
1966
  >This is data list text, you can apply `pf-m-truncate` directly to the text. This is data list text, you can apply `pf-m-truncate` directly to the text.</span>
2073
1967
  </div>
2074
1968
  <div class="pf-v6-c-data-list__cell">
@@ -2114,7 +2008,7 @@ The DataList component provides a flexible alternative to the Table component, w
2114
2008
  aria-label="Grid data list example"
2115
2009
  id="data-list-grid"
2116
2010
  >
2117
- <li class="pf-v6-c-data-list__item" aria-labelledby="data-list-grid-item-1">
2011
+ <li class="pf-v6-c-data-list__item">
2118
2012
  <div class="pf-v6-c-data-list__item-row">
2119
2013
  <div class="pf-v6-c-data-list__item-content">
2120
2014
  <div class="pf-v6-c-data-list__cell">
@@ -2128,7 +2022,7 @@ The DataList component provides a flexible alternative to the Table component, w
2128
2022
  </div>
2129
2023
  </div>
2130
2024
  </li>
2131
- <li class="pf-v6-c-data-list__item" aria-labelledby="data-list-grid-item-2">
2025
+ <li class="pf-v6-c-data-list__item">
2132
2026
  <div class="pf-v6-c-data-list__item-row">
2133
2027
  <div class="pf-v6-c-data-list__item-content">
2134
2028
  <div class="pf-v6-c-data-list__cell">
@@ -2155,10 +2049,7 @@ The DataList component provides a flexible alternative to the Table component, w
2155
2049
  aria-label="Grid small data list example"
2156
2050
  id="data-list-grid-small"
2157
2051
  >
2158
- <li
2159
- class="pf-v6-c-data-list__item"
2160
- aria-labelledby="data-list-grid-small-item-1"
2161
- >
2052
+ <li class="pf-v6-c-data-list__item">
2162
2053
  <div class="pf-v6-c-data-list__item-row">
2163
2054
  <div class="pf-v6-c-data-list__item-content">
2164
2055
  <div class="pf-v6-c-data-list__cell">
@@ -2172,10 +2063,7 @@ The DataList component provides a flexible alternative to the Table component, w
2172
2063
  </div>
2173
2064
  </div>
2174
2065
  </li>
2175
- <li
2176
- class="pf-v6-c-data-list__item"
2177
- aria-labelledby="data-list-grid-small-item-2"
2178
- >
2066
+ <li class="pf-v6-c-data-list__item">
2179
2067
  <div class="pf-v6-c-data-list__item-row">
2180
2068
  <div class="pf-v6-c-data-list__item-content">
2181
2069
  <div class="pf-v6-c-data-list__cell">
@@ -2202,10 +2090,7 @@ The DataList component provides a flexible alternative to the Table component, w
2202
2090
  aria-label="Grid none data list example"
2203
2091
  id="data-list-grid-none"
2204
2092
  >
2205
- <li
2206
- class="pf-v6-c-data-list__item"
2207
- aria-labelledby="data-list-grid-none-item-1"
2208
- >
2093
+ <li class="pf-v6-c-data-list__item">
2209
2094
  <div class="pf-v6-c-data-list__item-row">
2210
2095
  <div class="pf-v6-c-data-list__item-content">
2211
2096
  <div class="pf-v6-c-data-list__cell">
@@ -2219,10 +2104,7 @@ The DataList component provides a flexible alternative to the Table component, w
2219
2104
  </div>
2220
2105
  </div>
2221
2106
  </li>
2222
- <li
2223
- class="pf-v6-c-data-list__item"
2224
- aria-labelledby="data-list-grid-none-item-2"
2225
- >
2107
+ <li class="pf-v6-c-data-list__item">
2226
2108
  <div class="pf-v6-c-data-list__item-row">
2227
2109
  <div class="pf-v6-c-data-list__item-content">
2228
2110
  <div class="pf-v6-c-data-list__cell">