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

package/docs/components/Drawer/examples/Drawer.md

@@ -878,7 +878,7 @@ cssPrefix: pf-v6-c-drawer
 | `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/tokens/all-patternfly-tokens) will default to the `md` breakpoint. |
 | `.pf-m-pill` | `.pf-v6-c-drawer` | Modifies the drawer for pill styles. |
-| `.pf-m-no-glass` | `.pf-v6-c-drawer__panel.pf-m-pill` | Modifies the drawer panel remove glass styling when using glass theme. |
+| `.pf-m-no-glass` | `.pf-v6-c-drawer__panel.pf-m-pill` | Modifies the drawer panel to remove glass styling when using glass theme. |
 | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
 | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
 | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |

package/docs/components/Hero/examples/Hero.md

@@ -0,0 +1,25 @@
+---
+id: 'Hero'
+beta: true
+section: components
+cssPrefix: pf-v6-c-hero
+---## Examples
+
+### Basic
+
+```html isBeta
+<div class="pf-v6-c-hero">
+  <div class="pf-v6-c-hero__body">Basic hero content</div>
+</div>
+
+```
+
+## Documentation
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-hero` | `<div>` | Initiates the hero. **Required** |
+| `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. |
+| `.pf-m-no-glass` | `.pf-v6-c-hero` | Modifies the hero to remove glass styling when using glass theme. |

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

@@ -457,11 +457,11 @@ wrapperTag: 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-l-flex pf-m-align-items-center">
-          <div class="pf-v6-l-flex__item pf-m-grow">
+        <div class="pf-v6-c-compass__main-header-content">
+          <div class="pf-v6-c-compass__main-header-title">
             <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
           </div>
-          <div class="pf-v6-l-flex__item">
+          <div class="pf-v6-c-compass__main-header-toolbar">
             <div class="pf-v6-c-action-list">
               <div class="pf-v6-c-action-list__group">
                 <div class="pf-v6-c-action-list__item">
@@ -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>
@@ -3105,11 +3107,11 @@ wrapperTag: 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-l-flex pf-m-align-items-center">
-          <div class="pf-v6-l-flex__item pf-m-grow">
+        <div class="pf-v6-c-compass__main-header-content">
+          <div class="pf-v6-c-compass__main-header-title">
             <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
           </div>
-          <div class="pf-v6-l-flex__item">
+          <div class="pf-v6-c-compass__main-header-toolbar">
             <div class="pf-v6-c-action-list">
               <div class="pf-v6-c-action-list__group">
                 <div class="pf-v6-c-action-list__item">
@@ -5000,11 +5002,11 @@ wrapperTag: 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-l-flex pf-m-align-items-center">
-                  <div class="pf-v6-l-flex__item pf-m-grow">
+                <div class="pf-v6-c-compass__main-header-content">
+                  <div class="pf-v6-c-compass__main-header-title">
                     <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
                   </div>
-                  <div class="pf-v6-l-flex__item">
+                  <div class="pf-v6-c-compass__main-header-toolbar">
                     <div class="pf-v6-c-action-list">
                       <div class="pf-v6-c-action-list__group">
                         <div class="pf-v6-c-action-list__item">

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.22",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -12272,6 +12272,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
   --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
   --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
   --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -12283,17 +12285,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 {
@@ -12354,6 +12345,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   min-height: 0;
 }
 
+.pf-v6-c-compass__main-header-content {
+  display: flex;
+  gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
+}
+
+.pf-v6-c-compass__main-header-title {
+  flex-grow: 1;
+}
+
 .pf-v6-c-compass__content {
   display: flex;
   flex: 1 0 0;
@@ -12407,29 +12407,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 +16861,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 +16946,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);