@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.61

package/docs/demos/Tabs/examples/Tabs.md

@@ -19,12 +19,31 @@ section: components
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -132,7 +151,7 @@ section: components
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -276,25 +295,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-details-panel"
                   id="tabs-tables-and-tabs-example-tabs-details-link"
@@ -306,25 +306,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-yaml-panel"
                   id="tabs-tables-and-tabs-example-tabs-yaml-link"
@@ -336,25 +317,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-environment-panel"
                   id="tabs-tables-and-tabs-example-tabs-environment-link"
@@ -366,25 +328,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-logs-panel"
                   id="tabs-tables-and-tabs-example-tabs-logs-link"
@@ -396,25 +339,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-events-panel"
                   id="tabs-tables-and-tabs-example-tabs-events-link"
@@ -426,25 +350,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-terminal-panel"
                   id="tabs-tables-and-tabs-example-tabs-terminal-link"
@@ -477,6 +382,7 @@ section: components
                 <div class="pf-v6-l-flex__item">
                   <dl
                     class="pf-v6-c-description-list pf-m-2-col-on-lg"
+                    aria-label="API 1"
                     aria-labelledby="-details-title"
                   >
                     <div class="pf-v6-c-description-list__group">
@@ -699,12 +605,31 @@ section: components
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -812,7 +737,7 @@ section: components
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -955,25 +880,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-details-panel"
                   id="tabs-tables-and-tabs-example-tabs-details-link"
@@ -985,25 +891,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-yaml-panel"
                   id="tabs-tables-and-tabs-example-tabs-yaml-link"
@@ -1015,25 +902,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-environment-panel"
                   id="tabs-tables-and-tabs-example-tabs-environment-link"
@@ -1045,25 +913,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-logs-panel"
                   id="tabs-tables-and-tabs-example-tabs-logs-link"
@@ -1075,25 +924,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-events-panel"
                   id="tabs-tables-and-tabs-example-tabs-events-link"
@@ -1105,25 +935,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-terminal-panel"
                   id="tabs-tables-and-tabs-example-tabs-terminal-link"
@@ -1147,25 +958,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
                   id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
@@ -1177,25 +969,6 @@ section: components
                 <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="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
                   id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
@@ -1225,7 +998,7 @@ section: components
                     <div class="pf-v6-l-flex__item">
                       <dl
                         class="pf-v6-c-description-list pf-m-2-col-on-lg"
-                        aria-label="Pod information list"
+                        aria-label="API 2"
                       >
                         <div class="pf-v6-c-description-list__group">
                           <dt class="pf-v6-c-description-list__term">Name</dt>
@@ -1418,12 +1191,31 @@ section: components
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -1531,7 +1323,7 @@ section: components
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -1674,25 +1466,6 @@ section: components
                 <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="nested-tabs-example-tabs-tabs-cluster-1-panel"
                   id="nested-tabs-example-tabs-tabs-cluster-1-link"
@@ -1704,25 +1477,6 @@ section: components
                 <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="nested-tabs-example-tabs-tabs-cluster-2-panel"
                   id="nested-tabs-example-tabs-tabs-cluster-2-link"
@@ -1768,25 +1522,6 @@ section: components
                                 <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="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
                                   id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
@@ -1801,25 +1536,6 @@ section: components
                                 <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="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
                                   id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
@@ -1836,25 +1552,6 @@ section: components
                                 <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="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
                                   id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
@@ -1871,25 +1568,6 @@ section: components
                                 <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="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
                                   id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
@@ -2018,12 +1696,31 @@ section: components
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -2131,7 +1828,7 @@ section: components
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -2524,7 +2221,7 @@ section: components
                             class="pf-v6-c-menu-toggle pf-m-plain"
                             type="button"
                             aria-expanded="false"
-                            aria-label="Menu toggle"
+                            aria-label="Table actions"
                           >
                             <span class="pf-v6-c-menu-toggle__icon">
                               <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2616,7 +2313,7 @@ section: components
                             class="pf-v6-c-menu-toggle pf-m-plain"
                             type="button"
                             aria-expanded="false"
-                            aria-label="Menu toggle"
+                            aria-label="Table actions"
                           >
                             <span class="pf-v6-c-menu-toggle__icon">
                               <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2708,7 +2405,7 @@ section: components
                             class="pf-v6-c-menu-toggle pf-m-plain"
                             type="button"
                             aria-expanded="false"
-                            aria-label="Menu toggle"
+                            aria-label="Table actions"
                           >
                             <span class="pf-v6-c-menu-toggle__icon">
                               <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2800,7 +2497,7 @@ section: components
                             class="pf-v6-c-menu-toggle pf-m-plain"
                             type="button"
                             aria-expanded="false"
-                            aria-label="Menu toggle"
+                            aria-label="Table actions"
                           >
                             <span class="pf-v6-c-menu-toggle__icon">
                               <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2891,7 +2588,7 @@ section: components
                             class="pf-v6-c-menu-toggle pf-m-plain"
                             type="button"
                             aria-expanded="false"
-                            aria-label="Menu toggle"
+                            aria-label="Table actions"
                           >
                             <span class="pf-v6-c-menu-toggle__icon">
                               <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2961,25 +2658,6 @@ section: components
                         <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="-tabs-tab1-panel"
                           id="-tabs-tab1-link"
@@ -2991,25 +2669,6 @@ section: components
                         <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="-tabs-tab2-panel"
                           id="-tabs-tab2-link"
@@ -3226,25 +2885,6 @@ section: components
                   <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="modal-tabs-example-tabs-details-panel"
                     id="modal-tabs-example-tabs-details-link"
@@ -3256,25 +2896,6 @@ section: components
                   <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="modal-tabs-example-tabs-documentation-panel"
                     id="modal-tabs-example-tabs-documentation-link"
@@ -3339,12 +2960,31 @@ section: components
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -3452,7 +3092,7 @@ section: components
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -3644,12 +3284,31 @@ section: components
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -3757,7 +3416,7 @@ section: components
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -3900,25 +3559,6 @@ section: components
                 <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="gray-tabs-example-tabs-tabs-new-panel"
                   id="gray-tabs-example-tabs-tabs-new-link"
@@ -3930,25 +3570,6 @@ section: components
                 <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="gray-tabs-example-tabs-tabs-get-started-panel"
                   id="gray-tabs-example-tabs-tabs-get-started-link"
@@ -3960,25 +3581,6 @@ section: components
                 <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="gray-tabs-example-tabs-tabs-knowledge-panel"
                   id="gray-tabs-example-tabs-tabs-knowledge-link"
@@ -3990,25 +3592,6 @@ section: components
                 <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="gray-tabs-example-tabs-tabs-support-panel"
                   id="gray-tabs-example-tabs-tabs-support-link"
@@ -4060,25 +3643,6 @@ section: components
                         <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="gray-tabs-example-tabs-subtabs-x86-panel"
                           id="gray-tabs-example-tabs-subtabs-x86-link"
@@ -4090,25 +3654,6 @@ section: components
                         <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="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
                           id="gray-tabs-example-tabs-subtabs-additional-architectures-link"