@patternfly/patternfly 6.3.0-prerelease.1 → 6.3.0-prerelease.11

package/docs/components/Truncate/examples/Truncate.md

@@ -6,18 +6,18 @@ cssPrefix: pf-v6-c-truncate
 
 ## Examples
 
-### Notes
-
-The truncate component contains two child elements, `.pf-v6-c-truncate__start` and `.pf-v6-c-truncate__end`. If both `start` and `end` are present within `.pf-v6-c-truncate`, trucation will occur in the middle of the string. If only `.pf-v6-c-truncate__start` is present, truncation will occur at the end of the string. If only `.pf-v6-c-truncate__end` is present, truncation will occur at the beginning of the string. A `.pf-v6-c-popover` will be automatically applied to the PatternFly React implementation. `‎` must be included at the end of string to denote the ending punctuation mark. Otherwise it will occur and the beggining of truncation for a `pf-v6-c-truncate__end` element.
+The default behavior of the truncate component is to truncate based on whether the content can fit within the width of its parent container, and to prevent text from wrapping. The following examples that use this default behavior render the truncate component inside a resizable container, allowing you to see how the parent container width affects the truncation.
 
 ### Default
 
+When only the `.pf-v6-c-truncate__start` element is used, truncation will occur at the end of the string.
+
 ```html
 <div class="pf-v6-c-truncate--example">
   <span class="pf-v6-c-truncate">
     <span
       class="pf-v6-c-truncate__start"
-    >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</span>
+    >redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip</span>
   </span>
 </div>
 
@@ -25,13 +25,15 @@ The truncate component contains two child elements, `.pf-v6-c-truncate__start` a
 
 ### Middle
 
+When both `.pf-v6-c-truncate__start` and `.pf-v6-c-truncate__end` elements are used, truncation will occur between the strings that are in each respective element. As the parent container width changes, the point at which content within the `.pf-v6-c-truncate__start` element is truncated will also change.
+
 ```html
 <div class="pf-v6-c-truncate--example">
   <span class="pf-v6-c-truncate">
     <span
       class="pf-v6-c-truncate__start"
-    >Vestibulum interdum risus et enim faucibus,&nbsp;</span>
-    <span class="pf-v6-c-truncate__end">sit amet molestie est accumsan.</span>
+    >redhat_logo_black_and_white_reversed_simple_</span>
+    <span class="pf-v6-c-truncate__end">with_fedora_container.zip</span>
   </span>
 </div>
 
@@ -39,23 +41,64 @@ The truncate component contains two child elements, `.pf-v6-c-truncate__start` a
 
 ### Start
 
+When only the `.pf-v6-c-truncate__end` element is used, truncation will occur at the start of the string. `&lrm;` **must** be included at the end of a string to denote the ending punctuation mark, otherwise it will render at the start of the truncated content.
+
 ```html
 <div class="pf-v6-c-truncate--example">
   <span class="pf-v6-c-truncate">
     <span
       class="pf-v6-c-truncate__end"
-    >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.&lrm;</span>
+    >redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip</span>
   </span>
 </div>
 
 ```
 
+### Based on max characters
+
+Apply the `.pf-m-fixed` class to the `.pf-v6-c-truncate` element to implement truncation based on a fixed amount of characters rather than a parent container width.
+
+```html
+<div>Truncated at end position:</div>
+<span class="pf-v6-c-truncate pf-m-fixed">
+  <span
+    class="pf-v6-c-truncate__text"
+  >redhat_logo_black_and_white_reversed_simple_with_</span>
+  <span class="pf-v6-c-truncate__omission" aria-hidden="true">&hellip;</span>
+  <span class="pf-v6-screen-reader">fedora_container.zip</span>
+</span>
+<br />
+<br />
+<div>Truncated at middle position:</div>
+<span class="pf-v6-c-truncate pf-m-fixed">
+  <span class="pf-v6-c-truncate__text">redhat_logo_black_and_</span>
+  <span class="pf-v6-screen-reader">white_reversed_simple_with_</span>
+
+  <span class="pf-v6-c-truncate__omission" aria-hidden="true">&hellip;</span>
+  <span class="pf-v6-c-truncate__text">fedora_container.zip</span>
+</span>
+<br />
+<br />
+<div>Truncated at start position:</div>
+<span class="pf-v6-c-truncate pf-m-fixed">
+  <span class="pf-v6-screen-reader">redhat_logo_black_</span>
+
+  <span class="pf-v6-c-truncate__omission" aria-hidden="true">&hellip;</span>
+  <span
+    class="pf-v6-c-truncate__text"
+  >and_white_reversed_simple_with_fedora_container.zip</span>
+</span>
+
+```
+
 ## Documentation
 
 ### Usage
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v6-c-truncate` | `<span>` | Initiates the truncate component. |
-| `.pf-v6-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
-| `.pf-v6-c-truncate__end` | `<span>` | Defines the truncate component ending text. |
+| `.pf-v6-c-truncate` | `<span>` | Initiates the truncate component. **Required** |
+| `.pf-v6-c-truncate__start` | `<span>` | Defines the truncate component starting text. **Required** when using default/end or middle truncation, **except** for when the `.pf-m-fixed` class is applied to the `.pf-v6-c-truncate` element. |
+| `.pf-v6-c-truncate__end` | `<span>` | Defines the truncate component ending text. **Required** when using start or middle truncation, **except** for when the `.pf-m-fixed` class is applied to the `.pf-v6-c-truncate` element.  |
+| `.pf-v6-c-truncate__text` | `<span>` | Defines the visible truncate component text. **Required** and should only be used when the `.pf-m-fixed` class is applied to the `.pf-v6-c-truncate` element. |
+| `.pf-m-fixed` | `.pf-v6-c-truncate` | Modifies the truncate component to base truncation on a fixed amount of characters rather than container width. |

package/docs/demos/Card/examples/Card.md

@@ -723,6 +723,25 @@ wrapperTag: div
           <button
             type="button"
             class="pf-v6-c-tabs__link"
+            onclick="
+                      event.preventDefault();
+                      ((e) => {
+                        const el = this,
+                              li = this.closest('li'),
+                              ul = this.closest('ul'),
+                              tabs = this.closest('.pf-v6-c-tabs'),
+                              left = Math.round(li.offsetLeft),
+                              top = Math.round(li.offsetTop),
+                              width = Math.round(li.offsetWidth),
+                              height = Math.round(li.offsetHeight);
+                  
+                        ul.querySelectorAll('li').forEach(function(el) {
+                          el.classList.remove('pf-m-current')});
+                          li.classList.add('pf-m-current');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                        }
+                      )()"
             role="tab"
             id="status-tabs-object-1-link"
           >
@@ -733,6 +752,25 @@ wrapperTag: div
           <button
             type="button"
             class="pf-v6-c-tabs__link"
+            onclick="
+                      event.preventDefault();
+                      ((e) => {
+                        const el = this,
+                              li = this.closest('li'),
+                              ul = this.closest('ul'),
+                              tabs = this.closest('.pf-v6-c-tabs'),
+                              left = Math.round(li.offsetLeft),
+                              top = Math.round(li.offsetTop),
+                              width = Math.round(li.offsetWidth),
+                              height = Math.round(li.offsetHeight);
+                  
+                        ul.querySelectorAll('li').forEach(function(el) {
+                          el.classList.remove('pf-m-current')});
+                          li.classList.add('pf-m-current');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                        }
+                      )()"
             role="tab"
             id="status-tabs-object-2-link"
           >
@@ -743,6 +781,25 @@ wrapperTag: div
           <button
             type="button"
             class="pf-v6-c-tabs__link"
+            onclick="
+                      event.preventDefault();
+                      ((e) => {
+                        const el = this,
+                              li = this.closest('li'),
+                              ul = this.closest('ul'),
+                              tabs = this.closest('.pf-v6-c-tabs'),
+                              left = Math.round(li.offsetLeft),
+                              top = Math.round(li.offsetTop),
+                              width = Math.round(li.offsetWidth),
+                              height = Math.round(li.offsetHeight);
+                  
+                        ul.querySelectorAll('li').forEach(function(el) {
+                          el.classList.remove('pf-m-current')});
+                          li.classList.add('pf-m-current');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                        }
+                      )()"
             role="tab"
             id="status-tabs-object-3-link"
           >

package/docs/demos/DescriptionList/examples/DescriptionList.md

@@ -736,6 +736,25 @@ cssPrefix: pf-d-description-list
                   <button
                     type="button"
                     class="pf-v6-c-tabs__link"
+                    onclick="
+                                  event.preventDefault();
+                                  ((e) => {
+                                    const el = this,
+                                          li = this.closest('li'),
+                                          ul = this.closest('ul'),
+                                          tabs = this.closest('.pf-v6-c-tabs'),
+                                          left = Math.round(li.offsetLeft),
+                                          top = Math.round(li.offsetTop),
+                                          width = Math.round(li.offsetWidth),
+                                          height = Math.round(li.offsetHeight);
+                              
+                                    ul.querySelectorAll('li').forEach(function(el) {
+                                      el.classList.remove('pf-m-current')});
+                                      li.classList.add('pf-m-current');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                                    }
+                                  )()"
                     role="tab"
                     id="description-list-in-drawer-example-panel-tabs-tab1-link"
                   >
@@ -746,6 +765,25 @@ cssPrefix: pf-d-description-list
                   <button
                     type="button"
                     class="pf-v6-c-tabs__link"
+                    onclick="
+                                  event.preventDefault();
+                                  ((e) => {
+                                    const el = this,
+                                          li = this.closest('li'),
+                                          ul = this.closest('ul'),
+                                          tabs = this.closest('.pf-v6-c-tabs'),
+                                          left = Math.round(li.offsetLeft),
+                                          top = Math.round(li.offsetTop),
+                                          width = Math.round(li.offsetWidth),
+                                          height = Math.round(li.offsetHeight);
+                              
+                                    ul.querySelectorAll('li').forEach(function(el) {
+                                      el.classList.remove('pf-m-current')});
+                                      li.classList.add('pf-m-current');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                                    }
+                                  )()"
                     role="tab"
                     id="description-list-in-drawer-example-panel-tabs-tab2-link"
                   >

package/docs/demos/Drawer/examples/Drawer.md

@@ -369,6 +369,25 @@ wrapperTag: div
                   <button
                     type="button"
                     class="pf-v6-c-tabs__link"
+                    onclick="
+                                  event.preventDefault();
+                                  ((e) => {
+                                    const el = this,
+                                          li = this.closest('li'),
+                                          ul = this.closest('ul'),
+                                          tabs = this.closest('.pf-v6-c-tabs'),
+                                          left = Math.round(li.offsetLeft),
+                                          top = Math.round(li.offsetTop),
+                                          width = Math.round(li.offsetWidth),
+                                          height = Math.round(li.offsetHeight);
+                              
+                                    ul.querySelectorAll('li').forEach(function(el) {
+                                      el.classList.remove('pf-m-current')});
+                                      li.classList.add('pf-m-current');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                                    }
+                                  )()"
                     role="tab"
                     id="drawer-collapsed-example-panel-tabs-tab1-link"
                   >
@@ -379,6 +398,25 @@ wrapperTag: div
                   <button
                     type="button"
                     class="pf-v6-c-tabs__link"
+                    onclick="
+                                  event.preventDefault();
+                                  ((e) => {
+                                    const el = this,
+                                          li = this.closest('li'),
+                                          ul = this.closest('ul'),
+                                          tabs = this.closest('.pf-v6-c-tabs'),
+                                          left = Math.round(li.offsetLeft),
+                                          top = Math.round(li.offsetTop),
+                                          width = Math.round(li.offsetWidth),
+                                          height = Math.round(li.offsetHeight);
+                              
+                                    ul.querySelectorAll('li').forEach(function(el) {
+                                      el.classList.remove('pf-m-current')});
+                                      li.classList.add('pf-m-current');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                                    }
+                                  )()"
                     role="tab"
                     id="drawer-collapsed-example-panel-tabs-tab2-link"
                   >

package/docs/demos/Form/examples/BasicForms.md

@@ -59,7 +59,19 @@ subsection: forms
           aria-describedby="-phone"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-question-circle" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 1024 1024"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <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"
+              />
+            </svg>
           </span>
         </span></span>
     </div>
@@ -259,7 +271,19 @@ subsection: forms
           aria-describedby="form-demo-horizontal-contact-legend"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-question-circle" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 1024 1024"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <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"
+              />
+            </svg>
           </span>
         </span></span>
     </div>
@@ -538,7 +562,19 @@ subsection: forms
             aria-describedby="form-demo-sections-repeatable-fields-clientid"
           >
             <span class="pf-v6-c-button__icon">
-              <i class="fas fa-question-circle" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 1024 1024"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <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"
+                />
+              </svg>
             </span>
           </span></span>
       </div>
@@ -568,7 +604,19 @@ subsection: forms
             aria-describedby="form-demo-sections-repeatable-fields-name"
           >
             <span class="pf-v6-c-button__icon">
-              <i class="fas fa-question-circle" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 1024 1024"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <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"
+                />
+              </svg>
             </span>
           </span></span>
       </div>
@@ -598,7 +646,19 @@ subsection: forms
             aria-describedby="form-demo-sections-repeatable-fields-description"
           >
             <span class="pf-v6-c-button__icon">
-              <i class="fas fa-question-circle" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 1024 1024"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <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"
+                />
+              </svg>
             </span>
           </span></span>
       </div>
@@ -639,7 +699,19 @@ subsection: forms
             aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
           >
             <span class="pf-v6-c-button__icon">
-              <i class="fas fa-question-circle" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 1024 1024"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <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"
+                />
+              </svg>
             </span>
           </span></span>
       </div>
@@ -669,7 +741,19 @@ subsection: forms
             aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
           >
             <span class="pf-v6-c-button__icon">
-              <i class="fas fa-question-circle" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 1024 1024"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <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"
+                />
+              </svg>
             </span>
           </span></span>
       </div>
@@ -769,7 +853,19 @@ subsection: forms
             aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
           >
             <span class="pf-v6-c-button__icon">
-              <i class="fas fa-question-circle" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 1024 1024"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <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"
+                />
+              </svg>
             </span>
           </span></span>
       </div>
@@ -808,7 +904,19 @@ subsection: forms
           aria-describedby="form-demo-sections-complex-form-name"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-question-circle" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 1024 1024"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <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"
+              />
+            </svg>
           </span>
         </span></span>
     </div>
@@ -839,7 +947,19 @@ subsection: forms
           aria-describedby="form-demo-sections-complex-form-labels"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-question-circle" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 1024 1024"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <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"
+              />
+            </svg>
           </span>
         </span></span>
     </div>

package/docs/demos/Masthead/examples/Masthead.md

@@ -2066,7 +2066,7 @@ wrapperTag: div
 ### Horizontal nav
 
 ```html isFullscreen
-<div class="pf-v6-c-page" id="masthead-horizontal-nav">
+<div class="pf-v6-c-page pf-m-no-sidebar" id="masthead-horizontal-nav">
   <div class="pf-v6-c-skip-to-content">
     <a
       class="pf-v6-c-button pf-m-primary"

package/docs/demos/Modal/examples/Modal.md

@@ -2096,7 +2096,19 @@ section: components
                   aria-describedby="-form-name"
                 >
                   <span class="pf-v6-c-button__icon">
-                    <i class="fas fa-question-circle" aria-hidden="true"></i>
+                    <svg
+                      class="pf-v6-svg"
+                      viewBox="0 0 1024 1024"
+                      fill="currentColor"
+                      aria-hidden="true"
+                      role="img"
+                      width="1em"
+                      height="1em"
+                    >
+                      <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"
+                      />
+                    </svg>
                   </span>
                 </span></span>
             </div>
@@ -2121,7 +2133,19 @@ section: components
                   aria-describedby="-form-email"
                 >
                   <span class="pf-v6-c-button__icon">
-                    <i class="fas fa-question-circle" aria-hidden="true"></i>
+                    <svg
+                      class="pf-v6-svg"
+                      viewBox="0 0 1024 1024"
+                      fill="currentColor"
+                      aria-hidden="true"
+                      role="img"
+                      width="1em"
+                      height="1em"
+                    >
+                      <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"
+                      />
+                    </svg>
                   </span>
                 </span></span>
             </div>
@@ -2146,7 +2170,19 @@ section: components
                   aria-describedby="-form-address"
                 >
                   <span class="pf-v6-c-button__icon">
-                    <i class="fas fa-question-circle" aria-hidden="true"></i>
+                    <svg
+                      class="pf-v6-svg"
+                      viewBox="0 0 1024 1024"
+                      fill="currentColor"
+                      aria-hidden="true"
+                      role="img"
+                      width="1em"
+                      height="1em"
+                    >
+                      <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"
+                      />
+                    </svg>
                   </span>
                 </span></span>
             </div>

package/docs/demos/Nav/examples/Nav.md

@@ -1036,7 +1036,7 @@ section: components
 ### Horizontal nav
 
 ```html isFullscreen
-<div class="pf-v6-c-page" id="nav-horizontal-example">
+<div class="pf-v6-c-page pf-m-no-sidebar" id="nav-horizontal-example">
   <div class="pf-v6-c-skip-to-content">
     <a
       class="pf-v6-c-button pf-m-primary"
@@ -1678,7 +1678,7 @@ section: components
 ### Horizontal nav with horizontal subnav
 
 ```html isFullscreen
-<div class="pf-v6-c-page" id="nav-horizontal-example">
+<div class="pf-v6-c-page pf-m-no-sidebar" id="nav-horizontal-example">
   <div class="pf-v6-c-skip-to-content">
     <a
       class="pf-v6-c-button pf-m-primary"