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

package/docs/components/InputGroup/examples/InputGroup.md

@@ -12,205 +12,255 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 
 ```html
 <div class="pf-c-input-group">
-  <button
-    class="pf-c-button pf-m-control"
-    type="button"
-    id="textAreaButton1"
-  >Button</button>
-  <textarea
-    class="pf-c-form-control"
-    name="textarea1"
-    id="textarea1"
-    aria-label="Textarea with buttons"
-    aria-describedby="textAreaButton1"
-  ></textarea>
-  <button class="pf-c-button pf-m-control" type="button">Button</button>
+  <div class="pf-c-input-group__item">
+    <button
+      class="pf-c-button pf-m-control"
+      type="button"
+      id="textAreaButton1"
+    >Button</button>
+  </div>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <textarea
+      class="pf-c-form-control"
+      name="textarea1"
+      id="textarea1"
+      aria-label="Textarea with buttons"
+      aria-describedby="textAreaButton1"
+    ></textarea>
+  </div>
+  <div class="pf-c-input-group__item">
+    <button class="pf-c-button pf-m-control" type="button">Button</button>
+  </div>
 </div>
 <br />
 <div class="pf-c-input-group">
-  <textarea
-    class="pf-c-form-control"
-    name="textarea2"
-    id="textarea2"
-    aria-label="Textarea with button"
-    aria-describedby="textAreaButton2"
-  ></textarea>
-  <button
-    class="pf-c-button pf-m-control"
-    type="button"
-    id="textAreaButton2"
-  >Button</button>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <textarea
+      class="pf-c-form-control"
+      name="textarea2"
+      id="textarea2"
+      aria-label="Textarea with button"
+      aria-describedby="textAreaButton2"
+    ></textarea>
+  </div>
+  <div class="pf-c-input-group__item">
+    <button
+      class="pf-c-button pf-m-control"
+      type="button"
+      id="textAreaButton2"
+    >Button</button>
+  </div>
 </div>
 <br />
 <div class="pf-c-input-group">
-  <button
-    class="pf-c-button pf-m-control"
-    type="button"
-    id="textAreaButton3"
-  >Button</button>
-  <button class="pf-c-button pf-m-control" type="button">Button</button>
-  <textarea
-    class="pf-c-form-control"
-    name="textarea3"
-    id="textarea3"
-    aria-label="Textarea with buttons"
-    aria-describedby="textAreaButton3"
-  ></textarea>
-  <button class="pf-c-button pf-m-control" type="button">Button</button>
+  <div class="pf-c-input-group__item">
+    <button
+      class="pf-c-button pf-m-control"
+      type="button"
+      id="textAreaButton3"
+    >Button</button>
+  </div>
+  <div class="pf-c-input-group__item">
+    <button class="pf-c-button pf-m-control" type="button">Button</button>
+  </div>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <textarea
+      class="pf-c-form-control"
+      name="textarea3"
+      id="textarea3"
+      aria-label="Textarea with buttons"
+      aria-describedby="textAreaButton3"
+    ></textarea>
+  </div>
+  <div class="pf-c-input-group__item">
+    <button class="pf-c-button pf-m-control" type="button">Button</button>
+  </div>
 </div>
 <br />
 <div class="pf-c-input-group">
-  <div class="pf-c-select" style="width: 100px;">
-    <span id="select-example-collapsed1-label" hidden>Choose one</span>
+  <div class="pf-c-input-group__item">
+    <div class="pf-c-select" style="width: 100px;">
+      <span id="select-example-collapsed1-label" hidden>Choose one</span>
+
+      <button
+        class="pf-c-select__toggle"
+        type="button"
+        id="select-example-collapsed1-toggle"
+        aria-haspopup="true"
+        aria-expanded="false"
+        aria-labelledby="select-example-collapsed1-label select-example-collapsed1-toggle"
+      >
+        <div class="pf-c-select__toggle-wrapper">
+          <span class="pf-c-select__toggle-text">Select</span>
+        </div>
+        <span class="pf-c-select__toggle-arrow">
+          <i class="fas fa-caret-down" aria-hidden="true"></i>
+        </span>
+      </button>
 
+      <ul
+        class="pf-c-select__menu"
+        role="listbox"
+        aria-labelledby="select-example-collapsed1-label"
+        hidden
+        style="width: 100px;"
+      >
+        <li role="presentation">
+          <button class="pf-c-select__menu-item" role="option">Running</button>
+        </li>
+        <li role="presentation">
+          <button
+            class="pf-c-select__menu-item pf-m-selected"
+            role="option"
+            aria-selected="true"
+          >
+            Stopped
+            <span class="pf-c-select__menu-item-icon">
+              <i class="fas fa-check" aria-hidden="true"></i>
+            </span>
+          </button>
+        </li>
+        <li role="presentation">
+          <button class="pf-c-select__menu-item" role="option">Down</button>
+        </li>
+        <li role="presentation">
+          <button class="pf-c-select__menu-item" role="option">Degraded</button>
+        </li>
+        <li role="presentation">
+          <button class="pf-c-select__menu-item" role="option">Needs maintenance</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <input
+      class="pf-c-form-control"
+      type="text"
+      id="textInput4"
+      name="textInput4"
+      aria-label="Input with select and button"
+      aria-describedby="inputSelectButton1"
+    />
+  </div>
+  <div class="pf-c-input-group__item">
     <button
-      class="pf-c-select__toggle"
+      class="pf-c-button pf-m-control"
       type="button"
-      id="select-example-collapsed1-toggle"
-      aria-haspopup="true"
-      aria-expanded="false"
-      aria-labelledby="select-example-collapsed1-label select-example-collapsed1-toggle"
-    >
-      <div class="pf-c-select__toggle-wrapper">
-        <span class="pf-c-select__toggle-text">Select</span>
-      </div>
-      <span class="pf-c-select__toggle-arrow">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
-      </span>
-    </button>
-
-    <ul
-      class="pf-c-select__menu"
-      role="listbox"
-      aria-labelledby="select-example-collapsed1-label"
-      hidden
-      style="width: 100px;"
-    >
-      <li role="presentation">
-        <button class="pf-c-select__menu-item" role="option">Running</button>
-      </li>
-      <li role="presentation">
-        <button
-          class="pf-c-select__menu-item pf-m-selected"
-          role="option"
-          aria-selected="true"
-        >
-          Stopped
-          <span class="pf-c-select__menu-item-icon">
-            <i class="fas fa-check" aria-hidden="true"></i>
-          </span>
-        </button>
-      </li>
-      <li role="presentation">
-        <button class="pf-c-select__menu-item" role="option">Down</button>
-      </li>
-      <li role="presentation">
-        <button class="pf-c-select__menu-item" role="option">Degraded</button>
-      </li>
-      <li role="presentation">
-        <button class="pf-c-select__menu-item" role="option">Needs maintenance</button>
-      </li>
-    </ul>
-  </div>
-  <input
-    class="pf-c-form-control"
-    type="text"
-    id="textInput4"
-    name="textInput4"
-    aria-label="Input with select and button"
-    aria-describedby="inputSelectButton1"
-  />
-  <button
-    class="pf-c-button pf-m-control"
-    type="button"
-    id="inputSelectButton1"
-  >Button</button>
+      id="inputSelectButton1"
+    >Button</button>
+  </div>
 </div>
 <br />
 <div class="pf-c-input-group">
-  <span class="pf-c-input-group__text">
-    <i class="fas fa-dollar-sign" aria-hidden="true"></i>
-  </span>
-  <input
-    class="pf-c-form-control"
-    type="number"
-    id="textInput5"
-    name="textInput5"
-    aria-label=" Dollar amount input example"
-  />
-  <span class="pf-c-input-group__text">.00</span>
+  <div class="pf-c-input-group__item pf-m-box">
+    <span class="pf-c-input-group__text">
+      <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <input
+      class="pf-c-form-control"
+      type="number"
+      id="textInput5"
+      name="textInput5"
+      aria-label=" Dollar amount input example"
+    />
+  </div>
+  <div class="pf-c-input-group__item pf-m-box">
+    <span class="pf-c-input-group__text">.00</span>
+  </div>
 </div>
 <br />
 <div class="pf-c-input-group">
-  <input
-    class="pf-c-form-control"
-    type="email"
-    id="textInput6"
-    name="textInput6"
-    aria-label="Email input field"
-    aria-describedby="email-example"
-  />
-  <span class="pf-c-input-group__text" id="email-example">@example.com</span>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <input
+      class="pf-c-form-control"
+      type="email"
+      id="textInput6"
+      name="textInput6"
+      aria-label="Email input field"
+      aria-describedby="email-example"
+    />
+  </div>
+  <div class="pf-c-input-group__item pf-m-box">
+    <span class="pf-c-input-group__text" id="email-example">@example.com</span>
+  </div>
 </div>
 <br />
 <div class="pf-c-input-group">
-  <span class="pf-c-input-group__text">
-    <i class="fas fa-at" aria-hidden="true"></i>
-  </span>
-  <input
-    class="pf-c-form-control"
-    required
-    type="email"
-    id="textInput7"
-    name="textInput7"
-    aria-invalid="true"
-    aria-label="Error state username example"
-  />
+  <div class="pf-c-input-group__item pf-m-box">
+    <span class="pf-c-input-group__text">
+      <i class="fas fa-at" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <input
+      class="pf-c-form-control"
+      required
+      type="email"
+      id="textInput7"
+      name="textInput7"
+      aria-invalid="true"
+      aria-label="Error state username example"
+    />
+  </div>
 </div>
 <br />
 <div class="pf-c-input-group">
-  <input
-    class="pf-c-form-control"
-    type="text"
-    id="textInput13"
-    name="textInput13"
-    aria-label="Input example with popover"
-  />
-  <button
-    class="pf-c-button pf-m-control"
-    type="button"
-    aria-label="Popover for input"
-  >
-    <i class="fas fa-question-circle" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <input
+      class="pf-c-form-control"
+      type="text"
+      id="textInput13"
+      name="textInput13"
+      aria-label="Input example with popover"
+    />
+  </div>
+  <div class="pf-c-input-group__item">
+    <button
+      class="pf-c-button pf-m-control"
+      type="button"
+      aria-label="Popover for input"
+    >
+      <i class="fas fa-question-circle" aria-hidden="true"></i>
+    </button>
+  </div>
 </div>
 <br />
 <div class="pf-c-input-group">
-  <input
-    class="pf-c-form-control"
-    type="text"
-    id="textInput12"
-    name="textInput12"
-    aria-label="Input example with popover"
-  />
-  <button
-    class="pf-c-button pf-m-plain"
-    type="button"
-    aria-label="Popover for input"
-  >
-    <i class="fas fa-question-circle" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <input
+      class="pf-c-form-control"
+      type="text"
+      id="textInput12"
+      name="textInput12"
+      aria-label="Input example with popover"
+    />
+  </div>
+  <div class="pf-c-input-group__item pf-m-plain">
+    <button
+      class="pf-c-button pf-m-plain"
+      type="button"
+      aria-label="Popover for input"
+    >
+      <i class="fas fa-question-circle" aria-hidden="true"></i>
+    </button>
+  </div>
 </div>
 <br />
 <div class="pf-c-input-group">
-  <input
-    class="pf-c-form-control"
-    type="number"
-    id="textInput14"
-    name="textInput14"
-    aria-label="Input example with plain unit"
-  />
-  <span class="pf-c-input-group__text pf-m-plain">%</span>
+  <div class="pf-c-input-group__item pf-m-fill">
+    <input
+      class="pf-c-form-control"
+      type="number"
+      id="textInput14"
+      name="textInput14"
+      aria-label="Input example with plain unit"
+    />
+  </div>
+  <div class="pf-c-input-group__item pf-m-box pf-m-plain">
+    <span class="pf-c-input-group__text">%</span>
+  </div>
 </div>
 
 ```
@@ -221,16 +271,16 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 
 When using the `.pf-c-input-group` always ensure labels are used outside the input group with the `.pf-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
 
-| Attribute          | Applied to           | Outcome                                                                                                  |
-| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------- |
-| `aria-describedby` | `.pf-c-form-control` | When using `.pf-c-input-group__text` or `.pf-c-input-group__action` make use of this on the input field. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-describedby` | `.pf-c-form-control` |  When using `.pf-c-input-group__text` or `.pf-c-input-group__action` make use of this on the input field. |
 
 ### Usage
 
-| Class                     | Applied to                | Outcome                                                                                      |
-| ------------------------- | ------------------------- | -------------------------------------------------------------------------------------------- |
-| `.pf-c-input-group`       | `<div>`                   | Initiates the input group. **Required**                                                      |
-| `.pf-c-input-group__text` | `<span>`                  | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
-| `.pf-m-plain`             | `.pf-c-input-group`       | Removes the background from the input group.                                                 |
-| `.pf-m-plain`             | `.pf-c-input-group__text` | Removes the border from the text element.                                                    |
-| `.pf-m-disabled`          | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group.                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-input-group` | `<div>` |  Initiates the input group. **Required** |
+| `.pf-c-input-group__text` | `<span>` |  Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
+| `.pf-m-plain` | `.pf-c-input-group` | Removes the background from the input group. |
+| `.pf-m-plain` | `.pf-c-input-group__text` | Removes the border from the text element. |
+| `.pf-m-disabled` | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group. |

package/docs/components/JumpLinks/examples/JumpLinks.md

@@ -8,7 +8,7 @@ cssPrefix: pf-c-jump-links
 
 ```html
 <nav class="pf-c-jump-links">
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -33,7 +33,7 @@ cssPrefix: pf-c-jump-links
 
 ```html
 <nav class="pf-c-jump-links pf-m-center">
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -62,7 +62,7 @@ cssPrefix: pf-c-jump-links
     <div class="pf-c-jump-links__header">
       <div class="pf-c-jump-links__label">Jump to section</div>
     </div>
-    <ul class="pf-c-jump-links__list">
+    <ul class="pf-c-jump-links__list" role="list">
       <li class="pf-c-jump-links__item">
         <a class="pf-c-jump-links__link" href="#">
           <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -87,7 +87,7 @@ cssPrefix: pf-c-jump-links
     <div class="pf-c-jump-links__header">
       <div class="pf-c-jump-links__label">Jump to section</div>
     </div>
-    <ul class="pf-c-jump-links__list">
+    <ul class="pf-c-jump-links__list" role="list">
       <li class="pf-c-jump-links__item">
         <a class="pf-c-jump-links__link" href="#">
           <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -113,7 +113,7 @@ cssPrefix: pf-c-jump-links
 
 ```html
 <nav class="pf-c-jump-links pf-m-vertical">
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -151,7 +151,7 @@ cssPrefix: pf-c-jump-links
   <div class="pf-c-jump-links__header">
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -189,7 +189,7 @@ cssPrefix: pf-c-jump-links
   <div class="pf-c-jump-links__header">
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item pf-m-current">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Active section</span>
@@ -204,7 +204,7 @@ cssPrefix: pf-c-jump-links
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
       </a>
-      <ul class="pf-c-jump-links__list">
+      <ul class="pf-c-jump-links__list" role="list">
         <li class="pf-c-jump-links__item">
           <a class="pf-c-jump-links__link" href="#">
             <span class="pf-c-jump-links__link-text">Inactive subsection</span>
@@ -239,7 +239,7 @@ cssPrefix: pf-c-jump-links
   <div class="pf-c-jump-links__header">
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -254,7 +254,7 @@ cssPrefix: pf-c-jump-links
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Active section</span>
       </a>
-      <ul class="pf-c-jump-links__list">
+      <ul class="pf-c-jump-links__list" role="list">
         <li class="pf-c-jump-links__item pf-m-current">
           <a class="pf-c-jump-links__link" href="#">
             <span class="pf-c-jump-links__link-text">Active subsection</span>
@@ -305,7 +305,7 @@ cssPrefix: pf-c-jump-links
     </div>
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -359,7 +359,7 @@ cssPrefix: pf-c-jump-links
     </div>
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -413,7 +413,7 @@ cssPrefix: pf-c-jump-links
     </div>
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -465,7 +465,7 @@ cssPrefix: pf-c-jump-links
       </button>
     </div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -502,28 +502,28 @@ cssPrefix: pf-c-jump-links
 
 ### Accessibility
 
-| Attribute    | Applied to         | Outcome                                         |
-| ------------ | ------------------ | ----------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `aria-label` | `.pf-c-jump-links` | Provides an accessible name for the jump links. |
 
 ### Usage
 
-| Class                                    | Applied to               | Outcome                                                                                                                                                                                                                     |
-| ---------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-jump-links`                       | `<div>`                  | Initiates the jump links container.                                                                                                                                                                                         |
-| `.pf-c-jump-links__header`               | `<div>`                  | Initiates the jump links header.                                                                                                                                                                                            |
-| `.pf-c-jump-links__toggle`               | `<div>`                  | Initiates the jump links expandable toggle.                                                                                                                                                                                 |
-| `.pf-c-jump-links__toggle-text`          | `<span>`                 | Initiates the jump links expandable toggle text.                                                                                                                                                                            |
-| `.pf-c-jump-links__toggle-icon`          | `<span>`                 | Initiates the jump links expandable toggle icon.                                                                                                                                                                            |
-| `.pf-c-jump-links__label`                | `<div>`                  | Initiates the jump links label.                                                                                                                                                                                             |
-| `.pf-c-jump-links__main`                 | `<div>`                  | Initiates the jump links main container for when a label and list is used in the horizontal variation.                                                                                                                      |
-| `.pf-c-jump-links__list`                 | `<ul>`                   | Initiates the jump links list.                                                                                                                                                                                              |
-| `.pf-c-jump-links__item`                 | `<li>`                   | Initiates the jump links list item.                                                                                                                                                                                         |
-| `.pf-c-jump-links__link`                 | `<button>`               | Initiates the jump links link.                                                                                                                                                                                              |
-| `.pf-c-jump-links__link-text`            | `<div>`                  | Initiates the jump links link text.                                                                                                                                                                                         |
-| `.pf-m-vertical`                         | `.pf-c-jump-links`       | Modifies the jump links component to be vertical.                                                                                                                                                                           |
-| `.pf-m-center`                           | `.pf-c-jump-links`       | Modifies the jump links component to center its list and label.                                                                                                                                                             |
-| `.pf-m-expandable{-on-[breakpoint]}`     | `.pf-c-jump-links`       | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
-| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links`       | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                         |
-| `.pf-m-expanded`                         | `.pf-c-jump-links`       | Modifies the expandable jump links component for the expanded state.                                                                                                                                                        |
-| `.pf-m-current`                          | `.pf-c-jump-links__item` | Modifies the jump links item to be current.                                                                                                                                                                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-jump-links` | `<div>` | Initiates the jump links container. |
+| `.pf-c-jump-links__header` | `<div>` | Initiates the jump links header. |
+| `.pf-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle. |
+| `.pf-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text. |
+| `.pf-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon. |
+| `.pf-c-jump-links__label` | `<div>` | Initiates the jump links label. |
+| `.pf-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
+| `.pf-c-jump-links__list` | `<ul>` | Initiates the jump links list. |
+| `.pf-c-jump-links__item` | `<li>` | Initiates the jump links list item. |
+| `.pf-c-jump-links__link` | `<button>` | Initiates the jump links link. |
+| `.pf-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
+| `.pf-m-vertical` | `.pf-c-jump-links` | Modifies the jump links component to be vertical. |
+| `.pf-m-center` | `.pf-c-jump-links` | Modifies the jump links component to center its list and label. |
+| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-expanded` | `.pf-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
+| `.pf-m-current` | `.pf-c-jump-links__item`| Modifies the jump links item to be current. |