@patternfly/patternfly 6.2.1 → 6.2.2

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

@@ -0,0 +1,61 @@
+---
+id: 'Truncate'
+section: components
+cssPrefix: pf-v6-c-truncate
+---import './Truncate.css'
+
+## 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.
+
+### Default
+
+```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>
+  </span>
+</div>
+
+```
+
+### Middle
+
+```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>
+  </span>
+</div>
+
+```
+
+### Start
+
+```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>
+  </span>
+</div>
+
+```
+
+## 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. |

package/{docs → dist/docs}/demos/Card/examples/Card.md

@@ -723,25 +723,6 @@ 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"
           >
@@ -752,25 +733,6 @@ 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"
           >
@@ -781,25 +743,6 @@ 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 → dist/docs}/demos/DescriptionList/examples/DescriptionList.md

@@ -736,25 +736,6 @@ 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"
                   >
@@ -765,25 +746,6 @@ 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 → dist/docs}/demos/Drawer/examples/Drawer.md

@@ -369,25 +369,6 @@ 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"
                   >
@@ -398,25 +379,6 @@ 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 → dist/docs}/demos/PrimaryDetail/examples/PrimaryDetail.md

@@ -1001,25 +1001,6 @@ 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"
                           aria-controls="primary-detail-expanded-example-drawer-tabs-tab1-panel"
                           id="primary-detail-expanded-example-drawer-tabs-tab1-link"
@@ -1031,25 +1012,6 @@ 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"
                           aria-controls="primary-detail-expanded-example-drawer-tabs-tab2-panel"
                           id="primary-detail-expanded-example-drawer-tabs-tab2-link"
@@ -6276,25 +6238,6 @@ 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"
                       aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab1-panel"
                       id="primary-detail-inline-modifier-example-drawer-tabs-tab1-link"
@@ -6306,25 +6249,6 @@ 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"
                       aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab2-panel"
                       id="primary-detail-inline-modifier-example-drawer-tabs-tab2-link"

package/{docs → dist/docs}/demos/Table/examples/Table.md

@@ -2609,7 +2609,7 @@ wrapperTag: div
                     class="pf-v6-c-button pf-m-plain"
                     id="expandable-demo-table-expandable-toggle-thead"
                     type="button"
-                    aria-controls="expandable-demo-table-content-1 expandable-demo-table-content-2 expandable-demo-table-content-3 expandable-demo-table-content-4 expandable-demo-table-content-5"
+                    aria-controls="expandable-demo-table-content-thead"
                     aria-labelledby="expandable-demo-table-node-thead"
                     aria-label="Toggle all rows"
                   >
@@ -2790,7 +2790,7 @@ wrapperTag: div
                   class="pf-v6-c-table__td"
                   role="cell"
                   colspan="7"
-                  id="expandable-demo-table-content-1"
+                  id="expandable-demo-table-content1"
                 >
                   <div class="pf-v6-c-table__expandable-row-content">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -2810,19 +2810,14 @@ wrapperTag: div
 
             <tbody class="pf-v6-c-table__tbody pf-m-expanded" role="rowgroup">
               <tr class="pf-v6-c-table__tr pf-m-expanded" role="row">
-                <td
-                  class="pf-v6-c-table__td pf-v6-c-table__toggle"
-                  aria-label="Row expansion"
-                >
+                <td class="pf-v6-c-table__td pf-v6-c-table__toggle" role="cell">
                   <button
                     class="pf-v6-c-button pf-m-expanded pf-m-plain"
-                    id="expandable-demo-table-expandable-toggle-2"
+                    id="expandable-demo-table-expandable-toggle-3"
                     type="button"
                     aria-expanded="true"
-                    aria-controls="expandable-demo-table-content-2"
-                    aria-labelledby="expandable-demo-table-node-2"
+                    aria-labelledby="expandable-demo-table-node-3 expandable-demo-table-expandable-toggle-3"
                     aria-label="Toggle row"
-                    aria-describedby="true"
                   >
                     <span class="pf-v6-c-button__icon">
                       <div class="pf-v6-c-table__toggle-icon">
@@ -2831,7 +2826,6 @@ wrapperTag: div
                     </span>
                   </button>
                 </td>
-
                 <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
                   <div class="pf-v6-c-check pf-m-standalone">
                     <input
@@ -2914,7 +2908,7 @@ wrapperTag: div
                   class="pf-v6-c-table__td"
                   role="cell"
                   colspan="5"
-                  id="expandable-demo-table-content-2"
+                  id="expandable-demo-table-content2"
                 >
                   <div class="pf-v6-c-table__expandable-row-content">
                     <div class="pf-v6-c-content">
@@ -2950,16 +2944,12 @@ wrapperTag: div
 
             <tbody class="pf-v6-c-table__tbody" role="rowgroup">
               <tr class="pf-v6-c-table__tr" role="row">
-                <td
-                  class="pf-v6-c-table__td pf-v6-c-table__toggle"
-                  aria-label="Row expansion"
-                >
+                <td class="pf-v6-c-table__td pf-v6-c-table__toggle" role="cell">
                   <button
                     class="pf-v6-c-button pf-m-plain"
-                    id="expandable-demo-table-expandable-toggle-3"
+                    id="expandable-demo-table-expandable-toggle-5"
                     type="button"
-                    aria-controls="expandable-demo-table-content-3"
-                    aria-labelledby="expandable-demo-table-node-3"
+                    aria-labelledby="expandable-demo-table-node-5 expandable-demo-table-expandable-toggle-5"
                     aria-label="Toggle row"
                   >
                     <span class="pf-v6-c-button__icon">
@@ -2969,7 +2959,6 @@ wrapperTag: div
                     </span>
                   </button>
                 </td>
-
                 <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
                   <div class="pf-v6-c-check pf-m-standalone">
                     <input
@@ -3046,7 +3035,7 @@ wrapperTag: div
                   class="pf-v6-c-table__td"
                   role="cell"
                   colspan="9"
-                  id="expandable-demo-table-content-3"
+                  id="expandable-demo-table-content3"
                 >
                   <div class="pf-v6-c-table__expandable-row-content">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -3062,16 +3051,12 @@ wrapperTag: div
 
             <tbody class="pf-v6-c-table__tbody" role="rowgroup">
               <tr class="pf-v6-c-table__tr" role="row">
-                <td
-                  class="pf-v6-c-table__td pf-v6-c-table__toggle"
-                  aria-label="Row expansion"
-                >
+                <td class="pf-v6-c-table__td pf-v6-c-table__toggle" role="cell">
                   <button
                     class="pf-v6-c-button pf-m-plain"
-                    id="expandable-demo-table-expandable-toggle-4"
+                    id="expandable-demo-table-expandable-toggle-7"
                     type="button"
-                    aria-controls="expandable-demo-table-content-4"
-                    aria-labelledby="expandable-demo-table-node-4"
+                    aria-labelledby="expandable-demo-table-node-7 expandable-demo-table-expandable-toggle-7"
                     aria-label="Toggle row"
                   >
                     <span class="pf-v6-c-button__icon">
@@ -3081,7 +3066,6 @@ wrapperTag: div
                     </span>
                   </button>
                 </td>
-
                 <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
                   <div class="pf-v6-c-check pf-m-standalone">
                     <input
@@ -3158,7 +3142,7 @@ wrapperTag: div
                   class="pf-v6-c-table__td"
                   role="cell"
                   colspan="9"
-                  id="expandable-demo-table-content-4"
+                  id="expandable-demo-table-content4"
                 >
                   <div class="pf-v6-c-table__expandable-row-content">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -3174,16 +3158,12 @@ wrapperTag: div
 
             <tbody class="pf-v6-c-table__tbody" role="rowgroup">
               <tr class="pf-v6-c-table__tr" role="row">
-                <td
-                  class="pf-v6-c-table__td pf-v6-c-table__toggle"
-                  aria-label="Row expansion"
-                >
+                <td class="pf-v6-c-table__td pf-v6-c-table__toggle" role="cell">
                   <button
                     class="pf-v6-c-button pf-m-plain"
-                    id="expandable-demo-table-expandable-toggle-5"
+                    id="expandable-demo-table-expandable-toggle-9"
                     type="button"
-                    aria-controls="expandable-demo-table-content-5"
-                    aria-labelledby="expandable-demo-table-node-5"
+                    aria-labelledby="expandable-demo-table-node-9 expandable-demo-table-expandable-toggle-9"
                     aria-label="Toggle row"
                   >
                     <span class="pf-v6-c-button__icon">
@@ -3200,13 +3180,13 @@ wrapperTag: div
                 >
                   <label
                     class="pf-v6-c-check pf-m-standalone"
-                    for="expandable-demo-table-checkrow-5-check-input"
+                    for="expandable-demo-table-checkrow-9-check-input"
                   >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      id="expandable-demo-table-checkrow-5-check-input"
-                      name="expandable-demo-table-checkrow-5-check-input"
+                      id="expandable-demo-table-checkrow-9-check-input"
+                      name="expandable-demo-table-checkrow-9-check-input"
                       aria-label="Select row"
                     />
                   </label>
@@ -3276,7 +3256,7 @@ wrapperTag: div
                   class="pf-v6-c-table__td"
                   role="cell"
                   colspan="9"
-                  id="expandable-demo-table-content-5"
+                  id="expandable-demo-table-content5"
                 >
                   <div class="pf-v6-c-table__expandable-row-content">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod