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

package/patternfly.css

@@ -12419,6 +12419,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);
@@ -12430,17 +12432,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 {
@@ -12501,6 +12492,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;
@@ -12554,29 +12554,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 +17008,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 +17093,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);