@patternfly/patternfly 6.5.0-prerelease.20 → 6.5.0-prerelease.21

package/docs/demos/Compass/examples/Compass.md

@@ -1667,31 +1667,33 @@ wrapperTag: div
     </div>
   </div>
   <div class="pf-v6-c-compass__main">
-    <div
-      class="pf-v6-c-compass__panel pf-v6-c-compass__hero"
-      style="
-            --pf-v6-c-compass__hero--gradient--stop-1--dark: #3d2785;
-            --pf-v6-c-compass__hero--gradient--stop-2--dark: #1b0d33;
-            --pf-v6-c-compass__hero--gradient--stop-3--dark: #000;
-            --pf-v6-c-compass__hero--BackgroundImage--light: url(/assets/images/compass--hero-bg.png);
-            --pf-v6-c-compass__hero--BackgroundImage--dark: url(/assets/images/compass--hero-bg.png);
-          "
-    >
-      <div class="pf-v6-c-compass__hero-body">
-        <div class="pf-v6-c-content">
-          <h1>Automation that does more</h1>
-          <p>Red&nbsp;Hat Ansible Automation Platform offers more capabilities, accessibility, and flexibility, so you can bring the power of automation to the teams, tasks, and environments that need it.</p>
-          <div class="pf-v6-c-action-list">
-            <div class="pf-v6-c-action-list__group">
-              <div class="pf-v6-c-action-list__item">
-                <button class="pf-v6-c-button pf-m-primary" type="button">
-                  <span class="pf-v6-c-button__text">Upgrade today</span>
-                </button>
-              </div>
-              <div class="pf-v6-c-action-list__item">
-                <button class="pf-v6-c-button pf-m-secondary" type="button">
-                  <span class="pf-v6-c-button__text">Talk to a Red Hatter</span>
-                </button>
+    <div class="pf-v6-c-compass__hero">
+      <div
+        class="pf-v6-c-hero"
+        style="
+              --pf-v6-c-hero--gradient--stop-1--dark: #3d2785;
+              --pf-v6-c-hero--gradient--stop-2--dark: #1b0d33;
+              --pf-v6-c-hero--gradient--stop-3--dark: #000;
+              --pf-v6-c-hero--BackgroundImage--light: url(/assets/images/compass--hero-bg.png);
+              --pf-v6-c-hero--BackgroundImage--dark: url(/assets/images/compass--hero-bg.png);
+            "
+      >
+        <div class="pf-v6-c-hero__body">
+          <div class="pf-v6-c-content">
+            <h1>Automation that does more</h1>
+            <p>Red&nbsp;Hat Ansible Automation Platform offers more capabilities, accessibility, and flexibility, so you can bring the power of automation to the teams, tasks, and environments that need it.</p>
+            <div class="pf-v6-c-action-list">
+              <div class="pf-v6-c-action-list__group">
+                <div class="pf-v6-c-action-list__item">
+                  <button class="pf-v6-c-button pf-m-primary" type="button">
+                    <span class="pf-v6-c-button__text">Upgrade today</span>
+                  </button>
+                </div>
+                <div class="pf-v6-c-action-list__item">
+                  <button class="pf-v6-c-button pf-m-secondary" type="button">
+                    <span class="pf-v6-c-button__text">Talk to a Red Hatter</span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.20",
+  "version": "6.5.0-prerelease.21",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -12283,17 +12283,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__message-bar--Width: 450px;
   --pf-v6-c-compass__message-bar--MinWidth: 300px;
   --pf-v6-c-compass__message-bar--MaxWidth: 600px;
-  --pf-v6-c-compass__hero--gradient--angle: 109deg;
-  --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
-  --pf-v6-c-compass__hero--BackgroundImage--light: none;
-  --pf-v6-c-compass__hero--BackgroundImage--dark: none;
-  --pf-v6-c-compass__hero-body--Width: 800px;
-  --pf-v6-c-compass__hero-body--MaxWidth: 80%;
 }
 
 .pf-v6-c-compass {
@@ -12407,29 +12396,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   overflow: auto;
 }
 
-.pf-v6-c-compass__hero {
-  display: flex;
-  padding-block-start: 32px;
-  padding-block-end: 32px;
-  padding-inline-start: 72px;
-  padding-inline-end: 0;
-  background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
-  background-repeat: no-repeat;
-  background-position: right center;
-  background-size: contain;
-  border-radius: 24px 72px;
-}
-:root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
-  --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
-  --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
-  --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
-  --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
-}
-
-.pf-v6-c-compass__hero-body {
-  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
-}
-
 /* stylelint-disable */
 @media (max-width: 1200px) {
   .pf-v6-c-compass * {
@@ -16884,81 +16850,6 @@ ul) {
   pointer-events: none;
 }
 
-.pf-v6-c-hint {
-  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
-  --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
-  --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-}
-
-.pf-v6-c-hint {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
-  padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
-  color: var(--pf-v6-c-hint--Color);
-  background-color: var(--pf-v6-c-hint--BackgroundColor);
-  border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
-  border-radius: var(--pf-v6-c-hint--BorderRadius);
-}
-.pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
-  text-align: start;
-  white-space: normal;
-}
-
-.pf-v6-c-hint__actions {
-  display: inline-grid;
-  grid-row: 1;
-  grid-column: 2;
-  grid-auto-flow: column;
-  align-self: start;
-  margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
-  margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
-  margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
-  text-align: end;
-}
-.pf-v6-c-hint__actions.pf-m-no-offset {
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
-}
-.pf-v6-c-hint__actions + .pf-v6-c-hint__body {
-  grid-column: 1;
-}
-
-.pf-v6-c-hint__title {
-  align-self: center;
-  font-weight: var(--pf-v6-c-hint__title--FontWeight);
-}
-
-.pf-v6-c-hint__body {
-  grid-column: 1/-1;
-  font-size: var(--pf-v6-c-hint__body--FontSize);
-}
-
-.pf-v6-c-hint__footer {
-  grid-column: 1/-1;
-  margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
-}
-.pf-v6-c-hint__footer > :not(:last-child) {
-  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
-}
-
 .pf-v6-c-helper-text {
   --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -17044,6 +16935,156 @@ ul) {
   color: var(--pf-v6-c-helper-text__item-text--Color);
 }
 
+.pf-v6-c-hero {
+  --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--gradient--angle: 109deg;
+  --pf-v6-c-hero--gradient--stop-1--light: transparent;
+  --pf-v6-c-hero--gradient--stop-2--light: transparent;
+  --pf-v6-c-hero--gradient--stop-3--light: transparent;
+  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
+  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
+  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
+  --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
+  --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
+  --pf-v6-c-hero--BackgroundImage--light: none;
+  --pf-v6-c-hero--BackgroundImage--dark: none;
+  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
+  --pf-v6-c-hero--BackgroundPosition: right center;
+  --pf-v6-c-hero--BackgroundSize: contain;
+  --pf-v6-c-hero--BorderStyle: solid;
+  --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
+  --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v6-c-hero--BorderStartStartRadius: 24px;
+  --pf-v6-c-hero--BorderStartEndRadius: 72px;
+  --pf-v6-c-hero--BorderEndEndRadius: 24px;
+  --pf-v6-c-hero--BorderEndStartRadius: 72px;
+  --pf-v6-c-hero__body--Width: 800px;
+  --pf-v6-c-hero__body--MaxWidth: 80%;
+}
+
+.pf-v6-c-hero {
+  display: flex;
+  padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
+  background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
+  background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
+  background-position: var(--pf-v6-c-hero--BackgroundPosition);
+  background-size: var(--pf-v6-c-hero--BackgroundSize);
+  border-color: var(--pf-v6-c-hero--BorderColor);
+  border-style: var(--pf-v6-c-hero--BorderStyle);
+  border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
+  border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
+  border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
+  border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
+  border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
+  border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
+  border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
+  border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
+}
+:root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
+  --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
+  --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
+  --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
+  --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
+}
+:root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
+  --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
+  box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
+}
+.pf-v6-c-hero:not(.pf-m-no-glass) {
+  background-color: var(--pf-v6-c-hero--BackgroundColor);
+  backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
+}
+
+.pf-v6-c-hero__body {
+  width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
+}
+
+.pf-v6-c-hint {
+  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
+  --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
+  --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+}
+
+.pf-v6-c-hint {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
+  padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
+  color: var(--pf-v6-c-hint--Color);
+  background-color: var(--pf-v6-c-hint--BackgroundColor);
+  border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
+  border-radius: var(--pf-v6-c-hint--BorderRadius);
+}
+.pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
+  text-align: start;
+  white-space: normal;
+}
+
+.pf-v6-c-hint__actions {
+  display: inline-grid;
+  grid-row: 1;
+  grid-column: 2;
+  grid-auto-flow: column;
+  align-self: start;
+  margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
+  margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
+  text-align: end;
+}
+.pf-v6-c-hint__actions.pf-m-no-offset {
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
+}
+.pf-v6-c-hint__actions + .pf-v6-c-hint__body {
+  grid-column: 1;
+}
+
+.pf-v6-c-hint__title {
+  align-self: center;
+  font-weight: var(--pf-v6-c-hint__title--FontWeight);
+}
+
+.pf-v6-c-hint__body {
+  grid-column: 1/-1;
+  font-size: var(--pf-v6-c-hint__body--FontSize);
+}
+
+.pf-v6-c-hint__footer {
+  grid-column: 1/-1;
+  margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
+}
+.pf-v6-c-hint__footer > :not(:last-child) {
+  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
+}
+
 .pf-v6-c-icon {
   --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);

package/patternfly.css

@@ -12430,17 +12430,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__message-bar--Width: 450px;
   --pf-v6-c-compass__message-bar--MinWidth: 300px;
   --pf-v6-c-compass__message-bar--MaxWidth: 600px;
-  --pf-v6-c-compass__hero--gradient--angle: 109deg;
-  --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
-  --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
-  --pf-v6-c-compass__hero--BackgroundImage--light: none;
-  --pf-v6-c-compass__hero--BackgroundImage--dark: none;
-  --pf-v6-c-compass__hero-body--Width: 800px;
-  --pf-v6-c-compass__hero-body--MaxWidth: 80%;
 }
 
 .pf-v6-c-compass {
@@ -12554,29 +12543,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   overflow: auto;
 }
 
-.pf-v6-c-compass__hero {
-  display: flex;
-  padding-block-start: 32px;
-  padding-block-end: 32px;
-  padding-inline-start: 72px;
-  padding-inline-end: 0;
-  background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
-  background-repeat: no-repeat;
-  background-position: right center;
-  background-size: contain;
-  border-radius: 24px 72px;
-}
-:root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
-  --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
-  --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
-  --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
-  --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
-}
-
-.pf-v6-c-compass__hero-body {
-  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
-}
-
 /* stylelint-disable */
 @media (max-width: 1200px) {
   .pf-v6-c-compass * {
@@ -17031,81 +16997,6 @@ ul) {
   pointer-events: none;
 }
 
-.pf-v6-c-hint {
-  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
-  --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
-  --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-}
-
-.pf-v6-c-hint {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
-  padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
-  color: var(--pf-v6-c-hint--Color);
-  background-color: var(--pf-v6-c-hint--BackgroundColor);
-  border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
-  border-radius: var(--pf-v6-c-hint--BorderRadius);
-}
-.pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
-  text-align: start;
-  white-space: normal;
-}
-
-.pf-v6-c-hint__actions {
-  display: inline-grid;
-  grid-row: 1;
-  grid-column: 2;
-  grid-auto-flow: column;
-  align-self: start;
-  margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
-  margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
-  margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
-  text-align: end;
-}
-.pf-v6-c-hint__actions.pf-m-no-offset {
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
-}
-.pf-v6-c-hint__actions + .pf-v6-c-hint__body {
-  grid-column: 1;
-}
-
-.pf-v6-c-hint__title {
-  align-self: center;
-  font-weight: var(--pf-v6-c-hint__title--FontWeight);
-}
-
-.pf-v6-c-hint__body {
-  grid-column: 1/-1;
-  font-size: var(--pf-v6-c-hint__body--FontSize);
-}
-
-.pf-v6-c-hint__footer {
-  grid-column: 1/-1;
-  margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
-}
-.pf-v6-c-hint__footer > :not(:last-child) {
-  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
-}
-
 .pf-v6-c-helper-text {
   --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -17191,6 +17082,156 @@ ul) {
   color: var(--pf-v6-c-helper-text__item-text--Color);
 }
 
+.pf-v6-c-hero {
+  --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--gradient--angle: 109deg;
+  --pf-v6-c-hero--gradient--stop-1--light: transparent;
+  --pf-v6-c-hero--gradient--stop-2--light: transparent;
+  --pf-v6-c-hero--gradient--stop-3--light: transparent;
+  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
+  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
+  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
+  --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
+  --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
+  --pf-v6-c-hero--BackgroundImage--light: none;
+  --pf-v6-c-hero--BackgroundImage--dark: none;
+  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
+  --pf-v6-c-hero--BackgroundPosition: right center;
+  --pf-v6-c-hero--BackgroundSize: contain;
+  --pf-v6-c-hero--BorderStyle: solid;
+  --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
+  --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v6-c-hero--BorderStartStartRadius: 24px;
+  --pf-v6-c-hero--BorderStartEndRadius: 72px;
+  --pf-v6-c-hero--BorderEndEndRadius: 24px;
+  --pf-v6-c-hero--BorderEndStartRadius: 72px;
+  --pf-v6-c-hero__body--Width: 800px;
+  --pf-v6-c-hero__body--MaxWidth: 80%;
+}
+
+.pf-v6-c-hero {
+  display: flex;
+  padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
+  background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
+  background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
+  background-position: var(--pf-v6-c-hero--BackgroundPosition);
+  background-size: var(--pf-v6-c-hero--BackgroundSize);
+  border-color: var(--pf-v6-c-hero--BorderColor);
+  border-style: var(--pf-v6-c-hero--BorderStyle);
+  border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
+  border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
+  border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
+  border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
+  border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
+  border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
+  border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
+  border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
+}
+:root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
+  --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
+  --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
+  --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
+  --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
+}
+:root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
+  --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
+  box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
+}
+.pf-v6-c-hero:not(.pf-m-no-glass) {
+  background-color: var(--pf-v6-c-hero--BackgroundColor);
+  backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
+}
+
+.pf-v6-c-hero__body {
+  width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
+}
+
+.pf-v6-c-hint {
+  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
+  --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
+  --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+}
+
+.pf-v6-c-hint {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
+  padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
+  color: var(--pf-v6-c-hint--Color);
+  background-color: var(--pf-v6-c-hint--BackgroundColor);
+  border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
+  border-radius: var(--pf-v6-c-hint--BorderRadius);
+}
+.pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
+  text-align: start;
+  white-space: normal;
+}
+
+.pf-v6-c-hint__actions {
+  display: inline-grid;
+  grid-row: 1;
+  grid-column: 2;
+  grid-auto-flow: column;
+  align-self: start;
+  margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
+  margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
+  text-align: end;
+}
+.pf-v6-c-hint__actions.pf-m-no-offset {
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
+}
+.pf-v6-c-hint__actions + .pf-v6-c-hint__body {
+  grid-column: 1;
+}
+
+.pf-v6-c-hint__title {
+  align-self: center;
+  font-weight: var(--pf-v6-c-hint__title--FontWeight);
+}
+
+.pf-v6-c-hint__body {
+  grid-column: 1/-1;
+  font-size: var(--pf-v6-c-hint__body--FontSize);
+}
+
+.pf-v6-c-hint__footer {
+  grid-column: 1/-1;
+  margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
+}
+.pf-v6-c-hint__footer > :not(:last-child) {
+  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
+}
+
 .pf-v6-c-icon {
   --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);