@patternfly/patternfly 4.222.4 → 5.0.0-alpha.2

package/docs/components/Pagination/examples/Pagination.md

@@ -1195,141 +1195,42 @@ cssPrefix: pf-c-pagination
 
 ```
 
-### Inset
-
-```html
-<div
-  class="pf-c-pagination pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg"
->
-  <div class="pf-c-pagination__total-items">
-    <b>1 - 10</b>&nbsp;of&nbsp;
-    <b>36</b>
-  </div>
-  <div class="pf-c-options-menu">
-    <button
-      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
-      type="button"
-      id="pagination-inset-options-menu-toggle"
-      aria-haspopup="listbox"
-      aria-expanded="false"
-    >
-      <span class="pf-c-options-menu__toggle-text">
-        <b>1 - 10</b>&nbsp;of&nbsp;
-        <b>36</b>
-      </span>
-      <div class="pf-c-options-menu__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
-      </div>
-    </button>
-    <ul
-      class="pf-c-options-menu__menu"
-      aria-labelledby="pagination-inset-options-menu-toggle"
-      hidden
-    >
-      <li>
-        <button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
-      </li>
-      <li>
-        <button class="pf-c-options-menu__menu-item" type="button">
-          10 per page
-          <div class="pf-c-options-menu__menu-item-icon">
-            <i class="fas fa-check" aria-hidden="true"></i>
-          </div>
-        </button>
-      </li>
-      <li>
-        <button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
-      </li>
-    </ul>
-  </div>
-  <nav class="pf-c-pagination__nav" aria-label="Pagination nav - inset example">
-    <div class="pf-c-pagination__nav-control pf-m-first">
-      <button
-        class="pf-c-button pf-m-plain"
-        type="button"
-        disabled
-        aria-label="Go to first page"
-      >
-        <i class="fas fa-angle-double-left" aria-hidden="true"></i>
-      </button>
-    </div>
-    <div class="pf-c-pagination__nav-control pf-m-prev">
-      <button
-        class="pf-c-button pf-m-plain"
-        type="button"
-        disabled
-        aria-label="Go to previous page"
-      >
-        <i class="fas fa-angle-left" aria-hidden="true"></i>
-      </button>
-    </div>
-    <div class="pf-c-pagination__nav-page-select">
-      <input
-        class="pf-c-form-control"
-        aria-label="Current page"
-        type="number"
-        min="1"
-        max="4"
-        value="1"
-      />
-      <span aria-hidden="true">of 4</span>
-    </div>
-    <div class="pf-c-pagination__nav-control pf-m-next">
-      <button
-        class="pf-c-button pf-m-plain"
-        type="button"
-        aria-label="Go to next page"
-      >
-        <i class="fas fa-angle-right" aria-hidden="true"></i>
-      </button>
-    </div>
-    <div class="pf-c-pagination__nav-control pf-m-last">
-      <button
-        class="pf-c-button pf-m-plain"
-        type="button"
-        aria-label="Go to last page"
-      >
-        <i class="fas fa-angle-double-right" aria-hidden="true"></i>
-      </button>
-    </div>
-  </nav>
-</div>
-
-```
-
 ## Documentation
 
 Note: `<button>` or `<a>` elements can be used in `.pf-c-pagination__nav-page-select`.
 
 ### Accessibility
 
-| Attribute       | Applied to                                                 | Outcome                                                                     |
-| --------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------- |
-| `aria-label`    | `.pf-c-pagination__nav`                                    | Provides an accessible name for pagination navigation element. **Required** |
-| `type="number"` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Defines a field as a number. **Required**                                   |
-| `value`         | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required**                                |
-| `min`           | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required**                                |
-| `max`           | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required**                                    |
+| Attribute    | Applied to              | Outcome                                                                     |
+| ------------ | ----------------------- | --------------------------------------------------------------------------- |
+| `aria-label` | `.pf-c-pagination__nav` | Provides an accessible name for pagination navigation element. **Required** |
+
+## Pagination nav input
+
+| Attribute       | Applied to                                                 | Outcome                                      |
+| --------------- | ---------------------------------------------------------- | -------------------------------------------- |
+| `type="number"` | `.pf-c-pagination` > `.pf-c-form-control`                  | Defines a field as a number. **Required**    |
+| `value`         | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required** |
+| `min`           | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required** |
+| `max`           | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required**     |
 
 ### Usage
 
-| Class                                                       | Applied to                      | Outcome                                                                                                                                                                                                    |
-| ----------------------------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-pagination`                                          | `<div>`                         | Initiates pagination.                                                                                                                                                                                      |
-| `.pf-c-pagination__current`                                 | `<div>`                         | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`.                                                                 |
-| `.pf-c-pagination__total-items`                             | `<div>`                         | Initiates element to replace the options menu on summary.                                                                                                                                                  |
-| `.pf-c-pagination__nav`                                     | `<nav>`                         | Initiates pagination nav.                                                                                                                                                                                  |
-| `.pf-c-pagination__nav-control`                             | `<div>`                         | Initiates pagination nav control.                                                                                                                                                                          |
-| `.pf-c-pagination__nav-page-select`                         | `<div>`                         | Initiates pagination nav page select.                                                                                                                                                                      |
-| `.pf-m-display-summary{-on-[breakpoint]}`                   | `.pf-c-pagination`              | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
-| `.pf-m-display-full{-on-[breakpoint]}`                      | `.pf-c-pagination`              | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                         |
-| `.pf-m-bottom`                                              | `.pf-c-pagination`              | Modifies for bottom pagination component styles.                                                                                                                                                           |
-| `.pf-m-compact`                                             | `.pf-c-pagination`              | Modifies for compact pagination component styles.                                                                                                                                                          |
-| `.pf-m-static`                                              | `.pf-c-pagination.pf-m-bottom`  | Modifies bottom pagination to not be positioned sticky on summary.                                                                                                                                         |
-| `.pf-m-sticky`                                              | `.pf-c-pagination`              | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-c-pagination.pf-m-bottom`. |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-pagination`              | Modifies pagination horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                        |
-| `.pf-m-page-insets`                                         | `.pf-c-pagination`              | Modifies the pagination component padding/inset to visually match padding of page elements.                                                                                                                |
-| `.pf-m-first`                                               | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button.                                                                                                                                                        |
-| `.pf-m-prev`                                                | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button.                                                                                                                                                     |
-| `.pf-m-next`                                                | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button.                                                                                                                                                         |
-| `.pf-m-last`                                                | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button.                                                                                                                                                         |
+| Class                                     | Applied to                      | Outcome                                                                                                                                                                                                    |
+| ----------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-pagination`                        | `<div>`                         | Initiates pagination.                                                                                                                                                                                      |
+| `.pf-c-pagination__current`               | `<div>`                         | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`.                                                                 |
+| `.pf-c-pagination__total-items`           | `<div>`                         | Initiates element to replace the options menu on summary.                                                                                                                                                  |
+| `.pf-c-pagination__nav`                   | `<nav>`                         | Initiates pagination nav.                                                                                                                                                                                  |
+| `.pf-c-pagination__nav-control`           | `<div>`                         | Initiates pagination nav control.                                                                                                                                                                          |
+| `.pf-c-pagination__nav-page-select`       | `<div>`                         | Initiates pagination nav page select.                                                                                                                                                                      |
+| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination`              | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| `.pf-m-display-full{-on-[breakpoint]}`    | `.pf-c-pagination`              | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                         |
+| `.pf-m-bottom`                            | `.pf-c-pagination`              | Modifies for bottom pagination component styles.                                                                                                                                                           |
+| `.pf-m-compact`                           | `.pf-c-pagination`              | Modifies for compact pagination component styles.                                                                                                                                                          |
+| `.pf-m-static`                            | `.pf-c-pagination.pf-m-bottom`  | Modifies bottom pagination to not be positioned sticky on summary.                                                                                                                                         |
+| `.pf-m-sticky`                            | `.pf-c-pagination`              | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-c-pagination.pf-m-bottom`. |
+| `.pf-m-first`                             | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button.                                                                                                                                                        |
+| `.pf-m-prev`                              | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button.                                                                                                                                                     |
+| `.pf-m-next`                              | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button.                                                                                                                                                         |
+| `.pf-m-last`                              | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button.                                                                                                                                                         |

package/docs/components/SkipToContent/examples/SkipToContent.md

@@ -7,11 +7,9 @@ cssPrefix: pf-c-skip-to-content
 ### Basic
 
 ```html isFullscreen
-<a
-  class="pf-c-skip-to-content pf-c-button pf-m-primary"
-  href="#main-content"
->Skip to content</a>
-Press tab to skip to content at the bottom of the page.
+<div class="pf-c-skip-to-content">
+  <a class="pf-c-button pf-m-primary" href="#main-content">Skip to content</a>
+</div>Press tab to skip to content at the bottom of the page.
 <div style="height:2000px"></div>
 <div class="pf-c-content">
   <h1 id="main-content">Main content</h1>

package/docs/components/Slider/examples/Slider.md

@@ -267,7 +267,7 @@ cssPrefix: pf-c-slider
         value="50"
         aria-label="Slider value input"
       />
-      <span class="pf-c-input-group__text">%</span>
+      <span class="pf-c-input-group__text pf-m-plain">%</span>
     </div>
   </div>
 </div>
@@ -297,7 +297,7 @@ cssPrefix: pf-c-slider
         value="50"
         aria-label="Slider value input"
       />
-      <span class="pf-c-input-group__text">%</span>
+      <span class="pf-c-input-group__text pf-m-plain">%</span>
     </div>
   </div>
 </div>
@@ -329,7 +329,7 @@ cssPrefix: pf-c-slider
           value="50"
           aria-label="Slider value input"
         />
-        <span class="pf-c-input-group__text">%</span>
+        <span class="pf-c-input-group__text pf-m-plain">%</span>
       </div>
     </div>
   </div>
@@ -393,7 +393,7 @@ cssPrefix: pf-c-slider
           value="50"
           aria-label="Slider value input"
         />
-        <span class="pf-c-input-group__text pf-m-disabled">%</span>
+        <span class="pf-c-input-group__text pf-m-plain">%</span>
       </div>
     </div>
   </div>
@@ -429,7 +429,7 @@ cssPrefix: pf-c-slider
           value="50"
           aria-label="Slider value input"
         />
-        <span class="pf-c-input-group__text">%</span>
+        <span class="pf-c-input-group__text pf-m-plain">%</span>
       </div>
     </div>
   </div>
@@ -570,7 +570,7 @@ cssPrefix: pf-c-slider
         value="50"
         aria-label="Slider value input"
       />
-      <span class="pf-c-input-group__text pf-m-disabled">%</span>
+      <span class="pf-c-input-group__text pf-m-plain">%</span>
     </div>
   </div>
 </div>

package/docs/components/Tabs/examples/Tabs.md

@@ -7569,7 +7569,6 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
 | `.pf-c-tabs__toggle-text`                                        | `<span>`            | Initiates a tabs expandable toggle text.                                                                                                                                                                        |
 | `.pf-m-secondary`                                                | `.pf-c-tabs`        | Applies secondary styling to the tab component.                                                                                                                                                                 |
 | `.pf-m-no-border-bottom`                                         | `.pf-c-tabs`        | Removes bottom border from a tab component.                                                                                                                                                                     |
-| `.pf-m-border-bottom`                                            | `.pf-c-tabs`        | Adds a bottom border to secondary tabs.                                                                                                                                                                         |
 | `.pf-m-box`                                                      | `.pf-c-tabs`        | Applies box styling to the tab component.                                                                                                                                                                       |
 | `.pf-m-vertical`                                                 | `.pf-c-tabs`        | Applies vertical styling to the tab component.                                                                                                                                                                  |
 | `.pf-m-fill`                                                     | `.pf-c-tabs`        | Modifies the tabs to fill the available space.                                                                                                                                                                  |
@@ -7577,7 +7576,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
 | `.pf-m-action`                                                   | `.pf-c-tabs__item`  | Indicates that a tab item contains actions other than the tab link.                                                                                                                                             |
 | `.pf-m-overflow`                                                 | `.pf-c-tabs__item`  | Applies overflow menu styling to a tab item.                                                                                                                                                                    |
 | `.pf-m-expanded`                                                 | `.pf-c-tabs__item`  | Applies expanded styling to the overflow menu tab item.                                                                                                                                                         |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs`        | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                   |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs`        | Modifies the tabs component padding/inset to visually match padding of other adjacent components.                                                                                                               |
 | `.pf-m-page-insets`                                              | `.pf-c-tabs`        | Modifies the tabs component padding/inset to visually match padding of page elements.                                                                                                                           |
 | `.pf-m-color-scheme--light-300`                                  | `.pf-c-tabs`        | Modifies the tabs component tab background colors.                                                                                                                                                              |
 | `.pf-m-expandable{-on-[breakpoint]}`                             | `.pf-c-tabs`        | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |

package/docs/components/Wizard/examples/Wizard.md

@@ -202,8 +202,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>
@@ -408,8 +408,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>
@@ -659,8 +659,8 @@ wrapperTag: div
             </div>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -896,8 +896,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>
@@ -1133,8 +1133,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>
@@ -1261,8 +1261,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>

package/docs/demos/AboutModal/examples/AboutModal.md

@@ -9,10 +9,12 @@ This demo implements the about modal, including the backdrop.
 
 ```html isFullscreen
 <div class="pf-c-page" id="modal-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-modal-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-modal-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="modal-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -916,56 +918,58 @@ This demo implements the about modal, including the backdrop.
 <div class="pf-c-backdrop">
   <div class="pf-l-bullseye">
     <div
-      class="pf-c-about-modal-box"
+      class="pf-c-modal-box pf-m-lg"
       role="dialog"
       aria-modal="true"
       aria-labelledby="about-modal-title"
     >
-      <div class="pf-c-about-modal-box__brand">
-        <img
-          class="pf-c-about-modal-box__brand-image"
-          src="/assets/images/pf_mini_logo_white.svg"
-          alt="PatternFly brand logo"
-        />
-      </div>
-      <div class="pf-c-about-modal-box__close">
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-label="Close dialog"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-      <div class="pf-c-about-modal-box__header">
-        <h1
-          class="pf-c-title pf-m-4xl"
-          id="about-modal-title"
-        >Red Hat OpenShift Container Platform</h1>
-      </div>
-      <div class="pf-c-about-modal-box__hero"></div>
-      <div class="pf-c-about-modal-box__content">
-        <div class="pf-c-content">
-          <dl>
-            <dt>CFME version</dt>
-            <dd>5.5.3.4.20102789036450</dd>
-            <dt>Cloudforms version</dt>
-            <dd>4.1</dd>
-            <dt>Server name</dt>
-            <dd>40DemoMaster</dd>
-            <dt>User name</dt>
-            <dd>Administrator</dd>
-            <dt>User role</dt>
-            <dd>EvmRole-super_administrator</dd>
-            <dt>Browser version</dt>
-            <dd>601.2</dd>
-            <dt>Browser OS</dt>
-            <dd>Mac</dd>
-          </dl>
+      <div class="pf-c-about-modal-box">
+        <div class="pf-c-about-modal-box__brand">
+          <img
+            class="pf-c-about-modal-box__brand-image"
+            src="/assets/images/pf_mini_logo_white.svg"
+            alt="PatternFly brand logo"
+          />
+        </div>
+        <div class="pf-c-about-modal-box__close">
+          <button
+            class="pf-c-button pf-m-plain"
+            type="button"
+            aria-label="Close dialog"
+          >
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div class="pf-c-about-modal-box__header">
+          <h1
+            class="pf-c-title pf-m-4xl"
+            id="about-modal-title"
+          >Red Hat OpenShift Container Platform</h1>
+        </div>
+        <div class="pf-c-about-modal-box__hero"></div>
+        <div class="pf-c-about-modal-box__content">
+          <div class="pf-c-content">
+            <dl>
+              <dt>CFME version</dt>
+              <dd>5.5.3.4.20102789036450</dd>
+              <dt>Cloudforms version</dt>
+              <dd>4.1</dd>
+              <dt>Server name</dt>
+              <dd>40DemoMaster</dd>
+              <dt>User name</dt>
+              <dd>Administrator</dd>
+              <dt>User role</dt>
+              <dd>EvmRole-super_administrator</dd>
+              <dt>Browser version</dt>
+              <dd>601.2</dd>
+              <dt>Browser OS</dt>
+              <dd>Mac</dd>
+            </dl>
+          </div>
+          <p
+            class="pf-c-about-modal-box__strapline"
+          >Trademark and copyright information here</p>
         </div>
-        <p
-          class="pf-c-about-modal-box__strapline"
-        >Trademark and copyright information here</p>
       </div>
     </div>
   </div>

package/docs/demos/Alert/examples/Alert.md

@@ -7,10 +7,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="alert-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-alert-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-alert-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="alert-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -989,10 +991,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="alert-horizontal-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-alert-horizontal-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-alert-horizontal-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="alert-horizontal-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -2009,10 +2013,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="alert-stacked-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-alert-stacked-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-alert-stacked-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="alert-stacked-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -8,10 +8,12 @@ cssPrefix: pf-d-back-to-top
 
 ```html isFullscreen
 <div class="pf-c-page" id="back-to-top-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-back-to-top-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-back-to-top-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="back-to-top-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/Banner/examples/Banner.md

@@ -10,10 +10,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="banner-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-banner-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-banner-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="banner-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -890,7 +892,7 @@ wrapperTag: div
         </div>
       </div>
     </section>
-    <section class="pf-c-page__main-section pf-m-limit-width">
+    <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
       <div class="pf-c-page__main-body">
         <div class="pf-l-gallery pf-m-gutter">
           <div class="pf-c-card">
@@ -1075,10 +1077,12 @@ wrapperTag: div
   </div>
   <div class="pf-l-flex__item pf-m-grow" style="min-height: 0;">
     <div class="pf-c-page" id="banner-top-bottom-example">
-      <a
-        class="pf-c-skip-to-content pf-c-button pf-m-primary"
-        href="#main-content-banner-top-bottom-example"
-      >Skip to content</a>
+      <div class="pf-c-skip-to-content">
+        <a
+          class="pf-c-button pf-m-primary"
+          href="#main-content-banner-top-bottom-example"
+        >Skip to content</a>
+      </div>
       <header class="pf-c-masthead" id="banner-top-bottom-example-masthead">
         <span class="pf-c-masthead__toggle">
           <button
@@ -2005,7 +2009,7 @@ wrapperTag: div
             </div>
           </div>
         </section>
-        <section class="pf-c-page__main-section pf-m-limit-width">
+        <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
           <div class="pf-c-page__main-body">
             <div class="pf-l-gallery pf-m-gutter">
               <div class="pf-c-card">

package/docs/demos/Card/examples/Card.md

@@ -2291,8 +2291,8 @@ wrapperTag: div
           </span>
         </button>
       </h3>
-      <div class="pf-c-accordion__expanded-content pf-m-expanded">
-        <div class="pf-c-accordion__expanded-content-body">
+      <div class="pf-c-accordion__expandable-content pf-m-expanded">
+        <div class="pf-c-accordion__expandable-content-body">
           <div class="pf-l-grid pf-m-gutter">
             <div class="pf-l-grid pf-m-gutter">
               <div class="pf-l-grid__item pf-m-4-col-on-md">
@@ -2389,7 +2389,7 @@ wrapperTag: div
           </span>
         </button>
       </h3>
-      <div class="pf-c-accordion__expanded-content" hidden>
+      <div class="pf-c-accordion__expandable-content" hidden>
         <div class="pf-l-grid pf-m-gutter">
           <div class="pf-l-grid pf-m-gutter">
             <div class="pf-l-grid__item pf-m-4-col-on-md">
@@ -2485,7 +2485,7 @@ wrapperTag: div
           </span>
         </button>
       </h3>
-      <div class="pf-c-accordion__expanded-content" hidden>
+      <div class="pf-c-accordion__expandable-content" hidden>
         <div class="pf-l-grid pf-m-gutter">
           <div class="pf-l-grid pf-m-gutter">
             <div class="pf-l-grid__item pf-m-4-col-on-md">

package/docs/demos/CardView/examples/CardView.md

@@ -7,10 +7,12 @@ section: demos
 
 ```html isFullscreen
 <div class="pf-c-page" id="card-view-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-card-view-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-card-view-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="card-view-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button