@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.61

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

@@ -493,7 +493,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
 >
   <div class="pf-v6-c-alert__toggle">
     <button
-      class="pf-v6-c-button pf-m-expanded pf-m-plain"
+      class="pf-v6-c-button pf-m-plain"
       id="alert-expandable-example-2-toggle"
       type="button"
       aria-expanded="true"
@@ -594,7 +594,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
 >
   <div class="pf-v6-c-alert__toggle">
     <button
-      class="pf-v6-c-button pf-m-expanded pf-m-plain"
+      class="pf-v6-c-button pf-m-plain"
       id="alert-expandable-example-4-toggle"
       type="button"
       aria-expanded="true"

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -161,7 +161,7 @@ cssPrefix: pf-v6-c-breadcrumb
       </span>
       <span class="pf-v6-c-breadcrumb__dropdown">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
+          class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"

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

@@ -1906,7 +1906,19 @@ For when a plain/icon button is placed inline with text
   aria-label="More info"
 >
   <span class="pf-v6-c-button__icon">
-    <i class="fas fa-question-circle" aria-hidden="true"></i>
+    <svg
+      class="pf-v6-svg"
+      viewBox="0 0 1024 1024"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
+      />
+    </svg>
   </span>
 </button>
 .
@@ -2010,7 +2022,36 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
   aria-label="not starred"
 >
   <span class="pf-v6-c-button__icon">
-    <i class="fas fa-star" aria-hidden="true"></i>
+    <span class="pf-v6-c-button__icon-favorite">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+        />
+      </svg>
+    </span>
+    <span class="pf-v6-c-button__icon-favorited">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+        />
+      </svg>
+    </span>
   </span>
 </button>
 <button
@@ -2019,7 +2060,115 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
   aria-label="starred"
 >
   <span class="pf-v6-c-button__icon">
-    <i class="fas fa-star" aria-hidden="true"></i>
+    <span class="pf-v6-c-button__icon-favorite">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+        />
+      </svg>
+    </span>
+    <span class="pf-v6-c-button__icon-favorited">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+        />
+      </svg>
+    </span>
+  </span>
+</button>
+
+```
+
+### Settings
+
+```html
+<button
+  class="pf-v6-c-button pf-m-settings pf-m-plain"
+  type="button"
+  aria-label="Settings"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-cog" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
+### Hamburger
+
+```html
+<button
+  class="pf-v6-c-button pf-m-hamburger pf-m-plain"
+  type="button"
+  aria-label="Hamburger"
+>
+  <span class="pf-v6-c-button__icon">
+    <svg
+      viewBox="0 0 10 10"
+      class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+      width="1em"
+      height="1em"
+    >
+      <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+      <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
+      <path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
+      <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
+    </svg>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-expand pf-m-hamburger pf-m-plain"
+  type="button"
+  aria-label="Hamburger"
+>
+  <span class="pf-v6-c-button__icon">
+    <svg
+      viewBox="0 0 10 10"
+      class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+      width="1em"
+      height="1em"
+    >
+      <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+      <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
+      <path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
+      <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
+    </svg>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-plain"
+  type="button"
+  aria-expanded="true"
+  aria-label="Hamburger"
+>
+  <span class="pf-v6-c-button__icon">
+    <svg
+      viewBox="0 0 10 10"
+      class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+      width="1em"
+      height="1em"
+    >
+      <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+      <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
+      <path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
+      <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
+    </svg>
   </span>
 </button>
 
@@ -2056,7 +2205,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-v6-c-button` | `<button>, <span>` |  Initiates a button. Always use it with a modifier class. **Required** |
 | `.pf-v6-c-button__icon` | `<span>` | Initiates a button icon. |
 | `.pf-v6-c-button__progress` | `<span>` | Initiates a button progress container. |
-| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
+| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons. |
 | `.pf-m-primary` | `.pf-v6-c-button` | Modifies for primary styles. |
 | `.pf-m-secondary` | `.pf-v6-c-button` | Modifies for secondary styles. |
 | `.pf-m-tertiary` | `.pf-v6-c-button` | Modifies for tertiary styles. |
@@ -2079,5 +2228,9 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
 | `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
 | `.pf-m-notify` | `.pf-v6-c-button` | Indicates that the button should show the user notification of an event. **Note:** This is intended for use with a bell icon in the notification badge. |
-| `.pf-m-favorite` | `.pf-v6-c-button .pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
-| `.pf-m-favorited` | `.pf-v6-c-button .pf-m-plain .pf-m-favorite` | Modifies a favorite button to indicate that item is favorited.  |
+| `.pf-m-favorite` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
+| `.pf-m-favorited` | `.pf-v6-c-button.pf-m-plain.pf-m-favorite` | Modifies a favorite button to indicate that item is favorited. |
+| `.pf-m-settings` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a settings button. |
+| `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
+| `.pf-m-expand` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
+| `.pf-m-collapse` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |

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

@@ -101,7 +101,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-action-example-1-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -142,7 +142,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-action-example-2-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -185,7 +185,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-action-example-3-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1434,7 +1434,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-expandable-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1497,7 +1497,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-expandable-image-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1545,7 +1545,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-expanded-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1588,7 +1588,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-full-height-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1631,7 +1631,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-toggle-on-right-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">

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

@@ -21,8 +21,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       class="pf-v6-c-button pf-m-control"
       id="basic-editable-copy-button"
       type="button"
-      aria-labelledby="basic-editable-copy-button basic-editable-text-input"
-      aria-label="Copy to clipboard"
+      aria-label="Copy to clipboard basic editable example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-copy" aria-hidden="true"></i>
@@ -46,8 +45,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       class="pf-v6-c-button pf-m-control"
       id="basic-readonly-copy-button"
       type="button"
-      aria-labelledby="basic-readonly-copy-button basic-readonly-text-input"
-      aria-label="Copy to clipboard"
+      aria-label="Copy to clipboard basic read-only example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-copy" aria-hidden="true"></i>
@@ -68,7 +66,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       class="pf-v6-c-button pf-m-control"
       type="button"
       id="expandable-not-expanded-editable-toggle"
-      aria-labelledby="expandable-not-expanded-editable-toggle expandable-not-expanded-editable-text-input"
+      aria-label="Toggle unexpanded editable example"
       aria-controls="expandable-not-expanded-editable-content"
     >
       <span class="pf-v6-c-button__icon">
@@ -88,9 +86,8 @@ cssPrefix: pf-v6-c-clipboard-copy
     <button
       class="pf-v6-c-button pf-m-control"
       type="button"
-      aria-label="Copy to clipboard"
+      aria-label="Copy to clipboard unexpanded editable example"
       id="expandable-not-expanded-editable-copy-button"
-      aria-labelledby="expandable-not-expanded-editable-copy-button expandable-not-expanded-editable-text-input"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-copy" aria-hidden="true"></i>
@@ -107,11 +104,11 @@ cssPrefix: pf-v6-c-clipboard-copy
 <div class="pf-v6-c-clipboard-copy pf-m-expanded">
   <div class="pf-v6-c-clipboard-copy__group">
     <button
-      class="pf-v6-c-button pf-m-expanded pf-m-control"
+      class="pf-v6-c-button pf-m-control"
       type="button"
       aria-expanded="true"
       id="expandable-expanded-editable-toggle"
-      aria-labelledby="expandable-expanded-editable-toggle expandable-expanded-editable-text-input"
+      aria-label="Toggle expanded editable example"
       aria-controls="expandable-expanded-editable-content"
     >
       <span class="pf-v6-c-button__icon">
@@ -132,9 +129,8 @@ cssPrefix: pf-v6-c-clipboard-copy
     <button
       class="pf-v6-c-button pf-m-control"
       type="button"
-      aria-label="Copy to clipboard"
+      aria-label="Copy to clipboard expanded editable example"
       id="expandable-expanded-editable-copy-button"
-      aria-labelledby="expandable-expanded-editable-copy-button expandable-expanded-editable-text-input"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-copy" aria-hidden="true"></i>
@@ -155,7 +151,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       class="pf-v6-c-button pf-m-control"
       type="button"
       id="expandable-not-expanded-readonly-toggle"
-      aria-labelledby="expandable-not-expanded-readonly-toggle expandable-not-expanded-readonly-text-input"
+      aria-label="Toggle read-only unexpanded example"
       aria-controls="expandable-not-expanded-readonly-content"
     >
       <span class="pf-v6-c-button__icon">
@@ -176,9 +172,8 @@ cssPrefix: pf-v6-c-clipboard-copy
     <button
       class="pf-v6-c-button pf-m-control"
       type="button"
-      aria-label="Copy to clipboard"
+      aria-label="Copy to clipboard read-only collapsed example"
       id="expandable-not-expanded-readonly-copy-button"
-      aria-labelledby="expandable-not-expanded-readonly-copy-button expandable-not-expanded-readonly-text-input"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-copy" aria-hidden="true"></i>
@@ -195,11 +190,11 @@ cssPrefix: pf-v6-c-clipboard-copy
 <div class="pf-v6-c-clipboard-copy pf-m-expanded">
   <div class="pf-v6-c-clipboard-copy__group">
     <button
-      class="pf-v6-c-button pf-m-expanded pf-m-control"
+      class="pf-v6-c-button pf-m-control"
       type="button"
       aria-expanded="true"
       id="expandable-expanded-readonly-toggle"
-      aria-labelledby="expandable-expanded-readonly-toggle expandable-expanded-readonly-text-input"
+      aria-label="Toggle read-only expanded example"
       aria-controls="expandable-expanded-readonly-content"
     >
       <span class="pf-v6-c-button__icon">
@@ -220,9 +215,8 @@ cssPrefix: pf-v6-c-clipboard-copy
     <button
       class="pf-v6-c-button pf-m-control"
       type="button"
-      aria-label="Copy to clipboard"
+      aria-label="Copy to clipboard read-only expanded example"
       id="expandable-expanded-readonly-copy-button"
-      aria-labelledby="expandable-expanded-readonly-copy-button expandable-expanded-readonly-text-input"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-copy" aria-hidden="true"></i>
@@ -242,7 +236,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       class="pf-v6-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-label="Toggle code unexpanded example"
       aria-controls="expandable-not-expanded-code-content"
     >
       <span class="pf-v6-c-button__icon">
@@ -263,9 +257,8 @@ cssPrefix: pf-v6-c-clipboard-copy
     <button
       class="pf-v6-c-button pf-m-control"
       type="button"
-      aria-label="Copy to clipboard"
+      aria-label="Copy to clipboard code unexpanded example"
       id="expandable-not-expanded-code-copy-button"
-      aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-copy" aria-hidden="true"></i>
@@ -295,11 +288,11 @@ cssPrefix: pf-v6-c-clipboard-copy
 <div class="pf-v6-c-clipboard-copy pf-m-expanded">
   <div class="pf-v6-c-clipboard-copy__group">
     <button
-      class="pf-v6-c-button pf-m-expanded pf-m-control"
+      class="pf-v6-c-button pf-m-control"
       type="button"
       aria-expanded="true"
       id="expandable-expanded-code-toggle"
-      aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input"
+      aria-label="Toggle code expanded example"
       aria-controls="expandable-expanded-code-content"
     >
       <span class="pf-v6-c-button__icon">
@@ -321,9 +314,8 @@ cssPrefix: pf-v6-c-clipboard-copy
     <button
       class="pf-v6-c-button pf-m-control"
       type="button"
-      aria-label="Copy to clipboard"
+      aria-label="Copy to clipboard code expanded example"
       id="expandable-expanded-code-copy-button"
-      aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-copy" aria-hidden="true"></i>
@@ -362,7 +354,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       <button
         class="pf-v6-c-button pf-m-no-padding pf-m-plain"
         type="button"
-        aria-label="Copy to clipboard"
+        aria-label="Copy to clipboard inline compact example"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-copy" aria-hidden="true"></i>
@@ -384,7 +376,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       <button
         class="pf-v6-c-button pf-m-no-padding pf-m-plain"
         type="button"
-        aria-label="Copy to clipboard"
+        aria-label="Copy to clipboard inline compact code example"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-copy" aria-hidden="true"></i>
@@ -406,7 +398,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       <button
         class="pf-v6-c-button pf-m-no-padding pf-m-plain"
         type="button"
-        aria-label="Copy to clipboard"
+        aria-label="Copy to clipboard inline compact with additional action example"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-copy" aria-hidden="true"></i>
@@ -442,7 +434,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       <button
         class="pf-v6-c-button pf-m-no-padding pf-m-plain"
         type="button"
-        aria-label="Copy to clipboard"
+        aria-label="Copy to clipboard basic inline compact example"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-copy" aria-hidden="true"></i>
@@ -467,7 +459,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       <button
         class="pf-v6-c-button pf-m-no-padding pf-m-plain"
         type="button"
-        aria-label="Copy to clipboard"
+        aria-label="Copy to clipboard long inline compact example"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-copy" aria-hidden="true"></i>
@@ -491,7 +483,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       <button
         class="pf-v6-c-button pf-m-no-padding pf-m-plain"
         type="button"
-        aria-label="Copy to clipboard"
+        aria-label="Copy to clipboard long block compact example"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-copy" aria-hidden="true"></i>
@@ -519,7 +511,7 @@ cssPrefix: pf-v6-c-clipboard-copy
       <button
         class="pf-v6-c-button pf-m-no-padding pf-m-plain"
         type="button"
-        aria-label="Copy to clipboard"
+        aria-label="Copy to clipboard inline compact with truncation example"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-copy" aria-hidden="true"></i>

package/docs/components/CodeBlock/examples/CodeBlock.md

@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-code-block
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Copy to clipboard"
+          aria-label="Copy to clipboard basic example code content"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-copy" aria-hidden="true"></i>
@@ -25,7 +25,7 @@ cssPrefix: pf-v6-c-code-block
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Run in Web Terminal"
+          aria-label="Run basic example code in Web Terminal"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-play" aria-hidden="true"></i>
@@ -58,7 +58,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Copy to clipboard"
+          aria-label="Copy to clipboard expandable example code content"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-copy" aria-hidden="true"></i>
@@ -69,7 +69,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Run in Web Terminal"
+          aria-label="Run expandable example code in Web Terminal"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-play" aria-hidden="true"></i>
@@ -83,7 +83,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v6-c-expandable-section"
+  class="pf-v6-c-expandable-section pf-m-detached"
 ><div
   class="pf-v6-c-expandable-section__content"
   hidden
@@ -95,7 +95,7 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v6-c-expandable-section">
+    <div class="pf-v6-c-expandable-section pf-m-detached">
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
@@ -128,7 +128,7 @@ name: azure-sample-repo<div
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Copy to clipboard"
+          aria-label="Copy to clipboard expandable expanded example code content"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-copy" aria-hidden="true"></i>
@@ -139,7 +139,7 @@ name: azure-sample-repo<div
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Run in Web Terminal"
+          aria-label="Run expandable expanded example code in Web Terminal"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-play" aria-hidden="true"></i>
@@ -153,7 +153,7 @@ name: azure-sample-repo<div
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v6-c-expandable-section pf-m-expanded"
+  class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached"
 ><div
   class="pf-v6-c-expandable-section__content"
   id="code-block-expandable-expanded-content"
@@ -164,7 +164,7 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v6-c-expandable-section pf-m-expanded">
+    <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached">
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"