@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.38

package/docs/components/Alert/examples/Alert.md

@@ -677,8 +677,8 @@ When toast alerts include a link or action, these elements are not announced as
 
 For sighted users, interactive elements can be included in this message in one of the following ways:
 
-*   Using a link to the Builds page: "The build is complete. Go to the [Builds](#) page to download" using `<a href="#">Builds</a>`
-*   Using a button to download: "The build is complete. Go to the Builds page to <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">download</button>" using `<button class="pf-v5-c-button pf-m-link pf-m-inline type="button">download</button>`
+* Using a link to the Builds page: "The build is complete. Go to the [Builds](#) page to download" using `<a href="#">Builds</a>`
+* Using a button to download: "The build is complete. Go to the Builds page to <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">download</button>" using `<button class="pf-v5-c-button pf-m-link pf-m-inline type="button">download</button>`
 
 ```html isFullscreen
 <ul class="pf-v5-c-alert-group pf-m-toast" role="list">

package/docs/components/Brand/examples/Brand.md

@@ -11,7 +11,7 @@ section: components
 <div class="show-light">
   <img
     class="pf-v5-c-brand"
-    src="/assets/images/pf_logo.svg"
+    src="/assets/images/PF-HorizontalLogo-Color.svg"
     alt="PatternFly logo"
   />
 </div>
@@ -19,7 +19,7 @@ section: components
 <div class="show-dark">
   <img
     class="pf-v5-c-brand"
-    src="/assets/images/pf_logo_white.svg"
+    src="/assets/images/PF-HorizontalLogo-Reverse.svg"
     alt="PatternFly logo"
   />
 </div>
@@ -32,25 +32,13 @@ section: components
 <div class="show-light">
   <picture
     class="pf-v5-c-brand pf-m-picture"
-    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
   >
-    <source
-      media="(min-width: 1200px)"
-      srcset="/assets/images/pf-c-brand__logo-on-xl.svg"
-    />
-    <source
-      media="(min-width: 992px)"
-      srcset="/assets/images/pf-c-brand__logo-on-lg.svg"
-    />
     <source
       media="(min-width: 768px)"
-      srcset="/assets/images/pf-c-brand__logo-on-md.svg"
+      srcset="/assets/images/PF-HorizontalLogo-Color.svg"
     />
-    <source
-      media="(min-width: 576px)"
-      srcset="/assets/images/pf-c-brand__logo-on-sm.svg"
-    />
-    <source srcset="/assets/images/pf-c-brand__logo.svg" />
+    <source srcset="/assets/images/PF-IconLogo-color.svg" />
     <img
       src="/assets/images/pf_logo.svg"
       alt="Fallback patternFly default logo"
@@ -61,27 +49,15 @@ section: components
 <div class="show-dark">
   <picture
     class="pf-v5-c-brand pf-m-picture"
-    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
   >
-    <source
-      media="(min-width: 1200px)"
-      srcset="/assets/images/pf-c-brand__logo-on-xl-white.svg"
-    />
-    <source
-      media="(min-width: 992px)"
-      srcset="/assets/images/pf-c-brand__logo-on-lg-white.svg"
-    />
     <source
       media="(min-width: 768px)"
-      srcset="/assets/images/pf-c-brand__logo-on-md-white.svg"
+      srcset="/assets/images/PF-HorizontalLogo-Reverse.svg"
     />
-    <source
-      media="(min-width: 576px)"
-      srcset="/assets/images/pf-c-brand__logo-on-sm-white.svg"
-    />
-    <source srcset="/assets/images/pf-c-brand__logo-white.svg" />
+    <source srcset="/assets/images/PF-IconLogo-Reverse.svg" />
     <img
-      src="/assets/images/pf_logo-white.svg"
+      src="/assets/images/pf_logo.svg"
       alt="Fallback patternFly default logo"
     />
   </picture>

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -281,7 +281,7 @@ cssPrefix: pf-v5-c-breadcrumb
 
 A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.
 
-*   `.pf-v5-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
+* `.pf-v5-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
 
 In the event that a page does not have a traditional `<h1>` page title, a heading can be included in the breadcrumbs and an optional link within.
 

package/docs/components/Card/examples/Card.md

@@ -139,6 +139,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-1-check"
           name="card-action-example-1-check"
           aria-labelledby="card-action-example-1"
@@ -221,6 +222,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-2-check"
           name="card-action-example-2-check"
           aria-labelledby="card-action-example-2"
@@ -305,6 +307,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-3-check"
           name="card-action-example-3-check"
           aria-labelledby="card-action-example-3"
@@ -508,7 +511,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -516,7 +519,6 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-check"
               aria-labelledby="card-selectable-example"
             />
-
             <label
               class="pf-v5-c-check__label"
               for="card-selectable-example-check"
@@ -543,7 +545,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -552,7 +554,6 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-disabled-check"
               aria-labelledby="card-selectable-example-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-selectable-example-disabled-check"
@@ -582,7 +583,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -592,7 +593,6 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-selected-disabled-check"
               aria-labelledby="card-selectable-example-selected-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-selectable-example-selected-disabled-check"
@@ -626,7 +626,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -634,7 +634,6 @@ cssPrefix: pf-v5-c-card
               name="card-single-selectable-example-radio"
               aria-labelledby="card-single-selectable-example"
             />
-
             <label
               class="pf-v5-c-radio__label"
               for="card-single-selectable-example-radio"
@@ -664,7 +663,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -673,7 +672,6 @@ cssPrefix: pf-v5-c-card
               aria-labelledby="card-single-selectable-example-disabled"
               disabled
             />
-
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
               for="card-single-selectable-example-disabled-radio"
@@ -703,7 +701,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -713,7 +711,6 @@ cssPrefix: pf-v5-c-card
               disabled
               checked
             />
-
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
               for="card-single-selectable-example-selected-disabled-radio"
@@ -867,7 +864,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -875,7 +872,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-check"
               aria-labelledby="card-clickable-selectable-example"
             />
-
             <label
               class="pf-v5-c-check__label"
               for="card-clickable-selectable-example-check"
@@ -908,7 +904,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -916,7 +912,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-current-example-check"
               aria-labelledby="card-clickable-selectable-current-example"
             />
-
             <label
               class="pf-v5-c-check__label"
               for="card-clickable-selectable-current-example-check"
@@ -949,7 +944,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -958,7 +953,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-disabled-check"
               aria-labelledby="card-clickable-selectable-example-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-clickable-selectable-example-disabled-check"
@@ -992,7 +986,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -1002,7 +996,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-selected-disabled-check"
               aria-labelledby="card-clickable-selectable-example-selected-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-clickable-selectable-example-selected-disabled-check"
@@ -1233,6 +1226,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expandable-example-check"
           name="card-expandable-example-check"
           aria-labelledby="card-expandable-example"
@@ -1335,6 +1329,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expandable-image-example-check"
           name="card-expandable-image-example-check"
           aria-labelledby="card-expandable-image-example"
@@ -1422,6 +1417,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expanded-example-check"
           name="card-expanded-example-check"
           aria-labelledby="card-expanded-example"
@@ -1506,6 +1502,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-full-height-example-check"
           name="card-full-height-example-check"
           aria-labelledby="card-full-height-example"
@@ -1590,6 +1587,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-toggle-on-right-example-check"
           name="card-toggle-on-right-example-check"
           aria-labelledby="card-toggle-on-right-example"

package/docs/components/Check/examples/Check.md

@@ -47,6 +47,7 @@ cssPrefix: pf-v5-c-check
     type="checkbox"
     id="check-checked-example-input"
     name="check-checked-example-input"
+    checked
   />
   <label
     class="pf-v5-c-check__label"

package/docs/components/Content/examples/Content.md

@@ -163,11 +163,11 @@ cssPrefix: pf-v5-c-content
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `pf-v5-c-content` as container. It can handle almost any HTML tag:
 
-*   `<p>` paragraphs
-*   `<ul>` `<ol>` `<dl>` lists
-*   `<h1>` to `<h6>` headings
-*   `<blockquote>` quotes
-*   `<em>` and `<strong>`
+* `<p>` paragraphs
+* `<ul>` `<ol>` `<dl>` lists
+* `<h1>` to `<h6>` headings
+* `<blockquote>` quotes
+* `<em>` and `<strong>`
 
 This `pf-v5-c-content` class can be used in any context where you just want to (or can only) write some text.
 

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -930,4 +930,6 @@ All accessibility requirements for inputs apply to elements within inline edit.
 | `.pf-m-valid` | `.pf-v5-c-inline-edit__action` | Modifies the action button state. |
 | `.pf-m-enable-editable` | `.pf-v5-c-inline-edit__action` | Exposes an inline edit action by default. |
 
-    -->
+```
+-->
+```

package/docs/components/Label/examples/Label.md

@@ -1949,16 +1949,16 @@ This style of label is used to indicate overflow within a label group.
 
 **Note: Editable label behavior must be handled with JavaScript.**
 
-*   `.pf-v5-c-label__editable-text` onClick event should:
-    *   Set `.pf-m-editable-active` on `.pf-v5-c-label`
-    *   Change `.pf-v5-c-label__editable-text`from a button to an input
-*   Return keypress, when content is editable, should:
-    *   Be captured to prevent line wrapping and save updates to label text
-    *   Remove `.pf-m-editable-active` from `.pf-v5-c-label`
-*   Esc keypress, when content is editable, should:
-    *   Undo any update to label text
-    *   Remove `.pf-m-editable-active` from `.pf-v5-c-label`
-    *   Change `.pf-v5-c-label__editable-text` back to a button
+* `.pf-v5-c-label__editable-text` onClick event should:
+  * Set `.pf-m-editable-active` on `.pf-v5-c-label`
+  * Change `.pf-v5-c-label__editable-text`from a button to an input
+* Return keypress, when content is editable, should:
+  * Be captured to prevent line wrapping and save updates to label text
+  * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
+* Esc keypress, when content is editable, should:
+  * Undo any update to label text
+  * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
+  * Change `.pf-v5-c-label__editable-text` back to a button
 
 ```html isBeta
 <span class="pf-v5-c-label pf-m-editable pf-m-blue">
@@ -2692,7 +2692,7 @@ The contents of a label group can be modified by removing labels or adding new o
 
 In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
 
-*   `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
+* `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
 
 ### Editable labels, dynamic label group
 

package/docs/components/Nav/examples/Navigation.css

@@ -1,6 +1,22 @@
-.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
+#ws-core-c-navigation-default,
+#ws-core-c-navigation-basic,
+#ws-core-c-navigation-grouped,
+#ws-core-c-navigation-grouped-nav,
+#ws-core-c-navigation-grouped-nav-no-titles,
+#ws-core-c-navigation-expanded,
+#ws-core-c-navigation-expanded-with-subnav-titles,
+#ws-core-c-navigation-mixed,
+#ws-core-c-navigation-horizontal,
+#ws-core-c-navigation-horizontal-overflow,
+#ws-core-c-navigation-horizontal-subnav,
+#ws-core-c-navigation-horizontal-subnav-overflow,
+#ws-core-c-navigation-drilldown,
+#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
+#ws-core-c-navigation-level-2-drilldown,
+#ws-core-c-navigation-level-3-drilldown,
+#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
+#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
   padding: 0;
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
 #ws-core-c-navigation-horizontal-in-masthead,

package/docs/components/Nav/examples/Navigation.md

@@ -2614,7 +2614,7 @@ When using anything other than a text node for the link text, wrap the link text
 
 The navigation system relies on several different sub-components:
 
-*   `.pf-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
+* `.pf-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
 
 ### Accessibility
 

package/docs/components/Radio/examples/Radio.md

@@ -107,7 +107,7 @@ cssPrefix: pf-v5-c-radio
   <label
     class="pf-v5-c-radio__label pf-m-disabled"
     for="radio-disabled-checked-example-input"
-  >Radio disabled</label>
+  >Radio disabled checked</label>
 </div>
 
 ```

package/docs/components/SimpleList/examples/SimpleList.md

@@ -33,21 +33,21 @@ cssPrefix: pf-v5-c-simple-list
   <ul class="pf-v5-c-simple-list__list" role="list">
     <li class="pf-v5-c-simple-list__item">
       <a
-        class="pf-v5-c-simple-list__item-link pf-m-current"
+        class="pf-v5-c-simple-list__item-link pf-m-link pf-m-current"
         href="#"
         tabindex="0"
       >List item 1</a>
     </li>
     <li class="pf-v5-c-simple-list__item">
       <a
-        class="pf-v5-c-simple-list__item-link"
+        class="pf-v5-c-simple-list__item-link pf-m-link"
         href="#"
         tabindex="0"
       >List item 2</a>
     </li>
     <li class="pf-v5-c-simple-list__item">
       <a
-        class="pf-v5-c-simple-list__item-link"
+        class="pf-v5-c-simple-list__item-link pf-m-link"
         href="#"
         tabindex="0"
       >List item 3</a>

package/docs/components/Table/examples/Table.md

@@ -24703,9 +24703,9 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
 
 There are a few ways this can be handled:
 
-*   Manipulate the `z-index` of the menu and/or table headers/columns manually.
-*   Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
-*   In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index`  than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
+* Manipulate the `z-index` of the menu and/or table headers/columns manually.
+* Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
+* In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index`  than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
 
 ### Sticky header
 
@@ -30824,8 +30824,8 @@ By default, all table header cells are set to `white-space: nowrap`. If a `<th>`
 
 ### Implementation support
 
-*   One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
-*   One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
-*   One action button, positioned in the last cell of a non-expandable row.
-*   Tabular data.
-*   Compact presentation modifier (not compatible with expandable table).
+* One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
+* One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
+* One action button, positioned in the last cell of a non-expandable row.
+* Tabular data.
+* Compact presentation modifier (not compatible with expandable table).

package/docs/components/Truncate/examples/Truncate.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-v5-global--spacer--md);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
 }

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

@@ -12,11 +12,11 @@ The flex layout is based on the CSS Flex properties where the layout determines
 
 The flex layout provides two ways of spacing its direct children.
 
-*   [Spacing system](#spacing-system)
-    *   The spacing system applies a margin between the flex layout's direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.
-*   [Gap spacing](#gap-spacing)
-    *   Gap spacing uses flex `gap` to space the flex layout's direct children, and can be applied to space rows (`row-gap`), columns (`column-gap`), or both (`gap`). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex's logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.
-    *   **Note** using `gap` along the main axis will override any other spacing applied using the spacing system.
+* [Spacing system](#spacing-system)
+  * The spacing system applies a margin between the flex layout's direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.
+* [Gap spacing](#gap-spacing)
+  * Gap spacing uses flex `gap` to space the flex layout's direct children, and can be applied to space rows (`row-gap`), columns (`column-gap`), or both (`gap`). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex's logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.
+  * **Note** using `gap` along the main axis will override any other spacing applied using the spacing system.
 
 ### Breakpoints
 
@@ -24,15 +24,15 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Usefulness
 
-*   Use when content dictates layout and elements wrap when necessary.
-*   Use when a rigid grid is not necessary/wanted.
+* Use when content dictates layout and elements wrap when necessary.
+* Use when a rigid grid is not necessary/wanted.
 
 ### Differences from utility class
 
-*   It contains multiple css declarations and does not use the `!important` tag.
-*   It does not require wrapping elements in columns or rows.
-*   It breaks the dependency upon adding utility classes to each child.
-*   It can be applied to container elements or components.
+* It contains multiple css declarations and does not use the `!important` tag.
+* It does not require wrapping elements in columns or rows.
+* It breaks the dependency upon adding utility classes to each child.
+* It can be applied to container elements or components.
 
 # Examples