@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/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -291,7 +291,10 @@ cssPrefix: pf-d-description-list
291
291
  </div>
292
292
  <hr class="pf-v6-c-divider" />
293
293
  <div class="pf-v6-c-card__body">
294
- <dl class="pf-v6-c-description-list pf-m-auto-fit">
294
+ <dl
295
+ class="pf-v6-c-description-list pf-m-auto-fit"
296
+ aria-label="Details"
297
+ >
295
298
  <div class="pf-v6-c-description-list__group">
296
299
  <dt class="pf-v6-c-description-list__term">
297
300
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -804,6 +807,7 @@ cssPrefix: pf-d-description-list
804
807
  <div class="pf-v6-c-tab-content__body">
805
808
  <dl
806
809
  class="pf-v6-c-description-list pf-m-fill-columns pf-m-2-col pf-m-compact"
810
+ aria-label="Overview"
807
811
  >
808
812
  <div class="pf-v6-c-description-list__group">
809
813
  <dt class="pf-v6-c-description-list__term">
@@ -1334,7 +1338,10 @@ cssPrefix: pf-d-description-list
1334
1338
  <h2 class="pf-v6-c-title pf-m-lg">Service overview</h2>
1335
1339
  </div>
1336
1340
  <div class="pf-v6-l-grid__item">
1337
- <dl class="pf-v6-c-description-list pf-m-2-col-on-xl">
1341
+ <dl
1342
+ class="pf-v6-c-description-list pf-m-2-col-on-xl"
1343
+ aria-label="Service overview"
1344
+ >
1338
1345
  <div class="pf-v6-c-description-list__group">
1339
1346
  <dt class="pf-v6-c-description-list__term">
1340
1347
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1433,7 +1440,10 @@ cssPrefix: pf-d-description-list
1433
1440
  <h2 class="pf-v6-c-title pf-m-lg">Service routing</h2>
1434
1441
  </div>
1435
1442
  <div class="pf-v6-l-grid__item">
1436
- <dl class="pf-v6-c-description-list">
1443
+ <dl
1444
+ class="pf-v6-c-description-list"
1445
+ aria-label="Service routing"
1446
+ >
1437
1447
  <div class="pf-v6-c-description-list__group">
1438
1448
  <dt class="pf-v6-c-description-list__term">
1439
1449
  <span
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -1435,7 +1435,6 @@ wrapperTag: div
1435
1435
  <button
1436
1436
  class="pf-v6-c-button pf-m-plain"
1437
1437
  type="button"
1438
- aria-label="Toggle jump links"
1439
1438
  >
1440
1439
  <span class="pf-v6-c-button__icon pf-m-start">
1441
1440
  <span class="pf-v6-c-jump-links__toggle-icon">
@@ -1857,7 +1856,6 @@ wrapperTag: div
1857
1856
  <button
1858
1857
  class="pf-v6-c-button pf-m-plain"
1859
1858
  type="button"
1860
- aria-label="Toggle jump links"
1861
1859
  >
1862
1860
  <span class="pf-v6-c-button__icon pf-m-start">
1863
1861
  <span class="pf-v6-c-jump-links__toggle-icon">
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -9,7 +9,31 @@ subsection: forms
9
9
  ```html
10
10
  <form class="pf-v6-c-form" novalidate>
11
11
  <div class="pf-v6-c-form__group">
12
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-name">
12
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-title">
13
+ <span class="pf-v6-c-form__label-text">Title</span></label>
14
+ </div>
15
+ <div class="pf-v6-c-form__group-control">
16
+ <span class="pf-v6-c-form-control pf-m-placeholder">
17
+ <select id="form-demo-basic-title" name="form-demo-basic-title">
18
+ <option value selected>Selectable one</option>
19
+ <option value="Mr">Mr</option>
20
+ <option value="Miss">Miss</option>
21
+ <option value="Mrs">Mrs</option>
22
+ <option value="Ms">Ms</option>
23
+ <option value="Dr">Dr</option>
24
+ <option value="Dr" disabled>Disabled option</option>
25
+ <option value="Other">Other</option>
26
+ </select>
27
+ <span class="pf-v6-c-form-control__utilities">
28
+ <span class="pf-v6-c-form-control__toggle-icon">
29
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
30
+ </span>
31
+ </span>
32
+ </span>
33
+ </div>
34
+ </div>
35
+ <div class="pf-v6-c-form__group">
36
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-name">
13
37
  <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
14
38
  </div>
15
39
  <div class="pf-v6-c-form__group-control">
@@ -17,18 +41,18 @@ subsection: forms
17
41
  <input
18
42
  required
19
43
  type="text"
20
- id="-name"
21
- name="-name"
22
- aria-describedby="-name-helper"
44
+ id="form-demo-basic-name"
45
+ name="form-demo-basic-name"
46
+ aria-describedby="form-demo-basic-name-helper"
23
47
  />
24
48
  </span>
25
49
 
26
50
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
27
51
  <div class="pf-v6-c-helper-text">
28
- <div class="pf-v6-c-helper-text__item" id="-name-helper">
29
- <span class="pf-v6-c-helper-text__item-icon">
30
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
31
- </span>
52
+ <div
53
+ class="pf-v6-c-helper-text__item"
54
+ id="form-demo-basic-name-helper"
55
+ >
32
56
  <span
33
57
  class="pf-v6-c-helper-text__item-text"
34
58
  >Include your middle name if you have one.</span>
@@ -38,17 +62,21 @@ subsection: forms
38
62
  </div>
39
63
  </div>
40
64
  <div class="pf-v6-c-form__group">
41
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-email">
65
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-email">
42
66
  <span class="pf-v6-c-form__label-text">Email</span></label>
43
67
  </div>
44
68
  <div class="pf-v6-c-form__group-control">
45
69
  <span class="pf-v6-c-form-control">
46
- <input type="email" id="-email" name="-email" />
70
+ <input
71
+ type="email"
72
+ id="form-demo-basic-email"
73
+ name="form-demo-basic-email"
74
+ />
47
75
  </span>
48
76
  </div>
49
77
  </div>
50
78
  <div class="pf-v6-c-form__group">
51
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-phone">
79
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-phone">
52
80
  <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
53
81
  <span
54
82
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
@@ -56,7 +84,7 @@ subsection: forms
56
84
  role="button"
57
85
  tabindex="0"
58
86
  aria-label="More information for phone number field"
59
- aria-describedby="-phone"
87
+ aria-describedby="form-demo-basic-phone"
60
88
  >
61
89
  <span class="pf-v6-c-button__icon">
62
90
  <svg
@@ -81,8 +109,8 @@ subsection: forms
81
109
  required
82
110
  type="tel"
83
111
  placeholder="555-555-5555"
84
- id="-phone"
85
- name="-phone"
112
+ id="form-demo-basic-phone"
113
+ name="form-demo-basic-phone"
86
114
  />
87
115
  </span>
88
116
  </div>
@@ -90,9 +118,12 @@ subsection: forms
90
118
  <div
91
119
  class="pf-v6-c-form__group"
92
120
  role="group"
93
- aria-labelledby="form-demo-basic-contact-legend"
121
+ aria-labelledby="form-demo-basicform-demo-basic-contact-legend"
94
122
  >
95
- <div class="pf-v6-c-form__group-label" id="form-demo-basic-contact-legend"><span class="pf-v6-c-form__label">
123
+ <div
124
+ class="pf-v6-c-form__group-label"
125
+ id="form-demo-basicform-demo-basic-contact-legend"
126
+ ><span class="pf-v6-c-form__label">
96
127
  <span class="pf-v6-c-form__label-text">How can we contact you?</span></span>
97
128
  </div>
98
129
  <div class="pf-v6-c-form__group-control pf-m-inline">
@@ -100,42 +131,51 @@ subsection: forms
100
131
  <input
101
132
  class="pf-v6-c-check__input"
102
133
  type="checkbox"
103
- id="-contact-check-1"
104
- name="-contact-check-1"
134
+ id="form-demo-basic-contact-check-1"
135
+ name="form-demo-basic-contact-check-1"
105
136
  />
106
137
 
107
- <label class="pf-v6-c-check__label" for="-contact-check-1">Email</label>
138
+ <label
139
+ class="pf-v6-c-check__label"
140
+ for="form-demo-basic-contact-check-1"
141
+ >Email</label>
108
142
  </div>
109
143
  <div class="pf-v6-c-check">
110
144
  <input
111
145
  class="pf-v6-c-check__input"
112
146
  type="checkbox"
113
- id="-contact-check-2"
114
- name="-contact-check-2"
147
+ id="form-demo-basic-contact-check-2"
148
+ name="form-demo-basic-contact-check-2"
115
149
  />
116
150
 
117
- <label class="pf-v6-c-check__label" for="-contact-check-2">Phone</label>
151
+ <label
152
+ class="pf-v6-c-check__label"
153
+ for="form-demo-basic-contact-check-2"
154
+ >Phone</label>
118
155
  </div>
119
156
  <div class="pf-v6-c-check">
120
157
  <input
121
158
  class="pf-v6-c-check__input"
122
159
  type="checkbox"
123
- id="-contact-check-3"
124
- name="-contact-check-3"
160
+ id="form-demo-basic-contact-check-3"
161
+ name="form-demo-basic-contact-check-3"
125
162
  />
126
163
 
127
- <label class="pf-v6-c-check__label" for="-contact-check-3">Mail</label>
164
+ <label
165
+ class="pf-v6-c-check__label"
166
+ for="form-demo-basic-contact-check-3"
167
+ >Mail</label>
128
168
  </div>
129
169
  </div>
130
170
  </div>
131
171
  <div
132
172
  class="pf-v6-c-form__group"
133
173
  role="radiogroup"
134
- aria-labelledby="form-demo-basic-time-zone-legend"
174
+ aria-labelledby="form-demo-basicform-demo-basic-time-zone-legend"
135
175
  >
136
176
  <div
137
177
  class="pf-v6-c-form__group-label"
138
- id="form-demo-basic-time-zone-legend"
178
+ id="form-demo-basicform-demo-basic-time-zone-legend"
139
179
  ><span class="pf-v6-c-form__label">
140
180
  <span class="pf-v6-c-form__label-text">Time zone</span></span>
141
181
  </div>
@@ -144,31 +184,40 @@ subsection: forms
144
184
  <input
145
185
  class="pf-v6-c-radio__input"
146
186
  type="radio"
147
- id="-time-zone-radio-1"
148
- name="-time-zone-radio"
187
+ id="form-demo-basic-time-zone-radio-1"
188
+ name="form-demo-basic-time-zone-radio"
149
189
  />
150
190
 
151
- <label class="pf-v6-c-radio__label" for="-time-zone-radio-1">Eastern</label>
191
+ <label
192
+ class="pf-v6-c-radio__label"
193
+ for="form-demo-basic-time-zone-radio-1"
194
+ >Eastern</label>
152
195
  </div>
153
196
  <div class="pf-v6-c-radio">
154
197
  <input
155
198
  class="pf-v6-c-radio__input"
156
199
  type="radio"
157
- id="-time-zone-radio-2"
158
- name="-time-zone-radio"
200
+ id="form-demo-basic-time-zone-radio-2"
201
+ name="form-demo-basic-time-zone-radio"
159
202
  />
160
203
 
161
- <label class="pf-v6-c-radio__label" for="-time-zone-radio-2">Central</label>
204
+ <label
205
+ class="pf-v6-c-radio__label"
206
+ for="form-demo-basic-time-zone-radio-2"
207
+ >Central</label>
162
208
  </div>
163
209
  <div class="pf-v6-c-radio">
164
210
  <input
165
211
  class="pf-v6-c-radio__input"
166
212
  type="radio"
167
- id="-time-zone-radio-3"
168
- name="-time-zone-radio"
213
+ id="form-demo-basic-time-zone-radio-3"
214
+ name="form-demo-basic-time-zone-radio"
169
215
  />
170
216
 
171
- <label class="pf-v6-c-radio__label" for="-time-zone-radio-3">Pacific</label>
217
+ <label
218
+ class="pf-v6-c-radio__label"
219
+ for="form-demo-basic-time-zone-radio-3"
220
+ >Pacific</label>
172
221
  </div>
173
222
  </div>
174
223
  </div>
@@ -212,9 +261,6 @@ subsection: forms
212
261
  class="pf-v6-c-helper-text__item"
213
262
  id="form-demo-horizontal-name-helper"
214
263
  >
215
- <span class="pf-v6-c-helper-text__item-icon">
216
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
217
- </span>
218
264
  <span
219
265
  class="pf-v6-c-helper-text__item-text"
220
266
  >Include your middle name if you have one.</span>
@@ -368,9 +414,6 @@ subsection: forms
368
414
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
369
415
  <div class="pf-v6-c-helper-text">
370
416
  <div class="pf-v6-c-helper-text__item" id="-helper">
371
- <span class="pf-v6-c-helper-text__item-icon">
372
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
373
- </span>
374
417
  <span
375
418
  class="pf-v6-c-helper-text__item-text"
376
419
  >Include your middle name if you have one.</span>
@@ -1166,7 +1209,7 @@ subsection: forms
1166
1209
  <div class="pf-v6-c-form__field-group-toggle">
1167
1210
  <div class="pf-v6-c-form__field-group-toggle-button">
1168
1211
  <button
1169
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
1212
+ class="pf-v6-c-button pf-m-plain"
1170
1213
  id="form-demo-sections-complex-form-node-affinity-toggle"
1171
1214
  type="button"
1172
1215
  aria-expanded="true"
@@ -1240,7 +1283,7 @@ subsection: forms
1240
1283
  <div class="pf-v6-c-form__field-group-toggle">
1241
1284
  <div class="pf-v6-c-form__field-group-toggle-button">
1242
1285
  <button
1243
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
1286
+ class="pf-v6-c-button pf-m-plain"
1244
1287
  id="form-demo-sections-complex-form-node-affinity-required-2-toggle"
1245
1288
  type="button"
1246
1289
  aria-expanded="true"
@@ -1277,7 +1320,7 @@ subsection: forms
1277
1320
  <div class="pf-v6-c-form__group">
1278
1321
  <div class="pf-v6-c-form__group-label"><label
1279
1322
  class="pf-v6-c-form__label"
1280
- id="-node-selector-terms-title"
1323
+ id="form-demo-sections-complex-form-node-selector-terms-title"
1281
1324
  >
1282
1325
  <span class="pf-v6-c-form__label-text">Node selector terms</span>&nbsp;<span
1283
1326
  class="pf-v6-c-form__label-required"
@@ -1291,9 +1334,9 @@ subsection: forms
1291
1334
  <input
1292
1335
  required
1293
1336
  type="text"
1294
- id="-node-selector-terms-input-1"
1295
- name="-node-selector-terms-input-1"
1296
- aria-labelledby="-node-selector-terms -node-selector-terms-title"
1337
+ id="form-demo-sections-complex-form-node-selector-terms-input-1"
1338
+ name="form-demo-sections-complex-form-node-selector-terms-input-1"
1339
+ aria-labelledby="form-demo-sections-complex-form-node-selector-terms form-demo-sections-complex-form-node-selector-terms-title"
1297
1340
  />
1298
1341
  </span>
1299
1342
  </div>
@@ -1373,7 +1416,7 @@ subsection: forms
1373
1416
  <div class="pf-v6-c-form__field-group-toggle">
1374
1417
  <div class="pf-v6-c-form__field-group-toggle-button">
1375
1418
  <button
1376
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
1419
+ class="pf-v6-c-button pf-m-plain"
1377
1420
  id="form-demo-sections-complex-form-routing-toggle"
1378
1421
  type="button"
1379
1422
  aria-expanded="true"
@@ -1424,9 +1467,6 @@ subsection: forms
1424
1467
  class="pf-v6-c-helper-text__item"
1425
1468
  id="form-demo-sections-complex-form-routing-create-route-helper"
1426
1469
  >
1427
- <span class="pf-v6-c-helper-text__item-icon">
1428
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1429
- </span>
1430
1470
  <span
1431
1471
  class="pf-v6-c-helper-text__item-text"
1432
1472
  >Exposes your appplication at a public URL.</span>
@@ -1457,9 +1497,6 @@ subsection: forms
1457
1497
  class="pf-v6-c-helper-text__item"
1458
1498
  id="form-demo-sections-complex-form-routing-hostname-helper"
1459
1499
  >
1460
- <span class="pf-v6-c-helper-text__item-icon">
1461
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1462
- </span>
1463
1500
  <span
1464
1501
  class="pf-v6-c-helper-text__item-text"
1465
1502
  >Public hostname for the route. If not specified, a hostname is generated.</span>
@@ -1492,9 +1529,6 @@ subsection: forms
1492
1529
  class="pf-v6-c-helper-text__item"
1493
1530
  id="form-demo-sections-complex-form-routing-path-helper"
1494
1531
  >
1495
- <span class="pf-v6-c-helper-text__item-icon">
1496
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1497
- </span>
1498
1532
  <span
1499
1533
  class="pf-v6-c-helper-text__item-text"
1500
1534
  >Path that the router watches to route traffic to the service.</span>
@@ -1537,9 +1571,6 @@ subsection: forms
1537
1571
  class="pf-v6-c-helper-text__item"
1538
1572
  id="form-demo-sections-complex-form-routing-security-helper"
1539
1573
  >
1540
- <span class="pf-v6-c-helper-text__item-icon">
1541
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1542
- </span>
1543
1574
  <span
1544
1575
  class="pf-v6-c-helper-text__item-text"
1545
1576
  >Routes can be secured using several TLS termination types for serving certificates.</span>
@@ -1559,7 +1590,7 @@ subsection: forms
1559
1590
  <div class="pf-v6-c-form__field-group-toggle">
1560
1591
  <div class="pf-v6-c-form__field-group-toggle-button">
1561
1592
  <button
1562
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
1593
+ class="pf-v6-c-button pf-m-plain"
1563
1594
  id="form-demo-sections-complex-form-health-checks-toggle"
1564
1595
  type="button"
1565
1596
  aria-expanded="true"
package/docs/demos/HelperText/examples/HelperText.md CHANGED
@@ -63,9 +63,13 @@ section: components
63
63
  >
64
64
  <div class="pf-v6-c-helper-text">
65
65
  <div class="pf-v6-c-helper-text__item pf-m-warning">
66
- <span
67
- class="pf-v6-c-helper-text__item-text"
68
- >This is helper text for a warning.</span>
66
+ <span class="pf-v6-c-helper-text__item-icon">
67
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
68
+ </span>
69
+ <span class="pf-v6-c-helper-text__item-text">
70
+ <span class="pf-v6-screen-reader">Warning:</span>
71
+ This is helper text for a warning.
72
+ </span>
69
73
  </div>
70
74
  </div>
71
75
  </div>
@@ -97,32 +101,35 @@ section: components
97
101
  aria-live="polite"
98
102
  id="helper-text-form-address-helper"
99
103
  >
100
- <div class="pf-v6-c-helper-text">
101
- <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
104
+ <ul class="pf-v6-c-helper-text" role="list">
105
+ <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
102
106
  <span class="pf-v6-c-helper-text__item-icon">
103
107
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
104
108
  </span>
105
- <span
106
- class="pf-v6-c-helper-text__item-text"
107
- >This criteria has been met.</span>
108
- </div>
109
- <div class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
109
+ <span class="pf-v6-c-helper-text__item-text">
110
+ <span class="pf-v6-screen-reader">Success:</span>
111
+ This criteria has been met.
112
+ </span>
113
+ </li>
114
+ <li class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
110
115
  <span class="pf-v6-c-helper-text__item-icon">
111
116
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
112
117
  </span>
113
- <span
114
- class="pf-v6-c-helper-text__item-text"
115
- >This criteria has not been met.</span>
116
- </div>
117
- <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
118
+ <span class="pf-v6-c-helper-text__item-text">
119
+ <span class="pf-v6-screen-reader">Error:</span>
120
+ This criteria has not been met.
121
+ </span>
122
+ </li>
123
+ <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
118
124
  <span class="pf-v6-c-helper-text__item-icon">
119
125
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
120
126
  </span>
121
- <span
122
- class="pf-v6-c-helper-text__item-text"
123
- >This criteria has been met.</span>
124
- </div>
125
- </div>
127
+ <span class="pf-v6-c-helper-text__item-text">
128
+ <span class="pf-v6-screen-reader">Success:</span>
129
+ This criteria has been met.
130
+ </span>
131
+ </li>
132
+ </ul>
126
133
  </div>
127
134
  </div>
128
135
  </div>
@@ -156,9 +163,10 @@ section: components
156
163
  <span class="pf-v6-c-helper-text__item-icon">
157
164
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
158
165
  </span>
159
- <span
160
- class="pf-v6-c-helper-text__item-text"
161
- >This is dynamic helper text with an icon showing success.</span>
166
+ <span class="pf-v6-c-helper-text__item-text">
167
+ <span class="pf-v6-screen-reader">Success:</span>
168
+ This is dynamic helper text with an icon showing success.
169
+ </span>
162
170
  </div>
163
171
  </div>
164
172
  </div>
package/docs/demos/JumpLinks/examples/JumpLinks.md CHANGED
@@ -300,7 +300,6 @@ section: components
300
300
  <button
301
301
  class="pf-v6-c-button pf-m-plain"
302
302
  type="button"
303
- aria-label="Toggle jump links"
304
303
  >
305
304
  <span class="pf-v6-c-button__icon pf-m-start">
306
305
  <span class="pf-v6-c-jump-links__toggle-icon">
@@ -734,7 +733,6 @@ section: components
734
733
  <button
735
734
  class="pf-v6-c-button pf-m-plain"
736
735
  type="button"
737
- aria-label="Toggle jump links"
738
736
  >
739
737
  <span class="pf-v6-c-button__icon pf-m-start">
740
738
  <span class="pf-v6-c-jump-links__toggle-icon">
@@ -1168,7 +1166,6 @@ section: components
1168
1166
  <button
1169
1167
  class="pf-v6-c-button pf-m-plain"
1170
1168
  type="button"
1171
- aria-label="Toggle jump links"
1172
1169
  >
1173
1170
  <span class="pf-v6-c-button__icon pf-m-start">
1174
1171
  <span class="pf-v6-c-jump-links__toggle-icon">
@@ -1939,7 +1936,6 @@ section: components
1939
1936
  <button
1940
1937
  class="pf-v6-c-button pf-m-plain"
1941
1938
  type="button"
1942
- aria-label="Toggle jump links"
1943
1939
  >
1944
1940
  <span class="pf-v6-c-button__icon pf-m-start">
1945
1941
  <span class="pf-v6-c-jump-links__toggle-icon">
@@ -2361,7 +2357,6 @@ section: components
2361
2357
  <button
2362
2358
  class="pf-v6-c-button pf-m-plain"
2363
2359
  type="button"
2364
- aria-label="Toggle jump links"
2365
2360
  >
2366
2361
  <span class="pf-v6-c-button__icon pf-m-start">
2367
2362
  <span class="pf-v6-c-jump-links__toggle-icon">
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -788,7 +788,7 @@ section: components
788
788
  >
789
789
  <div class="pf-v6-c-toolbar__item">
790
790
  <button
791
- class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-expanded"
791
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked"
792
792
  type="button"
793
793
  aria-expanded="true"
794
794
  aria-label="Notifications"
@@ -1447,7 +1447,7 @@ section: components
1447
1447
  >
1448
1448
  <div class="pf-v6-c-toolbar__item">
1449
1449
  <button
1450
- class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-expanded"
1450
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked"
1451
1451
  type="button"
1452
1452
  aria-expanded="true"
1453
1453
  aria-label="Unread notifications"
@@ -2109,7 +2109,7 @@ section: components
2109
2109
  >
2110
2110
  <div class="pf-v6-c-toolbar__item">
2111
2111
  <button
2112
- class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-expanded"
2112
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked"
2113
2113
  type="button"
2114
2114
  aria-expanded="true"
2115
2115
  aria-label="Attention notifications"
@@ -2766,7 +2766,7 @@ section: components
2766
2766
  >
2767
2767
  <div class="pf-v6-c-toolbar__item">
2768
2768
  <button
2769
- class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-expanded"
2769
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked"
2770
2770
  type="button"
2771
2771
  aria-expanded="true"
2772
2772
  aria-label="Unread notifications"