@patternfly/patternfly 6.5.0-prerelease.3 → 6.5.0-prerelease.30

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

@@ -287,15 +287,17 @@ section: components
         <div class="pf-v6-c-page__main-body">
           <div
             class="pf-v6-c-tabs pf-m-page-insets"
+            aria-label="Pod"
             role="region"
             id="tabs-tables-and-tabs-example-tabs"
           >
-            <ul class="pf-v6-c-tabs__list" role="tablist">
+            <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
               <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
                 <button
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="true"
                   aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
                   id="tabs-tables-and-tabs-example-tabs-details-link"
                 >
@@ -307,6 +309,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
                   id="tabs-tables-and-tabs-example-tabs-yaml-link"
                 >
@@ -318,6 +321,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
                   id="tabs-tables-and-tabs-example-tabs-environment-link"
                 >
@@ -329,6 +333,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
                   id="tabs-tables-and-tabs-example-tabs-logs-link"
                 >
@@ -340,6 +345,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
                   id="tabs-tables-and-tabs-example-tabs-events-link"
                 >
@@ -351,6 +357,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
                   id="tabs-tables-and-tabs-example-tabs-terminal-link"
                 >
@@ -872,15 +879,17 @@ section: components
         <div class="pf-v6-c-page__main-body">
           <div
             class="pf-v6-c-tabs pf-m-page-insets"
+            aria-label="Pod"
             role="region"
             id="tabs-tables-and-tabs-example-tabs"
           >
-            <ul class="pf-v6-c-tabs__list" role="tablist">
+            <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
               <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
                 <button
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="true"
                   aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
                   id="tabs-tables-and-tabs-example-tabs-details-link"
                 >
@@ -892,6 +901,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
                   id="tabs-tables-and-tabs-example-tabs-yaml-link"
                 >
@@ -903,6 +913,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
                   id="tabs-tables-and-tabs-example-tabs-environment-link"
                 >
@@ -914,6 +925,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
                   id="tabs-tables-and-tabs-example-tabs-logs-link"
                 >
@@ -925,6 +937,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
                   id="tabs-tables-and-tabs-example-tabs-events-link"
                 >
@@ -936,6 +949,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
                   id="tabs-tables-and-tabs-example-tabs-terminal-link"
                 >
@@ -950,15 +964,21 @@ section: components
         <div class="pf-v6-c-page__main-body">
           <div
             class="pf-v6-c-tabs pf-m-secondary pf-m-page-insets"
+            aria-label="Pod details"
             role="region"
             id="tabs-tables-and-tabs-example-tabs-secondary"
           >
-            <ul class="pf-v6-c-tabs__list" role="tablist">
+            <ul
+              class="pf-v6-c-tabs__list"
+              role="tablist"
+              aria-label="Pod details"
+            >
               <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
                 <button
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="true"
                   aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
                   id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
                 >
@@ -970,6 +990,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
                   id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
                 >
@@ -1458,15 +1479,17 @@ section: components
         <div class="pf-v6-c-page__main-body">
           <div
             class="pf-v6-c-tabs pf-m-page-insets"
+            aria-label="Clusters"
             role="region"
             id="nested-tabs-example-tabs-tabs"
           >
-            <ul class="pf-v6-c-tabs__list" role="tablist">
+            <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Clusters">
               <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
                 <button
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="true"
                   aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
                   id="nested-tabs-example-tabs-tabs-cluster-1-link"
                 >
@@ -1478,6 +1501,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
                   id="nested-tabs-example-tabs-tabs-cluster-2-link"
                 >
@@ -1511,10 +1535,15 @@ section: components
                         <div class="pf-v6-l-flex__item">
                           <div
                             class="pf-v6-c-tabs"
+                            aria-label="Cluster 1"
                             role="region"
                             id="nested-tabs-example-tabs-tabs-subtabs"
                           >
-                            <ul class="pf-v6-c-tabs__list" role="tablist">
+                            <ul
+                              class="pf-v6-c-tabs__list"
+                              role="tablist"
+                              aria-label="Cluster 1"
+                            >
                               <li
                                 class="pf-v6-c-tabs__item pf-m-current"
                                 role="presentation"
@@ -1523,6 +1552,7 @@ section: components
                                   type="button"
                                   class="pf-v6-c-tabs__link"
                                   role="tab"
+                                  aria-selected="true"
                                   aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
                                   id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
                                 >
@@ -1537,6 +1567,7 @@ section: components
                                   type="button"
                                   class="pf-v6-c-tabs__link"
                                   role="tab"
+                                  aria-selected="false"
                                   aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
                                   id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
                                 >
@@ -1553,6 +1584,7 @@ section: components
                                   type="button"
                                   class="pf-v6-c-tabs__link"
                                   role="tab"
+                                  aria-selected="false"
                                   aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
                                   id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
                                 >
@@ -1569,6 +1601,7 @@ section: components
                                   type="button"
                                   class="pf-v6-c-tabs__link"
                                   role="tab"
+                                  aria-selected="false"
                                   aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
                                   id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
                                 >
@@ -2636,6 +2669,7 @@ section: components
                 <div class="pf-v6-c-drawer__body pf-m-no-padding">
                   <div
                     class="pf-v6-c-tabs pf-m-box pf-m-fill"
+                    aria-label="Node 2"
                     role="region"
                     id="-tabs"
                   >
@@ -2650,7 +2684,11 @@ section: components
                         </span>
                       </button>
                     </div>
-                    <ul class="pf-v6-c-tabs__list" role="tablist">
+                    <ul
+                      class="pf-v6-c-tabs__list"
+                      role="tablist"
+                      aria-label="Node 2"
+                    >
                       <li
                         class="pf-v6-c-tabs__item pf-m-current"
                         role="presentation"
@@ -2659,6 +2697,7 @@ section: components
                           type="button"
                           class="pf-v6-c-tabs__link"
                           role="tab"
+                          aria-selected="true"
                           aria-controls="-tabs-tab1-panel"
                           id="-tabs-tab1-link"
                         >
@@ -2670,6 +2709,7 @@ section: components
                           type="button"
                           class="pf-v6-c-tabs__link"
                           role="tab"
+                          aria-selected="false"
                           aria-controls="-tabs-tab2-panel"
                           id="-tabs-tab2-link"
                         >
@@ -2877,15 +2917,21 @@ section: components
           <div class="pf-v6-l-grid__item">
             <div
               class="pf-v6-c-tabs pf-m-inset-none"
+              aria-label="PatternFly"
               role="region"
               id="modal-tabs-example-tabs"
             >
-              <ul class="pf-v6-c-tabs__list" role="tablist">
+              <ul
+                class="pf-v6-c-tabs__list"
+                role="tablist"
+                aria-label="PatternFly"
+              >
                 <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
                   <button
                     type="button"
                     class="pf-v6-c-tabs__link"
                     role="tab"
+                    aria-selected="true"
                     aria-controls="modal-tabs-example-tabs-details-panel"
                     id="modal-tabs-example-tabs-details-link"
                   >
@@ -2897,6 +2943,7 @@ section: components
                     type="button"
                     class="pf-v6-c-tabs__link"
                     role="tab"
+                    aria-selected="false"
                     aria-controls="modal-tabs-example-tabs-documentation-panel"
                     id="modal-tabs-example-tabs-documentation-link"
                   >
@@ -3551,15 +3598,21 @@ section: components
         <div class="pf-v6-c-page__main-body">
           <div
             class="pf-v6-c-tabs pf-m-page-insets"
+            aria-label="Red Hat Enterprise Linux"
             role="region"
             id="gray-tabs-example-tabs-tabs"
           >
-            <ul class="pf-v6-c-tabs__list" role="tablist">
+            <ul
+              class="pf-v6-c-tabs__list"
+              role="tablist"
+              aria-label="Red Hat Enterprise Linux"
+            >
               <li class="pf-v6-c-tabs__item" role="presentation">
                 <button
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="gray-tabs-example-tabs-tabs-new-panel"
                   id="gray-tabs-example-tabs-tabs-new-link"
                 >
@@ -3571,6 +3624,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="true"
                   aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
                   id="gray-tabs-example-tabs-tabs-get-started-link"
                 >
@@ -3582,6 +3636,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
                   id="gray-tabs-example-tabs-tabs-knowledge-link"
                 >
@@ -3593,6 +3648,7 @@ section: components
                   type="button"
                   class="pf-v6-c-tabs__link"
                   role="tab"
+                  aria-selected="false"
                   aria-controls="gray-tabs-example-tabs-tabs-support-panel"
                   id="gray-tabs-example-tabs-tabs-support-link"
                 >
@@ -3632,10 +3688,15 @@ section: components
                 <div class="pf-v6-l-grid__item">
                   <div
                     class="pf-v6-c-tabs pf-m-inset-none"
+                    aria-label="Get started"
                     role="region"
                     id="gray-tabs-example-tabs-subtabs"
                   >
-                    <ul class="pf-v6-c-tabs__list" role="tablist">
+                    <ul
+                      class="pf-v6-c-tabs__list"
+                      role="tablist"
+                      aria-label="Get started"
+                    >
                       <li
                         class="pf-v6-c-tabs__item pf-m-current"
                         role="presentation"
@@ -3644,6 +3705,7 @@ section: components
                           type="button"
                           class="pf-v6-c-tabs__link"
                           role="tab"
+                          aria-selected="true"
                           aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
                           id="gray-tabs-example-tabs-subtabs-x86-link"
                         >
@@ -3655,6 +3717,7 @@ section: components
                           type="button"
                           class="pf-v6-c-tabs__link"
                           role="tab"
+                          aria-selected="false"
                           aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
                           id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
                         >

package/docs/demos/Wizard/examples/Wizard.md

@@ -1826,26 +1826,25 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-v6-c-drawer__panel pf-m-width-33" hidden>
-                    <div class="pf-v6-c-drawer__body">
-                      <div class="pf-v6-c-drawer__head">
-                        <h2
-                          class="pf-v6-c-title pf-m-xl"
-                        >Register with Red Hat connector</h2>
-                        <div class="pf-v6-c-drawer__actions">
-                          <div class="pf-v6-c-drawer__close">
-                            <button
-                              class="pf-v6-c-button pf-m-plain"
-                              type="button"
-                              aria-label="Close drawer panel"
-                            >
-                              <span class="pf-v6-c-button__icon">
-                                <i class="fas fa-times" aria-hidden="true"></i>
-                              </span>
-                            </button>
-                          </div>
+                    <div class="pf-v6-c-drawer__head">
+                      <h2
+                        class="pf-v6-c-title pf-m-xl"
+                      >Register with Red Hat connector</h2>
+                      <div class="pf-v6-c-drawer__actions">
+                        <div class="pf-v6-c-drawer__close">
+                          <button
+                            class="pf-v6-c-button pf-m-plain"
+                            type="button"
+                            aria-label="Close drawer panel"
+                          >
+                            <span class="pf-v6-c-button__icon">
+                              <i class="fas fa-times" aria-hidden="true"></i>
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </div>
+                    <div class="pf-v6-c-drawer__body"></div>
                     <div class="pf-v6-c-drawer__body">
                       <div class="pf-v6-c-content">
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
@@ -2514,23 +2513,21 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-v6-c-drawer__panel pf-m-width-33">
-                    <div class="pf-v6-c-drawer__body">
-                      <div class="pf-v6-c-drawer__head">
-                        <h2
-                          class="pf-v6-c-title pf-m-xl"
-                        >Register with Red Hat connector</h2>
-                        <div class="pf-v6-c-drawer__actions">
-                          <div class="pf-v6-c-drawer__close">
-                            <button
-                              class="pf-v6-c-button pf-m-plain"
-                              type="button"
-                              aria-label="Close drawer panel"
-                            >
-                              <span class="pf-v6-c-button__icon">
-                                <i class="fas fa-times" aria-hidden="true"></i>
-                              </span>
-                            </button>
-                          </div>
+                    <div class="pf-v6-c-drawer__head">
+                      <h2
+                        class="pf-v6-c-title pf-m-xl"
+                      >Register with Red Hat connector</h2>
+                      <div class="pf-v6-c-drawer__actions">
+                        <div class="pf-v6-c-drawer__close">
+                          <button
+                            class="pf-v6-c-button pf-m-plain"
+                            type="button"
+                            aria-label="Close drawer panel"
+                          >
+                            <span class="pf-v6-c-button__icon">
+                              <i class="fas fa-times" aria-hidden="true"></i>
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </div>

package/docs/layouts/Bullseye/examples/Bullseye.css

@@ -1,5 +1,5 @@
-.ws-core-l-bullseye .pf-v6-l-bullseye,
-.ws-core-l-bullseye .pf-v6-l-bullseye__item {
+.ws-core-f-bullseye .pf-v6-l-bullseye,
+.ws-core-f-bullseye .pf-v6-l-bullseye__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Bullseye/examples/Bullseye.md

@@ -1,6 +1,7 @@
 ---
 id: Bullseye
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-bullseye
 ---import './Bullseye.css'
 

package/docs/layouts/Flex/examples/Flex.css

@@ -1,6 +1,6 @@
-.ws-core-l-flex-border,
-.ws-core-l-flex .pf-v6-l-flex .pf-v6-l-flex,
-.ws-core-l-flex .pf-v6-l-flex__item {
+.ws-core-f-flex-border,
+.ws-core-f-flex .pf-v6-l-flex .pf-v6-l-flex,
+.ws-core-f-flex .pf-v6-l-flex__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Flex/examples/Flex.md

@@ -1,6 +1,7 @@
 ---
 id: Flex
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-flex
 ---import './Flex.css'
 
@@ -20,7 +21,7 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Breakpoints
 
-[Breakpoints](/tokens/all-patternfly-tokens) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
 
 ### Usefulness
 

package/docs/layouts/Gallery/examples/Gallery.css

@@ -1,5 +1,5 @@
-.ws-core-l-gallery .pf-v6-l-gallery,
-.ws-core-l-gallery .pf-v6-l-gallery__item {
+.ws-core-f-gallery .pf-v6-l-gallery,
+.ws-core-f-gallery .pf-v6-l-gallery__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Gallery/examples/Gallery.md

@@ -1,6 +1,7 @@
 ---
 id: Gallery
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-gallery
 ---import './Gallery.css'
 
@@ -174,5 +175,5 @@ The gallery layout is designed so that all of its children are of uniform size,
 | `.pf-v6-l-gallery` |  `<div>` |  Initializes a Gallery layout |
 | `.pf-v6-l-gallery__item` | `<div>` |  Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
 | `.pf-m-gutter` | `.pf-v6-l-gallery` | Adds space between children by using the globally defined gutter value. |
-| `--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |

package/docs/layouts/Grid/examples/Grid.css

@@ -1,4 +1,4 @@
-.ws-core-l-grid .pf-v6-l-grid__item {
+.ws-core-f-grid .pf-v6-l-grid__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Grid/examples/Grid.md

@@ -1,6 +1,7 @@
 ---
 id: Grid
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-grid
 ---import './Grid.css'
 
@@ -318,7 +319,7 @@ The grid layout is based on CSS Grid’s two-dimensional system of columns and r
 | `.pf-v6-l-grid` | `<div>` | Initializes the grid layout. |
 | `.pf-v6-l-grid__item` | `<div>` | Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
 | `.pf-m-gutter` | `.pf-v6-l-grid` | Adds space between children by using the globally defined gutter value. |
-| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid` | Defines grid item size on grid container at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item size at optional [breakpoint](/tokens/all-patternfly-tokens).  Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
-| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item row span at optional [breakpoint](/tokens/all-patternfly-tokens).  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: `.pf-m-8-col.pf-m-2-row` + `.pf-m-4-col` + `.pf-m-4-col`. There is no limit to number of spanned rows. |
-| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v6-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid` | Defines grid item size on grid container at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item size at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens).  Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
+| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item row span at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens).  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: `.pf-m-8-col.pf-m-2-row` + `.pf-m-4-col` + `.pf-m-4-col`. There is no limit to number of spanned rows. |
+| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v6-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |

package/docs/layouts/Level/examples/Level.css

@@ -1,12 +1,12 @@
-.ws-core-l-level .ws-preview-html {
+.ws-core-f-level .ws-preview-html {
   display: flex;
   flex-wrap: wrap;
   min-height: 160px;
 }
-.ws-core-l-level :is(.pf-v6-l-level, .pf-v6-l-level__item, .pf-v6-l-level > *) {
+.ws-core-f-level :is(.pf-v6-l-level, .pf-v6-l-level__item, .pf-v6-l-level > *) {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }
-.ws-core-l-level .pf-v6-l-level {
+.ws-core-f-level .pf-v6-l-level {
   width: 100%;
 }

package/docs/layouts/Level/examples/Level.md

@@ -1,6 +1,7 @@
 ---
 id: Level
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-level
 ---import './Level.css'
 

package/docs/layouts/Split/examples/Split.css

@@ -1,4 +1,4 @@
-.ws-core-l-split :is(.pf-v6-l-split, .pf-v6-l-split__item, .pf-v6-l-split > *) {
+.ws-core-f-split :is(.pf-v6-l-split, .pf-v6-l-split__item, .pf-v6-l-split > *) {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Split/examples/Split.md

@@ -1,6 +1,7 @@
 ---
 id: Split
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-split
 ---import './Split.css'
 

package/docs/layouts/Stack/examples/Stack.css

@@ -1,15 +1,15 @@
-.ws-core-l-stack :is(.pf-v6-l-stack, .pf-v6-l-stack__item, .pf-v6-l-stack > *) {
+.ws-core-f-stack :is(.pf-v6-l-stack, .pf-v6-l-stack__item, .pf-v6-l-stack > *) {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }
 
-.ws-core-l-stack .ws-preview-html {
+.ws-core-f-stack .ws-preview-html {
   display: flex;
   flex-direction: column;
   min-height: 30rem;
   width: 100%;
 }
 
-.ws-core-l-stack .pf-v6-l-stack {
+.ws-core-f-stack .pf-v6-l-stack {
   flex-grow: 1;
 }

package/docs/layouts/Stack/examples/Stack.md

@@ -1,6 +1,7 @@
 ---
 id: Stack
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-stack
 ---import './Stack.css'
 

package/docs/utilities/Accessibility/examples/Accessibility.md

@@ -1,6 +1,7 @@
 ---
 id: Accessibility
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---## Examples
 
 ### Screen reader only
@@ -34,7 +35,7 @@ The text underneath is hidden.
 
 ### Overview
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-screen-reader-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-screen-reader-on-lg`
 
 ### Usage