@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.31

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

@@ -392,7 +392,7 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
   </div>
   <p class="pf-v5-c-alert__title">
     <span class="pf-v5-screen-reader">Success alert:</span>
-    Success alert title
+    Success alert title (inline)
   </p>
 </div>
 

package/docs/components/Badge/examples/Badge.md

@@ -36,6 +36,26 @@ cssPrefix: pf-v5-c-badge
 
 ```
 
+### Badge as toggle
+
+```html
+<span class="pf-v5-c-badge pf-m-read">
+  7
+  <span class="pf-v5-c-badge__toggle-icon">
+    <i class="fas fa-caret-down"></i>
+  </span>
+</span>
+<span class="pf-v5-c-badge pf-m-unread">
+  7
+  <span class="pf-v5-screen-reader">unread messages</span>
+
+  <span class="pf-v5-c-badge__toggle-icon">
+    <i class="fas fa-caret-down"></i>
+  </span>
+</span>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -47,5 +67,6 @@ Always add a modifier class. Never use the class `.pf-v5-c-badge` on its own.
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v5-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
+| `.pf-v5-c-badge__toggle-icon` | `<span>` | Initiates a badge toggle icon. |
 | `.pf-m-read` | `.pf-v5-c-badge` | Applies read badge styling. |
 | `.pf-m-unread` | `.pf-v5-c-badge` | Applies unread badge styling. |

package/docs/components/Banner/examples/Banner.md

@@ -6,27 +6,43 @@ cssPrefix: pf-v5-c-banner
 
 ### Basic
 
-Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
+Banners can be styled with one of 9 different nonstatus colors. A nonstatus banner should only be used when the banner color does not represent status or severity.
 
 ```html
 <div class="pf-v5-c-banner">Default banner</div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-blue">Blue banner</div>
+<div class="pf-v5-c-banner pf-m-red">Red banner</div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-red">Red banner</div>
+<div class="pf-v5-c-banner pf-m-orangered">Orangered banner</div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-green">Green banner</div>
+<div class="pf-v5-c-banner pf-m-orange">Orange banner</div>
 
 <br />
 
 <div class="pf-v5-c-banner pf-m-gold">Gold banner</div>
 
+<br />
+
+<div class="pf-v5-c-banner pf-m-green">Green banner</div>
+
+<br />
+
+<div class="pf-v5-c-banner pf-m-cyan">Cyan banner</div>
+
+<br />
+
+<div class="pf-v5-c-banner pf-m-blue">Blue banner</div>
+
+<br />
+
+<div class="pf-v5-c-banner pf-m-purple">Purple banner</div>
+
 ```
 
 ### Banner with links
@@ -80,33 +96,33 @@ Banners can be styled with one of 5 different colors. A basic banner should only
 When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v5-screen-reader` or an equivalent.
 
 ```html
-<div class="pf-v5-c-banner">
+<div class="pf-v5-c-banner pf-m-success">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
-      <span class="pf-v5-screen-reader">Default banner:</span>
+      <span class="pf-v5-screen-reader">Success banner:</span>
 
-      <i class="fas fa-bell" aria-hidden="true"></i>
+      <i class="fas fa-check-circle" aria-hidden="true"></i>
     </div>
-    <div class="pf-v5-l-flex__item">Default banner</div>
+    <div class="pf-v5-l-flex__item">Success banner</div>
   </div>
 </div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-blue">
+<div class="pf-v5-c-banner pf-m-warning">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
-      <span class="pf-v5-screen-reader">Info banner:</span>
+      <span class="pf-v5-screen-reader">Warning banner:</span>
 
-      <i class="fas fa-info-circle" aria-hidden="true"></i>
+      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
     </div>
-    <div class="pf-v5-l-flex__item">Info banner</div>
+    <div class="pf-v5-l-flex__item">Warning banner</div>
   </div>
 </div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-red">
+<div class="pf-v5-c-banner pf-m-danger">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
       <span class="pf-v5-screen-reader">Danger banner:</span>
@@ -119,27 +135,27 @@ When a banner is used to convey status, it is advised to add an icon that also c
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-green">
+<div class="pf-v5-c-banner pf-m-info">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
-      <span class="pf-v5-screen-reader">Success banner:</span>
+      <span class="pf-v5-screen-reader">Custom status banner:</span>
 
-      <i class="fas fa-check-circle" aria-hidden="true"></i>
+      <i class="fas fa-info-circle" aria-hidden="true"></i>
     </div>
-    <div class="pf-v5-l-flex__item">Success banner</div>
+    <div class="pf-v5-l-flex__item">Info banner</div>
   </div>
 </div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-gold">
+<div class="pf-v5-c-banner pf-m-custom">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
-      <span class="pf-v5-screen-reader">Warning banner:</span>
+      <span class="pf-v5-screen-reader">Custom status banner:</span>
 
-      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+      <i class="fas fa-bell" aria-hidden="true"></i>
     </div>
-    <div class="pf-v5-l-flex__item">Warning banner</div>
+    <div class="pf-v5-l-flex__item">Custom banner</div>
   </div>
 </div>
 
@@ -147,15 +163,22 @@ When a banner is used to convey status, it is advised to add an icon that also c
 
 ## Documentation
 
-Add a modifier class to the default banner to change the presentation: `.pf-m-blue`, `.pf-m-red`, `.pf-m-green`, or `.pf-m-gold`.
-
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v5-c-banner` | `<div>` |  Initiates a banner. **Required** |
-| `.pf-m-blue` | `.pf-v5-c-banner` |  Modifies banner for blue styling. |
 | `.pf-m-red` | `.pf-v5-c-banner` |  Modifies banner for red styling. |
-| `.pf-m-green` | `.pf-v5-c-banner` |  Modifies banner for green styling. |
+| `.pf-m-orangered` | `.pf-v5-c-banner` |  Modifies banner for orangered styling. |
+| `.pf-m-orange` | `.pf-v5-c-banner` |  Modifies banner for orange styling. |
 | `.pf-m-gold` | `.pf-v5-c-banner` |  Modifies banner for gold styling. |
+| `.pf-m-green` | `.pf-v5-c-banner` |  Modifies banner for green styling. |
+| `.pf-m-cyan` | `.pf-v5-c-banner` |  Modifies banner for cyan styling. |
+| `.pf-m-blue` | `.pf-v5-c-banner` |  Modifies banner for blue styling. |
+| `.pf-m-purple` | `.pf-v5-c-banner` |  Modifies banner for purple styling. |
+| `.pf-m-success` | `.pf-v5-c-banner` |  Modifies banner for success status styling. |
+| `.pf-m-warning` | `.pf-v5-c-banner` |  Modifies banner for warning status styling. |
+| `.pf-m-danger` | `.pf-v5-c-banner` |  Modifies banner for danger status styling. |
+| `.pf-m-info` | `.pf-v5-c-banner` |  Modifies banner for info status styling. |
+| `.pf-m-custom` | `.pf-v5-c-banner` |  Modifies banner for custom status styling. |
 | `.pf-m-sticky` | `.pf-v5-c-banner` |  Modifies banner to be sticky to the top of its container. |

package/docs/components/Brand/examples/Brand.css

@@ -0,0 +1,12 @@
+.show-dark,
+:where(.pf-v5-theme-dark) .show-light {
+  display: none;
+}
+
+:where(.pf-v5-theme-dark) .show-dark {
+  display: revert;
+}
+
+:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+  display: inline-flex;
+}

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

@@ -1,48 +1,91 @@
 ---
 id: Brand
 section: components
----## Examples
+---import './Brand.css'
+
+## Examples
 
 ### Basic
 
 ```html
-<img
-  class="pf-v5-c-brand"
-  src="/assets/images/pf_logo.svg"
-  alt="PatternFly logo"
-/>
+<div class="show-light">
+  <img
+    class="pf-v5-c-brand"
+    src="/assets/images/pf_logo.svg"
+    alt="PatternFly logo"
+  />
+</div>
+
+<div class="show-dark">
+  <img
+    class="pf-v5-c-brand"
+    src="/assets/images/pf_logo_white.svg"
+    alt="PatternFly logo"
+  />
+</div>
 
 ```
 
 ### Responsive
 
 ```html
-<picture
-  class="pf-v5-c-brand pf-m-picture"
-  style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
->
-  <source
-    media="(min-width: 1200px)"
-    srcset="/assets/images/pf-c-brand__logo-on-xl.svg"
-  />
-  <source
-    media="(min-width: 992px)"
-    srcset="/assets/images/pf-c-brand__logo-on-lg.svg"
-  />
-  <source
-    media="(min-width: 768px)"
-    srcset="/assets/images/pf-c-brand__logo-on-md.svg"
-  />
-  <source
-    media="(min-width: 576px)"
-    srcset="/assets/images/pf-c-brand__logo-on-sm.svg"
-  />
-  <source srcset="/assets/images/pf-c-brand__logo.svg" />
-  <img
-    src="/assets/images/pf-c-brand__logo-base.jpg"
-    alt="Fallback patternFly default logo"
-  />
-</picture>
+<div class="show-light">
+  <picture
+    class="pf-v5-c-brand pf-m-picture"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
+  >
+    <source
+      media="(min-width: 1200px)"
+      srcset="/assets/images/pf-c-brand__logo-on-xl.svg"
+    />
+    <source
+      media="(min-width: 992px)"
+      srcset="/assets/images/pf-c-brand__logo-on-lg.svg"
+    />
+    <source
+      media="(min-width: 768px)"
+      srcset="/assets/images/pf-c-brand__logo-on-md.svg"
+    />
+    <source
+      media="(min-width: 576px)"
+      srcset="/assets/images/pf-c-brand__logo-on-sm.svg"
+    />
+    <source srcset="/assets/images/pf-c-brand__logo.svg" />
+    <img
+      src="/assets/images/pf_logo.svg"
+      alt="Fallback patternFly default logo"
+    />
+  </picture>
+</div>
+
+<div class="show-dark">
+  <picture
+    class="pf-v5-c-brand pf-m-picture"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
+  >
+    <source
+      media="(min-width: 1200px)"
+      srcset="/assets/images/pf-c-brand__logo-on-xl-white.svg"
+    />
+    <source
+      media="(min-width: 992px)"
+      srcset="/assets/images/pf-c-brand__logo-on-lg-white.svg"
+    />
+    <source
+      media="(min-width: 768px)"
+      srcset="/assets/images/pf-c-brand__logo-on-md-white.svg"
+    />
+    <source
+      media="(min-width: 576px)"
+      srcset="/assets/images/pf-c-brand__logo-on-sm-white.svg"
+    />
+    <source srcset="/assets/images/pf-c-brand__logo-white.svg" />
+    <img
+      src="/assets/images/pf_logo-white.svg"
+      alt="Fallback patternFly default logo"
+    />
+  </picture>
+</div>
 
 ```
 

package/docs/components/Button/examples/Button.css

@@ -1,4 +1,4 @@
 .ws-core-c-button .pf-v5-c-button {
-  margin-right: 6px;
-  margin-bottom: 6px;
+  margin-inline-end: 6px;
+  margin-block-end: 6px;
 }

package/docs/components/Button/examples/Button.md

@@ -50,10 +50,20 @@ cssPrefix: pf-v5-c-button
 <button class="pf-v5-c-button pf-m-inline pf-m-link" type="button">Inline link</button>
 <br />
 <br />
+<span>Default plain button:</span>
 <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
   <i class="fas fa-times" aria-hidden="true"></i>
 </button>
 <br />
+<span>No padding plain button:</span>
+<button
+  class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+  type="button"
+  aria-label="Remove"
+>
+  <i class="fas fa-times" aria-hidden="true"></i>
+</button>
+<br />
 <br />
 <button class="pf-v5-c-button pf-m-control" type="button">Control</button>
 
@@ -65,10 +75,11 @@ cssPrefix: pf-v5-c-button
   <i class="fas fa-copy" aria-hidden="true"></i>
 </button>
 
-<br />
-<br />
-<br />
+```
+
+### Small buttons
 
+```html
 <button class="pf-v5-c-button pf-m-primary pf-m-small" type="button">Primary</button>
 
 <button class="pf-v5-c-button pf-m-secondary pf-m-small" type="button">Secondary</button>
@@ -533,6 +544,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-warning` | `.pf-v5-c-button` | Modifies for warning styles. |
 | `.pf-m-link` | `.pf-v5-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
 | `.pf-m-plain` | `.pf-v5-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
+| `.pf-m-no-padding` | `.pf-v5-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
 | `.pf-m-inline` | `.pf-v5-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
 | `.pf-m-block` | `.pf-v5-c-button` | Creates a block level button. |
 | `.pf-m-control` | `.pf-v5-c-button` | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |

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

@@ -25,7 +25,61 @@ cssPrefix: pf-v5-c-card
 <div class="pf-v5-c-card" id="card-action-example-1">
   <div class="pf-v5-c-card__header">
     <div class="pf-v5-c-card__header-main">
-      <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 706.3 132.5"
+        fill="currentColor"
+        width="300px"
+      >
+        <g>
+          <path
+            d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
+                c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
+                c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
+                c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
+                c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
+          />
+          <path
+            d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
+                c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
+          />
+          <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
+          <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
+          <path
+            d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
+          />
+          <path
+            d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
+                c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
+                l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
+                c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
+                H478.9z"
+          />
+          <path
+            d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
+                c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
+                c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
+          />
+          <path
+            d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
+          />
+          <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
+          <path
+            d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
+          />
+        </g>
+        <g>
+          <path
+            d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
+                l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
+                l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
+                L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
+                l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
+                L101.1,70z"
+          />
+        </g>
+      </svg>
     </div>
     <div class="pf-v5-c-card__actions">
       <div class="pf-v5-c-dropdown">
@@ -293,7 +347,61 @@ cssPrefix: pf-v5-c-card
 <div class="pf-v5-c-card" id="card-image-head-example">
   <div class="pf-v5-c-card__header">
     <div class="pf-v5-c-card__header-main">
-      <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 706.3 132.5"
+        fill="currentColor"
+        width="300px"
+      >
+        <g>
+          <path
+            d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
+                c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
+                c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
+                c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
+                c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
+          />
+          <path
+            d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
+                c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
+          />
+          <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
+          <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
+          <path
+            d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
+          />
+          <path
+            d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
+                c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
+                l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
+                c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
+                H478.9z"
+          />
+          <path
+            d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
+                c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
+                c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
+          />
+          <path
+            d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
+          />
+          <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
+          <path
+            d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
+          />
+        </g>
+        <g>
+          <path
+            d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
+                l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
+                l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
+                L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
+                l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
+                L101.1,70z"
+          />
+        </g>
+      </svg>
     </div>
   </div>
   <div class="pf-v5-c-card__title">
@@ -411,9 +519,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-check__label"
+              for="card-selectable-example-check"
               id="card-selectable-example-check-label"
               name="card-selectable-example-check"
-              for="card-selectable-example-check"
             ></label>
           </div>
         </div>
@@ -447,9 +555,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-check__label pf-m-disabled"
+              for="card-selectable-example-disabled-check"
               id="card-selectable-example-disabled-check-label"
               name="card-selectable-example-disabled-check"
-              for="card-selectable-example-disabled-check"
             ></label>
           </div>
         </div>
@@ -487,9 +595,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-check__label pf-m-disabled"
+              for="card-selectable-example-selected-disabled-check"
               id="card-selectable-example-selected-disabled-check-label"
               name="card-selectable-example-selected-disabled-check"
-              for="card-selectable-example-selected-disabled-check"
             ></label>
           </div>
         </div>
@@ -510,7 +618,7 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Single Selectable
+### Single selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">
@@ -529,9 +637,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-radio__label"
+              for="card-single-selectable-example-radio"
               id="card-single-selectable-example-radio-label"
               name="card-single-selectable-example-radio"
-              for="card-single-selectable-example-radio"
             ></label>
           </div>
         </div>
@@ -568,9 +676,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-single-selectable-example-disabled-radio"
               id="card-single-selectable-example-disabled-radio-label"
               name="card-single-selectable-example-disabled-radio"
-              for="card-single-selectable-example-disabled-radio"
             ></label>
           </div>
         </div>
@@ -608,9 +716,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-single-selectable-example-selected-disabled-radio"
               id="card-single-selectable-example-selected-disabled-radio-label"
               name="card-single-selectable-example-selected-disabled-radio"
-              for="card-single-selectable-example-selected-disabled-radio"
             ></label>
           </div>
         </div>
@@ -650,9 +758,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-radio__label"
+              for="card-clickable-example-sr-only-radio"
               id="card-clickable-example-sr-only-radio-label"
               name="card-clickable-example-sr-only-radio"
-              for="card-clickable-example-sr-only-radio"
             ></label>
           </div>
         </div>
@@ -686,9 +794,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-clickable-example-disabled-sr-only-radio"
               id="card-clickable-example-disabled-sr-only-radio-label"
               name="card-clickable-example-disabled-sr-only-radio"
-              for="card-clickable-example-disabled-sr-only-radio"
             ></label>
           </div>
         </div>
@@ -725,9 +833,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-clickable-example-selected-disabled-sr-only-radio"
               id="card-clickable-example-selected-disabled-sr-only-radio-label"
               name="card-clickable-example-selected-disabled-sr-only-radio"
-              for="card-clickable-example-selected-disabled-sr-only-radio"
             ></label>
           </div>
         </div>
@@ -748,7 +856,7 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Clickable and Selectable
+### Clickable and selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">
@@ -770,9 +878,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-check__label"
+              for="card-clickable-selectable-example-check"
               id="card-clickable-selectable-example-check-label"
               name="card-clickable-selectable-example-check"
-              for="card-clickable-selectable-example-check"
             ></label>
           </div>
         </div>
@@ -811,9 +919,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-check__label"
+              for="card-clickable-selectable-current-example-check"
               id="card-clickable-selectable-current-example-check-label"
               name="card-clickable-selectable-current-example-check"
-              for="card-clickable-selectable-current-example-check"
             ></label>
           </div>
         </div>
@@ -853,9 +961,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-check__label pf-m-disabled"
+              for="card-clickable-selectable-example-disabled-check"
               id="card-clickable-selectable-example-disabled-check-label"
               name="card-clickable-selectable-example-disabled-check"
-              for="card-clickable-selectable-example-disabled-check"
             ></label>
           </div>
         </div>
@@ -897,9 +1005,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-check__label pf-m-disabled"
+              for="card-clickable-selectable-example-selected-disabled-check"
               id="card-clickable-selectable-example-selected-disabled-check-label"
               name="card-clickable-selectable-example-selected-disabled-check"
-              for="card-clickable-selectable-example-selected-disabled-check"
             ></label>
           </div>
         </div>