@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

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

@@ -19,7 +19,19 @@ cssPrefix: pf-v6-c-code-editor
           aria-label="Copy to clipboard"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-copy" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+              />
+            </svg>
           </span>
         </button>
         <button
@@ -28,7 +40,19 @@ cssPrefix: pf-v6-c-code-editor
           aria-label="Download code"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-download" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
           </span>
         </button>
         <button
@@ -37,7 +61,19 @@ cssPrefix: pf-v6-c-code-editor
           aria-label="Upload code"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-upload" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -74,7 +110,19 @@ cssPrefix: pf-v6-c-code-editor
           aria-label="Copy to clipboard"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-copy" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+              />
+            </svg>
           </span>
         </button>
         <button
@@ -83,7 +131,19 @@ cssPrefix: pf-v6-c-code-editor
           aria-label="Download code"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-download" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
           </span>
         </button>
         <button
@@ -92,7 +152,19 @@ cssPrefix: pf-v6-c-code-editor
           aria-label="Upload code"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-upload" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -134,7 +206,19 @@ cssPrefix: pf-v6-c-code-editor
         <div class="pf-v6-c-empty-state__content">
           <div class="pf-v6-c-empty-state__header">
             <div class="pf-v6-c-empty-state__icon">
-              <i class="fas fa- fa-code" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 640 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
+                />
+              </svg>
             </div>
             <div class="pf-v6-c-empty-state__title">
               <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
@@ -199,7 +283,19 @@ cssPrefix: pf-v6-c-code-editor
         <div class="pf-v6-c-empty-state__content">
           <div class="pf-v6-c-empty-state__header">
             <div class="pf-v6-c-empty-state__icon">
-              <i class="fas fa- fa-code" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 640 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
+                />
+              </svg>
             </div>
             <div class="pf-v6-c-empty-state__title">
               <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
@@ -243,7 +339,19 @@ cssPrefix: pf-v6-c-code-editor
           aria-label="Copy to clipboard"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-copy" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+              />
+            </svg>
           </span>
         </button>
         <button
@@ -252,7 +360,19 @@ cssPrefix: pf-v6-c-code-editor
           aria-label="Download code"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-download" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
           </span>
         </button>
         <button
@@ -261,7 +381,19 @@ cssPrefix: pf-v6-c-code-editor
           aria-label="Upload code"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-upload" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -321,7 +453,19 @@ This is an extra container used in React to prevent event propagation if upload
             aria-label="Copy to clipboard"
           >
             <span class="pf-v6-c-button__icon">
-              <i class="fas fa-copy" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 448 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+                />
+              </svg>
             </span>
           </button>
           <button
@@ -330,7 +474,19 @@ This is an extra container used in React to prevent event propagation if upload
             aria-label="Download code"
           >
             <span class="pf-v6-c-button__icon">
-              <i class="fas fa-download" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 512 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                />
+              </svg>
             </span>
           </button>
           <button
@@ -339,7 +495,19 @@ This is an extra container used in React to prevent event propagation if upload
             aria-label="Upload code"
           >
             <span class="pf-v6-c-button__icon">
-              <i class="fas fa-upload" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 512 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                />
+              </svg>
             </span>
           </button>
         </div>
@@ -357,7 +525,19 @@ This is an extra container used in React to prevent event propagation if upload
           <div class="pf-v6-c-empty-state__content">
             <div class="pf-v6-c-empty-state__header">
               <div class="pf-v6-c-empty-state__icon">
-                <i class="fas fa- fa-code" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 640 512"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
+                  />
+                </svg>
               </div>
               <div class="pf-v6-c-empty-state__title">
                 <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
@@ -402,7 +582,19 @@ This is an extra container used in React to prevent event propagation if upload
           aria-label="Copy to clipboard"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-copy" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+              />
+            </svg>
           </span>
         </button>
         <button
@@ -411,7 +603,19 @@ This is an extra container used in React to prevent event propagation if upload
           aria-label="Download code"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-download" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
           </span>
         </button>
         <button
@@ -420,7 +624,19 @@ This is an extra container used in React to prevent event propagation if upload
           aria-label="Upload code"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-upload" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
           </span>
         </button>
       </div>

package/docs/components/Compass/examples/Compass.css

@@ -0,0 +1,8 @@
+#ws-page-main .ws-core-a-compass .pf-v6-c-compass {
+  height: 600px;
+}
+
+#ws-core-a-compass-basic [class*="pf-v6-c-compass"],
+#ws-core-a-compass-docked [class*="pf-v6-c-compass"] {
+  outline: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
+}

package/docs/components/Compass/examples/Compass.md

@@ -0,0 +1,109 @@
+---
+id: 'Compass'
+beta: true
+section: AI
+subsection: Generative UIs
+cssPrefix: pf-v6-c-compass
+---import './Compass.css';
+
+## Examples
+
+### Basic
+
+In a basic Compass layout, the page structure is defined by the order of elements nested within the main `.pf-v6-c-compass` container:
+
+* **Header:** Content rendered at the top of the page (`.pf-v6-c-compass__header`), typically containing a logo (`.pf-v6-c-compass__logo`), middle navigation (`.pf-v6-c-compass__nav`), and profile (`.pf-v6-c-compass__profile`).
+* **Start sidebar:** Content rendered at the horizontal start of the page (by default, the left side). In this example, a `.pf-v6-c-compass__sidebar` with the `.pf-m-start` modifier.
+* **Main:** Content rendered in the center of the page. The `.pf-v6-c-compass__main` wrapper contains a [hero component](/components/hero), the main header (`.pf-v6-c-compass__main-header`), the content area (`.pf-v6-c-compass__content`), and the main footer (`.pf-v6-c-compass__main-footer`) with the message bar.
+* **End sidebar:** Content rendered at the horizontal end of the page (by default, the right side). In this example, a `.pf-v6-c-compass__sidebar` with the `.pf-m-end` modifier.
+* **Footer:** Content rendered at the bottom of the page (`.pf-v6-c-compass__footer`).
+
+```html isBeta
+<div class="pf-v6-c-compass pf-m-animate-smoothly">
+  <div class="pf-v6-c-compass__header pf-m-expanded">
+    <div class="pf-v6-c-compass__logo">logo</div>
+
+    <div class="pf-v6-c-compass__nav">
+      <div class="pf-v6-c-compass__nav-content">
+        <div class="pf-v6-c-compass__nav-home">home</div>
+
+        <div class="pf-v6-c-compass__nav-main">main</div>
+
+        <div class="pf-v6-c-compass__nav-search">search</div>
+      </div>
+    </div>
+    <div class="pf-v6-c-compass__profile">profile</div>
+  </div>
+  <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">sidebar (start)</div>
+
+  <div class="pf-v6-c-compass__main">
+    <div class="pf-v6-c-compass__hero">hero</div>
+    <div class="pf-v6-c-compass__main-header">
+      <div class="pf-v6-c-compass__main-header-content">main header</div>
+    </div>
+    <div class="pf-v6-c-compass__content">content</div>
+
+    <div class="pf-v6-c-compass__main-footer pf-m-expanded">
+      <div class="pf-v6-c-compass__message-bar">message bar</div>
+    </div>
+  </div>
+  <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">sidebar (end)</div>
+
+  <div class="pf-v6-c-compass__footer pf-m-expanded">footer</div>
+</div>
+
+```
+
+### Docked
+
+```html isBeta
+<div class="pf-v6-c-compass pf-m-animate-smoothly pf-m-docked">
+  <header class="pf-v6-c-masthead pf-m-display-inline">
+    <div class="pf-v6-c-masthead__main">masthead main</div>
+    <div class="pf-v6-c-masthead__content">masthead content</div>
+  </header>
+  <div class="pf-v6-c-compass__dock">
+    <div class="pf-v6-c-compass__dock-main">dock</div>
+  </div>
+  <div class="pf-v6-c-compass__main">
+    <div class="pf-v6-c-compass__main-header">
+      <div class="pf-v6-c-compass__main-header-content">main header</div>
+    </div>
+    <div class="pf-v6-c-compass__content">content</div>
+  </div>
+</div>
+
+```
+
+## Documentation
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-compass` | `<div>` | Initiates the Compass component. **Required** |
+| `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. **Required** |
+| `.pf-v6-c-compass__logo` | `<div>` | Initiates the Compass logo header. |
+| `.pf-v6-c-compass__dock` | `<div>` | Initiates the Compass dock. |
+| `.pf-v6-c-compass__dock-main` | `<div>` | Initiates the Compass dock main wrapper. |
+| `.pf-v6-c-compass__profile` | `<div>` | Initiates the Compass profile. |
+| `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a Compass sidebar. **Required** |
+| `.pf-v6-c-compass__main` | `<div>` | Initiates the Compass main wrapper. **Required** |
+| `.pf-v6-c-compass__main-header` | `<div>` | Initiates the Compass main header. |
+| `.pf-v6-c-compass__main-header-content` | `<div>` | Initiates the Compass main header content. This should be passed into a glass panel component. |
+| `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the Compass main header content. |
+| `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the Compass main header content. |
+| `.pf-v6-c-compass__content` | `<div>` | Initiates the Compass content. **Required** |
+| `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the Compass main footer. **Required** |
+| `.pf-v6-c-compass__nav` | `<div>` | Initiates a Compass container for site navigation. |
+| `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a Compass container for navigation content. |
+| `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for Compass home button. |
+| `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for Compass navigation main content. |
+| `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for Compass search button. |
+| `.pf-v6-c-compass__footer` | `<div>` | Initiates the Compass footer. |
+| `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the Compass message bar. |
+| `.pf-m-docked` | `.pf-v6-c-compass` | Modifies for dock layout. |
+| `.pf-m-no-screen-warning` | `.pf-v6-c-compass` | Disables the screen warning that shows on smaller viewports. |
+| `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for start styles. **Required** |
+| `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for end styles. **Required** |
+| `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a Compass section for expanded styles. |