@patternfly/patternfly 6.3.0-prerelease.9 → 6.3.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 (109) hide show
  1. package/assets/images/icon-outlined-star.hbs +3 -0
  2. package/assets/images/icon-star.hbs +3 -0
  3. package/base/patternfly-common.css +46 -11
  4. package/base/patternfly-common.scss +58 -13
  5. package/components/Accordion/accordion.css +72 -3
  6. package/components/Accordion/accordion.scss +78 -6
  7. package/components/Alert/alert-group.css +52 -31
  8. package/components/Alert/alert-group.scss +77 -46
  9. package/components/Button/button.css +154 -6
  10. package/components/Button/button.scss +160 -8
  11. package/components/DataList/data-list.css +2 -2
  12. package/components/DataList/data-list.scss +2 -2
  13. package/components/DualListSelector/dual-list-selector.css +36 -0
  14. package/components/DualListSelector/dual-list-selector.scss +43 -0
  15. package/components/ExpandableSection/expandable-section.css +63 -1
  16. package/components/ExpandableSection/expandable-section.scss +76 -2
  17. package/components/FileUpload/file-upload.css +3 -3
  18. package/components/FileUpload/file-upload.scss +3 -3
  19. package/components/Form/form.css +40 -1
  20. package/components/Form/form.scss +47 -1
  21. package/components/FormControl/form-control.css +16 -0
  22. package/components/FormControl/form-control.scss +9 -0
  23. package/components/InputGroup/input-group.css +80 -0
  24. package/components/InputGroup/input-group.scss +95 -0
  25. package/components/Menu/menu.css +24 -4
  26. package/components/Menu/menu.scss +20 -5
  27. package/components/MenuToggle/menu-toggle.css +30 -0
  28. package/components/MenuToggle/menu-toggle.scss +33 -0
  29. package/components/Nav/nav.css +22 -8
  30. package/components/Nav/nav.scss +22 -9
  31. package/components/Page/page.css +62 -3
  32. package/components/Page/page.scss +44 -3
  33. package/components/Progress/progress.css +16 -0
  34. package/components/Progress/progress.scss +11 -1
  35. package/components/ProgressStepper/progress-stepper.scss +1 -0
  36. package/components/Spinner/spinner.css +5 -0
  37. package/components/Spinner/spinner.scss +6 -0
  38. package/components/Table/table-grid.css +51 -5
  39. package/components/Table/table-grid.scss +22 -1
  40. package/components/Table/table.css +95 -2
  41. package/components/Table/table.scss +138 -3
  42. package/components/Tabs/tabs.css +25 -15
  43. package/components/Tabs/tabs.scss +26 -13
  44. package/components/TextInputGroup/text-input-group.css +20 -0
  45. package/components/TextInputGroup/text-input-group.scss +12 -0
  46. package/components/Timestamp/timestamp.css +4 -0
  47. package/components/Timestamp/timestamp.scss +7 -0
  48. package/components/TreeView/tree-view.css +39 -0
  49. package/components/TreeView/tree-view.scss +42 -2
  50. package/components/Truncate/truncate.css +1 -0
  51. package/components/Truncate/truncate.scss +3 -0
  52. package/components/_index.css +912 -84
  53. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  54. package/docs/components/Button/examples/Button.md +148 -5
  55. package/docs/components/Card/examples/Card.md +8 -8
  56. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  57. package/docs/components/DataList/examples/DataList.md +23 -23
  58. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  59. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  60. package/docs/components/Form/examples/Form.md +1047 -126
  61. package/docs/components/Hint/examples/Hint.md +3 -3
  62. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  63. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  64. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  65. package/docs/components/Masthead/examples/masthead.md +90 -12
  66. package/docs/components/Menu/examples/Menu.md +122 -6
  67. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  68. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  69. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  70. package/docs/components/Page/examples/Page.md +147 -14
  71. package/docs/components/Pagination/examples/Pagination.md +12 -12
  72. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  73. package/docs/components/Slider/examples/Slider.md +2 -2
  74. package/docs/components/Spinner/examples/Spinner.md +10 -0
  75. package/docs/components/Table/examples/Table.md +9428 -6173
  76. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  77. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  78. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  79. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  80. package/docs/demos/Alert/examples/Alert.md +66 -9
  81. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  82. package/docs/demos/Banner/examples/Banner.md +47 -6
  83. package/docs/demos/Card/examples/Card.md +5 -62
  84. package/docs/demos/CardView/examples/CardView.md +24 -5
  85. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  86. package/docs/demos/DataList/examples/DataList.md +100 -24
  87. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  88. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  89. package/docs/demos/Form/examples/BasicForms.md +12 -12
  90. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  91. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  92. package/docs/demos/Modal/examples/Modal.md +132 -18
  93. package/docs/demos/Nav/examples/Nav.md +111 -16
  94. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  95. package/docs/demos/Page/examples/Page.md +309 -43
  96. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  97. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  98. package/docs/demos/Table/examples/Table.md +449 -155
  99. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  100. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  101. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  102. package/package.json +5 -5
  103. package/patternfly-base-no-globals.css +45 -11
  104. package/patternfly-base.css +45 -11
  105. package/patternfly-no-globals.css +957 -95
  106. package/patternfly.css +957 -95
  107. package/patternfly.min.css +1 -1
  108. package/patternfly.min.css.map +1 -1
  109. package/sass-utilities/mixins.scss +54 -0
package/docs/components/Form/examples/Form.md CHANGED
@@ -652,7 +652,7 @@ cssPrefix: pf-v6-c-form
652
652
  </button>
653
653
  </div>
654
654
  </div>
655
- <div class="pf-v6-c-form__field-group-body" hidden>
655
+ <div class="pf-v6-c-form__field-group-body" inert>
656
656
  <div class="pf-v6-c-form__group">
657
657
  <div class="pf-v6-c-form__group-label"><label
658
658
  class="pf-v6-c-form__label"
@@ -747,17 +747,56 @@ cssPrefix: pf-v6-c-form
747
747
 
748
748
  ```html
749
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
+
750
788
  <div
751
- class="pf-v6-c-form__field-group"
789
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
752
790
  role="group"
753
791
  aria-labelledby="form-expandable-field-groups-field-group-1-title"
754
792
  >
755
793
  <div class="pf-v6-c-form__field-group-toggle">
756
794
  <div class="pf-v6-c-form__field-group-toggle-button">
757
795
  <button
758
- class="pf-v6-c-button pf-m-plain"
796
+ class="pf-v6-c-button pf-m-expanded pf-m-plain"
759
797
  id="form-expandable-field-groups-field-group-1-toggle"
760
798
  type="button"
799
+ aria-expanded="true"
761
800
  aria-labelledby="form-expandable-field-groups-field-group-1-title form-expandable-field-groups-field-group-1-toggle"
762
801
  aria-label="Details"
763
802
  >
@@ -787,148 +826,184 @@ cssPrefix: pf-v6-c-form
787
826
  </button>
788
827
  </div>
789
828
  </div>
790
- </div>
791
- <div
792
- class="pf-v6-c-form__field-group pf-m-expanded"
793
- role="group"
794
- aria-labelledby="form-expandable-field-groups-field-group-2-title"
795
- >
796
- <div class="pf-v6-c-form__field-group-toggle">
797
- <div class="pf-v6-c-form__field-group-toggle-button">
798
- <button
799
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
800
- id="form-expandable-field-groups-field-group-2-toggle"
801
- type="button"
802
- aria-expanded="true"
803
- aria-labelledby="form-expandable-field-groups-field-group-2-title form-expandable-field-groups-field-group-2-toggle"
804
- aria-label="Details"
805
- >
806
- <span class="pf-v6-c-button__icon">
807
- <span class="pf-v6-c-form__field-group-toggle-icon">
808
- <i class="fas fa-angle-right" aria-hidden="true"></i>
809
- </span>
810
- </span>
811
- </button>
812
- </div>
813
- </div>
814
- <div class="pf-v6-c-form__field-group-header">
815
- <div class="pf-v6-c-form__field-group-header-main">
816
- <div class="pf-v6-c-form__field-group-header-title">
817
- <div
818
- class="pf-v6-c-form__field-group-header-title-text"
819
- id="form-expandable-field-groups-field-group-2-title"
820
- >Field group 2</div>
821
- </div>
822
- <div
823
- class="pf-v6-c-form__field-group-header-description"
824
- >Field group 2 description text</div>
825
- </div>
826
- </div>
827
829
  <div class="pf-v6-c-form__field-group-body">
828
- <div class="pf-v6-c-form__group">
829
- <div class="pf-v6-c-form__group-label"><label
830
- class="pf-v6-c-form__label"
831
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
832
- >
833
- <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">
834
- <span
835
- 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-expanded pf-m-plain"
839
+ id="form-expandable-field-groups-nested-field-group-1-toggle"
836
840
  type="button"
837
- role="button"
838
- tabindex="0"
839
- aria-label="More information for label 1 field"
840
- 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"
841
844
  >
842
845
  <span class="pf-v6-c-button__icon">
843
- <svg
844
- class="pf-v6-svg"
845
- viewBox="0 0 1024 1024"
846
- fill="currentColor"
847
- aria-hidden="true"
848
- role="img"
849
- width="1em"
850
- height="1em"
851
- >
852
- <path
853
- 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"
854
- />
855
- </svg>
846
+ <span class="pf-v6-c-form__field-group-toggle-icon">
847
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
848
+ </span>
856
849
  </span>
857
- </span></span>
850
+ </button>
851
+ </div>
858
852
  </div>
859
- <div class="pf-v6-c-form__group-control">
860
- <span class="pf-v6-c-form-control pf-m-required">
861
- <input
862
- required
863
- type="text"
864
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
865
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
866
- />
867
- </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>
868
870
  </div>
869
- </div>
870
- <div class="pf-v6-c-form__group">
871
- <div class="pf-v6-c-form__group-label"><label
872
- class="pf-v6-c-form__label"
873
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
874
- >
875
- <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">
876
- <span
877
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
878
- type="button"
879
- role="button"
880
- tabindex="0"
881
- aria-label="More information for label 2 field"
882
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
883
- >
884
- <span class="pf-v6-c-button__icon">
885
- <svg
886
- class="pf-v6-svg"
887
- viewBox="0 0 1024 1024"
888
- fill="currentColor"
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"
889
879
  aria-hidden="true"
890
- role="img"
891
- width="1em"
892
- height="1em"
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"
893
888
  >
894
- <path
895
- 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"
896
- />
897
- </svg>
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
+ />
898
914
  </span>
899
- </span></span>
900
- </div>
901
- <div class="pf-v6-c-form__group-control">
902
- <span class="pf-v6-c-form-control pf-m-required">
903
- <input
904
- required
905
- type="text"
906
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
907
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
908
- />
909
- </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>
910
962
  </div>
911
963
  </div>
964
+
912
965
  <div
913
- class="pf-v6-c-form__field-group pf-m-expanded"
966
+ class="pf-v6-c-form__field-group pf-m-expandable"
914
967
  role="group"
915
- aria-labelledby="form-expandable-field-groups-field-group-3-title"
968
+ aria-labelledby="form-expandable-field-groups-nested-field-group-2-title"
916
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>
917
987
  <div class="pf-v6-c-form__field-group-header">
918
988
  <div class="pf-v6-c-form__field-group-header-main">
919
989
  <div class="pf-v6-c-form__field-group-header-title">
920
990
  <div
921
991
  class="pf-v6-c-form__field-group-header-title-text"
922
- id="form-expandable-field-groups-field-group-3-title"
923
- >Nested field group 3</div>
992
+ id="form-expandable-field-groups-nested-field-group-2-title"
993
+ >Nested field group 2</div>
924
994
  </div>
925
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>
926
1001
  </div>
927
- <div class="pf-v6-c-form__field-group-body">
1002
+ <div class="pf-v6-c-form__field-group-body" inert>
928
1003
  <div class="pf-v6-c-form__group">
929
1004
  <div class="pf-v6-c-form__group-label"><label
930
1005
  class="pf-v6-c-form__label"
931
- 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"
932
1007
  >
933
1008
  <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
934
1009
  class="pf-v6-c-form__label-required"
@@ -940,7 +1015,7 @@ cssPrefix: pf-v6-c-form
940
1015
  role="button"
941
1016
  tabindex="0"
942
1017
  aria-label="More information for label 1 field"
943
- 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"
944
1019
  >
945
1020
  <span class="pf-v6-c-button__icon">
946
1021
  <svg
@@ -964,8 +1039,8 @@ cssPrefix: pf-v6-c-form
964
1039
  <input
965
1040
  required
966
1041
  type="text"
967
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
968
- 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"
969
1044
  />
970
1045
  </span>
971
1046
  </div>
@@ -973,7 +1048,7 @@ cssPrefix: pf-v6-c-form
973
1048
  <div class="pf-v6-c-form__group">
974
1049
  <div class="pf-v6-c-form__group-label"><label
975
1050
  class="pf-v6-c-form__label"
976
- 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"
977
1052
  >
978
1053
  <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
979
1054
  class="pf-v6-c-form__label-required"
@@ -985,7 +1060,7 @@ cssPrefix: pf-v6-c-form
985
1060
  role="button"
986
1061
  tabindex="0"
987
1062
  aria-label="More information for label 2 field"
988
- 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"
989
1064
  >
990
1065
  <span class="pf-v6-c-button__icon">
991
1066
  <svg
@@ -1009,14 +1084,859 @@ cssPrefix: pf-v6-c-form
1009
1084
  <input
1010
1085
  required
1011
1086
  type="text"
1012
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1013
- 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"
1014
1089
  />
1015
1090
  </span>
1016
1091
  </div>
1017
1092
  </div>
1018
1093
  </div>
1019
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-expanded 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>
1020
1940
  </div>
1021
1941
  </div>
1022
1942
  </form>
@@ -1088,5 +2008,6 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
1088
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. |
1089
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). |
1090
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. |
1091
2012
  | `.pf-m-expanded` | `.pf-v6-c-form__field-group` | Modifies an expandable field group for the expanded state. |
1092
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. |