@patternfly/patternfly 6.3.0-prerelease.5 → 6.3.0-prerelease.51

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 (129) hide show
  1. package/README.md +8 -6
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/components/Accordion/accordion.css +72 -3
  9. package/components/Accordion/accordion.scss +78 -6
  10. package/components/Alert/alert-group.css +52 -31
  11. package/components/Alert/alert-group.scss +77 -46
  12. package/components/Button/button.css +155 -6
  13. package/components/Button/button.scss +161 -8
  14. package/components/Card/card.css +0 -1
  15. package/components/Card/card.scss +0 -1
  16. package/components/DataList/data-list.css +2 -2
  17. package/components/DataList/data-list.scss +2 -2
  18. package/components/DualListSelector/dual-list-selector.css +36 -0
  19. package/components/DualListSelector/dual-list-selector.scss +43 -0
  20. package/components/ExpandableSection/expandable-section.css +63 -1
  21. package/components/ExpandableSection/expandable-section.scss +76 -2
  22. package/components/FileUpload/file-upload.css +3 -3
  23. package/components/FileUpload/file-upload.scss +3 -3
  24. package/components/Form/form.css +40 -1
  25. package/components/Form/form.scss +47 -1
  26. package/components/FormControl/form-control.css +16 -0
  27. package/components/FormControl/form-control.scss +9 -0
  28. package/components/InputGroup/input-group.css +80 -0
  29. package/components/InputGroup/input-group.scss +95 -0
  30. package/components/Menu/menu.css +24 -4
  31. package/components/Menu/menu.scss +20 -5
  32. package/components/MenuToggle/menu-toggle.css +38 -4
  33. package/components/MenuToggle/menu-toggle.scss +48 -3
  34. package/components/Nav/nav.css +22 -8
  35. package/components/Nav/nav.scss +22 -9
  36. package/components/Page/page.css +66 -6
  37. package/components/Page/page.scss +48 -5
  38. package/components/Progress/progress.css +16 -0
  39. package/components/Progress/progress.scss +11 -1
  40. package/components/ProgressStepper/progress-stepper.scss +1 -0
  41. package/components/Skeleton/skeleton.css +22 -2
  42. package/components/Skeleton/skeleton.scss +25 -3
  43. package/components/Spinner/spinner.css +5 -0
  44. package/components/Spinner/spinner.scss +6 -0
  45. package/components/Table/table-grid.css +51 -5
  46. package/components/Table/table-grid.scss +22 -1
  47. package/components/Table/table.css +95 -2
  48. package/components/Table/table.scss +138 -3
  49. package/components/Tabs/tabs.css +25 -15
  50. package/components/Tabs/tabs.scss +26 -13
  51. package/components/TextInputGroup/text-input-group.css +23 -0
  52. package/components/TextInputGroup/text-input-group.scss +16 -1
  53. package/components/Timestamp/timestamp.css +4 -0
  54. package/components/Timestamp/timestamp.scss +7 -0
  55. package/components/TreeView/tree-view.css +39 -0
  56. package/components/TreeView/tree-view.scss +42 -2
  57. package/components/Truncate/truncate.css +1 -0
  58. package/components/Truncate/truncate.scss +3 -0
  59. package/components/Wizard/wizard.css +11 -5
  60. package/components/Wizard/wizard.scss +13 -5
  61. package/components/_index.css +961 -99
  62. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  63. package/docs/components/Button/examples/Button.md +161 -6
  64. package/docs/components/Card/examples/Card.md +8 -8
  65. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -29
  66. package/docs/components/CodeBlock/examples/CodeBlock.md +11 -11
  67. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  68. package/docs/components/DataList/examples/DataList.md +23 -23
  69. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  70. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  71. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  72. package/docs/components/ExpandableSection/examples/ExpandableSection.md +32 -21
  73. package/docs/components/Form/examples/Form.md +1179 -114
  74. package/docs/components/Hint/examples/Hint.md +3 -3
  75. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  76. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  77. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  78. package/docs/components/Label/examples/Label.md +2 -2
  79. package/docs/components/Masthead/examples/masthead.md +90 -12
  80. package/docs/components/Menu/examples/Menu.md +122 -6
  81. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  82. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  83. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  84. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  85. package/docs/components/Page/examples/Page.md +148 -14
  86. package/docs/components/Pagination/examples/Pagination.md +12 -12
  87. package/docs/components/Popover/examples/Popover.md +0 -4
  88. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  89. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  90. package/docs/components/Slider/examples/Slider.md +2 -2
  91. package/docs/components/Spinner/examples/Spinner.md +10 -0
  92. package/docs/components/Table/examples/Table.md +9462 -6183
  93. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  94. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  95. package/docs/components/Title/examples/Title.md +8 -8
  96. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  97. package/docs/components/Wizard/examples/Wizard.md +583 -0
  98. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  99. package/docs/demos/Alert/examples/Alert.md +66 -9
  100. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  101. package/docs/demos/Banner/examples/Banner.md +47 -6
  102. package/docs/demos/Card/examples/Card.md +13 -67
  103. package/docs/demos/CardView/examples/CardView.md +24 -5
  104. package/docs/demos/Dashboard/examples/Dashboard.md +29 -7
  105. package/docs/demos/DataList/examples/DataList.md +100 -24
  106. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  107. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  108. package/docs/demos/Form/examples/BasicForms.md +142 -22
  109. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  110. package/docs/demos/Masthead/examples/Masthead.md +171 -19
  111. package/docs/demos/Modal/examples/Modal.md +171 -21
  112. package/docs/demos/Nav/examples/Nav.md +113 -18
  113. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  114. package/docs/demos/Page/examples/Page.md +661 -40
  115. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  116. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  117. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  118. package/docs/demos/Table/examples/Table.md +475 -157
  119. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  120. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  121. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  122. package/package.json +9 -6
  123. package/patternfly-base-no-globals.css +45 -11
  124. package/patternfly-base.css +49 -11
  125. package/patternfly-no-globals.css +1006 -110
  126. package/patternfly.css +1010 -110
  127. package/patternfly.min.css +1 -1
  128. package/patternfly.min.css.map +1 -1
  129. package/sass-utilities/mixins.scss +54 -0
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -165,7 +165,7 @@ When a list item includes more than one block of content, it can be difficult fo
165
165
  class="pf-v6-c-menu-toggle pf-m-plain"
166
166
  type="button"
167
167
  aria-expanded="false"
168
- aria-label="Menu toggle"
168
+ aria-label="Data list item menu toggle"
169
169
  id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
170
170
  >
171
171
  <span class="pf-v6-c-menu-toggle__icon">
@@ -212,7 +212,7 @@ When a list item includes more than one block of content, it can be difficult fo
212
212
  class="pf-v6-c-menu-toggle pf-m-plain"
213
213
  type="button"
214
214
  aria-expanded="false"
215
- aria-label="Menu toggle"
215
+ aria-label="Data list item menu toggle"
216
216
  id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
217
217
  >
218
218
  <span class="pf-v6-c-menu-toggle__icon">
@@ -269,7 +269,7 @@ When a list item includes more than one block of content, it can be difficult fo
269
269
  class="pf-v6-c-menu-toggle pf-m-plain"
270
270
  type="button"
271
271
  aria-expanded="false"
272
- aria-label="Menu toggle"
272
+ aria-label="Data list item menu toggle"
273
273
  id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
274
274
  >
275
275
  <span class="pf-v6-c-menu-toggle__icon">
@@ -373,7 +373,7 @@ When a list item includes more than one block of content, it can be difficult fo
373
373
  class="pf-v6-c-menu-toggle pf-m-plain"
374
374
  type="button"
375
375
  aria-expanded="false"
376
- aria-label="Menu toggle"
376
+ aria-label="Data list item menu toggle"
377
377
  id="data-list-expandable-item-1-menu-toggle"
378
378
  >
379
379
  <span class="pf-v6-c-menu-toggle__icon">
@@ -434,7 +434,7 @@ When a list item includes more than one block of content, it can be difficult fo
434
434
  class="pf-v6-c-menu-toggle pf-m-plain"
435
435
  type="button"
436
436
  aria-expanded="false"
437
- aria-label="Menu toggle"
437
+ aria-label="Data list item menu toggle"
438
438
  id="data-list-expandable-item-2-menu-toggle"
439
439
  >
440
440
  <span class="pf-v6-c-menu-toggle__icon">
@@ -499,7 +499,7 @@ When a list item includes more than one block of content, it can be difficult fo
499
499
  class="pf-v6-c-menu-toggle pf-m-plain"
500
500
  type="button"
501
501
  aria-expanded="false"
502
- aria-label="Menu toggle"
502
+ aria-label="Data list item menu toggle"
503
503
  id="data-list-expandable-item-3-menu-toggle"
504
504
  >
505
505
  <span class="pf-v6-c-menu-toggle__icon">
@@ -573,10 +573,10 @@ When a list item includes more than one block of content, it can be difficult fo
573
573
  </div>
574
574
  <div class="pf-v6-c-data-list__item-action">
575
575
  <button
576
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
576
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
577
577
  type="button"
578
578
  aria-expanded="false"
579
- aria-label="Menu toggle"
579
+ aria-label="Data list item menu toggle"
580
580
  id="data-list-expandable-compact-item-1-menu-toggle"
581
581
  >
582
582
  <span class="pf-v6-c-menu-toggle__icon">
@@ -637,10 +637,10 @@ When a list item includes more than one block of content, it can be difficult fo
637
637
  </div>
638
638
  <div class="pf-v6-c-data-list__item-action">
639
639
  <button
640
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
640
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
641
641
  type="button"
642
642
  aria-expanded="false"
643
- aria-label="Menu toggle"
643
+ aria-label="Data list item menu toggle"
644
644
  id="data-list-expandable-compact-item-2-menu-toggle"
645
645
  >
646
646
  <span class="pf-v6-c-menu-toggle__icon">
@@ -702,10 +702,10 @@ When a list item includes more than one block of content, it can be difficult fo
702
702
  </div>
703
703
  <div class="pf-v6-c-data-list__item-action">
704
704
  <button
705
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
705
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
706
706
  type="button"
707
707
  aria-expanded="false"
708
- aria-label="Menu toggle"
708
+ aria-label="Data list item menu toggle"
709
709
  id="data-list-expandable-compact-item-3-menu-toggle"
710
710
  >
711
711
  <span class="pf-v6-c-menu-toggle__icon">
@@ -782,7 +782,7 @@ When a list item includes more than one block of content, it can be difficult fo
782
782
  class="pf-v6-c-menu-toggle pf-m-plain"
783
783
  type="button"
784
784
  aria-expanded="false"
785
- aria-label="Menu toggle"
785
+ aria-label="Data list item menu toggle"
786
786
  id="data-list-expandable-nested-item-1-menu-toggle"
787
787
  >
788
788
  <span class="pf-v6-c-menu-toggle__icon">
@@ -978,7 +978,7 @@ When a list item includes more than one block of content, it can be difficult fo
978
978
  class="pf-v6-c-menu-toggle pf-m-plain"
979
979
  type="button"
980
980
  aria-expanded="false"
981
- aria-label="Menu toggle"
981
+ aria-label="Data list item menu toggle"
982
982
  id="data-list-expandable-nested-item-2-menu-toggle"
983
983
  >
984
984
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1043,7 +1043,7 @@ When a list item includes more than one block of content, it can be difficult fo
1043
1043
  class="pf-v6-c-menu-toggle pf-m-plain"
1044
1044
  type="button"
1045
1045
  aria-expanded="false"
1046
- aria-label="Menu toggle"
1046
+ aria-label="Data list item menu toggle"
1047
1047
  id="data-list-expandable-nested-item-3-menu-toggle"
1048
1048
  >
1049
1049
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1115,10 +1115,10 @@ When a list item includes more than one block of content, it can be difficult fo
1115
1115
  </div>
1116
1116
  <div class="pf-v6-c-data-list__item-action">
1117
1117
  <button
1118
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
1118
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
1119
1119
  type="button"
1120
1120
  aria-expanded="false"
1121
- aria-label="Menu toggle"
1121
+ aria-label="Data list item menu toggle"
1122
1122
  id="data-list-compact-item-1-menu-toggle"
1123
1123
  >
1124
1124
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1160,10 +1160,10 @@ When a list item includes more than one block of content, it can be difficult fo
1160
1160
  </div>
1161
1161
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
1162
1162
  <button
1163
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
1163
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
1164
1164
  type="button"
1165
1165
  aria-expanded="false"
1166
- aria-label="Menu toggle"
1166
+ aria-label="Data list item menu toggle"
1167
1167
  id="data-list-compact-item-2-menu-toggle"
1168
1168
  >
1169
1169
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1215,10 +1215,10 @@ When a list item includes more than one block of content, it can be difficult fo
1215
1215
  </div>
1216
1216
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
1217
1217
  <button
1218
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
1218
+ class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
1219
1219
  type="button"
1220
1220
  aria-expanded="false"
1221
- aria-label="Menu toggle"
1221
+ aria-label="Data list item menu toggle"
1222
1222
  id="data-list-compact-item-3-menu-toggle"
1223
1223
  >
1224
1224
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1369,7 +1369,7 @@ When a list item includes more than one block of content, it can be difficult fo
1369
1369
  class="pf-v6-c-menu-toggle pf-m-plain"
1370
1370
  type="button"
1371
1371
  aria-expanded="false"
1372
- aria-label="Menu toggle"
1372
+ aria-label="Data list item menu toggle"
1373
1373
  id="data-list-flex-modifiers-item-1-menu-toggle"
1374
1374
  >
1375
1375
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1458,7 +1458,7 @@ When a list item includes more than one block of content, it can be difficult fo
1458
1458
  class="pf-v6-c-menu-toggle pf-m-plain"
1459
1459
  type="button"
1460
1460
  aria-expanded="false"
1461
- aria-label="Menu toggle"
1461
+ aria-label="Data list item menu toggle"
1462
1462
  id="data-list-flex-modifiers-2-item-1-menu-toggle"
1463
1463
  >
1464
1464
  <span class="pf-v6-c-menu-toggle__icon">
package/docs/components/DescriptionList/examples/DescriptionList.md CHANGED
@@ -7,7 +7,7 @@ cssPrefix: pf-v6-c-description-list
7
7
  ### Default
8
8
 
9
9
  ```html
10
- <dl class="pf-v6-c-description-list">
10
+ <dl class="pf-v6-c-description-list" aria-label="Default example">
11
11
  <div class="pf-v6-c-description-list__group">
12
12
  <dt class="pf-v6-c-description-list__term">
13
13
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -64,7 +64,7 @@ cssPrefix: pf-v6-c-description-list
64
64
  ### Term help text
65
65
 
66
66
  ```html
67
- <dl class="pf-v6-c-description-list">
67
+ <dl class="pf-v6-c-description-list" aria-label="Term help text example">
68
68
  <div class="pf-v6-c-description-list__group">
69
69
  <dt class="pf-v6-c-description-list__term">
70
70
  <span
@@ -146,7 +146,10 @@ cssPrefix: pf-v6-c-description-list
146
146
  ### Default, two column
147
147
 
148
148
  ```html
149
- <dl class="pf-v6-c-description-list pf-m-2-col">
149
+ <dl
150
+ class="pf-v6-c-description-list pf-m-2-col"
151
+ aria-label="Default, two column example"
152
+ >
150
153
  <div class="pf-v6-c-description-list__group">
151
154
  <dt class="pf-v6-c-description-list__term">
152
155
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -205,7 +208,10 @@ cssPrefix: pf-v6-c-description-list
205
208
  ### Default, three column on lg breakpoint
206
209
 
207
210
  ```html
208
- <dl class="pf-v6-c-description-list pf-m-3-col-on-lg">
211
+ <dl
212
+ class="pf-v6-c-description-list pf-m-3-col-on-lg"
213
+ aria-label="Default, three column on lg breakpoint example"
214
+ >
209
215
  <div class="pf-v6-c-description-list__group">
210
216
  <dt class="pf-v6-c-description-list__term">
211
217
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -262,7 +268,10 @@ cssPrefix: pf-v6-c-description-list
262
268
  ### Horizontal
263
269
 
264
270
  ```html
265
- <dl class="pf-v6-c-description-list pf-m-horizontal">
271
+ <dl
272
+ class="pf-v6-c-description-list pf-m-horizontal"
273
+ aria-label="Horizontal example"
274
+ >
266
275
  <div class="pf-v6-c-description-list__group">
267
276
  <dt class="pf-v6-c-description-list__term">
268
277
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -319,7 +328,10 @@ cssPrefix: pf-v6-c-description-list
319
328
  ### Horizontal, two column
320
329
 
321
330
  ```html
322
- <dl class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col">
331
+ <dl
332
+ class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col"
333
+ aria-label="Horizontal, two column example"
334
+ >
323
335
  <div class="pf-v6-c-description-list__group">
324
336
  <dt class="pf-v6-c-description-list__term">
325
337
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -376,7 +388,10 @@ cssPrefix: pf-v6-c-description-list
376
388
  ### Horizontal, three column on lg breakpoint
377
389
 
378
390
  ```html
379
- <dl class="pf-v6-c-description-list pf-m-horizontal pf-m-3-col-on-lg">
391
+ <dl
392
+ class="pf-v6-c-description-list pf-m-horizontal pf-m-3-col-on-lg"
393
+ aria-label="Horizontal, three column on lg breakpoint example"
394
+ >
380
395
  <div class="pf-v6-c-description-list__group">
381
396
  <dt class="pf-v6-c-description-list__term">
382
397
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -433,7 +448,7 @@ cssPrefix: pf-v6-c-description-list
433
448
  ### Compact
434
449
 
435
450
  ```html
436
- <dl class="pf-v6-c-description-list pf-m-compact">
451
+ <dl class="pf-v6-c-description-list pf-m-compact" aria-label="Compact example">
437
452
  <div class="pf-v6-c-description-list__group">
438
453
  <dt class="pf-v6-c-description-list__term">
439
454
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -490,7 +505,10 @@ cssPrefix: pf-v6-c-description-list
490
505
  ### Compact horizontal
491
506
 
492
507
  ```html
493
- <dl class="pf-v6-c-description-list pf-m-compact pf-m-horizontal pf-m-2-col">
508
+ <dl
509
+ class="pf-v6-c-description-list pf-m-compact pf-m-horizontal pf-m-2-col"
510
+ aria-label="Compact horizontal example"
511
+ >
494
512
  <div class="pf-v6-c-description-list__group">
495
513
  <dt class="pf-v6-c-description-list__term">
496
514
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -547,7 +565,10 @@ cssPrefix: pf-v6-c-description-list
547
565
  ### Fluid horizontal
548
566
 
549
567
  ```html
550
- <dl class="pf-v6-c-description-list pf-m-horizontal pf-m-fluid pf-m-2-col">
568
+ <dl
569
+ class="pf-v6-c-description-list pf-m-horizontal pf-m-fluid pf-m-2-col"
570
+ aria-label="Fluid horizontal example"
571
+ >
551
572
  <div class="pf-v6-c-description-list__group">
552
573
  <dt class="pf-v6-c-description-list__term">
553
574
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -608,6 +629,7 @@ Column fill will modify the default placement of description list groups to fill
608
629
  ```html
609
630
  <dl
610
631
  class="pf-v6-c-description-list pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg"
632
+ aria-label="Column fill example"
611
633
  >
612
634
  <div class="pf-v6-c-description-list__group">
613
635
  <dt class="pf-v6-c-description-list__term">
@@ -669,7 +691,10 @@ Column fill will modify the default placement of description list groups to fill
669
691
  ### Auto-fit basic
670
692
 
671
693
  ```html
672
- <dl class="pf-v6-c-description-list pf-m-auto-fit">
694
+ <dl
695
+ class="pf-v6-c-description-list pf-m-auto-fit"
696
+ aria-label="Auto-fit basic example"
697
+ >
673
698
  <div class="pf-v6-c-description-list__group">
674
699
  <dt class="pf-v6-c-description-list__term">
675
700
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -728,6 +753,7 @@ Column fill will modify the default placement of description list groups to fill
728
753
  ```html
729
754
  <dl
730
755
  class="pf-v6-c-description-list pf-m-auto-fit"
756
+ aria-label="Auto-fit, min width modified, grid template columns example"
731
757
  style="--pf-v6-c-description-list--GridTemplateColumns--min: 200px;"
732
758
  >
733
759
  <div class="pf-v6-c-description-list__group">
@@ -788,6 +814,7 @@ Column fill will modify the default placement of description list groups to fill
788
814
  ```html
789
815
  <dl
790
816
  class="pf-v6-c-description-list pf-m-auto-fit"
817
+ aria-label="Auto-fit, min width modified, responsive grid template columns example"
791
818
  style="--pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
792
819
  >
793
820
  <div class="pf-v6-c-description-list__group">
@@ -848,7 +875,10 @@ Column fill will modify the default placement of description list groups to fill
848
875
  ### Default, responsive columns
849
876
 
850
877
  ```html
851
- <dl class="pf-v6-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl">
878
+ <dl
879
+ class="pf-v6-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl"
880
+ aria-label="Default, responsive columns example"
881
+ >
852
882
  <div class="pf-v6-c-description-list__group">
853
883
  <dt class="pf-v6-c-description-list__term">
854
884
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -907,6 +937,7 @@ Column fill will modify the default placement of description list groups to fill
907
937
  ```html
908
938
  <dl
909
939
  class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"
940
+ aria-label="Horizontal, responsive columns example"
910
941
  >
911
942
  <div class="pf-v6-c-description-list__group">
912
943
  <dt class="pf-v6-c-description-list__term">
@@ -966,6 +997,7 @@ Column fill will modify the default placement of description list groups to fill
966
997
  ```html
967
998
  <dl
968
999
  class="pf-v6-c-description-list pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
1000
+ aria-label="Responsive, horizontal, vertical group layout example"
969
1001
  >
970
1002
  <div class="pf-v6-c-description-list__group">
971
1003
  <dt class="pf-v6-c-description-list__term">
@@ -1025,7 +1057,10 @@ Column fill will modify the default placement of description list groups to fill
1025
1057
  ### Default, auto columns width
1026
1058
 
1027
1059
  ```html
1028
- <dl class="pf-v6-c-description-list pf-m-auto-column-widths pf-m-3-col">
1060
+ <dl
1061
+ class="pf-v6-c-description-list pf-m-auto-column-widths pf-m-3-col"
1062
+ aria-label="Default, auto columns width example"
1063
+ >
1029
1064
  <div class="pf-v6-c-description-list__group">
1030
1065
  <dt class="pf-v6-c-description-list__term">
1031
1066
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1084,6 +1119,7 @@ Column fill will modify the default placement of description list groups to fill
1084
1119
  ```html
1085
1120
  <dl
1086
1121
  class="pf-v6-c-description-list pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"
1122
+ aria-label="Horizontal, auto column width example"
1087
1123
  >
1088
1124
  <div class="pf-v6-c-description-list__group">
1089
1125
  <dt class="pf-v6-c-description-list__term">
@@ -1143,7 +1179,10 @@ Column fill will modify the default placement of description list groups to fill
1143
1179
  ### Default, inline grid
1144
1180
 
1145
1181
  ```html
1146
- <dl class="pf-v6-c-description-list pf-m-3-col pf-m-inline-grid">
1182
+ <dl
1183
+ class="pf-v6-c-description-list pf-m-3-col pf-m-inline-grid"
1184
+ aria-label="Default, inline grid example"
1185
+ >
1147
1186
  <div class="pf-v6-c-description-list__group">
1148
1187
  <dt class="pf-v6-c-description-list__term">
1149
1188
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1200,7 +1239,10 @@ Column fill will modify the default placement of description list groups to fill
1200
1239
  ### Display variant
1201
1240
 
1202
1241
  ```html
1203
- <dl class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
1242
+ <dl
1243
+ class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg"
1244
+ aria-label="Display variant example"
1245
+ >
1204
1246
  <div class="pf-v6-c-description-list__group">
1205
1247
  <dt class="pf-v6-c-description-list__term">
1206
1248
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1261,7 +1303,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1261
1303
  ### Description list group wrapper as card
1262
1304
 
1263
1305
  ```html
1264
- <dl class="pf-v6-c-description-list pf-m-2-col-on-lg">
1306
+ <dl
1307
+ class="pf-v6-c-description-list pf-m-2-col-on-lg"
1308
+ aria-label="Description list group wrapper as card example"
1309
+ >
1265
1310
  <div class="pf-v6-c-card">
1266
1311
  <dt class="pf-v6-c-description-list__term">
1267
1312
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1318,7 +1363,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1318
1363
  ### Display lg and card variant
1319
1364
 
1320
1365
  ```html
1321
- <dl class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
1366
+ <dl
1367
+ class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg"
1368
+ aria-label="Display lg and card variant example"
1369
+ >
1322
1370
  <div class="pf-v6-c-card">
1323
1371
  <dt class="pf-v6-c-description-list__term">
1324
1372
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1375,7 +1423,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1375
1423
  ### Display 2xl and card variant
1376
1424
 
1377
1425
  ```html
1378
- <dl class="pf-v6-c-description-list pf-m-display-2xl pf-m-2-col-on-lg">
1426
+ <dl
1427
+ class="pf-v6-c-description-list pf-m-display-2xl pf-m-2-col-on-lg"
1428
+ aria-label="Display 2xl and card variant example"
1429
+ >
1379
1430
  <div class="pf-v6-c-card">
1380
1431
  <dt class="pf-v6-c-description-list__term">
1381
1432
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1432,7 +1483,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1432
1483
  ### Display and card variant, three column on lg breakpoint
1433
1484
 
1434
1485
  ```html
1435
- <dl class="pf-v6-c-description-list pf-m-3-col-on-lg pf-m-display-lg">
1486
+ <dl
1487
+ class="pf-v6-c-description-list pf-m-3-col-on-lg pf-m-display-lg"
1488
+ aria-label="Display and card variant, three column on lg breakpoint example"
1489
+ >
1436
1490
  <div class="pf-v6-c-card">
1437
1491
  <dt class="pf-v6-c-description-list__term">
1438
1492
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1468,6 +1522,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1468
1522
  ```html
1469
1523
  <dl
1470
1524
  class="pf-v6-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"
1525
+ aria-label="Display and card variant, horizontal, modified term width example"
1471
1526
  style="--pf-v6-c-description-list__term--width: 10ch;"
1472
1527
  >
1473
1528
  <div class="pf-v6-c-card">
@@ -1504,7 +1559,8 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1504
1559
 
1505
1560
  ### Horizontal 2 col auto term width
1506
1561
  ```hbs
1507
- {{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
1562
+ {{> description-list__example
1563
+ description-list--aria-label="Horizontal 2 column auto term width example" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
1508
1564
  ``` -->
1509
1565
 
1510
1566
  ## With icons
@@ -1512,7 +1568,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1512
1568
  ### Icons on terms
1513
1569
 
1514
1570
  ```html
1515
- <dl class="pf-v6-c-description-list">
1571
+ <dl class="pf-v6-c-description-list" aria-label="Icons on terms example">
1516
1572
  <div class="pf-v6-c-description-list__group">
1517
1573
  <dt class="pf-v6-c-description-list__term">
1518
1574
  <span class="pf-v6-c-description-list__term-icon">
@@ -1589,7 +1645,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1589
1645
 
1590
1646
  | Attribute | Applied to | Outcome |
1591
1647
  | -- | -- | -- |
1592
- | `title` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** |
1648
+ | `aria-label` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** |
1593
1649
  | `tabindex="0"` | `.pf-v6-c-description-list__text.pf-m-help-text` | Inserts the `.pf-v6-c-description-list__text` into the tab order of the page so that it is focusable. **Required when the element is clickable** |
1594
1650
 
1595
1651
  ### Usage