@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

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>
@@ -243,7 +315,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 +336,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 +357,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 +429,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 +450,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 +471,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>
@@ -402,7 +546,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 +567,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 +588,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,17 @@
+.ws-core-a-compass .pf-v6-c-compass {
+  height: 600px;
+}
+
+#ws-core-a-compass-default [class*="pf-v6-c-compass"],
+#ws-core-a-compass-docked [class*="pf-v6-c-compass"] {
+  position: relative;
+}
+
+#ws-core-a-compass-default [class*="pf-v6-c-compass"]::after,
+#ws-core-a-compass-docked [class*="pf-v6-c-compass"]::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: 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,119 @@
+---
+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__panel">
+        <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>
+    <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">
+      <div class="pf-v6-c-hero">hero</div>
+    </div>
+    <div class="pf-v6-c-compass__main-header">
+      <div class="pf-v6-c-compass__panel">
+        <div class="pf-v6-c-compass__main-header-content">main header</div>
+      </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-dock">
+  <div class="pf-v6-c-compass__dock">dock</div>
+  <div class="pf-v6-c-compass__main">
+    <div class="pf-v6-c-compass__main-header">
+      <div class="pf-v6-c-compass__panel">
+        <div class="pf-v6-c-compass__main-header-content">main header</div>
+      </div>
+    </div>
+    <div class="pf-v6-c-compass__content">
+      <div class="pf-v6-c-compass__panel pf-m-scrollable">content</div>
+    </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__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 `.pf-v6-c-compass__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__panel` | `<div>` | Initiates a Compass panel. |
+| `.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-dock` | `.pf-v6-c-compass` | Modifies for dock layout. |
+| `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
+| `.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-no-border` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the border. |
+| `.pf-m-no-padding` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the padding. |
+| `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to be full height. |
+| `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to have a pill-shaped border radius. |
+| `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to scroll its overflow. |
+| `.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. |