@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/docs/components/Sidebar/examples/Sidebar.md

@@ -175,21 +175,77 @@ cssPrefix: pf-c-sidebar
 
 ```
 
+### Border
+
+```html
+<div class="pf-c-sidebar pf-m-gutter">
+  <div class="pf-c-sidebar__main pf-m-border">
+    <div class="pf-c-sidebar__panel">Sidebar panel</div>
+    <div class="pf-c-sidebar__content">
+      <div class="pf-c-content">
+        <p>Default layout.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
+        <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
+### Padding on panel
+
+```html
+<div class="pf-c-sidebar">
+  <div class="pf-c-sidebar__main">
+    <div class="pf-c-sidebar__panel pf-m-padding">Sidebar panel, with padding</div>
+    <div class="pf-c-sidebar__content">
+      <div class="pf-c-content">
+        <p>Default layout.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
+        <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
+### Padding on content
+
+```html
+<div class="pf-c-sidebar">
+  <div class="pf-c-sidebar__main">
+    <div class="pf-c-sidebar__panel">Sidebar panel</div>
+    <div class="pf-c-sidebar__content pf-m-padding">
+      <div class="pf-c-content">
+        <p>Sidebar content, with padding</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
+        <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Usage
 
-| Class                                                              | Applied to                                                      | Outcome                                                                                                                                                                                                         |
-| ------------------------------------------------------------------ | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-sidebar`                                                    | `<div>`                                                         | Initiates the sidebar component. **Required**                                                                                                                                                                   |
-| `.pf-c-sidebar__main`                                              | `<div>`                                                         | Initiates the sidebar main element. **Required**                                                                                                                                                                |
-| `.pf-c-sidebar__panel`                                             | `<div>`                                                         | Initiates the sidebar panel element. **Required**                                                                                                                                                               |
-| `.pf-c-sidebar__content`                                           | `<div>`                                                         | Initiates the sidebar content element. **Required**                                                                                                                                                             |
-| `.pf-m-gutter`                                                     | `.pf-c-sidebar`                                                 | Modifies the sidebar component to add a gutter between the panel and content.                                                                                                                                   |
-| `.pf-m-stack`                                                      | `.pf-c-sidebar`                                                 | Modifies the sidebar to stack the panel on top of the content.                                                                                                                                                  |
-| `.pf-m-split`                                                      | `.pf-c-sidebar`                                                 | Modifies the sidebar to position the panel and content side by side.                                                                                                                                            |
-| `.pf-m-panel-right`                                                | `.pf-c-sidebar`                                                 | Modifies the sidebar to place the panel to the right of the content.                                                                                                                                            |
-| `.pf-m-sticky`                                                     | `.pf-c-sidebar__panel`                                          | Modifies the panel to be sticky to the top of the layout.                                                                                                                                                       |
-| `.pf-m-static`                                                     | `.pf-c-sidebar__panel`                                          | Modifies the panel to be positioned statically.                                                                                                                                                                 |
-| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-sidebar__panel`                                          | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
-| `.pf-m-no-background`                                              | `.pf-c-sidebar`, `.pf-c-sidebar__panel, .pf-c-sidebar__content` | Modifies the element to have a transparent background.                                                                                                                                                          |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-sidebar` | `<div>` | Initiates the sidebar component. **Required** |
+| `.pf-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
+| `.pf-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
+| `.pf-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
+| `.pf-m-border` | `.pf-c-sidebar__main` | Modifies the sidebar component to add a border between the panel and content. |
+| `.pf-m-padding` | `.pf-c-sidebar__panel`, `.pf-c-sidebar__content` | Modifies the sidebar component to add a padding to panel and/or content. |
+| `.pf-m-gutter` | `.pf-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
+| `.pf-m-stack` | `.pf-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
+| `.pf-m-split` | `.pf-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
+| `.pf-m-panel-right` | `.pf-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
+| `.pf-m-sticky` | `.pf-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
+| `.pf-m-static` | `.pf-c-sidebar__panel` | Modifies the panel to be positioned statically. |
+| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
+| `.pf-m-no-background` | `.pf-c-sidebar`, `.pf-c-sidebar__panel, .pf-c-sidebar__content` | Modifies the element to have a transparent background. |

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

@@ -8,7 +8,7 @@ cssPrefix: pf-c-simple-list
 
 ```html
 <div class="pf-c-simple-list">
-  <ul class="pf-c-simple-list__list">
+  <ul class="pf-c-simple-list__list" role="list">
     <li class="pf-c-simple-list__item">
       <button
         class="pf-c-simple-list__item-link pf-m-current"
@@ -30,7 +30,7 @@ cssPrefix: pf-c-simple-list
 
 ```html
 <div class="pf-c-simple-list">
-  <ul class="pf-c-simple-list__list">
+  <ul class="pf-c-simple-list__list" role="list">
     <li class="pf-c-simple-list__item">
       <a
         class="pf-c-simple-list__item-link pf-m-current"
@@ -55,7 +55,7 @@ cssPrefix: pf-c-simple-list
 <div class="pf-c-simple-list">
   <section class="pf-c-simple-list__section">
     <h2 class="pf-c-simple-list__title">Title</h2>
-    <ul class="pf-c-simple-list__list">
+    <ul class="pf-c-simple-list__list" role="list">
       <li class="pf-c-simple-list__item">
         <button
           class="pf-c-simple-list__item-link pf-m-current"
@@ -75,7 +75,7 @@ cssPrefix: pf-c-simple-list
   </section>
   <section class="pf-c-simple-list__section">
     <h2 class="pf-c-simple-list__title">Title</h2>
-    <ul class="pf-c-simple-list__list">
+    <ul class="pf-c-simple-list__list" role="list">
       <li class="pf-c-simple-list__item">
         <button class="pf-c-simple-list__item-link" type="button">List item 1</button>
       </li>
@@ -98,18 +98,18 @@ cssPrefix: pf-c-simple-list
 
 ### Accessibility
 
-| Attribute      | Applied to                      | Outcome                                                                               |
-| -------------- | ------------------------------- | ------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `tabindex="0"` | `a.pf-c-simple-list__item-link` | Inserts the link into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 
-| Class                          | Applied to                     | Outcome                                                                                   |
-| ------------------------------ | ------------------------------ | ----------------------------------------------------------------------------------------- |
-| `.pf-c-simple-list`            | `<div>`                        | Initiates a simple list.                                                                  |
-| `.pf-c-simple-list__section`   | `<section>`                    | Initiates a simple list section.                                                          |
-| `.pf-c-simple-list__title`     | `<h2>`                         | Initiates a simple list title.                                                            |
-| `.pf-c-simple-list__list`      | `<ul>`                         | Initiates a simple list unordered list.                                                   |
-| `.pf-c-simple-list__item`      | `<li>`                         | Initiates a simple list item.                                                             |
-| `.pf-c-simple-list__item-link` | `<button>`, `<a>`              | Initiates a simple list item link. It can be a button or a link depending on the context. |
-| `.pf-m-current`                | `.pf-c-simple-list__item-link` | Modifies the simple list item link for the current state.                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-simple-list` | `<div>` | Initiates a simple list. |
+| `.pf-c-simple-list__section` | `<section>` | Initiates a simple list section. |
+| `.pf-c-simple-list__title` | `<h2>` | Initiates a simple list title. |
+| `.pf-c-simple-list__list` | `<ul>` | Initiates a simple list unordered list. |
+| `.pf-c-simple-list__item` | `<li>` | Initiates a simple list item. |
+| `.pf-c-simple-list__item-link` | `<button>`, `<a>` | Initiates a simple list item link. It can be a button or a link depending on the context. |
+| `.pf-m-current` | `.pf-c-simple-list__item-link` | Modifies the simple list item link for the current state. |

package/docs/components/Skeleton/examples/Skeleton.md

@@ -90,11 +90,11 @@ Small circle
 
 ### Usage
 
-| Class                                                | Applied to       | Outcome                                                                                              |
-| ---------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------- |
-| `.pf-c-skeleton`                                     | `<div>`          | Initiates the skeleton component. **Required**                                                       |
-| `.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]`       | `.pf-c-skeleton` | Modifies the width of the skeleton. The default is 100%.                                             |
-| `.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100]` | `.pf-c-skeleton` | Modifies the height of the skeleton. The default is the inherited font size.                         |
-| `.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl]`         | `.pf-c-skeleton` | Modifies the skeleton height to match the height of PatternFly's text elements.                      |
-| `.pf-m-circle`                                       | `.pf-c-skeleton` | Modifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size. |
-| `.pf-m-square`                                       | `.pf-c-skeleton` | Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-skeleton` | `<div>` | Initiates the skeleton component. **Required** |
+| `.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]` | `.pf-c-skeleton` | Modifies the width of the skeleton. The default is 100%. |
+| `.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100]` | `.pf-c-skeleton` | Modifies the height of the skeleton. The default is the inherited font size. |
+| `.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl]` | `.pf-c-skeleton` | Modifies the skeleton height to match the height of PatternFly's text elements. |
+| `.pf-m-circle` | `.pf-c-skeleton` | Modifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size. |
+| `.pf-m-square` | `.pf-c-skeleton` | Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size. |

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

@@ -139,12 +139,12 @@ When using `.pf-c-skip-to-content` you must provide an `href` attribute whose va
 
 ### Accessibility
 
-| Attribute                       | Applied to              | Outcome                                                    |
-| ------------------------------- | ----------------------- | ---------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `href="[id of main container]"` | `.pf-c-skip-to-content` | Sends focus to the primary content container. **Required** |
 
 ### Usage
 
-| Class                   | Applied to | Outcome                             |
-| ----------------------- | ---------- | ----------------------------------- |
-| `.pf-c-skip-to-content` | `<a>`      | initiates the skip to content link. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-skip-to-content` | `<a>` |  initiates the skip to content link. |

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

@@ -261,13 +261,17 @@ cssPrefix: pf-c-slider
   </div>
   <div class="pf-c-slider__value">
     <div class="pf-c-input-group">
-      <input
-        class="pf-c-form-control"
-        type="number"
-        value="50"
-        aria-label="Slider value input"
-      />
-      <span class="pf-c-input-group__text">%</span>
+      <div class="pf-c-input-group__item pf-m-fill">
+        <input
+          class="pf-c-form-control"
+          type="number"
+          value="50"
+          aria-label="Slider value input"
+        />
+      </div>
+      <div class="pf-c-input-group__item">
+        <span class="pf-c-input-group__text">%</span>
+      </div>
     </div>
   </div>
 </div>
@@ -291,13 +295,17 @@ cssPrefix: pf-c-slider
   </div>
   <div class="pf-c-slider__value">
     <div class="pf-c-input-group">
-      <input
-        class="pf-c-form-control"
-        type="number"
-        value="50"
-        aria-label="Slider value input"
-      />
-      <span class="pf-c-input-group__text">%</span>
+      <div class="pf-c-input-group__item pf-m-fill">
+        <input
+          class="pf-c-form-control"
+          type="number"
+          value="50"
+          aria-label="Slider value input"
+        />
+      </div>
+      <div class="pf-c-input-group__item">
+        <span class="pf-c-input-group__text">%</span>
+      </div>
     </div>
   </div>
 </div>
@@ -322,13 +330,15 @@ cssPrefix: pf-c-slider
       tabindex="0"
     ></div>
     <div class="pf-c-slider__value pf-m-floating">
-      <div class="pf-c-input-group">
+      <div class="pf-c-input-group__item pf-m-fill">
         <input
           class="pf-c-form-control"
           type="number"
           value="50"
           aria-label="Slider value input"
         />
+      </div>
+      <div class="pf-c-input-group__item">
         <span class="pf-c-input-group__text">%</span>
       </div>
     </div>
@@ -386,14 +396,18 @@ cssPrefix: pf-c-slider
     ></div>
     <div class="pf-c-slider__value pf-m-floating">
       <div class="pf-c-input-group">
-        <input
-          class="pf-c-form-control"
-          disabled
-          type="number"
-          value="50"
-          aria-label="Slider value input"
-        />
-        <span class="pf-c-input-group__text pf-m-disabled">%</span>
+        <div class="pf-c-input-group__item pf-m-fill">
+          <input
+            class="pf-c-form-control"
+            disabled
+            type="number"
+            value="50"
+            aria-label="Slider value input"
+          />
+        </div>
+        <div class="pf-c-input-group__item">
+          <span class="pf-c-input-group__text pf-m-disabled">%</span>
+        </div>
       </div>
     </div>
   </div>
@@ -423,13 +437,17 @@ cssPrefix: pf-c-slider
     ></div>
     <div class="pf-c-slider__value pf-m-floating">
       <div class="pf-c-input-group">
-        <input
-          class="pf-c-form-control"
-          type="number"
-          value="50"
-          aria-label="Slider value input"
-        />
-        <span class="pf-c-input-group__text">%</span>
+        <div class="pf-c-input-group__item pf-m-fill">
+          <input
+            class="pf-c-form-control"
+            type="number"
+            value="50"
+            aria-label="Slider value input"
+          />
+        </div>
+        <div class="pf-c-input-group__item">
+          <span class="pf-c-input-group__text">%</span>
+        </div>
       </div>
     </div>
   </div>
@@ -563,14 +581,18 @@ cssPrefix: pf-c-slider
   </div>
   <div class="pf-c-slider__value">
     <div class="pf-c-input-group">
-      <input
-        class="pf-c-form-control"
-        disabled
-        type="number"
-        value="50"
-        aria-label="Slider value input"
-      />
-      <span class="pf-c-input-group__text pf-m-disabled">%</span>
+      <div class="pf-c-input-group__item pf-m-fill">
+        <input
+          class="pf-c-form-control"
+          disabled
+          type="number"
+          value="50"
+          aria-label="Slider value input"
+        />
+      </div>
+      <div class="pf-c-input-group__item">
+        <span class="pf-c-input-group__text pf-m-disabled">%</span>
+      </div>
     </div>
   </div>
 </div>
@@ -581,30 +603,30 @@ cssPrefix: pf-c-slider
 
 ### Accessibility
 
-| Attribute                 | Applied to                                       | Outcome                                                                                                           |
-| ------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
-| `role="slider"`           | `.pf-c-slider__thumb`                            | Identifies the element as a slider. **Required**                                                                  |
-| `tabindex="0"`            | `.pf-c-slider__thumb`                            | Includes the slider thumb in the page tab sequence. **Note:** only for use with non-disabled slider. **Required** |
-| `aria-disabled="true"`    | `.pf-c-slider.pf-m-disabled .pf-c-slider__thumb` | Indicates that the slider thumb is disabled. **Required**                                                         |
-| `aria-valuemin="[value]"` | `.pf-c-slider__thumb`                            | Specifies the minimum value of the slider. **Required**                                                           |
-| `aria-valuemax="[value]"` | `.pf-c-slider__thumb`                            | Specifies the maximum value of the slider. **Required**                                                           |
-| `aria-valuenow="[value]"` | `.pf-c-slider__thumb`                            | Specifies the current value of the slider. **Required**                                                           |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="slider"` | `.pf-c-slider__thumb` | Identifies the element as a slider. **Required** |
+| `tabindex="0"` | `.pf-c-slider__thumb` | Includes the slider thumb in the page tab sequence. **Note:** only for use with non-disabled slider. **Required** |
+| `aria-disabled="true"` | `.pf-c-slider.pf-m-disabled .pf-c-slider__thumb` | Indicates that the slider thumb is disabled. **Required** |
+| `aria-valuemin="[value]"` | `.pf-c-slider__thumb` | Specifies the minimum value of the slider. **Required** |
+| `aria-valuemax="[value]"` | `.pf-c-slider__thumb` | Specifies the maximum value of the slider. **Required** |
+| `aria-valuenow="[value]"` | `.pf-c-slider__thumb` | Specifies the current value of the slider. **Required** |
 
 ### Usage
 
-| Class                      | Applied to            | Outcome                                                                    |
-| -------------------------- | --------------------- | -------------------------------------------------------------------------- |
-| `.pf-c-slider`             | `<div>`               | Initiates the slider component. **Required**                               |
-| `.pf-c-slider__main`       | `<div>`               | Initiates the slider main element. **Required**                            |
-| `.pf-c-slider__rail`       | `<div>`               | Initiates the slider rail. **Required**                                    |
-| `.pf-c-slider__rail-track` | `<div>`               | Initiates the slider rail track. **Required**                              |
-| `.pf-c-slider__steps`      | `<div>`               | Initiates the slider steps.                                                |
-| `.pf-c-slider__step`       | `<div>`               | Initiates a slider step.                                                   |
-| `.pf-c-slider__step-tick`  | `<div>`               | Initiates a slider step tick.                                              |
-| `.pf-c-slider__step-label` | `<div>`               | Initiates a slider step label.                                             |
-| `.pf-c-slider__thumb`      | `<div>`               | Initiates the slider thumb. **Required**                                   |
-| `.pf-c-slider__value`      | `<div>`               | Initiates the slider value.                                                |
-| `.pf-c-slider__actions`    | `<div>`               | Initiates the slider actions.                                              |
-| `.pf-m-disabled`           | `.pf-c-slider`        | Modifies the slider for the disabled state.                                |
-| `.pf-m-floating`           | `.pf-c-slider__thumb` | Modifies the slider value to float above the thumb.                        |
-| `--pf-c-slider--value`     | `.pf-c-slider`        | Applies appropriate slider styles based on the current value. **Required** |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-slider` | `<div>` | Initiates the slider component. **Required** |
+| `.pf-c-slider__main` | `<div>` | Initiates the slider main element. **Required** |
+| `.pf-c-slider__rail` | `<div>` | Initiates the slider rail. **Required** |
+| `.pf-c-slider__rail-track` | `<div>` | Initiates the slider rail track. **Required** |
+| `.pf-c-slider__steps` | `<div>` | Initiates the slider steps. |
+| `.pf-c-slider__step` | `<div>` | Initiates a slider step. |
+| `.pf-c-slider__step-tick` | `<div>` | Initiates a slider step tick. |
+| `.pf-c-slider__step-label` | `<div>` | Initiates a slider step label. |
+| `.pf-c-slider__thumb` | `<div>` | Initiates the slider thumb. **Required** |
+| `.pf-c-slider__value` | `<div>` | Initiates the slider value. |
+| `.pf-c-slider__actions` | `<div>` | Initiates the slider actions. |
+| `.pf-m-disabled` | `.pf-c-slider` | Modifies the slider for the disabled state. |
+| `.pf-m-floating` | `.pf-c-slider__thumb` | Modifies the slider value to float above the thumb. |
+| `--pf-c-slider--value` | `.pf-c-slider` | Applies appropriate slider styles based on the current value. **Required** |

package/docs/components/Spinner/examples/Spinner.md

@@ -134,12 +134,12 @@ An inline spinner inherits its font-size, so its size will match the content aro
 
 ### Accessibility
 
-| Attribute                                        | Applied to      | Outcome                                                                                                      |
-| ------------------------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------------ |
-| `role="progressbar"`                             | `.pf-c-spinner` | Indicates to assistive technologies that this is an indeterminate progress indicator.                        |
-| `aria-label="Loading..."`                        | `.pf-c-spinner` | Provides an accessible name for the spinner. **Note: one of `aria-label` or `aria-labelledby` is required.** |
-| `aria-labelledby="[id of spinner label]"`        | `.pf-c-spinner` | Gives the spinner an accessible name by referring to the element that labels the spinner.                    |
-| `aria-describedby="[id of spinner description]"` | `.pf-c-spinner` | Gives the spinner an accessible description by referring to the element that describes the spinner.          |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="progressbar"` | `.pf-c-spinner` | Indicates to assistive technologies that this is an indeterminate progress indicator. |
+| `aria-label="Loading..."` | `.pf-c-spinner` | Provides an accessible name for the spinner. **Note: one of `aria-label` or `aria-labelledby` is required.** |
+| `aria-labelledby="[id of spinner label]"` | `.pf-c-spinner` | Gives the spinner an accessible name by referring to the element that labels the spinner. |
+| `aria-describedby="[id of spinner description]"` | `.pf-c-spinner` | Gives the spinner an accessible description by referring to the element that describes the spinner. |
 
 Note: If the spinner is showing that loading of a particular region of a page is in process, the author should use `aria-describedby` to point to the status, and set the `aria-busy` attribute to `true` on the region until it is finished loading.
 
@@ -147,27 +147,27 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
 
 ### Usage
 
-| Class                      | Applied to      | Outcome                                                                          |
-| -------------------------- | --------------- | -------------------------------------------------------------------------------- |
-| `.pf-c-spinner`            | `<svg>`         | Creates a spinner component. The default is an extra large spinner. **Required** |
-| `.pf-c-spinner__path`      | `<circle>`      | Creates a spinner circle component. **Required**                                 |
-| `--pf-c-spinner--diameter` | `.pf-c-spinner` | Modifies the value for `--pf-c-spinner--diameter` declaration.                   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-spinner` | `<svg>` |  Creates a spinner component. The default is an extra large spinner. **Required**|
+| `.pf-c-spinner__path` | `<circle>` |  Creates a spinner circle component. **Required**|
+| `--pf-c-spinner--diameter` | `.pf-c-spinner` | Modifies the value for `--pf-c-spinner--diameter` declaration. |
 
 ### Usage (legacy)
 
-| Class                      | Applied to | Outcome                                                                          |
-| -------------------------- | ---------- | -------------------------------------------------------------------------------- |
-| `.pf-c-spinner`            | `<span>`   | Creates a spinner component. The default is an extra large spinner. **Required** |
-| `.pf-c-spinner__clipper`   | `<span>`   | Creates the spinning line. **Required**                                          |
-| `.pf-c-spinner__lead-ball` | `<span>`   | Rounds out the beginning of the spinning line. **Required**                      |
-| `.pf-c-spinner__tail-ball` | `<span>`   | Rounds out the end of the spinning line. **Required**                            |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-spinner` | `<span>` |  Creates a spinner component. The default is an extra large spinner. **Required**|
+| `.pf-c-spinner__clipper` | `<span>` |  Creates the spinning line. **Required**|
+| `.pf-c-spinner__lead-ball` | `<span>` |  Rounds out the beginning of the spinning line. **Required**|
+| `.pf-c-spinner__tail-ball` | `<span>` |  Rounds out the end of the spinning line. **Required**|
 
 ### Modifiers
 
-| Class          | Applied to      | Outcome                         |
-| -------------- | --------------- | ------------------------------- |
-| `.pf-m-sm`     | `.pf-c-spinner` | Creates a small spinner.        |
-| `.pf-m-md`     | `.pf-c-spinner` | Creates a medium spinner.       |
-| `.pf-m-lg`     | `.pf-c-spinner` | Creates a large spinner.        |
-| `.pf-m-xl`     | `.pf-c-spinner` | Creates an extra-large spinner. |
-| `.pf-m-inline` | `.pf-c-spinner` | Creates an inline spinner.      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-sm` | `.pf-c-spinner` |  Creates a small spinner. |
+| `.pf-m-md` | `.pf-c-spinner` |  Creates a medium spinner. |
+| `.pf-m-lg` | `.pf-c-spinner` |  Creates a large spinner. |
+| `.pf-m-xl` | `.pf-c-spinner` |  Creates an extra-large spinner. |
+| `.pf-m-inline` | `.pf-c-spinner` |  Creates an inline spinner. |

package/docs/components/Switch/examples/Switch.md

@@ -275,25 +275,25 @@ Use checkbox if your user has to perform additional steps for changes to become
 
 ### Accessibility
 
-| Attribute                                     | Applied to                | Outcome                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| --------------------------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-labelledby="..."` or `aria-label="..."` | `.pf-c-switch__input`     | Indicates the action triggered by the switch. If an additional text label is included with the switch besides `.pf-c-switch__label.pf-m-on`, then `aria-labelledby` can reference the `id` of this text, or this text can be used as the value for `aria-label`. If the text included for `.pf-c-switch__label.pf-m-on` provides additional meaning to the primary label that's referenced, then it can also be represented as part of the `aria-labelledby` or `aria-label` attribute. **Required** |
-| `for`                                         | `<label>`                 | Each `<label>` must have a `for` attribute that matches its input id. **Required**                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `id`                                          | `<input type="checkbox">` | Each `<input>` must have an `id` attribute that matches its label's `for` value. **Required**                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `id`                                          | `.pf-c-switch__label`     | Each `.pf-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-c-switch__input`.                                                                                                                                                                                                                                                                                                                                                                                  |
-| `checked`                                     | `.pf-c-switch__input`     | Indicates that the input is checked                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `disabled`                                    | `.pf-c-switch__input`     | Indicates that the input is disabled                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `aria-hidden="true"`                          | `.pf-c-switch__label`     | Hides the text from the screen reader.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-labelledby="..."` or `aria-label="..."` | `.pf-c-switch__input` | Indicates the action triggered by the switch. If an additional text label is included with the switch besides `.pf-c-switch__label.pf-m-on`, then `aria-labelledby` can reference the `id` of this text, or this text can be used as the value for `aria-label`. If the text included for `.pf-c-switch__label.pf-m-on` provides additional meaning to the primary label that's referenced, then it can also be represented as part of the `aria-labelledby` or `aria-label` attribute. **Required** |
+| `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its input id. **Required** |
+| `id` | `<input type="checkbox">` | Each `<input>` must have an `id` attribute that matches its label's `for` value. **Required** |
+| `id` | `.pf-c-switch__label` | Each `.pf-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-c-switch__input`. |
+| `checked` | `.pf-c-switch__input` |  Indicates that the input is checked |
+| `disabled` | `.pf-c-switch__input` |  Indicates that the input is disabled |
+| `aria-hidden="true"` | `.pf-c-switch__label` | Hides the text from the screen reader. |
 
 ### Usage
 
-| Class                       | Applied to                | Outcome                                                                                        |
-| --------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------- |
-| `.pf-c-switch`              | `<label>`                 | Initiates a switch. **Required**                                                               |
-| `.pf-c-switch__input`       | `<input type="checkbox">` | Hide the checkbox inside the switch. **Required**                                              |
-| `.pf-c-switch__toggle`      | `<span>`                  | Initiates the toggle inside the switch. **Required**                                           |
-| `.pf-c-switch__toggle-icon` | `<span>`                  | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
-| `.pf-c-switch__label`       | `<span>`                  | Initiates a label inside the switch.                                                           |
-| `.pf-m-on`                  | `.pf-c-switch__label`     | Modifies the switch label to display the on message.                                           |
-| `.pf-m-off`                 | `.pf-c-switch__label`     | Modifies the switch label to display the off message.                                          |
-| `.pf-m-reverse`             | `.pf-c-switch`            | Positions the switch toggle to the right of the label.                                         |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-switch` | `<label>` |  Initiates a switch. **Required**  |
+| `.pf-c-switch__input` | `<input type="checkbox">` |  Hide the checkbox inside the switch. **Required**  |
+| `.pf-c-switch__toggle` | `<span>` |  Initiates the toggle inside the switch. **Required**  |
+| `.pf-c-switch__toggle-icon` | `<span>` | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
+| `.pf-c-switch__label` | `<span>` |  Initiates a label inside the switch. |
+| `.pf-m-on` | `.pf-c-switch__label` | Modifies the switch label to display the on message. |
+| `.pf-m-off` | `.pf-c-switch__label` | Modifies the switch label to display the off message. |
+| `.pf-m-reverse` | `.pf-c-switch` | Positions the switch toggle to the right of the label. |

package/docs/components/TabContent/examples/TabContent.md

@@ -135,19 +135,19 @@ Tab content should be used with the [tabs component](/components/tabs).
 
 ### Accessibility
 
-| Attribute                             | Applied to          | Outcome                                                                                                                                        |
-| ------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="tabpanel"`                     | `.pf-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required**                                                               |
-| `aria-labelledby=[ID of tab element]` | `.pf-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. **Required**                                   |
-| `id=[ID of tab panel]`                | `.pf-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel.  **Required** |
-| `hidden`                              | `.pf-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel**                                                      |
-| `tabindex="0"`                        | `.pf-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. **Required**             |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="tabpanel"` | `.pf-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required** |
+| `aria-labelledby=[ID of tab element]` | `.pf-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. **Required**
+| `id=[ID of tab panel]` | `.pf-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel.  **Required**
+| `hidden` | `.pf-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel**
+| `tabindex="0"` | `.pf-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. **Required**
 
 ### Usage
 
-| Class                     | Applied to                | Outcome                                              |
-| ------------------------- | ------------------------- | ---------------------------------------------------- |
-| `.pf-c-tab-content`       | `<section>`               | Initiates the tab content component. **Required**    |
-| `.pf-c-tab-content__body` | `<div>`                   | Initiates the tab content body component.            |
-| `.pf-m-padding`           | `.pf-c-tab-content__body` | Modifies the tab content body component padding.     |
-| `.pf-m-light-300`         | `.pf-c-tab-content`       | Modifies the tab content component background color. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-tab-content` | `<section>` |  Initiates the tab content component. **Required** |
+| `.pf-c-tab-content__body` | `<div>` |  Initiates the tab content body component. |
+| `.pf-m-padding` | `.pf-c-tab-content__body` | Modifies the tab content body component padding. |
+| `.pf-m-light-300` | `.pf-c-tab-content` |  Modifies the tab content component background color. |

package/docs/components/Table/examples/Table.css

@@ -9,6 +9,10 @@
   top: -18px;
 }
 
+#ws-core-c-table-sticky-header .ws-preview-html {
+  height: 300px;
+}
+
 #ws-core-c-table-sticky-columns-and-header .ws-preview-html {
   height: 600px;
 }