@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.61

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 (168) hide show
  1. package/README.md +22 -14
  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/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +42 -4
  59. package/components/Menu/menu.scss +39 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +14 -1
  71. package/components/Panel/panel.scss +14 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1404 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2851 -437
  165. package/patternfly.css +2853 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/docs/components/Form/examples/Form.md CHANGED
@@ -21,7 +21,19 @@ cssPrefix: pf-v6-c-form
21
21
  aria-describedby="form-vertical-name"
22
22
  >
23
23
  <span class="pf-v6-c-button__icon">
24
- <i class="fas fa-question-circle" aria-hidden="true"></i>
24
+ <svg
25
+ class="pf-v6-svg"
26
+ viewBox="0 0 1024 1024"
27
+ fill="currentColor"
28
+ aria-hidden="true"
29
+ role="img"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path
34
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
35
+ />
36
+ </svg>
25
37
  </span>
26
38
  </span></span>
27
39
  </div>
@@ -71,7 +83,19 @@ cssPrefix: pf-v6-c-form
71
83
  aria-describedby="form-horizontal-info"
72
84
  >
73
85
  <span class="pf-v6-c-button__icon">
74
- <i class="fas fa-question-circle" aria-hidden="true"></i>
86
+ <svg
87
+ class="pf-v6-svg"
88
+ viewBox="0 0 1024 1024"
89
+ fill="currentColor"
90
+ aria-hidden="true"
91
+ role="img"
92
+ width="1em"
93
+ height="1em"
94
+ >
95
+ <path
96
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
97
+ />
98
+ </svg>
75
99
  </span>
76
100
  </span></span>
77
101
  </div>
@@ -105,7 +129,19 @@ cssPrefix: pf-v6-c-form
105
129
  aria-describedby="form-horizontal-checkbox-legend"
106
130
  >
107
131
  <span class="pf-v6-c-button__icon">
108
- <i class="fas fa-question-circle" aria-hidden="true"></i>
132
+ <svg
133
+ class="pf-v6-svg"
134
+ viewBox="0 0 1024 1024"
135
+ fill="currentColor"
136
+ aria-hidden="true"
137
+ role="img"
138
+ width="1em"
139
+ height="1em"
140
+ >
141
+ <path
142
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
143
+ />
144
+ </svg>
109
145
  </span>
110
146
  </span></span>
111
147
  </div>
@@ -161,7 +197,19 @@ cssPrefix: pf-v6-c-form
161
197
  aria-describedby="form-horizontal-custom-breakpoint-name"
162
198
  >
163
199
  <span class="pf-v6-c-button__icon">
164
- <i class="fas fa-question-circle" aria-hidden="true"></i>
200
+ <svg
201
+ class="pf-v6-svg"
202
+ viewBox="0 0 1024 1024"
203
+ fill="currentColor"
204
+ aria-hidden="true"
205
+ role="img"
206
+ width="1em"
207
+ height="1em"
208
+ >
209
+ <path
210
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
211
+ />
212
+ </svg>
165
213
  </span>
166
214
  </span></span>
167
215
  </div>
@@ -473,7 +521,19 @@ cssPrefix: pf-v6-c-form
473
521
  aria-describedby="form-additional-infoform-additional-info-name"
474
522
  >
475
523
  <span class="pf-v6-c-button__icon">
476
- <i class="fas fa-question-circle" aria-hidden="true"></i>
524
+ <svg
525
+ class="pf-v6-svg"
526
+ viewBox="0 0 1024 1024"
527
+ fill="currentColor"
528
+ aria-hidden="true"
529
+ role="img"
530
+ width="1em"
531
+ height="1em"
532
+ >
533
+ <path
534
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
535
+ />
536
+ </svg>
477
537
  </span>
478
538
  </span></span>
479
539
  </div>
@@ -514,7 +574,19 @@ cssPrefix: pf-v6-c-form
514
574
  aria-describedby="form-additional-info-horizontalform-additional-info-horizontal-name"
515
575
  >
516
576
  <span class="pf-v6-c-button__icon">
517
- <i class="fas fa-question-circle" aria-hidden="true"></i>
577
+ <svg
578
+ class="pf-v6-svg"
579
+ viewBox="0 0 1024 1024"
580
+ fill="currentColor"
581
+ aria-hidden="true"
582
+ role="img"
583
+ width="1em"
584
+ height="1em"
585
+ >
586
+ <path
587
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
588
+ />
589
+ </svg>
518
590
  </span>
519
591
  </span></span>
520
592
  </div>
@@ -580,7 +652,7 @@ cssPrefix: pf-v6-c-form
580
652
  </button>
581
653
  </div>
582
654
  </div>
583
- <div class="pf-v6-c-form__field-group-body" hidden>
655
+ <div class="pf-v6-c-form__field-group-body" inert>
584
656
  <div class="pf-v6-c-form__group">
585
657
  <div class="pf-v6-c-form__group-label"><label
586
658
  class="pf-v6-c-form__label"
@@ -596,7 +668,19 @@ cssPrefix: pf-v6-c-form
596
668
  aria-describedby="form-field-group-field-group-label1"
597
669
  >
598
670
  <span class="pf-v6-c-button__icon">
599
- <i class="fas fa-question-circle" aria-hidden="true"></i>
671
+ <svg
672
+ class="pf-v6-svg"
673
+ viewBox="0 0 1024 1024"
674
+ fill="currentColor"
675
+ aria-hidden="true"
676
+ role="img"
677
+ width="1em"
678
+ height="1em"
679
+ >
680
+ <path
681
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
682
+ />
683
+ </svg>
600
684
  </span>
601
685
  </span></span>
602
686
  </div>
@@ -626,7 +710,19 @@ cssPrefix: pf-v6-c-form
626
710
  aria-describedby="form-field-group-field-group-label2"
627
711
  >
628
712
  <span class="pf-v6-c-button__icon">
629
- <i class="fas fa-question-circle" aria-hidden="true"></i>
713
+ <svg
714
+ class="pf-v6-svg"
715
+ viewBox="0 0 1024 1024"
716
+ fill="currentColor"
717
+ aria-hidden="true"
718
+ role="img"
719
+ width="1em"
720
+ height="1em"
721
+ >
722
+ <path
723
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
724
+ />
725
+ </svg>
630
726
  </span>
631
727
  </span></span>
632
728
  </div>
@@ -651,8 +747,46 @@ cssPrefix: pf-v6-c-form
651
747
 
652
748
  ```html
653
749
  <form class="pf-v6-c-form" novalidate>
750
+ <div class="pf-v6-c-form__group">
751
+ <div class="pf-v6-c-form__group-label"><label
752
+ class="pf-v6-c-form__label"
753
+ for="form-expandable-field-groups-field1"
754
+ >
755
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
756
+ </div>
757
+ <div class="pf-v6-c-form__group-control">
758
+ <span class="pf-v6-c-form-control pf-m-required">
759
+ <input
760
+ required
761
+ type="text"
762
+ id="form-expandable-field-groups-field1"
763
+ name="form-expandable-field-groups-field1"
764
+ />
765
+ </span>
766
+ </div>
767
+ </div>
768
+
769
+ <div class="pf-v6-c-form__group">
770
+ <div class="pf-v6-c-form__group-label"><label
771
+ class="pf-v6-c-form__label"
772
+ for="form-expandable-field-groups-field2"
773
+ >
774
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
775
+ </div>
776
+ <div class="pf-v6-c-form__group-control">
777
+ <span class="pf-v6-c-form-control pf-m-required">
778
+ <input
779
+ required
780
+ type="text"
781
+ id="form-expandable-field-groups-field2"
782
+ name="form-expandable-field-groups-field2"
783
+ />
784
+ </span>
785
+ </div>
786
+ </div>
787
+
654
788
  <div
655
- class="pf-v6-c-form__field-group"
789
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
656
790
  role="group"
657
791
  aria-labelledby="form-expandable-field-groups-field-group-1-title"
658
792
  >
@@ -662,6 +796,7 @@ cssPrefix: pf-v6-c-form
662
796
  class="pf-v6-c-button pf-m-plain"
663
797
  id="form-expandable-field-groups-field-group-1-toggle"
664
798
  type="button"
799
+ aria-expanded="true"
665
800
  aria-labelledby="form-expandable-field-groups-field-group-1-title form-expandable-field-groups-field-group-1-toggle"
666
801
  aria-label="Details"
667
802
  >
@@ -691,124 +826,184 @@ cssPrefix: pf-v6-c-form
691
826
  </button>
692
827
  </div>
693
828
  </div>
694
- </div>
695
- <div
696
- class="pf-v6-c-form__field-group pf-m-expanded"
697
- role="group"
698
- aria-labelledby="form-expandable-field-groups-field-group-2-title"
699
- >
700
- <div class="pf-v6-c-form__field-group-toggle">
701
- <div class="pf-v6-c-form__field-group-toggle-button">
702
- <button
703
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
704
- id="form-expandable-field-groups-field-group-2-toggle"
705
- type="button"
706
- aria-expanded="true"
707
- aria-labelledby="form-expandable-field-groups-field-group-2-title form-expandable-field-groups-field-group-2-toggle"
708
- aria-label="Details"
709
- >
710
- <span class="pf-v6-c-button__icon">
711
- <span class="pf-v6-c-form__field-group-toggle-icon">
712
- <i class="fas fa-angle-right" aria-hidden="true"></i>
713
- </span>
714
- </span>
715
- </button>
716
- </div>
717
- </div>
718
- <div class="pf-v6-c-form__field-group-header">
719
- <div class="pf-v6-c-form__field-group-header-main">
720
- <div class="pf-v6-c-form__field-group-header-title">
721
- <div
722
- class="pf-v6-c-form__field-group-header-title-text"
723
- id="form-expandable-field-groups-field-group-2-title"
724
- >Field group 2</div>
725
- </div>
726
- <div
727
- class="pf-v6-c-form__field-group-header-description"
728
- >Field group 2 description text</div>
729
- </div>
730
- </div>
731
829
  <div class="pf-v6-c-form__field-group-body">
732
- <div class="pf-v6-c-form__group">
733
- <div class="pf-v6-c-form__group-label"><label
734
- class="pf-v6-c-form__label"
735
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
736
- >
737
- <span class="pf-v6-c-form__label-text">Label 1</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">
738
- <span
739
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
830
+ <div
831
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
832
+ role="group"
833
+ aria-labelledby="form-expandable-field-groups-nested-field-group-1-title"
834
+ >
835
+ <div class="pf-v6-c-form__field-group-toggle">
836
+ <div class="pf-v6-c-form__field-group-toggle-button">
837
+ <button
838
+ class="pf-v6-c-button pf-m-plain"
839
+ id="form-expandable-field-groups-nested-field-group-1-toggle"
740
840
  type="button"
741
- role="button"
742
- tabindex="0"
743
- aria-label="More information for label 1 field"
744
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
841
+ aria-expanded="true"
842
+ aria-labelledby="form-expandable-field-groups-nested-field-group-1-title form-expandable-field-groups-nested-field-group-1-toggle"
843
+ aria-label="Details"
745
844
  >
746
845
  <span class="pf-v6-c-button__icon">
747
- <i class="fas fa-question-circle" aria-hidden="true"></i>
846
+ <span class="pf-v6-c-form__field-group-toggle-icon">
847
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
848
+ </span>
748
849
  </span>
749
- </span></span>
850
+ </button>
851
+ </div>
750
852
  </div>
751
- <div class="pf-v6-c-form__group-control">
752
- <span class="pf-v6-c-form-control pf-m-required">
753
- <input
754
- required
755
- type="text"
756
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
757
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
758
- />
759
- </span>
853
+ <div class="pf-v6-c-form__field-group-header">
854
+ <div class="pf-v6-c-form__field-group-header-main">
855
+ <div class="pf-v6-c-form__field-group-header-title">
856
+ <div
857
+ class="pf-v6-c-form__field-group-header-title-text"
858
+ id="form-expandable-field-groups-nested-field-group-1-title"
859
+ >Nested field group 1</div>
860
+ </div>
861
+ <div
862
+ class="pf-v6-c-form__field-group-header-description"
863
+ >Nested field group 1 description text</div>
864
+ </div>
865
+ <div class="pf-v6-c-form__field-group-header-actions">
866
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
867
+ <span class="pf-v6-c-button__text">Action</span>
868
+ </button>
869
+ </div>
760
870
  </div>
761
- </div>
762
- <div class="pf-v6-c-form__group">
763
- <div class="pf-v6-c-form__group-label"><label
764
- class="pf-v6-c-form__label"
765
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
766
- >
767
- <span class="pf-v6-c-form__label-text">Label 2</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">
768
- <span
769
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
770
- type="button"
771
- role="button"
772
- tabindex="0"
773
- aria-label="More information for label 2 field"
774
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
775
- >
776
- <span class="pf-v6-c-button__icon">
777
- <i class="fas fa-question-circle" aria-hidden="true"></i>
871
+ <div class="pf-v6-c-form__field-group-body">
872
+ <div class="pf-v6-c-form__group">
873
+ <div class="pf-v6-c-form__group-label"><label
874
+ class="pf-v6-c-form__label"
875
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label1"
876
+ >
877
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
878
+ class="pf-v6-c-form__label-required"
879
+ aria-hidden="true"
880
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
881
+ <span
882
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
883
+ type="button"
884
+ role="button"
885
+ tabindex="0"
886
+ aria-label="More information for label 1 field"
887
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label1"
888
+ >
889
+ <span class="pf-v6-c-button__icon">
890
+ <svg
891
+ class="pf-v6-svg"
892
+ viewBox="0 0 1024 1024"
893
+ fill="currentColor"
894
+ aria-hidden="true"
895
+ role="img"
896
+ width="1em"
897
+ height="1em"
898
+ >
899
+ <path
900
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
901
+ />
902
+ </svg>
903
+ </span>
904
+ </span></span>
905
+ </div>
906
+ <div class="pf-v6-c-form__group-control">
907
+ <span class="pf-v6-c-form-control pf-m-required">
908
+ <input
909
+ required
910
+ type="text"
911
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label1"
912
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label1"
913
+ />
778
914
  </span>
779
- </span></span>
780
- </div>
781
- <div class="pf-v6-c-form__group-control">
782
- <span class="pf-v6-c-form-control pf-m-required">
783
- <input
784
- required
785
- type="text"
786
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
787
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
788
- />
789
- </span>
915
+ </div>
916
+ </div>
917
+ <div class="pf-v6-c-form__group">
918
+ <div class="pf-v6-c-form__group-label"><label
919
+ class="pf-v6-c-form__label"
920
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label2"
921
+ >
922
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
923
+ class="pf-v6-c-form__label-required"
924
+ aria-hidden="true"
925
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
926
+ <span
927
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
928
+ type="button"
929
+ role="button"
930
+ tabindex="0"
931
+ aria-label="More information for label 2 field"
932
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label2"
933
+ >
934
+ <span class="pf-v6-c-button__icon">
935
+ <svg
936
+ class="pf-v6-svg"
937
+ viewBox="0 0 1024 1024"
938
+ fill="currentColor"
939
+ aria-hidden="true"
940
+ role="img"
941
+ width="1em"
942
+ height="1em"
943
+ >
944
+ <path
945
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
946
+ />
947
+ </svg>
948
+ </span>
949
+ </span></span>
950
+ </div>
951
+ <div class="pf-v6-c-form__group-control">
952
+ <span class="pf-v6-c-form-control pf-m-required">
953
+ <input
954
+ required
955
+ type="text"
956
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label2"
957
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label2"
958
+ />
959
+ </span>
960
+ </div>
961
+ </div>
790
962
  </div>
791
963
  </div>
964
+
792
965
  <div
793
- class="pf-v6-c-form__field-group pf-m-expanded"
966
+ class="pf-v6-c-form__field-group pf-m-expandable"
794
967
  role="group"
795
- aria-labelledby="form-expandable-field-groups-field-group-3-title"
968
+ aria-labelledby="form-expandable-field-groups-nested-field-group-2-title"
796
969
  >
970
+ <div class="pf-v6-c-form__field-group-toggle">
971
+ <div class="pf-v6-c-form__field-group-toggle-button">
972
+ <button
973
+ class="pf-v6-c-button pf-m-plain"
974
+ id="form-expandable-field-groups-nested-field-group-2-toggle"
975
+ type="button"
976
+ aria-labelledby="form-expandable-field-groups-nested-field-group-2-title form-expandable-field-groups-nested-field-group-2-toggle"
977
+ aria-label="Details"
978
+ >
979
+ <span class="pf-v6-c-button__icon">
980
+ <span class="pf-v6-c-form__field-group-toggle-icon">
981
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
982
+ </span>
983
+ </span>
984
+ </button>
985
+ </div>
986
+ </div>
797
987
  <div class="pf-v6-c-form__field-group-header">
798
988
  <div class="pf-v6-c-form__field-group-header-main">
799
989
  <div class="pf-v6-c-form__field-group-header-title">
800
990
  <div
801
991
  class="pf-v6-c-form__field-group-header-title-text"
802
- id="form-expandable-field-groups-field-group-3-title"
803
- >Nested field group 3</div>
992
+ id="form-expandable-field-groups-nested-field-group-2-title"
993
+ >Nested field group 2</div>
804
994
  </div>
805
995
  </div>
996
+ <div class="pf-v6-c-form__field-group-header-actions">
997
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
998
+ <span class="pf-v6-c-button__text">Action</span>
999
+ </button>
1000
+ </div>
806
1001
  </div>
807
- <div class="pf-v6-c-form__field-group-body">
1002
+ <div class="pf-v6-c-form__field-group-body" inert>
808
1003
  <div class="pf-v6-c-form__group">
809
1004
  <div class="pf-v6-c-form__group-label"><label
810
1005
  class="pf-v6-c-form__label"
811
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1006
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label1"
812
1007
  >
813
1008
  <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
814
1009
  class="pf-v6-c-form__label-required"
@@ -820,10 +1015,22 @@ cssPrefix: pf-v6-c-form
820
1015
  role="button"
821
1016
  tabindex="0"
822
1017
  aria-label="More information for label 1 field"
823
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1018
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label1"
824
1019
  >
825
1020
  <span class="pf-v6-c-button__icon">
826
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1021
+ <svg
1022
+ class="pf-v6-svg"
1023
+ viewBox="0 0 1024 1024"
1024
+ fill="currentColor"
1025
+ aria-hidden="true"
1026
+ role="img"
1027
+ width="1em"
1028
+ height="1em"
1029
+ >
1030
+ <path
1031
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1032
+ />
1033
+ </svg>
827
1034
  </span>
828
1035
  </span></span>
829
1036
  </div>
@@ -832,8 +1039,8 @@ cssPrefix: pf-v6-c-form
832
1039
  <input
833
1040
  required
834
1041
  type="text"
835
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
836
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1042
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label1"
1043
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label1"
837
1044
  />
838
1045
  </span>
839
1046
  </div>
@@ -841,7 +1048,7 @@ cssPrefix: pf-v6-c-form
841
1048
  <div class="pf-v6-c-form__group">
842
1049
  <div class="pf-v6-c-form__group-label"><label
843
1050
  class="pf-v6-c-form__label"
844
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1051
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label2"
845
1052
  >
846
1053
  <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
847
1054
  class="pf-v6-c-form__label-required"
@@ -853,10 +1060,22 @@ cssPrefix: pf-v6-c-form
853
1060
  role="button"
854
1061
  tabindex="0"
855
1062
  aria-label="More information for label 2 field"
856
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1063
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label2"
857
1064
  >
858
1065
  <span class="pf-v6-c-button__icon">
859
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1066
+ <svg
1067
+ class="pf-v6-svg"
1068
+ viewBox="0 0 1024 1024"
1069
+ fill="currentColor"
1070
+ aria-hidden="true"
1071
+ role="img"
1072
+ width="1em"
1073
+ height="1em"
1074
+ >
1075
+ <path
1076
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1077
+ />
1078
+ </svg>
860
1079
  </span>
861
1080
  </span></span>
862
1081
  </div>
@@ -865,14 +1084,859 @@ cssPrefix: pf-v6-c-form
865
1084
  <input
866
1085
  required
867
1086
  type="text"
868
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
869
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1087
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label2"
1088
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label2"
870
1089
  />
871
1090
  </span>
872
1091
  </div>
873
1092
  </div>
874
1093
  </div>
875
1094
  </div>
1095
+
1096
+ <div
1097
+ class="pf-v6-c-form__field-group pf-m-expandable"
1098
+ role="group"
1099
+ aria-labelledby="form-expandable-field-groups-nested-field-group-3-title"
1100
+ >
1101
+ <div class="pf-v6-c-form__field-group-toggle">
1102
+ <div class="pf-v6-c-form__field-group-toggle-button">
1103
+ <button
1104
+ class="pf-v6-c-button pf-m-plain"
1105
+ id="form-expandable-field-groups-nested-field-group-3-toggle"
1106
+ type="button"
1107
+ aria-labelledby="form-expandable-field-groups-nested-field-group-3-title form-expandable-field-groups-nested-field-group-3-toggle"
1108
+ aria-label="Details"
1109
+ >
1110
+ <span class="pf-v6-c-button__icon">
1111
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1112
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1113
+ </span>
1114
+ </span>
1115
+ </button>
1116
+ </div>
1117
+ </div>
1118
+ <div class="pf-v6-c-form__field-group-header">
1119
+ <div class="pf-v6-c-form__field-group-header-main">
1120
+ <div class="pf-v6-c-form__field-group-header-title">
1121
+ <div
1122
+ class="pf-v6-c-form__field-group-header-title-text"
1123
+ id="form-expandable-field-groups-nested-field-group-3-title"
1124
+ >Nested field group 3</div>
1125
+ </div>
1126
+ <div
1127
+ class="pf-v6-c-form__field-group-header-description"
1128
+ >Nested field group 3 description text</div>
1129
+ </div>
1130
+ <div class="pf-v6-c-form__field-group-header-actions">
1131
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1132
+ <span class="pf-v6-c-button__text">Action</span>
1133
+ </button>
1134
+ </div>
1135
+ </div>
1136
+ <div class="pf-v6-c-form__field-group-body" inert>
1137
+ <div class="pf-v6-c-form__group">
1138
+ <div class="pf-v6-c-form__group-label"><label
1139
+ class="pf-v6-c-form__label"
1140
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label1"
1141
+ >
1142
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1143
+ class="pf-v6-c-form__label-required"
1144
+ aria-hidden="true"
1145
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1146
+ <span
1147
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1148
+ type="button"
1149
+ role="button"
1150
+ tabindex="0"
1151
+ aria-label="More information for label 1 field"
1152
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label1"
1153
+ >
1154
+ <span class="pf-v6-c-button__icon">
1155
+ <svg
1156
+ class="pf-v6-svg"
1157
+ viewBox="0 0 1024 1024"
1158
+ fill="currentColor"
1159
+ aria-hidden="true"
1160
+ role="img"
1161
+ width="1em"
1162
+ height="1em"
1163
+ >
1164
+ <path
1165
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1166
+ />
1167
+ </svg>
1168
+ </span>
1169
+ </span></span>
1170
+ </div>
1171
+ <div class="pf-v6-c-form__group-control">
1172
+ <span class="pf-v6-c-form-control pf-m-required">
1173
+ <input
1174
+ required
1175
+ type="text"
1176
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label1"
1177
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label1"
1178
+ />
1179
+ </span>
1180
+ </div>
1181
+ </div>
1182
+ <div class="pf-v6-c-form__group">
1183
+ <div class="pf-v6-c-form__group-label"><label
1184
+ class="pf-v6-c-form__label"
1185
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label2"
1186
+ >
1187
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1188
+ class="pf-v6-c-form__label-required"
1189
+ aria-hidden="true"
1190
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1191
+ <span
1192
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1193
+ type="button"
1194
+ role="button"
1195
+ tabindex="0"
1196
+ aria-label="More information for label 2 field"
1197
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label2"
1198
+ >
1199
+ <span class="pf-v6-c-button__icon">
1200
+ <svg
1201
+ class="pf-v6-svg"
1202
+ viewBox="0 0 1024 1024"
1203
+ fill="currentColor"
1204
+ aria-hidden="true"
1205
+ role="img"
1206
+ width="1em"
1207
+ height="1em"
1208
+ >
1209
+ <path
1210
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1211
+ />
1212
+ </svg>
1213
+ </span>
1214
+ </span></span>
1215
+ </div>
1216
+ <div class="pf-v6-c-form__group-control">
1217
+ <span class="pf-v6-c-form-control pf-m-required">
1218
+ <input
1219
+ required
1220
+ type="text"
1221
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label2"
1222
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label2"
1223
+ />
1224
+ </span>
1225
+ </div>
1226
+ </div>
1227
+ </div>
1228
+ </div>
1229
+
1230
+ <div class="pf-v6-c-form__group">
1231
+ <div class="pf-v6-c-form__group-label"><label
1232
+ class="pf-v6-c-form__label"
1233
+ for="form-expandable-field-groups-nested-field1"
1234
+ >
1235
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1236
+ </div>
1237
+ <div class="pf-v6-c-form__group-control">
1238
+ <span class="pf-v6-c-form-control pf-m-required">
1239
+ <input
1240
+ required
1241
+ type="text"
1242
+ id="form-expandable-field-groups-nested-field1"
1243
+ name="form-expandable-field-groups-nested-field1"
1244
+ />
1245
+ </span>
1246
+ </div>
1247
+ </div>
1248
+
1249
+ <div class="pf-v6-c-form__group">
1250
+ <div class="pf-v6-c-form__group-label"><label
1251
+ class="pf-v6-c-form__label"
1252
+ for="form-expandable-field-groups-nested-field2"
1253
+ >
1254
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1255
+ </div>
1256
+ <div class="pf-v6-c-form__group-control">
1257
+ <span class="pf-v6-c-form-control pf-m-required">
1258
+ <input
1259
+ required
1260
+ type="text"
1261
+ id="form-expandable-field-groups-nested-field2"
1262
+ name="form-expandable-field-groups-nested-field2"
1263
+ />
1264
+ </span>
1265
+ </div>
1266
+ </div>
1267
+ </div>
1268
+ </div>
1269
+
1270
+ <div
1271
+ class="pf-v6-c-form__field-group pf-m-expandable"
1272
+ role="group"
1273
+ aria-labelledby="form-expandable-field-groups-field-group-2-title"
1274
+ >
1275
+ <div class="pf-v6-c-form__field-group-toggle">
1276
+ <div class="pf-v6-c-form__field-group-toggle-button">
1277
+ <button
1278
+ class="pf-v6-c-button pf-m-plain"
1279
+ id="form-expandable-field-groups-field-group-2-toggle"
1280
+ type="button"
1281
+ aria-labelledby="form-expandable-field-groups-field-group-2-title form-expandable-field-groups-field-group-2-toggle"
1282
+ aria-label="Details"
1283
+ >
1284
+ <span class="pf-v6-c-button__icon">
1285
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1286
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1287
+ </span>
1288
+ </span>
1289
+ </button>
1290
+ </div>
1291
+ </div>
1292
+ <div class="pf-v6-c-form__field-group-header">
1293
+ <div class="pf-v6-c-form__field-group-header-main">
1294
+ <div class="pf-v6-c-form__field-group-header-title">
1295
+ <div
1296
+ class="pf-v6-c-form__field-group-header-title-text"
1297
+ id="form-expandable-field-groups-field-group-2-title"
1298
+ >Field group 2</div>
1299
+ </div>
1300
+ <div
1301
+ class="pf-v6-c-form__field-group-header-description"
1302
+ >Field group 2 description text</div>
1303
+ </div>
1304
+ </div>
1305
+ <div class="pf-v6-c-form__field-group-body" inert>
1306
+ <div class="pf-v6-c-form__group">
1307
+ <div class="pf-v6-c-form__group-label"><label
1308
+ class="pf-v6-c-form__label"
1309
+ for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
1310
+ >
1311
+ <span class="pf-v6-c-form__label-text">Label 1</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">
1312
+ <span
1313
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1314
+ type="button"
1315
+ role="button"
1316
+ tabindex="0"
1317
+ aria-label="More information for label 1 field"
1318
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
1319
+ >
1320
+ <span class="pf-v6-c-button__icon">
1321
+ <svg
1322
+ class="pf-v6-svg"
1323
+ viewBox="0 0 1024 1024"
1324
+ fill="currentColor"
1325
+ aria-hidden="true"
1326
+ role="img"
1327
+ width="1em"
1328
+ height="1em"
1329
+ >
1330
+ <path
1331
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1332
+ />
1333
+ </svg>
1334
+ </span>
1335
+ </span></span>
1336
+ </div>
1337
+ <div class="pf-v6-c-form__group-control">
1338
+ <span class="pf-v6-c-form-control pf-m-required">
1339
+ <input
1340
+ required
1341
+ type="text"
1342
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
1343
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
1344
+ />
1345
+ </span>
1346
+ </div>
1347
+ </div>
1348
+ <div class="pf-v6-c-form__group">
1349
+ <div class="pf-v6-c-form__group-label"><label
1350
+ class="pf-v6-c-form__label"
1351
+ for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
1352
+ >
1353
+ <span class="pf-v6-c-form__label-text">Label 2</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">
1354
+ <span
1355
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1356
+ type="button"
1357
+ role="button"
1358
+ tabindex="0"
1359
+ aria-label="More information for label 2 field"
1360
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
1361
+ >
1362
+ <span class="pf-v6-c-button__icon">
1363
+ <svg
1364
+ class="pf-v6-svg"
1365
+ viewBox="0 0 1024 1024"
1366
+ fill="currentColor"
1367
+ aria-hidden="true"
1368
+ role="img"
1369
+ width="1em"
1370
+ height="1em"
1371
+ >
1372
+ <path
1373
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1374
+ />
1375
+ </svg>
1376
+ </span>
1377
+ </span></span>
1378
+ </div>
1379
+ <div class="pf-v6-c-form__group-control">
1380
+ <span class="pf-v6-c-form-control pf-m-required">
1381
+ <input
1382
+ required
1383
+ type="text"
1384
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
1385
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
1386
+ />
1387
+ </span>
1388
+ </div>
1389
+ </div>
1390
+ <div
1391
+ class="pf-v6-c-form__field-group"
1392
+ role="group"
1393
+ aria-labelledby="form-expandable-field-groups-field-group-3-title"
1394
+ >
1395
+ <div class="pf-v6-c-form__field-group-header">
1396
+ <div class="pf-v6-c-form__field-group-header-main">
1397
+ <div class="pf-v6-c-form__field-group-header-title">
1398
+ <div
1399
+ class="pf-v6-c-form__field-group-header-title-text"
1400
+ id="form-expandable-field-groups-field-group-3-title"
1401
+ >Nested field group 3</div>
1402
+ </div>
1403
+ </div>
1404
+ </div>
1405
+ <div class="pf-v6-c-form__field-group-body" inert>
1406
+ <div class="pf-v6-c-form__group">
1407
+ <div class="pf-v6-c-form__group-label"><label
1408
+ class="pf-v6-c-form__label"
1409
+ for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1410
+ >
1411
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1412
+ class="pf-v6-c-form__label-required"
1413
+ aria-hidden="true"
1414
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1415
+ <span
1416
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1417
+ type="button"
1418
+ role="button"
1419
+ tabindex="0"
1420
+ aria-label="More information for label 1 field"
1421
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1422
+ >
1423
+ <span class="pf-v6-c-button__icon">
1424
+ <svg
1425
+ class="pf-v6-svg"
1426
+ viewBox="0 0 1024 1024"
1427
+ fill="currentColor"
1428
+ aria-hidden="true"
1429
+ role="img"
1430
+ width="1em"
1431
+ height="1em"
1432
+ >
1433
+ <path
1434
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1435
+ />
1436
+ </svg>
1437
+ </span>
1438
+ </span></span>
1439
+ </div>
1440
+ <div class="pf-v6-c-form__group-control">
1441
+ <span class="pf-v6-c-form-control pf-m-required">
1442
+ <input
1443
+ required
1444
+ type="text"
1445
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1446
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1447
+ />
1448
+ </span>
1449
+ </div>
1450
+ </div>
1451
+ <div class="pf-v6-c-form__group">
1452
+ <div class="pf-v6-c-form__group-label"><label
1453
+ class="pf-v6-c-form__label"
1454
+ for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1455
+ >
1456
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1457
+ class="pf-v6-c-form__label-required"
1458
+ aria-hidden="true"
1459
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1460
+ <span
1461
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1462
+ type="button"
1463
+ role="button"
1464
+ tabindex="0"
1465
+ aria-label="More information for label 2 field"
1466
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1467
+ >
1468
+ <span class="pf-v6-c-button__icon">
1469
+ <svg
1470
+ class="pf-v6-svg"
1471
+ viewBox="0 0 1024 1024"
1472
+ fill="currentColor"
1473
+ aria-hidden="true"
1474
+ role="img"
1475
+ width="1em"
1476
+ height="1em"
1477
+ >
1478
+ <path
1479
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1480
+ />
1481
+ </svg>
1482
+ </span>
1483
+ </span></span>
1484
+ </div>
1485
+ <div class="pf-v6-c-form__group-control">
1486
+ <span class="pf-v6-c-form-control pf-m-required">
1487
+ <input
1488
+ required
1489
+ type="text"
1490
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1491
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1492
+ />
1493
+ </span>
1494
+ </div>
1495
+ </div>
1496
+ </div>
1497
+ </div>
1498
+ </div>
1499
+ </div>
1500
+
1501
+ <div
1502
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1503
+ role="group"
1504
+ aria-labelledby="form-expandable-field-groups-field-group-4-title"
1505
+ >
1506
+ <div class="pf-v6-c-form__field-group-toggle">
1507
+ <div class="pf-v6-c-form__field-group-toggle-button">
1508
+ <button
1509
+ class="pf-v6-c-button pf-m-plain"
1510
+ id="form-expandable-field-groups-field-group-4-toggle"
1511
+ type="button"
1512
+ aria-expanded="true"
1513
+ aria-labelledby="form-expandable-field-groups-field-group-4-title form-expandable-field-groups-field-group-4-toggle"
1514
+ aria-label="Details"
1515
+ >
1516
+ <span class="pf-v6-c-button__icon">
1517
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1518
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1519
+ </span>
1520
+ </span>
1521
+ </button>
1522
+ </div>
1523
+ </div>
1524
+ <div class="pf-v6-c-form__field-group-header">
1525
+ <div class="pf-v6-c-form__field-group-header-main">
1526
+ <div class="pf-v6-c-form__field-group-header-title">
1527
+ <div
1528
+ class="pf-v6-c-form__field-group-header-title-text"
1529
+ id="form-expandable-field-groups-field-group-4-title"
1530
+ >Field group 3</div>
1531
+ </div>
1532
+ <div
1533
+ class="pf-v6-c-form__field-group-header-description"
1534
+ >Field group 3 description text</div>
1535
+ </div>
1536
+ </div>
1537
+ <div class="pf-v6-c-form__field-group-body">
1538
+ <div class="pf-v6-c-form__group">
1539
+ <div class="pf-v6-c-form__group-label"><label
1540
+ class="pf-v6-c-form__label"
1541
+ for="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field1"
1542
+ >
1543
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1544
+ </div>
1545
+ <div class="pf-v6-c-form__group-control">
1546
+ <span class="pf-v6-c-form-control pf-m-required">
1547
+ <input
1548
+ required
1549
+ type="text"
1550
+ id="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field1"
1551
+ name="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field1"
1552
+ />
1553
+ </span>
1554
+ </div>
1555
+ </div>
1556
+
1557
+ <div class="pf-v6-c-form__group">
1558
+ <div class="pf-v6-c-form__group-label"><label
1559
+ class="pf-v6-c-form__label"
1560
+ for="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field2"
1561
+ >
1562
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1563
+ </div>
1564
+ <div class="pf-v6-c-form__group-control">
1565
+ <span class="pf-v6-c-form-control pf-m-required">
1566
+ <input
1567
+ required
1568
+ type="text"
1569
+ id="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field2"
1570
+ name="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field2"
1571
+ />
1572
+ </span>
1573
+ </div>
1574
+ </div>
1575
+
1576
+ <div
1577
+ class="pf-v6-c-form__field-group"
1578
+ role="group"
1579
+ aria-labelledby="form-expandable-field-groups-nested-field-group-4-title"
1580
+ >
1581
+ <div class="pf-v6-c-form__field-group-header">
1582
+ <div class="pf-v6-c-form__field-group-header-main">
1583
+ <div class="pf-v6-c-form__field-group-header-title">
1584
+ <div
1585
+ class="pf-v6-c-form__field-group-header-title-text"
1586
+ id="form-expandable-field-groups-nested-field-group-4-title"
1587
+ >Nested field group 1 (non-expandable)</div>
1588
+ </div>
1589
+ </div>
1590
+ </div>
1591
+ <div class="pf-v6-c-form__field-group-body" inert>
1592
+ <div class="pf-v6-c-form__group">
1593
+ <div class="pf-v6-c-form__group-label"><label
1594
+ class="pf-v6-c-form__label"
1595
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label1"
1596
+ >
1597
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1598
+ class="pf-v6-c-form__label-required"
1599
+ aria-hidden="true"
1600
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1601
+ <span
1602
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1603
+ type="button"
1604
+ role="button"
1605
+ tabindex="0"
1606
+ aria-label="More information for label 1 field"
1607
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label1"
1608
+ >
1609
+ <span class="pf-v6-c-button__icon">
1610
+ <svg
1611
+ class="pf-v6-svg"
1612
+ viewBox="0 0 1024 1024"
1613
+ fill="currentColor"
1614
+ aria-hidden="true"
1615
+ role="img"
1616
+ width="1em"
1617
+ height="1em"
1618
+ >
1619
+ <path
1620
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1621
+ />
1622
+ </svg>
1623
+ </span>
1624
+ </span></span>
1625
+ </div>
1626
+ <div class="pf-v6-c-form__group-control">
1627
+ <span class="pf-v6-c-form-control pf-m-required">
1628
+ <input
1629
+ required
1630
+ type="text"
1631
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label1"
1632
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label1"
1633
+ />
1634
+ </span>
1635
+ </div>
1636
+ </div>
1637
+ <div class="pf-v6-c-form__group">
1638
+ <div class="pf-v6-c-form__group-label"><label
1639
+ class="pf-v6-c-form__label"
1640
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label2"
1641
+ >
1642
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1643
+ class="pf-v6-c-form__label-required"
1644
+ aria-hidden="true"
1645
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1646
+ <span
1647
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1648
+ type="button"
1649
+ role="button"
1650
+ tabindex="0"
1651
+ aria-label="More information for label 2 field"
1652
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label2"
1653
+ >
1654
+ <span class="pf-v6-c-button__icon">
1655
+ <svg
1656
+ class="pf-v6-svg"
1657
+ viewBox="0 0 1024 1024"
1658
+ fill="currentColor"
1659
+ aria-hidden="true"
1660
+ role="img"
1661
+ width="1em"
1662
+ height="1em"
1663
+ >
1664
+ <path
1665
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1666
+ />
1667
+ </svg>
1668
+ </span>
1669
+ </span></span>
1670
+ </div>
1671
+ <div class="pf-v6-c-form__group-control">
1672
+ <span class="pf-v6-c-form-control pf-m-required">
1673
+ <input
1674
+ required
1675
+ type="text"
1676
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label2"
1677
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label2"
1678
+ />
1679
+ </span>
1680
+ </div>
1681
+ </div>
1682
+ </div>
1683
+ </div>
1684
+
1685
+ <div
1686
+ class="pf-v6-c-form__field-group"
1687
+ role="group"
1688
+ aria-labelledby="form-expandable-field-groups-nested-field-group-5-title"
1689
+ >
1690
+ <div class="pf-v6-c-form__field-group-header">
1691
+ <div class="pf-v6-c-form__field-group-header-main">
1692
+ <div class="pf-v6-c-form__field-group-header-title">
1693
+ <div
1694
+ class="pf-v6-c-form__field-group-header-title-text"
1695
+ id="form-expandable-field-groups-nested-field-group-5-title"
1696
+ >Nested field group 2 (non-expandable)</div>
1697
+ </div>
1698
+ <div
1699
+ class="pf-v6-c-form__field-group-header-description"
1700
+ >Field group 2 description text</div>
1701
+ </div>
1702
+ </div>
1703
+ <div class="pf-v6-c-form__field-group-body" inert>
1704
+ <div class="pf-v6-c-form__group">
1705
+ <div class="pf-v6-c-form__group-label"><label
1706
+ class="pf-v6-c-form__label"
1707
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1708
+ >
1709
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1710
+ class="pf-v6-c-form__label-required"
1711
+ aria-hidden="true"
1712
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1713
+ <span
1714
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1715
+ type="button"
1716
+ role="button"
1717
+ tabindex="0"
1718
+ aria-label="More information for label 1 field"
1719
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1720
+ >
1721
+ <span class="pf-v6-c-button__icon">
1722
+ <svg
1723
+ class="pf-v6-svg"
1724
+ viewBox="0 0 1024 1024"
1725
+ fill="currentColor"
1726
+ aria-hidden="true"
1727
+ role="img"
1728
+ width="1em"
1729
+ height="1em"
1730
+ >
1731
+ <path
1732
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1733
+ />
1734
+ </svg>
1735
+ </span>
1736
+ </span></span>
1737
+ </div>
1738
+ <div class="pf-v6-c-form__group-control">
1739
+ <span class="pf-v6-c-form-control pf-m-required">
1740
+ <input
1741
+ required
1742
+ type="text"
1743
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1744
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1745
+ />
1746
+ </span>
1747
+ </div>
1748
+ </div>
1749
+ <div class="pf-v6-c-form__group">
1750
+ <div class="pf-v6-c-form__group-label"><label
1751
+ class="pf-v6-c-form__label"
1752
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1753
+ >
1754
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1755
+ class="pf-v6-c-form__label-required"
1756
+ aria-hidden="true"
1757
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1758
+ <span
1759
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1760
+ type="button"
1761
+ role="button"
1762
+ tabindex="0"
1763
+ aria-label="More information for label 2 field"
1764
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1765
+ >
1766
+ <span class="pf-v6-c-button__icon">
1767
+ <svg
1768
+ class="pf-v6-svg"
1769
+ viewBox="0 0 1024 1024"
1770
+ fill="currentColor"
1771
+ aria-hidden="true"
1772
+ role="img"
1773
+ width="1em"
1774
+ height="1em"
1775
+ >
1776
+ <path
1777
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1778
+ />
1779
+ </svg>
1780
+ </span>
1781
+ </span></span>
1782
+ </div>
1783
+ <div class="pf-v6-c-form__group-control">
1784
+ <span class="pf-v6-c-form-control pf-m-required">
1785
+ <input
1786
+ required
1787
+ type="text"
1788
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1789
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1790
+ />
1791
+ </span>
1792
+ </div>
1793
+ </div>
1794
+ </div>
1795
+ </div>
1796
+ </div>
1797
+ </div>
1798
+
1799
+ <div
1800
+ class="pf-v6-c-form__field-group"
1801
+ role="group"
1802
+ aria-labelledby="form-expandable-field-groups-nested-field-group-5-title"
1803
+ >
1804
+ <div class="pf-v6-c-form__field-group-header">
1805
+ <div class="pf-v6-c-form__field-group-header-main">
1806
+ <div class="pf-v6-c-form__field-group-header-title">
1807
+ <div
1808
+ class="pf-v6-c-form__field-group-header-title-text"
1809
+ id="form-expandable-field-groups-nested-field-group-5-title"
1810
+ >Field group 4 (non-expandable)</div>
1811
+ </div>
1812
+ <div
1813
+ class="pf-v6-c-form__field-group-header-description"
1814
+ >Field group 4 description text</div>
1815
+ </div>
1816
+ </div>
1817
+ <div class="pf-v6-c-form__field-group-body" inert>
1818
+ <div class="pf-v6-c-form__group">
1819
+ <div class="pf-v6-c-form__group-label"><label
1820
+ class="pf-v6-c-form__label"
1821
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1822
+ >
1823
+ <span class="pf-v6-c-form__label-text">Label 1</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">
1824
+ <span
1825
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1826
+ type="button"
1827
+ role="button"
1828
+ tabindex="0"
1829
+ aria-label="More information for label 1 field"
1830
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1831
+ >
1832
+ <span class="pf-v6-c-button__icon">
1833
+ <svg
1834
+ class="pf-v6-svg"
1835
+ viewBox="0 0 1024 1024"
1836
+ fill="currentColor"
1837
+ aria-hidden="true"
1838
+ role="img"
1839
+ width="1em"
1840
+ height="1em"
1841
+ >
1842
+ <path
1843
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1844
+ />
1845
+ </svg>
1846
+ </span>
1847
+ </span></span>
1848
+ </div>
1849
+ <div class="pf-v6-c-form__group-control">
1850
+ <span class="pf-v6-c-form-control pf-m-required">
1851
+ <input
1852
+ required
1853
+ type="text"
1854
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1855
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1856
+ />
1857
+ </span>
1858
+ </div>
1859
+ </div>
1860
+ <div class="pf-v6-c-form__group">
1861
+ <div class="pf-v6-c-form__group-label"><label
1862
+ class="pf-v6-c-form__label"
1863
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1864
+ >
1865
+ <span class="pf-v6-c-form__label-text">Label 2</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">
1866
+ <span
1867
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1868
+ type="button"
1869
+ role="button"
1870
+ tabindex="0"
1871
+ aria-label="More information for label 2 field"
1872
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1873
+ >
1874
+ <span class="pf-v6-c-button__icon">
1875
+ <svg
1876
+ class="pf-v6-svg"
1877
+ viewBox="0 0 1024 1024"
1878
+ fill="currentColor"
1879
+ aria-hidden="true"
1880
+ role="img"
1881
+ width="1em"
1882
+ height="1em"
1883
+ >
1884
+ <path
1885
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1886
+ />
1887
+ </svg>
1888
+ </span>
1889
+ </span></span>
1890
+ </div>
1891
+ <div class="pf-v6-c-form__group-control">
1892
+ <span class="pf-v6-c-form-control pf-m-required">
1893
+ <input
1894
+ required
1895
+ type="text"
1896
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1897
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1898
+ />
1899
+ </span>
1900
+ </div>
1901
+ </div>
1902
+ </div>
1903
+ </div>
1904
+
1905
+ <div class="pf-v6-c-form__group">
1906
+ <div class="pf-v6-c-form__group-label"><label
1907
+ class="pf-v6-c-form__label"
1908
+ for="form-expandable-field-groups-field3"
1909
+ >
1910
+ <span class="pf-v6-c-form__label-text">Label 3</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1911
+ </div>
1912
+ <div class="pf-v6-c-form__group-control">
1913
+ <span class="pf-v6-c-form-control pf-m-required">
1914
+ <input
1915
+ required
1916
+ type="text"
1917
+ id="form-expandable-field-groups-field3"
1918
+ name="form-expandable-field-groups-field3"
1919
+ />
1920
+ </span>
1921
+ </div>
1922
+ </div>
1923
+
1924
+ <div class="pf-v6-c-form__group">
1925
+ <div class="pf-v6-c-form__group-label"><label
1926
+ class="pf-v6-c-form__label"
1927
+ for="form-expandable-field-groups-field4"
1928
+ >
1929
+ <span class="pf-v6-c-form__label-text">Label 4</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1930
+ </div>
1931
+ <div class="pf-v6-c-form__group-control">
1932
+ <span class="pf-v6-c-form-control pf-m-required">
1933
+ <input
1934
+ required
1935
+ type="text"
1936
+ id="form-expandable-field-groups-field4"
1937
+ name="form-expandable-field-groups-field4"
1938
+ />
1939
+ </span>
876
1940
  </div>
877
1941
  </div>
878
1942
  </form>
@@ -944,5 +2008,6 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
944
2008
  | `.pf-m-no-padding-top` | `.pf-v6-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
945
2009
  | `.pf-m-inline` | `.pf-v6-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
946
2010
  | `.pf-m-stack` | `.pf-v6-c-form__group-control` | Modifies form group children to be stacked with space between children. |
2011
+ | `.pf-m-expandable` | `.pf-v6-c-form__field-group` | Modifies a field group to be expandable. Currently used as the opt-in for animating the expanded state. |
947
2012
  | `.pf-m-expanded` | `.pf-v6-c-form__field-group` | Modifies an expandable field group for the expanded state. |
948
2013
  | `--pf-v6-c-form--m-limit-width--MaxWidth` | `.pf-v6-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |