@patternfly/patternfly 4.176.3 → 4.179.0

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

@@ -542,7 +542,7 @@ wrapperTag: div
             type="button"
             aria-label="Help"
           >
-            <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
           </button>
         </div>
       </div>
@@ -995,7 +995,7 @@ wrapperTag: div
             type="button"
             aria-label="Help"
           >
-            <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
           </button>
         </div>
       </div>

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

@@ -23,7 +23,7 @@ The flex layout is based on the CSS Flex properties where the layout determines
 
 ### Breakpoints
 
--   `-on-sm, -on-md, -on-lg, -on-xl, -on-2xl`.
+-   [Breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
 
 ### Usefulness
 

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

@@ -174,5 +174,5 @@ The gallery layout is designed so that all of its children are of uniform size,
 | `.pf-l-gallery`                                                       | `<div>`         | Initializes a Gallery layout                                                                                                                                                                           |
 | `.pf-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-l-gallery` | Adds space between children by using the globally defined gutter value.                                                                                                                                |
-| `--pf-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the min value of `grid-template-columns` declaration.                                                                                                                                         |
-| `--pf-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the max value of `grid-template-columns` declaration.                                                                                                                                         |
+| `--pf-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                         |
+| `--pf-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                         |

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

@@ -304,12 +304,12 @@ The grid layout is based on CSS Grid’s two-dimensional system of columns and r
 
 ### Usage
 
-| Class                                                 | Applied to                                    | Outcome                                                                                                                                                                                                                                                                   |
-| ----------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-l-grid`                                          | `<div>`                                       | Initializes the grid layout.                                                                                                                                                                                                                                              |
-| `.pf-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-l-grid`                                  | Adds space between children by using the globally defined gutter value.                                                                                                                                                                                                   |
-| `.pf-m-all-{1-12}-col{-on-[breakpoint]}`              | `.pf-l-grid`                                  | Defines grid item size on grid container.                                                                                                                                                                                                                                 |
-| `.pf-m-{1-12}-col{-on-[breakpoint]}`                  | `.pf-l-grid__item`                            | Defines grid item size.  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-l-grid__item`                            | Defines grid item row span.  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-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-l-grid > .pf-l-grid`, `.pf-l-grid__item` | Modifies the order of the grid layout element.                                                                                                                                                                                                                            |
+| Class                                                 | Applied to                                    | Outcome                                                                                                                                                                                                                                                                                                                                                                               |
+| ----------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-l-grid`                                          | `<div>`                                       | Initializes the grid layout.                                                                                                                                                                                                                                                                                                                                                          |
+| `.pf-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-l-grid`                                  | Adds space between children by using the globally defined gutter value.                                                                                                                                                                                                                                                                                                               |
+| `.pf-m-all-{1-12}-col{-on-[breakpoint]}`              | `.pf-l-grid`                                  | Defines grid item size on grid container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                                                                                                                                 |
+| `.pf-m-{1-12}-col{-on-[breakpoint]}`                  | `.pf-l-grid__item`                            | Defines grid item size at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  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-l-grid__item`                            | Defines grid item row span at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  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-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-l-grid > .pf-l-grid`, `.pf-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                                                                                                                            |

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

@@ -34,7 +34,7 @@ The text underneath is hidden.
 
 ### Overview
 
-Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-screen-reader-on-lg**
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-screen-reader-on-lg**
 
 ### Usage
 

package/docs/utilities/Alignment/examples/Alignment.md

@@ -23,7 +23,7 @@ section: utilities
 
 ### Overview
 
-Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-text-left-on-lg**
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-text-left-on-lg**
 
 ### Usage
 

package/docs/utilities/BackgroundColor/examples/BackgroundColor.md

@@ -79,7 +79,7 @@ Care should be taken especially when applying background colors, as this can hav
 
 Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utilities/text#inverse-colors). 
 
-Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-background-color-200-on-lg**
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-background-color-200-on-lg**
 
 ### Usage
 

package/docs/utilities/Display/examples/Display.md

@@ -76,7 +76,7 @@ section: utilities
 
 ### Overview
 
-Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-display-inline-block-on-lg**
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-display-inline-block-on-lg**
 
 ### Usage
 

package/docs/utilities/Flex/examples/Flex.md

@@ -328,7 +328,7 @@ section: utilities
 
 ### Overview
 
-For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-flex-row-on-lg**
+For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-flex-row-on-lg**
 
 <!-- ## Accessibility
 

package/docs/utilities/Float/examples/Float.md

@@ -18,7 +18,7 @@ section: utilities
 
 ### Overview
 
-Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-text-left-on-lg**
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-text-left-on-lg**
 
 ### Usage
 

package/docs/utilities/Sizing/examples/Sizing.md

@@ -20,6 +20,8 @@ section: utilities
 
 ### Usage
 
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-w-initial-on-lg**
+
 | Class                               | Applied to | Outcome                         |
 | ----------------------------------- | ---------- | ------------------------------- |
 | `.pf-u-w-initial{-on-[breakpoint]}` | `*`        | Sets width: initial (auto)      |
@@ -46,6 +48,8 @@ section: utilities
 
 ### Usage
 
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-w-25vw-on-lg**
+
 | Class                             | Applied to | Outcome                          |
 | --------------------------------- | ---------- | -------------------------------- |
 | `.pf-u-w-25vw{-on-[breakpoint]}`  | `*`        | Sets width: 25vw                 |
@@ -84,6 +88,8 @@ section: utilities
 
 ### Usage
 
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-h-initial-on-lg**
+
 | Class                               | Applied to | Outcome                          |
 | ----------------------------------- | ---------- | -------------------------------- |
 | `.pf-u-h-initial{-on-[breakpoint]}` | `*`        | Sets height: initial (auto)      |
@@ -122,6 +128,8 @@ section: utilities
 
 ### Usage
 
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-h-25vh-on-lg**
+
 | Class                             | Applied to | Outcome                           |
 | --------------------------------- | ---------- | --------------------------------- |
 | `.pf-u-h-25vh{-on-[breakpoint]}`  | `*`        | Sets height: 25vh                 |
@@ -178,6 +186,8 @@ section: utilities
 | `.pf-u-min-width` | `*`        | Sets min-width: `var(--pf-u-min-width--MinWidth{-on-[breakpoint]})`. |
 | `.pf-u-max-width` | `*`        | Sets min-width: `var(--pf-u-max-width--MaxWidth{-on-[breakpoint]})`. |
 
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-u-min-width--MinWidth-on-lg**
+
 | Custom property                                         | Applied to        | Outcome                                 |
 | ------------------------------------------------------- | ----------------- | --------------------------------------- |
 | `--pf-u-min-width--MinWidth{-on-[breakpoint]}: {width}` | `.pf-u-min-width` | Modifies the min width custom property. |
@@ -230,6 +240,8 @@ section: utilities
 | `.pf-u-min-height` | `*`        | Sets min-height: `var(--pf-u-min-height--MinHeight{-on-[breakpoint]})`. |
 | `.pf-u-max-height` | `*`        | Sets max-height: `var(--pf-u-max-height--MaxHeight{-on-[breakpoint]})`. |
 
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-u-min-height--MinHeight-on-lg**
+
 | Custom property                                            | Applied to         | Outcome                                  |
 | ---------------------------------------------------------- | ------------------ | ---------------------------------------- |
 | `--pf-u-min-height--MinHeight{-on-[breakpoint]}: {height}` | `.pf-u-min-height` | Modifies the min height custom property. |

package/docs/utilities/Spacing/examples/Spacing.md

@@ -97,7 +97,7 @@ section: utilities
 
 ### Overview
 
-Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-m-sm-on-lg**
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-m-sm-on-lg**
 
 ### Margin properties
 

package/docs/utilities/Text/examples/Text.md

@@ -149,7 +149,7 @@ These text utilities can be used to modify text within the PatternFly framework.
 
 Care should be taken especially when applying text colors, as this can have a negative effect on the readability and accessibility of text. Refer to the information on [contrast ratios](/guidelines/colors/#contrast-ratios) for more information.
 
-Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-font-size-xl-on-lg**
+[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-font-size-xl-on-lg**
 
 ### Usage
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.176.3",
+  "version": "4.179.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-reset.css

@@ -6294,6 +6294,14 @@ html {
   --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-avatar--Width: 2.25rem;
   --pf-c-avatar--Height: 2.25rem;
+  --pf-c-avatar--m-sm--Width: 1.5rem;
+  --pf-c-avatar--m-sm--Height: 1.5rem;
+  --pf-c-avatar--m-md--Width: 2.25rem;
+  --pf-c-avatar--m-md--Height: 2.25rem;
+  --pf-c-avatar--m-lg--Width: 4.5rem;
+  --pf-c-avatar--m-lg--Height: 4.5rem;
+  --pf-c-avatar--m-xl--Width: 8rem;
+  --pf-c-avatar--m-xl--Height: 8rem;
   --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
   --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700);
@@ -6311,6 +6319,222 @@ html {
   --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
   --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
 }
+.pf-c-avatar.pf-m-sm {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-2xl, var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-2xl, var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))))));
+  }
+}
+.pf-c-avatar.pf-m-md {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-2xl, var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-2xl, var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))))));
+  }
+}
+.pf-c-avatar.pf-m-lg {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-2xl, var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-2xl, var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))))));
+  }
+}
+.pf-c-avatar.pf-m-xl {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-2xl, var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
+  }
+}
 
 .pf-c-backdrop {
   --pf-c-backdrop--Position: fixed;
@@ -8037,6 +8261,8 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-code-editor__code--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-code-editor__code-pre--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-code-editor__code-pre--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-code-editor__header-main--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-code-editor__header-main--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-code-editor__tab--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-code-editor__tab--Color: var(--pf-global--Color--200);
   --pf-c-code-editor__tab--PaddingTop: var(--pf-global--spacer--form-element);
@@ -8085,6 +8311,12 @@ label.pf-c-check, .pf-c-check__label,
   border-bottom-color: var(--pf-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
 }
 
+.pf-c-code-editor__header-main {
+  flex-grow: 1;
+  padding-right: var(--pf-c-code-editor__header-main--PaddingRight);
+  padding-left: var(--pf-c-code-editor__header-main--PaddingLeft);
+}
+
 .pf-c-code-editor__main {
   position: relative;
   background-color: var(--pf-c-code-editor__main--BackgroundColor);
@@ -18230,6 +18462,9 @@ ul.pf-c-list {
 .pf-c-nav__section + .pf-c-nav__section {
   --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
 }
+.pf-c-nav__section.pf-m-no-title {
+  --pf-c-nav__section--MarginTop: 0;
+}
 
 .pf-c-nav__section-title {
   padding: var(--pf-c-nav__section-title--PaddingTop) var(--pf-c-nav__section-title--PaddingRight) var(--pf-c-nav__section-title--PaddingBottom) var(--pf-c-nav__section-title--PaddingLeft);
@@ -25112,7 +25347,8 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:last-child {
   --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
 }
-.pf-c-table.pf-m-compact thead th {
+.pf-c-table.pf-m-compact thead th,
+.pf-c-table.pf-m-compact thead .pf-c-table__toggle {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
   --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
 }