@patternfly/patternfly 6.3.0-prerelease.5 → 6.3.0-prerelease.8

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 (26) hide show
  1. package/README.md +1 -1
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/components/MenuToggle/menu-toggle.css +8 -4
  4. package/components/MenuToggle/menu-toggle.scss +15 -3
  5. package/components/Page/page.css +4 -3
  6. package/components/Page/page.scss +4 -2
  7. package/components/_index.css +12 -7
  8. package/docs/components/Button/examples/Button.md +13 -1
  9. package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
  10. package/docs/components/Form/examples/Form.md +156 -12
  11. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
  12. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  13. package/docs/components/Page/examples/Page.md +1 -0
  14. package/docs/components/Table/examples/Table.md +26 -2
  15. package/docs/demos/Form/examples/BasicForms.md +130 -10
  16. package/docs/demos/Masthead/examples/Masthead.md +1 -1
  17. package/docs/demos/Modal/examples/Modal.md +39 -3
  18. package/docs/demos/Nav/examples/Nav.md +2 -2
  19. package/docs/demos/Page/examples/Page.md +355 -0
  20. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  21. package/docs/demos/Table/examples/Table.md +26 -2
  22. package/package.json +5 -5
  23. package/patternfly-no-globals.css +12 -7
  24. package/patternfly.css +12 -7
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # PatternFly
2
-
2
+
3
3
  ## Install
4
4
 
5
5
  - This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at [https://docs.npmjs.com/getting-started/using-a-package.json](https://docs.npmjs.com/getting-started/using-a-package.json).
package/assets/images/icon-help.hbs ADDED
@@ -0,0 +1,3 @@
1
+ <svg class="pf-v6-svg" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
2
+ <path 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"></path>
3
+ </svg>
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -450,16 +450,20 @@
450
450
  flex-wrap: nowrap;
451
451
  }
452
452
 
453
- .pf-v6-c-menu-toggle__icon {
454
- flex-shrink: 0;
455
- }
456
453
  .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
457
454
  .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
458
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
455
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
459
456
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
460
457
  margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
461
458
  }
462
459
 
460
+ .pf-v6-c-menu-toggle__icon {
461
+ flex-shrink: 0;
462
+ }
463
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
464
+ vertical-align: middle;
465
+ }
466
+
463
467
  .pf-v6-c-menu-toggle__controls {
464
468
  display: flex;
465
469
  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -567,17 +567,29 @@
567
567
  flex-wrap: nowrap;
568
568
  }
569
569
 
570
+ %pf-v6-menu-toggle__icon--MarginBlock {
571
+ margin-block-start: calc(var(--#{$menu-toggle}--PaddingBlockStart) * -1);
572
+ margin-block-end: calc(var(--#{$menu-toggle}--PaddingBlockEnd) * -1);
573
+ }
574
+
570
575
  .#{$menu-toggle}__icon {
571
576
  flex-shrink: 0;
572
-
577
+
578
+ @at-root .#{$menu-toggle}:not(.pf-m-plain) & {
579
+ @extend %pf-v6-menu-toggle__icon--MarginBlock;
580
+ }
581
+
573
582
  &.pf-m-avatar {
574
583
  .#{$avatar},
575
584
  img,
576
585
  svg {
577
- margin-block-start: calc(var(--#{$menu-toggle}--PaddingBlockStart) * -1);
578
- margin-block-end: calc(var(--#{$menu-toggle}--PaddingBlockEnd) * -1);
586
+ @extend %pf-v6-menu-toggle__icon--MarginBlock;
579
587
  }
580
588
  }
589
+
590
+ :where(picture, img) {
591
+ vertical-align: middle;
592
+ }
581
593
  }
582
594
 
583
595
  // - Menu toggle controls
package/components/Page/page.css CHANGED
@@ -3,8 +3,9 @@
3
3
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
4
4
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
5
5
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
6
- --pf-v6-c-page__sidebar--Width: 18.125rem;
7
- --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
6
+ --pf-v6-c-page__sidebar--Width--base: 18.125rem;
7
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
8
+ --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
8
9
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
10
  --pf-v6-c-page__sidebar--BoxShadow: none;
10
11
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -432,7 +433,7 @@
432
433
  -webkit-overflow-scrolling: touch;
433
434
  }
434
435
  @media screen and (min-width: 75rem) {
435
- .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
436
+ .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
436
437
  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
437
438
  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
438
439
  --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
package/components/Page/page.scss CHANGED
@@ -14,8 +14,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
14
14
 
15
15
  // Sidebar
16
16
  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
17
- --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
18
- --#{$page}__sidebar--xl--Width: #{pf-size-prem(290px)}; // TODO Can remove at breaking change
17
+ --#{$page}__sidebar--Width--base: #{pf-size-prem(290px)};
18
+ --#{$page}__sidebar--Width: var(--#{$page}__sidebar--Width--base);
19
+ --#{$page}__sidebar--xl--Width: var(--#{$page}__sidebar--Width--base);
19
20
  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
20
21
  --#{$page}__sidebar--BoxShadow: none;
21
22
 
@@ -352,6 +353,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
352
353
  -webkit-overflow-scrolling: touch;
353
354
 
354
355
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
356
+ @at-root .#{$page}.pf-m-no-sidebar,
355
357
  .#{$masthead} + &,
356
358
  .#{$page}__sidebar.pf-m-collapsed + & {
357
359
  --#{$page}__main-container--GridArea: var(--#{$page}--masthead--main-container--GridArea);
package/components/_index.css CHANGED
@@ -10666,16 +10666,20 @@ ul.pf-v6-c-list {
10666
10666
  flex-wrap: nowrap;
10667
10667
  }
10668
10668
 
10669
- .pf-v6-c-menu-toggle__icon {
10670
- flex-shrink: 0;
10671
- }
10672
10669
  .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
10673
10670
  .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
10674
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
10671
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
10675
10672
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
10676
10673
  margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
10677
10674
  }
10678
10675
 
10676
+ .pf-v6-c-menu-toggle__icon {
10677
+ flex-shrink: 0;
10678
+ }
10679
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
10680
+ vertical-align: middle;
10681
+ }
10682
+
10679
10683
  .pf-v6-c-menu-toggle__controls {
10680
10684
  display: flex;
10681
10685
  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
@@ -11765,8 +11769,9 @@ ul.pf-v6-c-list {
11765
11769
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
11766
11770
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
11767
11771
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
11768
- --pf-v6-c-page__sidebar--Width: 18.125rem;
11769
- --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
11772
+ --pf-v6-c-page__sidebar--Width--base: 18.125rem;
11773
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
11774
+ --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
11770
11775
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11771
11776
  --pf-v6-c-page__sidebar--BoxShadow: none;
11772
11777
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -12194,7 +12199,7 @@ ul.pf-v6-c-list {
12194
12199
  -webkit-overflow-scrolling: touch;
12195
12200
  }
12196
12201
  @media screen and (min-width: 75rem) {
12197
- .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12202
+ .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12198
12203
  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
12199
12204
  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
12200
12205
  --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
package/docs/components/Button/examples/Button.md CHANGED
@@ -1906,7 +1906,19 @@ For when a plain/icon button is placed inline with text
1906
1906
  aria-label="More info"
1907
1907
  >
1908
1908
  <span class="pf-v6-c-button__icon">
1909
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1909
+ <svg
1910
+ class="pf-v6-svg"
1911
+ viewBox="0 0 1024 1024"
1912
+ fill="currentColor"
1913
+ aria-hidden="true"
1914
+ role="img"
1915
+ width="1em"
1916
+ height="1em"
1917
+ >
1918
+ <path
1919
+ 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"
1920
+ />
1921
+ </svg>
1910
1922
  </span>
1911
1923
  </button>
1912
1924
  .
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -255,7 +255,19 @@ cssPrefix: pf-v6-c-code-editor
255
255
  <div class="pf-v6-c-code-editor__keyboard-shortcuts">
256
256
  <button class="pf-v6-c-button pf-m-link" type="button">
257
257
  <span class="pf-v6-c-button__icon pf-m-start">
258
- <i class="fas fa-question-circle" aria-hidden="true"></i>
258
+ <svg
259
+ class="pf-v6-svg"
260
+ viewBox="0 0 1024 1024"
261
+ fill="currentColor"
262
+ aria-hidden="true"
263
+ role="img"
264
+ width="1em"
265
+ height="1em"
266
+ >
267
+ <path
268
+ 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"
269
+ />
270
+ </svg>
259
271
  </span>
260
272
  <span class="pf-v6-c-button__text">View shortcuts</span>
261
273
  </button>
@@ -402,7 +414,19 @@ This is an extra container used in React to prevent event propagation if upload
402
414
  <div class="pf-v6-c-code-editor__keyboard-shortcuts">
403
415
  <button class="pf-v6-c-button pf-m-link" type="button">
404
416
  <span class="pf-v6-c-button__icon pf-m-start">
405
- <i class="fas fa-question-circle" aria-hidden="true"></i>
417
+ <svg
418
+ class="pf-v6-svg"
419
+ viewBox="0 0 1024 1024"
420
+ fill="currentColor"
421
+ aria-hidden="true"
422
+ role="img"
423
+ width="1em"
424
+ height="1em"
425
+ >
426
+ <path
427
+ 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"
428
+ />
429
+ </svg>
406
430
  </span>
407
431
  <span class="pf-v6-c-button__text">View shortcuts</span>
408
432
  </button>
package/docs/components/Form/examples/Form.md CHANGED
@@ -21,7 +21,19 @@ cssPrefix: pf-v6-c-form
21
21
  aria-describedby="form-vertical-name"
22
22
  >
23
23
  <span class="pf-v6-c-button__icon">
24
- <i class="fas fa-question-circle" aria-hidden="true"></i>
24
+ <svg
25
+ class="pf-v6-svg"
26
+ viewBox="0 0 1024 1024"
27
+ fill="currentColor"
28
+ aria-hidden="true"
29
+ role="img"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path
34
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
35
+ />
36
+ </svg>
25
37
  </span>
26
38
  </span></span>
27
39
  </div>
@@ -71,7 +83,19 @@ cssPrefix: pf-v6-c-form
71
83
  aria-describedby="form-horizontal-info"
72
84
  >
73
85
  <span class="pf-v6-c-button__icon">
74
- <i class="fas fa-question-circle" aria-hidden="true"></i>
86
+ <svg
87
+ class="pf-v6-svg"
88
+ viewBox="0 0 1024 1024"
89
+ fill="currentColor"
90
+ aria-hidden="true"
91
+ role="img"
92
+ width="1em"
93
+ height="1em"
94
+ >
95
+ <path
96
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
97
+ />
98
+ </svg>
75
99
  </span>
76
100
  </span></span>
77
101
  </div>
@@ -105,7 +129,19 @@ cssPrefix: pf-v6-c-form
105
129
  aria-describedby="form-horizontal-checkbox-legend"
106
130
  >
107
131
  <span class="pf-v6-c-button__icon">
108
- <i class="fas fa-question-circle" aria-hidden="true"></i>
132
+ <svg
133
+ class="pf-v6-svg"
134
+ viewBox="0 0 1024 1024"
135
+ fill="currentColor"
136
+ aria-hidden="true"
137
+ role="img"
138
+ width="1em"
139
+ height="1em"
140
+ >
141
+ <path
142
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
143
+ />
144
+ </svg>
109
145
  </span>
110
146
  </span></span>
111
147
  </div>
@@ -161,7 +197,19 @@ cssPrefix: pf-v6-c-form
161
197
  aria-describedby="form-horizontal-custom-breakpoint-name"
162
198
  >
163
199
  <span class="pf-v6-c-button__icon">
164
- <i class="fas fa-question-circle" aria-hidden="true"></i>
200
+ <svg
201
+ class="pf-v6-svg"
202
+ viewBox="0 0 1024 1024"
203
+ fill="currentColor"
204
+ aria-hidden="true"
205
+ role="img"
206
+ width="1em"
207
+ height="1em"
208
+ >
209
+ <path
210
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
211
+ />
212
+ </svg>
165
213
  </span>
166
214
  </span></span>
167
215
  </div>
@@ -473,7 +521,19 @@ cssPrefix: pf-v6-c-form
473
521
  aria-describedby="form-additional-infoform-additional-info-name"
474
522
  >
475
523
  <span class="pf-v6-c-button__icon">
476
- <i class="fas fa-question-circle" aria-hidden="true"></i>
524
+ <svg
525
+ class="pf-v6-svg"
526
+ viewBox="0 0 1024 1024"
527
+ fill="currentColor"
528
+ aria-hidden="true"
529
+ role="img"
530
+ width="1em"
531
+ height="1em"
532
+ >
533
+ <path
534
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
535
+ />
536
+ </svg>
477
537
  </span>
478
538
  </span></span>
479
539
  </div>
@@ -514,7 +574,19 @@ cssPrefix: pf-v6-c-form
514
574
  aria-describedby="form-additional-info-horizontalform-additional-info-horizontal-name"
515
575
  >
516
576
  <span class="pf-v6-c-button__icon">
517
- <i class="fas fa-question-circle" aria-hidden="true"></i>
577
+ <svg
578
+ class="pf-v6-svg"
579
+ viewBox="0 0 1024 1024"
580
+ fill="currentColor"
581
+ aria-hidden="true"
582
+ role="img"
583
+ width="1em"
584
+ height="1em"
585
+ >
586
+ <path
587
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
588
+ />
589
+ </svg>
518
590
  </span>
519
591
  </span></span>
520
592
  </div>
@@ -596,7 +668,19 @@ cssPrefix: pf-v6-c-form
596
668
  aria-describedby="form-field-group-field-group-label1"
597
669
  >
598
670
  <span class="pf-v6-c-button__icon">
599
- <i class="fas fa-question-circle" aria-hidden="true"></i>
671
+ <svg
672
+ class="pf-v6-svg"
673
+ viewBox="0 0 1024 1024"
674
+ fill="currentColor"
675
+ aria-hidden="true"
676
+ role="img"
677
+ width="1em"
678
+ height="1em"
679
+ >
680
+ <path
681
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
682
+ />
683
+ </svg>
600
684
  </span>
601
685
  </span></span>
602
686
  </div>
@@ -626,7 +710,19 @@ cssPrefix: pf-v6-c-form
626
710
  aria-describedby="form-field-group-field-group-label2"
627
711
  >
628
712
  <span class="pf-v6-c-button__icon">
629
- <i class="fas fa-question-circle" aria-hidden="true"></i>
713
+ <svg
714
+ class="pf-v6-svg"
715
+ viewBox="0 0 1024 1024"
716
+ fill="currentColor"
717
+ aria-hidden="true"
718
+ role="img"
719
+ width="1em"
720
+ height="1em"
721
+ >
722
+ <path
723
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
724
+ />
725
+ </svg>
630
726
  </span>
631
727
  </span></span>
632
728
  </div>
@@ -744,7 +840,19 @@ cssPrefix: pf-v6-c-form
744
840
  aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
745
841
  >
746
842
  <span class="pf-v6-c-button__icon">
747
- <i class="fas fa-question-circle" aria-hidden="true"></i>
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>
748
856
  </span>
749
857
  </span></span>
750
858
  </div>
@@ -774,7 +882,19 @@ cssPrefix: pf-v6-c-form
774
882
  aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
775
883
  >
776
884
  <span class="pf-v6-c-button__icon">
777
- <i class="fas fa-question-circle" aria-hidden="true"></i>
885
+ <svg
886
+ class="pf-v6-svg"
887
+ viewBox="0 0 1024 1024"
888
+ fill="currentColor"
889
+ aria-hidden="true"
890
+ role="img"
891
+ width="1em"
892
+ height="1em"
893
+ >
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>
778
898
  </span>
779
899
  </span></span>
780
900
  </div>
@@ -823,7 +943,19 @@ cssPrefix: pf-v6-c-form
823
943
  aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
824
944
  >
825
945
  <span class="pf-v6-c-button__icon">
826
- <i class="fas fa-question-circle" aria-hidden="true"></i>
946
+ <svg
947
+ class="pf-v6-svg"
948
+ viewBox="0 0 1024 1024"
949
+ fill="currentColor"
950
+ aria-hidden="true"
951
+ role="img"
952
+ width="1em"
953
+ height="1em"
954
+ >
955
+ <path
956
+ 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"
957
+ />
958
+ </svg>
827
959
  </span>
828
960
  </span></span>
829
961
  </div>
@@ -856,7 +988,19 @@ cssPrefix: pf-v6-c-form
856
988
  aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
857
989
  >
858
990
  <span class="pf-v6-c-button__icon">
859
- <i class="fas fa-question-circle" aria-hidden="true"></i>
991
+ <svg
992
+ class="pf-v6-svg"
993
+ viewBox="0 0 1024 1024"
994
+ fill="currentColor"
995
+ aria-hidden="true"
996
+ role="img"
997
+ width="1em"
998
+ height="1em"
999
+ >
1000
+ <path
1001
+ 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"
1002
+ />
1003
+ </svg>
860
1004
  </span>
861
1005
  </span></span>
862
1006
  </div>
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -558,7 +558,7 @@ cssPrefix: pf-v6-c-menu-toggle
558
558
 
559
559
  ```html
560
560
  <button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
561
- <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
561
+ <span class="pf-v6-c-menu-toggle__icon">
562
562
  <img
563
563
  class="pf-v6-c-avatar pf-m-sm"
564
564
  alt="Avatar image"
@@ -579,7 +579,7 @@ cssPrefix: pf-v6-c-menu-toggle
579
579
  type="button"
580
580
  aria-expanded="true"
581
581
  >
582
- <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
582
+ <span class="pf-v6-c-menu-toggle__icon">
583
583
  <img
584
584
  class="pf-v6-c-avatar pf-m-sm"
585
585
  alt="Avatar image"
@@ -601,7 +601,7 @@ cssPrefix: pf-v6-c-menu-toggle
601
601
  aria-expanded="false"
602
602
  disabled
603
603
  >
604
- <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
604
+ <span class="pf-v6-c-menu-toggle__icon">
605
605
  <img
606
606
  class="pf-v6-c-avatar pf-m-sm"
607
607
  alt="Avatar image"
@@ -2157,4 +2157,3 @@ Shown with default, primary, and secondary styling
2157
2157
  | `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
2158
2158
  | `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
2159
2159
  | `.pf-m-placeholder` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle text for placeholder styles. |
2160
- | `.pf-m-avatar` | `.pf-v6-c-menu-toggle__icon` | Modifies the menu toggle icon for avatar styles. |
package/docs/components/ModalBox/examples/ModalBox.md CHANGED
@@ -68,7 +68,19 @@ cssPrefix: pf-v6-c-modal-box
68
68
  <div class="pf-v6-c-modal-box__header-help">
69
69
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Help">
70
70
  <span class="pf-v6-c-button__icon">
71
- <i class="fas fa-question-circle" aria-hidden="true"></i>
71
+ <svg
72
+ class="pf-v6-svg"
73
+ viewBox="0 0 1024 1024"
74
+ fill="currentColor"
75
+ aria-hidden="true"
76
+ role="img"
77
+ width="1em"
78
+ height="1em"
79
+ >
80
+ <path
81
+ 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"
82
+ />
83
+ </svg>
72
84
  </span>
73
85
  </button>
74
86
  </div>
package/docs/components/Page/examples/Page.md CHANGED
@@ -412,6 +412,7 @@ This component provides the basic chrome for a page, including sidebar and main
412
412
  | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
413
413
  | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
414
414
  | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
415
+ | `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
415
416
  | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
416
417
  | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
417
418
  | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
package/docs/components/Table/examples/Table.md CHANGED
@@ -190,7 +190,19 @@ These classes can be used to ensure that the table changes between the tabular a
190
190
  aria-label="aria-label&#x3D;&quot;More info&quot;"
191
191
  >
192
192
  <span class="pf-v6-c-button__icon">
193
- <i class="fas fa-question-circle" aria-hidden="true"></i>
193
+ <svg
194
+ class="pf-v6-svg"
195
+ viewBox="0 0 1024 1024"
196
+ fill="currentColor"
197
+ aria-hidden="true"
198
+ role="img"
199
+ width="1em"
200
+ height="1em"
201
+ >
202
+ <path
203
+ 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"
204
+ />
205
+ </svg>
194
206
  </span>
195
207
  </button>
196
208
  </span>
@@ -225,7 +237,19 @@ These classes can be used to ensure that the table changes between the tabular a
225
237
  aria-label="aria-label&#x3D;&quot;More info&quot;"
226
238
  >
227
239
  <span class="pf-v6-c-button__icon">
228
- <i class="fas fa-question-circle" aria-hidden="true"></i>
240
+ <svg
241
+ class="pf-v6-svg"
242
+ viewBox="0 0 1024 1024"
243
+ fill="currentColor"
244
+ aria-hidden="true"
245
+ role="img"
246
+ width="1em"
247
+ height="1em"
248
+ >
249
+ <path
250
+ 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"
251
+ />
252
+ </svg>
229
253
  </span>
230
254
  </button>
231
255
  </span>