@patternfly/patternfly 6.3.0 → 6.4.0-prerelease.1

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 +41 -1
  74. package/components/Table/table.scss +48 -2
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +7 -0
  78. package/components/TextInputGroup/text-input-group.scss +8 -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 +631 -168
  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 +12 -7
  135. package/patternfly-base-no-globals.css +1172 -1
  136. package/patternfly-base.css +1176 -1
  137. package/patternfly-no-globals.css +1803 -169
  138. package/patternfly.css +1838 -200
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/docs/components/Hint/examples/Hint.md CHANGED
@@ -13,7 +13,7 @@ cssPrefix: pf-v6-c-hint
13
13
  class="pf-v6-c-menu-toggle pf-m-plain"
14
14
  type="button"
15
15
  aria-expanded="false"
16
- aria-label="Hint menu toggle"
16
+ aria-label="Hint with title example actions"
17
17
  id="hint-with-title-example-hint"
18
18
  >
19
19
  <span class="pf-v6-c-menu-toggle__icon">
@@ -35,7 +35,7 @@ cssPrefix: pf-v6-c-hint
35
35
  class="pf-v6-c-menu-toggle pf-m-plain"
36
36
  type="button"
37
37
  aria-expanded="false"
38
- aria-label="Hint menu toggle"
38
+ aria-label="Hint with title and footer example actions"
39
39
  id="hint-with-title-and-actions-example-hint"
40
40
  >
41
41
  <span class="pf-v6-c-menu-toggle__icon">
@@ -74,7 +74,7 @@ cssPrefix: pf-v6-c-hint
74
74
  class="pf-v6-c-menu-toggle pf-m-plain"
75
75
  type="button"
76
76
  aria-expanded="false"
77
- aria-label="Hint menu toggle"
77
+ aria-label="Hint without title example actions"
78
78
  id="hint-with-no-title-example-hint"
79
79
  >
80
80
  <span class="pf-v6-c-menu-toggle__icon">
package/docs/components/Icon/examples/Icon.md CHANGED
@@ -285,16 +285,6 @@ extra large
285
285
  <span class="pf-v6-c-icon__content">
286
286
  <i class="fas fa-check-circle" aria-hidden="true"></i>
287
287
  </span>
288
- <span class="pf-v6-c-icon__progress">
289
- <svg
290
- class="pf-v6-c-spinner pf-m-md"
291
- role="progressbar"
292
- viewBox="0 0 100 100"
293
- aria-label="Loading..."
294
- >
295
- <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
296
- </svg>
297
- </span>
298
288
  </span>
299
289
 
300
290
  ```
package/docs/components/InlineEdit/examples/InlineEdit.md CHANGED
@@ -917,7 +917,3 @@ All accessibility requirements for inputs apply to elements within inline edit.
917
917
  | `.pf-m-bold` | `.pf-v6-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
918
918
  | `.pf-m-valid` | `.pf-v6-c-inline-edit__action` | Modifies the action button state. |
919
919
  | `.pf-m-enable-editable` | `.pf-v6-c-inline-edit__action` | Exposes an inline edit action by default. |
920
-
921
- ```
922
- -->
923
- ```
package/docs/components/JumpLinks/examples/JumpLinks.md CHANGED
@@ -7,8 +7,12 @@ cssPrefix: pf-v6-c-jump-links
7
7
  ### Horizontal default
8
8
 
9
9
  ```html
10
- <nav class="pf-v6-c-jump-links">
11
- <ul class="pf-v6-c-jump-links__list" role="list">
10
+ <nav class="pf-v6-c-jump-links" aria-label="Horizontal default example">
11
+ <ul
12
+ class="pf-v6-c-jump-links__list"
13
+ role="list"
14
+ aria-label="Horizontal default example"
15
+ >
12
16
  <li class="pf-v6-c-jump-links__item">
13
17
  <span class="pf-v6-c-jump-links__link">
14
18
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -18,7 +22,7 @@ cssPrefix: pf-v6-c-jump-links
18
22
  </a>
19
23
  </span>
20
24
  </li>
21
- <li class="pf-v6-c-jump-links__item pf-m-current">
25
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
22
26
  <span class="pf-v6-c-jump-links__link">
23
27
  <a class="pf-v6-c-button pf-m-link" href="#">
24
28
  <span class="pf-v6-c-button__text">
@@ -44,8 +48,15 @@ cssPrefix: pf-v6-c-jump-links
44
48
  ### Horizontal with centered list
45
49
 
46
50
  ```html
47
- <nav class="pf-v6-c-jump-links pf-m-center">
48
- <ul class="pf-v6-c-jump-links__list" role="list">
51
+ <nav
52
+ class="pf-v6-c-jump-links pf-m-center"
53
+ aria-label="Horizontal with centered list example"
54
+ >
55
+ <ul
56
+ class="pf-v6-c-jump-links__list"
57
+ role="list"
58
+ aria-label="Horizontal with centered list example"
59
+ >
49
60
  <li class="pf-v6-c-jump-links__item">
50
61
  <span class="pf-v6-c-jump-links__link">
51
62
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -55,7 +66,7 @@ cssPrefix: pf-v6-c-jump-links
55
66
  </a>
56
67
  </span>
57
68
  </li>
58
- <li class="pf-v6-c-jump-links__item pf-m-current">
69
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
59
70
  <span class="pf-v6-c-jump-links__link">
60
71
  <a class="pf-v6-c-button pf-m-link" href="#">
61
72
  <span class="pf-v6-c-button__text">
@@ -81,12 +92,21 @@ cssPrefix: pf-v6-c-jump-links
81
92
  ### Horizontal with label
82
93
 
83
94
  ```html
84
- <nav class="pf-v6-c-jump-links" aria-label="Jump to section">
95
+ <nav class="pf-v6-c-jump-links" aria-label="Horizontal with label example">
85
96
  <div class="pf-v6-c-jump-links__main">
86
- <div class="pf-v6-c-jump-links__header">
87
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
97
+ <div
98
+ class="pf-v6-c-jump-links__header"
99
+ id="horizontal-with-label-header-one"
100
+ >
101
+ <div
102
+ class="pf-v6-c-jump-links__label"
103
+ >Jump to horizontal with label example sections one</div>
88
104
  </div>
89
- <ul class="pf-v6-c-jump-links__list" role="list">
105
+ <ul
106
+ class="pf-v6-c-jump-links__list"
107
+ role="list"
108
+ aria-labelledby="horizontal-with-label-header-one"
109
+ >
90
110
  <li class="pf-v6-c-jump-links__item">
91
111
  <span class="pf-v6-c-jump-links__link">
92
112
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -96,7 +116,7 @@ cssPrefix: pf-v6-c-jump-links
96
116
  </a>
97
117
  </span>
98
118
  </li>
99
- <li class="pf-v6-c-jump-links__item pf-m-current">
119
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
100
120
  <span class="pf-v6-c-jump-links__link">
101
121
  <a class="pf-v6-c-button pf-m-link" href="#">
102
122
  <span class="pf-v6-c-button__text">
@@ -118,12 +138,24 @@ cssPrefix: pf-v6-c-jump-links
118
138
  </div>
119
139
  </nav>
120
140
  <br />
121
- <nav class="pf-v6-c-jump-links pf-m-center" aria-label="Jump to section">
141
+ <nav
142
+ class="pf-v6-c-jump-links pf-m-center"
143
+ aria-label="Horizontal with label second example"
144
+ >
122
145
  <div class="pf-v6-c-jump-links__main">
123
- <div class="pf-v6-c-jump-links__header">
124
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
146
+ <div
147
+ class="pf-v6-c-jump-links__header"
148
+ id="horizontal-with-label-header-two"
149
+ >
150
+ <div
151
+ class="pf-v6-c-jump-links__label"
152
+ >Jump to horizontal with label example sections two</div>
125
153
  </div>
126
- <ul class="pf-v6-c-jump-links__list" role="list">
154
+ <ul
155
+ class="pf-v6-c-jump-links__list"
156
+ role="list"
157
+ aria-labelledby="horizontal-with-label-header-two"
158
+ >
127
159
  <li class="pf-v6-c-jump-links__item">
128
160
  <span class="pf-v6-c-jump-links__link">
129
161
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -133,7 +165,7 @@ cssPrefix: pf-v6-c-jump-links
133
165
  </a>
134
166
  </span>
135
167
  </li>
136
- <li class="pf-v6-c-jump-links__item pf-m-current">
168
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
137
169
  <span class="pf-v6-c-jump-links__link">
138
170
  <a class="pf-v6-c-button pf-m-link" href="#">
139
171
  <span class="pf-v6-c-button__text">
@@ -160,8 +192,15 @@ cssPrefix: pf-v6-c-jump-links
160
192
  ### Vertical default
161
193
 
162
194
  ```html
163
- <nav class="pf-v6-c-jump-links pf-m-vertical">
164
- <ul class="pf-v6-c-jump-links__list" role="list">
195
+ <nav
196
+ class="pf-v6-c-jump-links pf-m-vertical"
197
+ aria-label="Vertical default example"
198
+ >
199
+ <ul
200
+ class="pf-v6-c-jump-links__list"
201
+ role="list"
202
+ aria-label="Vertical default example"
203
+ >
165
204
  <li class="pf-v6-c-jump-links__item">
166
205
  <span class="pf-v6-c-jump-links__link">
167
206
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -171,7 +210,7 @@ cssPrefix: pf-v6-c-jump-links
171
210
  </a>
172
211
  </span>
173
212
  </li>
174
- <li class="pf-v6-c-jump-links__item pf-m-current">
213
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
175
214
  <span class="pf-v6-c-jump-links__link">
176
215
  <a class="pf-v6-c-button pf-m-link" href="#">
177
216
  <span class="pf-v6-c-button__text">
@@ -215,11 +254,20 @@ cssPrefix: pf-v6-c-jump-links
215
254
  ### Vertical with label
216
255
 
217
256
  ```html
218
- <nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
219
- <div class="pf-v6-c-jump-links__header">
220
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
257
+ <nav
258
+ class="pf-v6-c-jump-links pf-m-vertical"
259
+ aria-label="Vertical with label example"
260
+ >
261
+ <div class="pf-v6-c-jump-links__header" id="vertical-with-label-header">
262
+ <div
263
+ class="pf-v6-c-jump-links__label"
264
+ >Jump to vertical with label example sections</div>
221
265
  </div>
222
- <ul class="pf-v6-c-jump-links__list" role="list">
266
+ <ul
267
+ class="pf-v6-c-jump-links__list"
268
+ role="list"
269
+ aria-labelledby="vertical-with-label-header"
270
+ >
223
271
  <li class="pf-v6-c-jump-links__item">
224
272
  <span class="pf-v6-c-jump-links__link">
225
273
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -229,7 +277,7 @@ cssPrefix: pf-v6-c-jump-links
229
277
  </a>
230
278
  </span>
231
279
  </li>
232
- <li class="pf-v6-c-jump-links__item pf-m-current">
280
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
233
281
  <span class="pf-v6-c-jump-links__link">
234
282
  <a class="pf-v6-c-button pf-m-link" href="#">
235
283
  <span class="pf-v6-c-button__text">
@@ -273,12 +321,24 @@ cssPrefix: pf-v6-c-jump-links
273
321
  ### Vertical with inactive subsections
274
322
 
275
323
  ```html
276
- <nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
277
- <div class="pf-v6-c-jump-links__header">
278
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
324
+ <nav
325
+ class="pf-v6-c-jump-links pf-m-vertical"
326
+ aria-label="Vertical with inactive subsections example"
327
+ >
328
+ <div
329
+ class="pf-v6-c-jump-links__header"
330
+ id="vertical-with-inactive-subsections-header"
331
+ >
332
+ <div
333
+ class="pf-v6-c-jump-links__label"
334
+ >Jump to vertical with inactive subsections example sections</div>
279
335
  </div>
280
- <ul class="pf-v6-c-jump-links__list" role="list">
281
- <li class="pf-v6-c-jump-links__item pf-m-current">
336
+ <ul
337
+ class="pf-v6-c-jump-links__list"
338
+ role="list"
339
+ aria-labelledby="vertical-with-inactive-subsections-header"
340
+ >
341
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
282
342
  <span class="pf-v6-c-jump-links__link">
283
343
  <a class="pf-v6-c-button pf-m-link" href="#">
284
344
  <span class="pf-v6-c-button__text">
@@ -304,7 +364,11 @@ cssPrefix: pf-v6-c-jump-links
304
364
  </span>
305
365
  </a>
306
366
  </span>
307
- <ul class="pf-v6-c-jump-links__list" role="list">
367
+ <ul
368
+ class="pf-v6-c-jump-links__list"
369
+ role="list"
370
+ aria-label="Second inactive subsection"
371
+ >
308
372
  <li class="pf-v6-c-jump-links__item">
309
373
  <span class="pf-v6-c-jump-links__link">
310
374
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -351,11 +415,23 @@ cssPrefix: pf-v6-c-jump-links
351
415
  ### Vertical with active subsections
352
416
 
353
417
  ```html
354
- <nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
355
- <div class="pf-v6-c-jump-links__header">
356
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
418
+ <nav
419
+ class="pf-v6-c-jump-links pf-m-vertical"
420
+ aria-label="Vertical with active subsections example"
421
+ >
422
+ <div
423
+ class="pf-v6-c-jump-links__header"
424
+ id="vertical-with-active-subsections-header"
425
+ >
426
+ <div
427
+ class="pf-v6-c-jump-links__label"
428
+ >Jump to vertical with active subsections example sections</div>
357
429
  </div>
358
- <ul class="pf-v6-c-jump-links__list" role="list">
430
+ <ul
431
+ class="pf-v6-c-jump-links__list"
432
+ role="list"
433
+ aria-labelledby="vertical-with-active-subsections-header"
434
+ >
359
435
  <li class="pf-v6-c-jump-links__item">
360
436
  <span class="pf-v6-c-jump-links__link">
361
437
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -382,8 +458,15 @@ cssPrefix: pf-v6-c-jump-links
382
458
  </span>
383
459
  </a>
384
460
  </span>
385
- <ul class="pf-v6-c-jump-links__list" role="list">
386
- <li class="pf-v6-c-jump-links__item pf-m-current">
461
+ <ul
462
+ class="pf-v6-c-jump-links__list"
463
+ role="list"
464
+ aria-label="Second active subsection"
465
+ >
466
+ <li
467
+ class="pf-v6-c-jump-links__item pf-m-current"
468
+ aria-current="location"
469
+ >
387
470
  <span class="pf-v6-c-jump-links__link">
388
471
  <a class="pf-v6-c-button pf-m-link" href="#">
389
472
  <span class="pf-v6-c-button__text">
@@ -431,26 +514,26 @@ cssPrefix: pf-v6-c-jump-links
431
514
  ```html
432
515
  <nav
433
516
  class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
434
- aria-label="Jump to section"
517
+ aria-label="Expandable example"
435
518
  >
436
- <div class="pf-v6-c-jump-links__header">
519
+ <div class="pf-v6-c-jump-links__header" id="expandable-header-header">
437
520
  <div class="pf-v6-c-jump-links__toggle">
438
- <button
439
- class="pf-v6-c-button pf-m-plain"
440
- type="button"
441
- aria-label="Toggle jump links"
442
- >
521
+ <button class="pf-v6-c-button pf-m-plain" type="button">
443
522
  <span class="pf-v6-c-button__icon pf-m-start">
444
523
  <span class="pf-v6-c-jump-links__toggle-icon">
445
524
  <i class="fas fa-angle-right" aria-hidden="true"></i>
446
525
  </span>
447
526
  </span>
448
- <span class="pf-v6-c-button__text">Jump to section</span>
527
+ <span class="pf-v6-c-button__text">Jump to expandable example sections</span>
449
528
  </button>
450
529
  </div>
451
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
530
+ <div class="pf-v6-c-jump-links__label">Jump to expandable example sections</div>
452
531
  </div>
453
- <ul class="pf-v6-c-jump-links__list" role="list">
532
+ <ul
533
+ class="pf-v6-c-jump-links__list"
534
+ role="list"
535
+ aria-labelledby="expandable-header-header"
536
+ >
454
537
  <li class="pf-v6-c-jump-links__item">
455
538
  <span class="pf-v6-c-jump-links__link">
456
539
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -460,7 +543,7 @@ cssPrefix: pf-v6-c-jump-links
460
543
  </a>
461
544
  </span>
462
545
  </li>
463
- <li class="pf-v6-c-jump-links__item pf-m-current">
546
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
464
547
  <span class="pf-v6-c-jump-links__link">
465
548
  <a class="pf-v6-c-button pf-m-link" href="#">
466
549
  <span class="pf-v6-c-button__text">
@@ -506,27 +589,26 @@ cssPrefix: pf-v6-c-jump-links
506
589
  ```html
507
590
  <nav
508
591
  class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable pf-m-expanded"
509
- aria-label="Jump to section"
592
+ aria-label="Expanded example"
510
593
  >
511
- <div class="pf-v6-c-jump-links__header">
594
+ <div class="pf-v6-c-jump-links__header" id="expanded-header">
512
595
  <div class="pf-v6-c-jump-links__toggle">
513
- <button
514
- class="pf-v6-c-button pf-m-plain"
515
- type="button"
516
- aria-expanded
517
- aria-label="Toggle jump links"
518
- >
596
+ <button class="pf-v6-c-button pf-m-plain" type="button">
519
597
  <span class="pf-v6-c-button__icon pf-m-start">
520
598
  <span class="pf-v6-c-jump-links__toggle-icon">
521
599
  <i class="fas fa-angle-right" aria-hidden="true"></i>
522
600
  </span>
523
601
  </span>
524
- <span class="pf-v6-c-button__text">Jump to section</span>
602
+ <span class="pf-v6-c-button__text">Jump to expanded example sections</span>
525
603
  </button>
526
604
  </div>
527
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
605
+ <div class="pf-v6-c-jump-links__label">Jump to expanded example sections</div>
528
606
  </div>
529
- <ul class="pf-v6-c-jump-links__list" role="list">
607
+ <ul
608
+ class="pf-v6-c-jump-links__list"
609
+ role="list"
610
+ aria-labelledby="expanded-header"
611
+ >
530
612
  <li class="pf-v6-c-jump-links__item">
531
613
  <span class="pf-v6-c-jump-links__link">
532
614
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -536,7 +618,7 @@ cssPrefix: pf-v6-c-jump-links
536
618
  </a>
537
619
  </span>
538
620
  </li>
539
- <li class="pf-v6-c-jump-links__item pf-m-current">
621
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
540
622
  <span class="pf-v6-c-jump-links__link">
541
623
  <a class="pf-v6-c-button pf-m-link" href="#">
542
624
  <span class="pf-v6-c-button__text">
@@ -582,26 +664,30 @@ cssPrefix: pf-v6-c-jump-links
582
664
  ```html
583
665
  <nav
584
666
  class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
585
- aria-label="Jump to section"
667
+ aria-label="Expandable responsive"
586
668
  >
587
- <div class="pf-v6-c-jump-links__header">
669
+ <div class="pf-v6-c-jump-links__header" id="expandable-responsive-header">
588
670
  <div class="pf-v6-c-jump-links__toggle">
589
- <button
590
- class="pf-v6-c-button pf-m-plain"
591
- type="button"
592
- aria-label="Toggle jump links"
593
- >
671
+ <button class="pf-v6-c-button pf-m-plain" type="button">
594
672
  <span class="pf-v6-c-button__icon pf-m-start">
595
673
  <span class="pf-v6-c-jump-links__toggle-icon">
596
674
  <i class="fas fa-angle-right" aria-hidden="true"></i>
597
675
  </span>
598
676
  </span>
599
- <span class="pf-v6-c-button__text">Jump to section</span>
677
+ <span
678
+ class="pf-v6-c-button__text"
679
+ >Jump to expandable responsive example sections</span>
600
680
  </button>
601
681
  </div>
602
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
682
+ <div
683
+ class="pf-v6-c-jump-links__label"
684
+ >Jump to expandable responsive example sections</div>
603
685
  </div>
604
- <ul class="pf-v6-c-jump-links__list" role="list">
686
+ <ul
687
+ class="pf-v6-c-jump-links__list"
688
+ role="list"
689
+ aria-labelledby="expandable-responsive-header"
690
+ >
605
691
  <li class="pf-v6-c-jump-links__item">
606
692
  <span class="pf-v6-c-jump-links__link">
607
693
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -611,7 +697,7 @@ cssPrefix: pf-v6-c-jump-links
611
697
  </a>
612
698
  </span>
613
699
  </li>
614
- <li class="pf-v6-c-jump-links__item pf-m-current">
700
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
615
701
  <span class="pf-v6-c-jump-links__link">
616
702
  <a class="pf-v6-c-button pf-m-link" href="#">
617
703
  <span class="pf-v6-c-button__text">
@@ -657,14 +743,11 @@ cssPrefix: pf-v6-c-jump-links
657
743
  ```html
658
744
  <nav
659
745
  class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
746
+ aria-label="Expandable responsive with no label"
660
747
  >
661
748
  <div class="pf-v6-c-jump-links__header">
662
749
  <div class="pf-v6-c-jump-links__toggle">
663
- <button
664
- class="pf-v6-c-button pf-m-plain"
665
- type="button"
666
- aria-label="Toggle jump links"
667
- >
750
+ <button class="pf-v6-c-button pf-m-plain" type="button">
668
751
  <span class="pf-v6-c-button__icon pf-m-start">
669
752
  <span class="pf-v6-c-jump-links__toggle-icon">
670
753
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -674,7 +757,11 @@ cssPrefix: pf-v6-c-jump-links
674
757
  </button>
675
758
  </div>
676
759
  </div>
677
- <ul class="pf-v6-c-jump-links__list" role="list">
760
+ <ul
761
+ class="pf-v6-c-jump-links__list"
762
+ role="list"
763
+ aria-label="Expandable responsive with no label example"
764
+ >
678
765
  <li class="pf-v6-c-jump-links__item">
679
766
  <span class="pf-v6-c-jump-links__link">
680
767
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -684,7 +771,7 @@ cssPrefix: pf-v6-c-jump-links
684
771
  </a>
685
772
  </span>
686
773
  </li>
687
- <li class="pf-v6-c-jump-links__item pf-m-current">
774
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
688
775
  <span class="pf-v6-c-jump-links__link">
689
776
  <a class="pf-v6-c-button pf-m-link" href="#">
690
777
  <span class="pf-v6-c-button__text">
package/docs/components/Label/examples/Label.md CHANGED
@@ -6930,7 +6930,7 @@ The contents of a label group can be modified by removing labels or adding new o
6930
6930
  </div>
6931
6931
  <div class="pf-v6-c-label-group__close">
6932
6932
  <button
6933
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
6933
+ class="pf-v6-c-button pf-m-small pf-m-plain"
6934
6934
  type="button"
6935
6935
  aria-labelledby="label-group-category-removable-button label-group-category-removable-label"
6936
6936
  aria-label="Close label group"
@@ -7208,7 +7208,7 @@ The contents of a label group can be modified by removing labels or adding new o
7208
7208
  </div>
7209
7209
  <div class="pf-v6-c-label-group__close">
7210
7210
  <button
7211
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
7211
+ class="pf-v6-c-button pf-m-small pf-m-plain"
7212
7212
  type="button"
7213
7213
  aria-labelledby="label-group-vertical-category-removable-button label-group-vertical-category-removable-label"
7214
7214
  aria-label="Close label group"