@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.10

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

@@ -411,9 +411,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 +447,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 +487,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 +510,7 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Single Selectable
+### Single selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">
@@ -529,9 +529,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 +568,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 +608,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 +650,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 +686,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 +725,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 +748,7 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Clickable and Selectable
+### Clickable and selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">
@@ -770,9 +770,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 +811,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 +853,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 +897,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>

package/docs/components/Check/examples/Check.md

@@ -8,15 +8,14 @@ cssPrefix: pf-v5-c-check
 ### Basic
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="basic-example-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-basic"
-    name="check-basic"
+    id="basic-example-example-input"
+    name="basic-example-example-input"
   />
-
-  <label class="pf-v5-c-check__label" for="check-basic">Check</label>
+  <label class="pf-v5-c-check__label" for="basic-example-example-input">Check</label>
 </div>
 
 ```
@@ -24,15 +23,14 @@ cssPrefix: pf-v5-c-check
 ### Required
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-required-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-required"
-    name="check-required"
+    id="check-required-example-input"
+    name="check-required-example-input"
   />
-
-  <label class="pf-v5-c-check__label" for="check-required">
+  <label class="pf-v5-c-check__label" for="check-required-example-input">
     Check
     <span class="pf-v5-c-check__label-required" aria-hidden="true">&#42;</span>
   </label>
@@ -43,16 +41,17 @@ cssPrefix: pf-v5-c-check
 ### Checked
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-checked-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-checked"
-    name="check-checked"
-    checked
+    id="check-checked-example-input"
+    name="check-checked-example-input"
   />
-
-  <label class="pf-v5-c-check__label" for="check-checked">Check checked</label>
+  <label
+    class="pf-v5-c-check__label"
+    for="check-checked-example-input"
+  >Check checked</label>
 </div>
 
 ```
@@ -60,14 +59,17 @@ cssPrefix: pf-v5-c-check
 ### Label wrapping input
 
 ```html
-<label class="pf-v5-c-check" for="check-label-wrapping-input">
+<label
+  class="pf-v5-c-check"
+  id="check-label-wrapping-input-example"
+  for="check-label-wrapping-input-example-input"
+>
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-label-wrapping-input"
-    name="check-label-wrapping-input"
+    id="check-label-wrapping-input-example-input"
+    name="check-label-wrapping-input-example-input"
   />
-
   <span class="pf-v5-c-check__label">Check label wraps input</span>
 </label>
 
@@ -76,14 +78,16 @@ cssPrefix: pf-v5-c-check
 ### Reversed
 
 ```html
-<div class="pf-v5-c-check">
-  <label class="pf-v5-c-check__label" for="check-reversed">Check reversed</label>
-
+<div class="pf-v5-c-check" id="check-reversed-example">
+  <label
+    class="pf-v5-c-check__label"
+    for="check-reversed-example-input"
+  >Check reversed</label>
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-reversed"
-    name="check-reversed"
+    id="check-reversed-example-input"
+    name="check-reversed-example-input"
   />
 </div>
 
@@ -92,29 +96,31 @@ cssPrefix: pf-v5-c-check
 ### Disabled
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-disabled-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-disabled"
-    name="check-disabled"
+    id="check-disabled-example-input"
+    name="check-disabled-example-input"
+    disabled
   />
-
-  <label class="pf-v5-c-check__label" for="check-disabled">Check disabled</label>
+  <label
+    class="pf-v5-c-check__label pf-m-disabled"
+    for="check-disabled-example-input"
+  >Check disabled</label>
 </div>
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-disabled-checked-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    disabled
-    id="check-disabled-2"
-    name="check-disabled-2"
+    id="check-disabled-checked-example-input"
+    name="check-disabled-checked-example-input"
     checked
+    disabled
   />
-
   <label
     class="pf-v5-c-check__label pf-m-disabled"
-    for="check-disabled-2"
+    for="check-disabled-checked-example-input"
   >Check disabled checked</label>
 </div>
 
@@ -123,21 +129,21 @@ cssPrefix: pf-v5-c-check
 ### With description
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-with-example-description-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-with-description"
-    name="check-with-description"
+    aria-describedby="check-with-example-description-example-description"
+    id="check-with-example-description-example-input"
+    name="check-with-example-description-example-input"
   />
-
   <label
     class="pf-v5-c-check__label"
-    for="check-with-description"
+    for="check-with-example-description-example-input"
   >Check with description</label>
-
   <span
     class="pf-v5-c-check__description"
+    id="check-with-example-description-example-description"
   >Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS od GCP.</span>
 </div>
 
@@ -146,16 +152,17 @@ cssPrefix: pf-v5-c-check
 ### With body
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-with-example-body-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-with-body"
-    name="check-with-body"
+    id="check-with-example-body-example-input"
+    name="check-with-example-body-example-input"
   />
-
-  <label class="pf-v5-c-check__label" for="check-with-body">Check with body</label>
-
+  <label
+    class="pf-v5-c-check__label"
+    for="check-with-example-body-example-input"
+  >Check with body</label>
   <span class="pf-v5-c-check__body">This is where custom content goes.</span>
 </div>
 
@@ -164,21 +171,21 @@ cssPrefix: pf-v5-c-check
 ### With description and body
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-with-example-description-body-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-with-description-body"
-    name="check-with-description-body"
+    aria-describedby="check-with-example-description-body-example-description"
+    id="check-with-example-description-body-example-input"
+    name="check-with-example-description-body-example-input"
   />
-
   <label
     class="pf-v5-c-check__label"
-    for="check-with-description-body"
+    for="check-with-example-description-body-example-input"
   >Check with description and body</label>
-
   <span
     class="pf-v5-c-check__description"
+    id="check-with-example-description-body-example-description"
   >Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS od GCP.</span>
   <span class="pf-v5-c-check__body">This is where custom content goes.</span>
 </div>
@@ -188,15 +195,19 @@ cssPrefix: pf-v5-c-check
 ### Standalone input
 
 ```html
-<div class="pf-v5-c-check pf-m-standalone">
+<label
+  class="pf-v5-c-check pf-m-standalone"
+  id="standalone-input-example"
+  for="standalone-input-example-input"
+>
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-standalone-input"
-    name="check-standalone-input"
-    aria-label="Standalone input"
+    id="standalone-input-example-input"
+    name="standalone-input-example-input"
+    aria-label="Standalone check"
   />
-</div>
+</label>
 
 ```
 
@@ -214,6 +225,7 @@ If you extend this component or modify the styles of this component, then make s
 | -- | -- | -- |
 | `disabled` | `.pf-v5-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
 | `required` | `.pf-v5-c-check__input` | Indicates that the element is required. |
+| `aria-describedby` | `.pf-v5-c-check__input` |  When using `.pf-v5-c-check__description` make use of this on the input. |
 
 ### Usage
 

package/docs/components/Chip/examples/Chip.md

@@ -828,7 +828,7 @@ The chip group requires the [chip component](#chip-overview). **All single chip
 
 | Attributes for closable chip group button | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-chip-group__close > button` |  Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-chip-group__close > button] [id value of .pf-v5-c-chip-group__label]"` | `.pf-v5-c-chip-group__close > button` | Provides an accessible name for the button. **Required** |
 

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -212,6 +212,112 @@ cssPrefix: pf-v5-c-clipboard-copy
     id="expandable-expanded-readonly-content"
   >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
 </div>
+<br />
+<h4>Code</h4>
+<div class="pf-v5-c-clipboard-copy">
+  <div class="pf-v5-c-clipboard-copy__group">
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      id="expandable-not-expanded-code-toggle"
+      aria-labelledby="expandable-not-expanded-code-toggle expandable-not-expanded-code-text-input"
+      aria-controls="expandable-not-expanded-code-content"
+    >
+      <div class="pf-v5-c-clipboard-copy__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </div>
+    </button>
+    <span class="pf-v5-c-form-control">
+      <input
+        dir="ltr"
+        type="text"
+        value="{ &quot;menu&quot;: {     &quot;id&quot;: &quot;file&quot;,     &quot;value&quot;: &quot;File&quot;,     &quot;popup&quot;: {       &quot;menuitem&quot;: [         {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;},         {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;},         {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;}       ]     }   }} "
+        id="expandable-not-expanded-code-text-input"
+        aria-label="Copyable input"
+      />
+    </span>
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      aria-label="Copy to clipboard"
+      id="expandable-not-expanded-code-copy-button"
+      aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input"
+    >
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div
+    class="pf-v5-c-clipboard-copy__expandable-content"
+    hidden
+    id="expandable-not-expanded-code-content"
+  >
+    <pre dir="ltr">{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }} 
+  </pre>
+  </div>
+</div>
+<br />
+<div class="pf-v5-c-clipboard-copy pf-m-expanded">
+  <div class="pf-v5-c-clipboard-copy__group">
+    <button
+      class="pf-v5-c-button pf-m-control pf-m-expanded"
+      type="button"
+      id="expandable-expanded-code-toggle"
+      aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input"
+      aria-controls="expandable-expanded-code-content"
+    >
+      <div class="pf-v5-c-clipboard-copy__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </div>
+    </button>
+    <span class="pf-v5-c-form-control pf-m-readonly">
+      <input
+        readonly
+        dir="ltr"
+        type="text"
+        value="{ &quot;menu&quot;: {     &quot;id&quot;: &quot;file&quot;,     &quot;value&quot;: &quot;File&quot;,     &quot;popup&quot;: {       &quot;menuitem&quot;: [         {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;},         {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;},         {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;}       ]     }   }} "
+        id="expandable-expanded-code-text-input"
+        aria-label="Copyable input"
+      />
+    </span>
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      aria-label="Copy to clipboard"
+      id="expandable-expanded-code-copy-button"
+      aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input"
+    >
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div
+    class="pf-v5-c-clipboard-copy__expandable-content"
+    contenteditable="true"
+    id="expandable-expanded-code-content"
+  >
+    <pre dir="ltr">{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }}
+  </pre>
+  </div>
+</div>
 
 ```
 

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -41,7 +41,7 @@ cssPrefix: pf-v5-c-code-editor
     </div>
   </div>
   <div class="pf-v5-c-code-editor__main">
-    <code class="pf-v5-c-code-editor__code">
+    <code dir="ltr" class="pf-v5-c-code-editor__code">
       <pre class="pf-v5-c-code-editor__code-pre">
                 code goes here
       </pre>
@@ -89,7 +89,7 @@ cssPrefix: pf-v5-c-code-editor
     </div>
   </div>
   <div class="pf-v5-c-code-editor__main">
-    <code class="pf-v5-c-code-editor__code">
+    <code dir="ltr" class="pf-v5-c-code-editor__code">
       <pre class="pf-v5-c-code-editor__code-pre">
                 code goes here
       </pre>
@@ -238,7 +238,7 @@ cssPrefix: pf-v5-c-code-editor
     </div>
   </div>
   <div class="pf-v5-c-code-editor__main">
-    <code class="pf-v5-c-code-editor__code">
+    <code dir="ltr" class="pf-v5-c-code-editor__code">
       <pre class="pf-v5-c-code-editor__code-pre">
                 code goes here
       </pre>

package/docs/components/DragDrop/examples/DragDrop.css

@@ -6,8 +6,8 @@
   --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
 
   position: absolute;
-  top: 23%;
-  left: .5em;
+  inset-block-start: 23%;
+  inset-inline-start: .5em;
   z-index: 9999;
   width: 100%;
 }

package/docs/components/Dropdown/deprecated/Dropdown.css

@@ -52,7 +52,7 @@
 }
 
 [id^="ws-html-deprecated-c-dropdown-split-button"] .pf-v5-c-dropdown:not(:last-child) {
-  margin-right: 4px;
+  margin-inline-end: 4px;
 }
 
 #ws-html-deprecated-c-dropdown-panel {