@patternfly/patternfly 6.3.0-prerelease.4 → 6.3.0-prerelease.40

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 (120) hide show
  1. package/README.md +1 -1
  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/patternfly-common.css +46 -11
  6. package/base/patternfly-common.scss +58 -13
  7. package/components/Accordion/accordion.css +72 -3
  8. package/components/Accordion/accordion.scss +78 -6
  9. package/components/Alert/alert-group.css +52 -31
  10. package/components/Alert/alert-group.scss +77 -46
  11. package/components/Button/button.css +154 -6
  12. package/components/Button/button.scss +160 -8
  13. package/components/CodeEditor/code-editor.css +3 -0
  14. package/components/CodeEditor/code-editor.scss +3 -1
  15. package/components/DataList/data-list.css +2 -2
  16. package/components/DataList/data-list.scss +2 -2
  17. package/components/DualListSelector/dual-list-selector.css +36 -0
  18. package/components/DualListSelector/dual-list-selector.scss +43 -0
  19. package/components/ExpandableSection/expandable-section.css +63 -1
  20. package/components/ExpandableSection/expandable-section.scss +76 -2
  21. package/components/FileUpload/file-upload.css +3 -3
  22. package/components/FileUpload/file-upload.scss +3 -3
  23. package/components/Form/form.css +40 -1
  24. package/components/Form/form.scss +47 -1
  25. package/components/FormControl/form-control.css +16 -0
  26. package/components/FormControl/form-control.scss +9 -0
  27. package/components/InputGroup/input-group.css +80 -0
  28. package/components/InputGroup/input-group.scss +95 -0
  29. package/components/Menu/menu.css +24 -4
  30. package/components/Menu/menu.scss +20 -5
  31. package/components/MenuToggle/menu-toggle.css +38 -4
  32. package/components/MenuToggle/menu-toggle.scss +48 -3
  33. package/components/Nav/nav.css +22 -8
  34. package/components/Nav/nav.scss +22 -9
  35. package/components/Page/page.css +66 -6
  36. package/components/Page/page.scss +48 -5
  37. package/components/Progress/progress.css +16 -0
  38. package/components/Progress/progress.scss +11 -1
  39. package/components/ProgressStepper/progress-stepper.scss +1 -0
  40. package/components/Skeleton/skeleton.css +22 -2
  41. package/components/Skeleton/skeleton.scss +25 -3
  42. package/components/Spinner/spinner.css +5 -0
  43. package/components/Spinner/spinner.scss +6 -0
  44. package/components/Table/table-grid.css +51 -5
  45. package/components/Table/table-grid.scss +22 -1
  46. package/components/Table/table.css +83 -1
  47. package/components/Table/table.scss +123 -1
  48. package/components/Tabs/tabs.css +25 -15
  49. package/components/Tabs/tabs.scss +26 -13
  50. package/components/TextInputGroup/text-input-group.css +16 -0
  51. package/components/TextInputGroup/text-input-group.scss +8 -0
  52. package/components/Timestamp/timestamp.css +4 -0
  53. package/components/Timestamp/timestamp.scss +7 -0
  54. package/components/TreeView/tree-view.css +39 -0
  55. package/components/TreeView/tree-view.scss +42 -2
  56. package/components/Truncate/truncate.css +1 -0
  57. package/components/Truncate/truncate.scss +3 -0
  58. package/components/_index.css +933 -92
  59. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  60. package/docs/components/Button/examples/Button.md +161 -6
  61. package/docs/components/Card/examples/Card.md +8 -8
  62. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  63. package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
  64. package/docs/components/DataList/examples/DataList.md +23 -23
  65. package/docs/components/Divider/examples/Divider.md +1 -1
  66. package/docs/components/Drawer/examples/Drawer.md +4 -0
  67. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  68. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  69. package/docs/components/Form/examples/Form.md +1179 -114
  70. package/docs/components/Hint/examples/Hint.md +3 -3
  71. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  72. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  73. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  74. package/docs/components/Masthead/examples/masthead.md +90 -12
  75. package/docs/components/Menu/examples/Menu.md +122 -6
  76. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  77. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  78. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  79. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  80. package/docs/components/Page/examples/Page.md +148 -14
  81. package/docs/components/Pagination/examples/Pagination.md +12 -12
  82. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  83. package/docs/components/Slider/examples/Slider.md +2 -2
  84. package/docs/components/Spinner/examples/Spinner.md +10 -0
  85. package/docs/components/Table/examples/Table.md +9457 -6178
  86. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  87. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  88. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  89. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  90. package/docs/demos/Alert/examples/Alert.md +66 -9
  91. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  92. package/docs/demos/Banner/examples/Banner.md +47 -6
  93. package/docs/demos/Card/examples/Card.md +5 -62
  94. package/docs/demos/CardView/examples/CardView.md +24 -5
  95. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  96. package/docs/demos/DataList/examples/DataList.md +100 -24
  97. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  98. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  99. package/docs/demos/Form/examples/BasicForms.md +142 -22
  100. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  101. package/docs/demos/Masthead/examples/Masthead.md +171 -19
  102. package/docs/demos/Modal/examples/Modal.md +171 -21
  103. package/docs/demos/Nav/examples/Nav.md +113 -18
  104. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  105. package/docs/demos/Page/examples/Page.md +661 -40
  106. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  107. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  108. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  109. package/docs/demos/Table/examples/Table.md +516 -178
  110. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  111. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  112. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  113. package/package.json +6 -6
  114. package/patternfly-base-no-globals.css +45 -11
  115. package/patternfly-base.css +45 -11
  116. package/patternfly-no-globals.css +978 -103
  117. package/patternfly.css +978 -103
  118. package/patternfly.min.css +1 -1
  119. package/patternfly.min.css.map +1 -1
  120. package/sass-utilities/mixins.scss +54 -0
@@ -20,12 +20,31 @@ wrapperTag: div
20
20
  <div class="pf-v6-c-masthead__main">
21
21
  <span class="pf-v6-c-masthead__toggle">
22
22
  <button
23
- class="pf-v6-c-button pf-m-plain"
23
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
24
24
  type="button"
25
25
  aria-label="Global navigation"
26
26
  >
27
27
  <span class="pf-v6-c-button__icon">
28
- <i class="fas fa-bars" aria-hidden="true"></i>
28
+ <svg
29
+ viewBox="0 0 10 10"
30
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
31
+ width="1em"
32
+ height="1em"
33
+ >
34
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
35
+ <path
36
+ class="pf-v6-c-button--hamburger-icon--middle"
37
+ d="M1,5 L9,5"
38
+ />
39
+ <path
40
+ class="pf-v6-c-button--hamburger-icon--arrow"
41
+ d="M1,5 L1,5 L1,5"
42
+ />
43
+ <path
44
+ class="pf-v6-c-button--hamburger-icon--bottom"
45
+ d="M9,9 L1,9"
46
+ />
47
+ </svg>
29
48
  </span>
30
49
  </button>
31
50
  </span>
@@ -133,7 +152,7 @@ wrapperTag: div
133
152
  </div>
134
153
  <div class="pf-v6-c-toolbar__item">
135
154
  <button
136
- class="pf-v6-c-menu-toggle pf-m-plain"
155
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
137
156
  type="button"
138
157
  aria-expanded="false"
139
158
  aria-label="Settings"
@@ -369,25 +388,6 @@ wrapperTag: div
369
388
  <button
370
389
  type="button"
371
390
  class="pf-v6-c-tabs__link"
372
- onclick="
373
- event.preventDefault();
374
- ((e) => {
375
- const el = this,
376
- li = this.closest('li'),
377
- ul = this.closest('ul'),
378
- tabs = this.closest('.pf-v6-c-tabs'),
379
- left = Math.round(li.offsetLeft),
380
- top = Math.round(li.offsetTop),
381
- width = Math.round(li.offsetWidth),
382
- height = Math.round(li.offsetHeight);
383
-
384
- ul.querySelectorAll('li').forEach(function(el) {
385
- el.classList.remove('pf-m-current')});
386
- li.classList.add('pf-m-current');
387
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
388
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
389
- }
390
- )()"
391
391
  role="tab"
392
392
  id="drawer-collapsed-example-panel-tabs-tab1-link"
393
393
  >
@@ -398,25 +398,6 @@ wrapperTag: div
398
398
  <button
399
399
  type="button"
400
400
  class="pf-v6-c-tabs__link"
401
- onclick="
402
- event.preventDefault();
403
- ((e) => {
404
- const el = this,
405
- li = this.closest('li'),
406
- ul = this.closest('ul'),
407
- tabs = this.closest('.pf-v6-c-tabs'),
408
- left = Math.round(li.offsetLeft),
409
- top = Math.round(li.offsetTop),
410
- width = Math.round(li.offsetWidth),
411
- height = Math.round(li.offsetHeight);
412
-
413
- ul.querySelectorAll('li').forEach(function(el) {
414
- el.classList.remove('pf-m-current')});
415
- li.classList.add('pf-m-current');
416
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
417
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
418
- }
419
- )()"
420
401
  role="tab"
421
402
  id="drawer-collapsed-example-panel-tabs-tab2-link"
422
403
  >
@@ -527,12 +508,31 @@ wrapperTag: div
527
508
  <div class="pf-v6-c-masthead__main">
528
509
  <span class="pf-v6-c-masthead__toggle">
529
510
  <button
530
- class="pf-v6-c-button pf-m-plain"
511
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
531
512
  type="button"
532
513
  aria-label="Global navigation"
533
514
  >
534
515
  <span class="pf-v6-c-button__icon">
535
- <i class="fas fa-bars" aria-hidden="true"></i>
516
+ <svg
517
+ viewBox="0 0 10 10"
518
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
519
+ width="1em"
520
+ height="1em"
521
+ >
522
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
523
+ <path
524
+ class="pf-v6-c-button--hamburger-icon--middle"
525
+ d="M1,5 L9,5"
526
+ />
527
+ <path
528
+ class="pf-v6-c-button--hamburger-icon--arrow"
529
+ d="M1,5 L1,5 L1,5"
530
+ />
531
+ <path
532
+ class="pf-v6-c-button--hamburger-icon--bottom"
533
+ d="M9,9 L1,9"
534
+ />
535
+ </svg>
536
536
  </span>
537
537
  </button>
538
538
  </span>
@@ -640,7 +640,7 @@ wrapperTag: div
640
640
  </div>
641
641
  <div class="pf-v6-c-toolbar__item">
642
642
  <button
643
- class="pf-v6-c-menu-toggle pf-m-plain"
643
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
644
644
  type="button"
645
645
  aria-expanded="false"
646
646
  aria-label="Settings"
@@ -851,12 +851,31 @@ wrapperTag: div
851
851
  <div class="pf-v6-c-masthead__main">
852
852
  <span class="pf-v6-c-masthead__toggle">
853
853
  <button
854
- class="pf-v6-c-button pf-m-plain"
854
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
855
855
  type="button"
856
856
  aria-label="Global navigation"
857
857
  >
858
858
  <span class="pf-v6-c-button__icon">
859
- <i class="fas fa-bars" aria-hidden="true"></i>
859
+ <svg
860
+ viewBox="0 0 10 10"
861
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
862
+ width="1em"
863
+ height="1em"
864
+ >
865
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
866
+ <path
867
+ class="pf-v6-c-button--hamburger-icon--middle"
868
+ d="M1,5 L9,5"
869
+ />
870
+ <path
871
+ class="pf-v6-c-button--hamburger-icon--arrow"
872
+ d="M1,5 L1,5 L1,5"
873
+ />
874
+ <path
875
+ class="pf-v6-c-button--hamburger-icon--bottom"
876
+ d="M9,9 L1,9"
877
+ />
878
+ </svg>
860
879
  </span>
861
880
  </button>
862
881
  </span>
@@ -964,7 +983,7 @@ wrapperTag: div
964
983
  </div>
965
984
  <div class="pf-v6-c-toolbar__item">
966
985
  <button
967
- class="pf-v6-c-menu-toggle pf-m-plain"
986
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
968
987
  type="button"
969
988
  aria-expanded="false"
970
989
  aria-label="Settings"
@@ -1175,12 +1194,31 @@ wrapperTag: div
1175
1194
  <div class="pf-v6-c-masthead__main">
1176
1195
  <span class="pf-v6-c-masthead__toggle">
1177
1196
  <button
1178
- class="pf-v6-c-button pf-m-plain"
1197
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1179
1198
  type="button"
1180
1199
  aria-label="Global navigation"
1181
1200
  >
1182
1201
  <span class="pf-v6-c-button__icon">
1183
- <i class="fas fa-bars" aria-hidden="true"></i>
1202
+ <svg
1203
+ viewBox="0 0 10 10"
1204
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1205
+ width="1em"
1206
+ height="1em"
1207
+ >
1208
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1209
+ <path
1210
+ class="pf-v6-c-button--hamburger-icon--middle"
1211
+ d="M1,5 L9,5"
1212
+ />
1213
+ <path
1214
+ class="pf-v6-c-button--hamburger-icon--arrow"
1215
+ d="M1,5 L1,5 L1,5"
1216
+ />
1217
+ <path
1218
+ class="pf-v6-c-button--hamburger-icon--bottom"
1219
+ d="M9,9 L1,9"
1220
+ />
1221
+ </svg>
1184
1222
  </span>
1185
1223
  </button>
1186
1224
  </span>
@@ -1288,7 +1326,7 @@ wrapperTag: div
1288
1326
  </div>
1289
1327
  <div class="pf-v6-c-toolbar__item">
1290
1328
  <button
1291
- class="pf-v6-c-menu-toggle pf-m-plain"
1329
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1292
1330
  type="button"
1293
1331
  aria-expanded="false"
1294
1332
  aria-label="Settings"
@@ -1578,12 +1616,31 @@ wrapperTag: div
1578
1616
  <div class="pf-v6-c-masthead__main">
1579
1617
  <span class="pf-v6-c-masthead__toggle">
1580
1618
  <button
1581
- class="pf-v6-c-button pf-m-plain"
1619
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1582
1620
  type="button"
1583
1621
  aria-label="Global navigation"
1584
1622
  >
1585
1623
  <span class="pf-v6-c-button__icon">
1586
- <i class="fas fa-bars" aria-hidden="true"></i>
1624
+ <svg
1625
+ viewBox="0 0 10 10"
1626
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1627
+ width="1em"
1628
+ height="1em"
1629
+ >
1630
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1631
+ <path
1632
+ class="pf-v6-c-button--hamburger-icon--middle"
1633
+ d="M1,5 L9,5"
1634
+ />
1635
+ <path
1636
+ class="pf-v6-c-button--hamburger-icon--arrow"
1637
+ d="M1,5 L1,5 L1,5"
1638
+ />
1639
+ <path
1640
+ class="pf-v6-c-button--hamburger-icon--bottom"
1641
+ d="M9,9 L1,9"
1642
+ />
1643
+ </svg>
1587
1644
  </span>
1588
1645
  </button>
1589
1646
  </span>
@@ -1691,7 +1748,7 @@ wrapperTag: div
1691
1748
  </div>
1692
1749
  <div class="pf-v6-c-toolbar__item">
1693
1750
  <button
1694
- class="pf-v6-c-menu-toggle pf-m-plain"
1751
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1695
1752
  type="button"
1696
1753
  aria-expanded="false"
1697
1754
  aria-label="Settings"
@@ -59,7 +59,19 @@ subsection: forms
59
59
  aria-describedby="-phone"
60
60
  >
61
61
  <span class="pf-v6-c-button__icon">
62
- <i class="fas fa-question-circle" aria-hidden="true"></i>
62
+ <svg
63
+ class="pf-v6-svg"
64
+ viewBox="0 0 1024 1024"
65
+ fill="currentColor"
66
+ aria-hidden="true"
67
+ role="img"
68
+ width="1em"
69
+ height="1em"
70
+ >
71
+ <path
72
+ 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"
73
+ />
74
+ </svg>
63
75
  </span>
64
76
  </span></span>
65
77
  </div>
@@ -259,7 +271,19 @@ subsection: forms
259
271
  aria-describedby="form-demo-horizontal-contact-legend"
260
272
  >
261
273
  <span class="pf-v6-c-button__icon">
262
- <i class="fas fa-question-circle" aria-hidden="true"></i>
274
+ <svg
275
+ class="pf-v6-svg"
276
+ viewBox="0 0 1024 1024"
277
+ fill="currentColor"
278
+ aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
282
+ >
283
+ <path
284
+ 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"
285
+ />
286
+ </svg>
263
287
  </span>
264
288
  </span></span>
265
289
  </div>
@@ -538,7 +562,19 @@ subsection: forms
538
562
  aria-describedby="form-demo-sections-repeatable-fields-clientid"
539
563
  >
540
564
  <span class="pf-v6-c-button__icon">
541
- <i class="fas fa-question-circle" aria-hidden="true"></i>
565
+ <svg
566
+ class="pf-v6-svg"
567
+ viewBox="0 0 1024 1024"
568
+ fill="currentColor"
569
+ aria-hidden="true"
570
+ role="img"
571
+ width="1em"
572
+ height="1em"
573
+ >
574
+ <path
575
+ 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"
576
+ />
577
+ </svg>
542
578
  </span>
543
579
  </span></span>
544
580
  </div>
@@ -568,7 +604,19 @@ subsection: forms
568
604
  aria-describedby="form-demo-sections-repeatable-fields-name"
569
605
  >
570
606
  <span class="pf-v6-c-button__icon">
571
- <i class="fas fa-question-circle" aria-hidden="true"></i>
607
+ <svg
608
+ class="pf-v6-svg"
609
+ viewBox="0 0 1024 1024"
610
+ fill="currentColor"
611
+ aria-hidden="true"
612
+ role="img"
613
+ width="1em"
614
+ height="1em"
615
+ >
616
+ <path
617
+ 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"
618
+ />
619
+ </svg>
572
620
  </span>
573
621
  </span></span>
574
622
  </div>
@@ -598,7 +646,19 @@ subsection: forms
598
646
  aria-describedby="form-demo-sections-repeatable-fields-description"
599
647
  >
600
648
  <span class="pf-v6-c-button__icon">
601
- <i class="fas fa-question-circle" aria-hidden="true"></i>
649
+ <svg
650
+ class="pf-v6-svg"
651
+ viewBox="0 0 1024 1024"
652
+ fill="currentColor"
653
+ aria-hidden="true"
654
+ role="img"
655
+ width="1em"
656
+ height="1em"
657
+ >
658
+ <path
659
+ 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"
660
+ />
661
+ </svg>
602
662
  </span>
603
663
  </span></span>
604
664
  </div>
@@ -639,7 +699,19 @@ subsection: forms
639
699
  aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
640
700
  >
641
701
  <span class="pf-v6-c-button__icon">
642
- <i class="fas fa-question-circle" aria-hidden="true"></i>
702
+ <svg
703
+ class="pf-v6-svg"
704
+ viewBox="0 0 1024 1024"
705
+ fill="currentColor"
706
+ aria-hidden="true"
707
+ role="img"
708
+ width="1em"
709
+ height="1em"
710
+ >
711
+ <path
712
+ 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"
713
+ />
714
+ </svg>
643
715
  </span>
644
716
  </span></span>
645
717
  </div>
@@ -669,7 +741,19 @@ subsection: forms
669
741
  aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
670
742
  >
671
743
  <span class="pf-v6-c-button__icon">
672
- <i class="fas fa-question-circle" aria-hidden="true"></i>
744
+ <svg
745
+ class="pf-v6-svg"
746
+ viewBox="0 0 1024 1024"
747
+ fill="currentColor"
748
+ aria-hidden="true"
749
+ role="img"
750
+ width="1em"
751
+ height="1em"
752
+ >
753
+ <path
754
+ 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"
755
+ />
756
+ </svg>
673
757
  </span>
674
758
  </span></span>
675
759
  </div>
@@ -769,7 +853,19 @@ subsection: forms
769
853
  aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
770
854
  >
771
855
  <span class="pf-v6-c-button__icon">
772
- <i class="fas fa-question-circle" aria-hidden="true"></i>
856
+ <svg
857
+ class="pf-v6-svg"
858
+ viewBox="0 0 1024 1024"
859
+ fill="currentColor"
860
+ aria-hidden="true"
861
+ role="img"
862
+ width="1em"
863
+ height="1em"
864
+ >
865
+ <path
866
+ 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"
867
+ />
868
+ </svg>
773
869
  </span>
774
870
  </span></span>
775
871
  </div>
@@ -808,7 +904,19 @@ subsection: forms
808
904
  aria-describedby="form-demo-sections-complex-form-name"
809
905
  >
810
906
  <span class="pf-v6-c-button__icon">
811
- <i class="fas fa-question-circle" aria-hidden="true"></i>
907
+ <svg
908
+ class="pf-v6-svg"
909
+ viewBox="0 0 1024 1024"
910
+ fill="currentColor"
911
+ aria-hidden="true"
912
+ role="img"
913
+ width="1em"
914
+ height="1em"
915
+ >
916
+ <path
917
+ 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"
918
+ />
919
+ </svg>
812
920
  </span>
813
921
  </span></span>
814
922
  </div>
@@ -839,7 +947,19 @@ subsection: forms
839
947
  aria-describedby="form-demo-sections-complex-form-labels"
840
948
  >
841
949
  <span class="pf-v6-c-button__icon">
842
- <i class="fas fa-question-circle" aria-hidden="true"></i>
950
+ <svg
951
+ class="pf-v6-svg"
952
+ viewBox="0 0 1024 1024"
953
+ fill="currentColor"
954
+ aria-hidden="true"
955
+ role="img"
956
+ width="1em"
957
+ height="1em"
958
+ >
959
+ <path
960
+ 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"
961
+ />
962
+ </svg>
843
963
  </span>
844
964
  </span></span>
845
965
  </div>
@@ -929,7 +1049,7 @@ subsection: forms
929
1049
  </div>
930
1050
 
931
1051
  <div
932
- class="pf-v6-c-form__field-group"
1052
+ class="pf-v6-c-form__field-group pf-m-expandable"
933
1053
  role="group"
934
1054
  aria-labelledby="form-demo-sections-complex-form-alerting-title"
935
1055
  >
@@ -966,7 +1086,7 @@ subsection: forms
966
1086
  </div>
967
1087
 
968
1088
  <div
969
- class="pf-v6-c-form__field-group"
1089
+ class="pf-v6-c-form__field-group pf-m-expandable"
970
1090
  role="group"
971
1091
  aria-labelledby="form-demo-sections-complex-form-query-title"
972
1092
  >
@@ -1003,7 +1123,7 @@ subsection: forms
1003
1123
  </div>
1004
1124
 
1005
1125
  <div
1006
- class="pf-v6-c-form__field-group"
1126
+ class="pf-v6-c-form__field-group pf-m-expandable"
1007
1127
  role="group"
1008
1128
  aria-labelledby="form-demo-sections-complex-form-affinity-title"
1009
1129
  >
@@ -1037,9 +1157,9 @@ subsection: forms
1037
1157
  >If specified, the pod's scheduling constraints.</div>
1038
1158
  </div>
1039
1159
  </div>
1040
- <div class="pf-v6-c-form__field-group-body" hidden>
1160
+ <div class="pf-v6-c-form__field-group-body" inert>
1041
1161
  <div
1042
- class="pf-v6-c-form__field-group pf-m-expanded"
1162
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1043
1163
  role="group"
1044
1164
  aria-labelledby="form-demo-sections-complex-form-node-affinity-title"
1045
1165
  >
@@ -1076,7 +1196,7 @@ subsection: forms
1076
1196
  </div>
1077
1197
  <div class="pf-v6-c-form__field-group-body">
1078
1198
  <div
1079
- class="pf-v6-c-form__field-group"
1199
+ class="pf-v6-c-form__field-group pf-m-expandable"
1080
1200
  role="group"
1081
1201
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title"
1082
1202
  >
@@ -1113,7 +1233,7 @@ subsection: forms
1113
1233
  </div>
1114
1234
 
1115
1235
  <div
1116
- class="pf-v6-c-form__field-group pf-m-expanded"
1236
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1117
1237
  role="group"
1118
1238
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title"
1119
1239
  >
@@ -1207,7 +1327,7 @@ subsection: forms
1207
1327
  </div>
1208
1328
 
1209
1329
  <div
1210
- class="pf-v6-c-form__field-group"
1330
+ class="pf-v6-c-form__field-group pf-m-expandable"
1211
1331
  role="group"
1212
1332
  aria-labelledby="form-demo-sections-complex-form-pod-affinity-title"
1213
1333
  >
@@ -1246,7 +1366,7 @@ subsection: forms
1246
1366
  </div>
1247
1367
 
1248
1368
  <div
1249
- class="pf-v6-c-form__field-group pf-m-expanded"
1369
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1250
1370
  role="group"
1251
1371
  aria-labelledby="form-demo-sections-complex-form-routing-title"
1252
1372
  >
@@ -1432,7 +1552,7 @@ subsection: forms
1432
1552
  </div>
1433
1553
 
1434
1554
  <div
1435
- class="pf-v6-c-form__field-group pf-m-expanded"
1555
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1436
1556
  role="group"
1437
1557
  aria-labelledby="form-demo-sections-complex-form-health-checks-title"
1438
1558
  >
@@ -1537,7 +1657,7 @@ subsection: forms
1537
1657
  </div>
1538
1658
 
1539
1659
  <div
1540
- class="pf-v6-c-form__field-group"
1660
+ class="pf-v6-c-form__field-group pf-m-expandable"
1541
1661
  role="group"
1542
1662
  aria-labelledby="form-demo-sections-complex-form-build-configuration-title"
1543
1663
  >
@@ -1576,7 +1696,7 @@ subsection: forms
1576
1696
  </div>
1577
1697
 
1578
1698
  <div
1579
- class="pf-v6-c-form__field-group"
1699
+ class="pf-v6-c-form__field-group pf-m-expandable"
1580
1700
  role="group"
1581
1701
  aria-labelledby="form-demo-sections-complex-form-deployment-title"
1582
1702
  >