@patternfly/react-styles 6.5.0-prerelease.9 → 6.5.1-prerelease.0

package/css/components/FormControl/form-control.css

@@ -5,10 +5,10 @@
   --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-form-control--Resize: none;
   --pf-v6-c-form-control--OutlineOffset: -6px;
-  --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
   --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-form-control--before--BorderStyle: solid;
-  --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-form-control--after--BorderStyle: solid;
@@ -189,8 +189,8 @@
   --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
 }
 .pf-v6-c-form-control.pf-m-textarea > textarea {
-  outline-offset: 0;
   scrollbar-gutter: stable;
+  outline-offset: 0;
 }
 .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
   padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);

package/css/components/Hero/hero.css

@@ -1,8 +1,8 @@
 .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--PaddingBlockStart: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
   --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--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
   --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;
@@ -10,8 +10,7 @@
   --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--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
   --pf-v6-c-hero--BackgroundImage--light: none;
   --pf-v6-c-hero--BackgroundImage--dark: none;
   --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -23,14 +22,16 @@
   --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--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-hero--BorderStartEndRadius: 48px;
+  --pf-v6-c-hero--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-hero--BorderEndStartRadius: 48px;
   --pf-v6-c-hero__body--Width: 800px;
   --pf-v6-c-hero__body--MaxWidth: 80%;
+  --pf-v6-c-hero--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+  --pf-v6-c-hero--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
 }
 
 .pf-v6-c-hero {
@@ -39,6 +40,7 @@
   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-color: var(--pf-v6-c-hero--BackgroundColor);
   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);
@@ -54,20 +56,18 @@
   border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
   border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
 }
+:where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass {
+  --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
+  --pf-v6-c-hero--BackgroundColor: var(--pf-v6-c-hero--m-glass--BackgroundColor);
+  backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
+  box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
+}
 :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));

package/css/components/Hero/hero.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
   "hero": "pf-v6-c-hero",
   "heroBody": "pf-v6-c-hero__body",
   "modifiers": {
-    "noGlass": "pf-m-no-glass"
+    "glass": "pf-m-glass"
   },
   "themeDark": "pf-v6-theme-dark",
   "themeGlass": "pf-v6-theme-glass"

package/css/components/Hero/hero.js

@@ -5,7 +5,7 @@ exports.default = {
   "hero": "pf-v6-c-hero",
   "heroBody": "pf-v6-c-hero__body",
   "modifiers": {
-    "noGlass": "pf-m-no-glass"
+    "glass": "pf-m-glass"
   },
   "themeDark": "pf-v6-theme-dark",
   "themeGlass": "pf-v6-theme-glass"

package/css/components/Hero/hero.mjs

@@ -3,7 +3,7 @@ export default {
   "hero": "pf-v6-c-hero",
   "heroBody": "pf-v6-c-hero__body",
   "modifiers": {
-    "noGlass": "pf-m-no-glass"
+    "glass": "pf-m-glass"
   },
   "themeDark": "pf-v6-theme-dark",
   "themeGlass": "pf-v6-theme-glass"

package/css/components/JumpLinks/jump-links.css

@@ -26,14 +26,19 @@
   --pf-v6-c-jump-links__list__list__link--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-jump-links__list__list__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
+  --pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth);
+  --pf-v6-c-jump-links__link--before--Width: auto;
   --pf-v6-c-jump-links__link--before--BorderBlockStartWidth: 0;
   --pf-v6-c-jump-links__link--before--BorderInlineEndWidth: 0;
   --pf-v6-c-jump-links__link--before--BorderBlockEndWidth: 0;
   --pf-v6-c-jump-links__link--before--BorderInlineStartWidth: 0;
   --pf-v6-c-jump-links__link--before--BorderColor: transparent;
+  --pf-v6-c-jump-links__link--before--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: 0;
-  --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--color--brand--accent--default);
+  --pf-v6-c-jump-links--m-vertical__link--before--Height: auto;
+  --pf-v6-c-jump-links--m-vertical__link--before--Width: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth);
   --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0;
   --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle);
@@ -48,7 +53,7 @@
   --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
-  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: -180deg;
 }
 
 .pf-v6-c-jump-links {
@@ -65,6 +70,8 @@
   --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd);
   --pf-v6-c-jump-links__list--PaddingBlockEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd);
   --pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart);
+  --pf-v6-c-jump-links__link--before--Width: var(--pf-v6-c-jump-links--m-vertical__link--before--Width);
+  --pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links--m-vertical__link--before--Height);
   --pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth);
   --pf-v6-c-jump-links__list--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth);
   --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth);
@@ -195,6 +202,8 @@
 .pf-v6-c-jump-links__link::before {
   position: absolute;
   inset: 0;
+  width: var(--pf-v6-c-jump-links__link--before--Width);
+  height: var(--pf-v6-c-jump-links__link--before--Height);
   pointer-events: none;
   content: "";
   border-color: var(--pf-v6-c-jump-links__link--before--BorderColor);
@@ -203,6 +212,7 @@
   border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBlockEndWidth);
   border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderInlineStartWidth);
   border-inline-end-width: var(--pf-v6-c-jump-links__link--before--BorderInlineEndWidth);
+  border-radius: var(--pf-v6-c-jump-links__link--before--BorderRadius);
 }
 
 .pf-v6-c-jump-links__item {
@@ -234,6 +244,10 @@
   margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-jump-links__toggle-icon {
   display: inline-block;
   color: var(--pf-v6-c-jump-links__toggle-icon--Color);
@@ -241,7 +255,4 @@
   transition-duration: var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration);
   transition-property: transform;
   transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
-}
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
-  scale: -1 1;
 }

package/css/components/Label/label-group.css

@@ -137,9 +137,9 @@
   padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
   white-space: nowrap;
   resize: none;
-  border: 0;
-  -ms-overflow-style: none;
   scrollbar-width: none;
+  -ms-overflow-style: none;
+  border: 0;
 }
 .pf-v6-c-label-group__textarea::-webkit-scrollbar {
   display: none;

package/css/components/Label/label.css

@@ -493,6 +493,10 @@ input.pf-v6-c-label__content {
 .pf-v6-c-label__actions {
   margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
 }
+.pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
+  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
+}
+
 .pf-v6-c-label__actions .pf-v6-c-button {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
   --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
@@ -502,7 +506,4 @@ input.pf-v6-c-label__content {
   margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
   margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
   outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
-}
-.pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
-  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
 }

package/css/components/Login/login.css

@@ -7,18 +7,50 @@
   --pf-v6-c-login__container--PaddingInlineStart: 6.125rem;
   --pf-v6-c-login__container--PaddingInlineEnd: 6.125rem;
   --pf-v6-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+}
+@media (min-width: 36rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__header--PaddingInlineEnd: 0;
+    --pf-v6-c-login__header--PaddingInlineStart: 0;
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__header--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__header--xl--MarginBlockStart: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__header--c-brand--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
+    --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
+  }
+}
+.pf-v6-c-login {
+  --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
+  --pf-v6-c-login__main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
   --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
-  --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
+  --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--high-contrast));
+  --pf-v6-c-login__main--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__main--MarginBlockEnd: 0;
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-login__main-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -30,11 +62,28 @@
   --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-login__main-header-desc--md--MarginBlockEnd: 0;
   --pf-v6-c-login__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
+}
+@media (min-width: 48rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
+    --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
+    --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-login__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-login__main-body--md--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__main-body--md--PaddingInlineStart: var(--pf-t--global--spacer--2xl);
+}
+@media (min-width: 48rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
+    --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__main-footer--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-login__main-footer--c-title--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__main-footer-links--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -52,43 +101,6 @@
   --pf-v6-c-login__main-footer-band-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
-}
-@media (min-width: 75rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
-  }
-}
-@media (min-width: 36rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__header--PaddingInlineEnd: 0;
-    --pf-v6-c-login__header--PaddingInlineStart: 0;
-  }
-}
-@media (min-width: 75rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
-    --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
-  }
-}
-@media (min-width: 75rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__main--MarginBlockEnd: 0;
-  }
-}
-@media (min-width: 48rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
-    --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
-    --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
-  }
-}
-@media (min-width: 48rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
-    --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
-  }
 }
 @media (min-width: 36rem) {
   .pf-v6-c-login {
@@ -96,6 +108,10 @@
     --pf-v6-c-login__footer--PaddingInlineStart: 0;
   }
 }
+.pf-v6-c-login {
+  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+}
 @media (min-width: 75rem) {
   .pf-v6-c-login {
     --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
@@ -150,8 +166,10 @@
   align-self: start;
   margin-block-end: var(--pf-v6-c-login__main--MarginBlockEnd);
   background-color: var(--pf-v6-c-login__main--BackgroundColor);
+  backdrop-filter: var(--pf-v6-c-login__main--BackdropFilter);
   border: var(--pf-v6-c-login__main--BorderWidth) solid var(--pf-v6-c-login__main--BorderColor);
   border-radius: var(--pf-v6-c-login__main--BorderRadius);
+  box-shadow: var(--pf-v6-c-login__main--BoxShadow);
 }
 .pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
   padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);

package/css/components/Masthead/masthead.css

@@ -8,6 +8,7 @@
   --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-masthead__main--MarginInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-masthead--m-docked__main--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-masthead__logo--MaxHeight: 2.375rem;
   --pf-v6-c-masthead__logo--Width: 11.8125rem;
   --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
@@ -42,8 +43,8 @@
   --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
-  --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
+  --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
+  --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
   --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
   --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
@@ -51,6 +52,11 @@
   --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
 }
 
+.pf-v6-c-masthead .pf-v6-c-toolbar {
+  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
+  --pf-v6-c-toolbar__content--MinWidth: 0;
+}
 .pf-v6-c-masthead {
   --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
   --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
@@ -64,23 +70,6 @@
   --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
   --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
   --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
-  display: grid;
-  grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
-  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
-  row-gap: var(--pf-v6-c-masthead--RowGap);
-  column-gap: var(--pf-v6-c-masthead--ColumnGap);
-  align-items: start;
-  min-width: 0;
-  padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
-  padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
-  padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
-  padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
-  background-color: var(--pf-v6-c-masthead--BackgroundColor);
-}
-.pf-v6-c-masthead .pf-v6-c-toolbar {
-  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
-  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
-  --pf-v6-c-toolbar__content--MinWidth: 0;
 }
 @media screen and (min-width: 48rem) {
   :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
@@ -98,6 +87,20 @@
     --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
   }
 }
+.pf-v6-c-masthead {
+  display: grid;
+  grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
+  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
+  row-gap: var(--pf-v6-c-masthead--RowGap);
+  column-gap: var(--pf-v6-c-masthead--ColumnGap);
+  align-items: start;
+  min-width: 0;
+  padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
+  padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
+  padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
+  padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
+  background-color: var(--pf-v6-c-masthead--BackgroundColor);
+}
 .pf-v6-c-masthead.pf-m-docked {
   --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
   --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
@@ -111,7 +114,7 @@
   --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
   --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
   --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
-  --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
+  --pf-v6-c-masthead--BackgroundColor: transparent;
   --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
   --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
   --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
@@ -122,24 +125,58 @@
   --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
   --pf-v6-c-masthead__main--GridColumn: auto;
   --pf-v6-c-masthead__content--GridColumn: auto;
-  --pf-v6-c-masthead__logo--Width: auto;
   --pf-v6-c-masthead__main--MarginInlineEnd: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  width: fit-content;
+  align-items: stretch;
   height: 100%;
-  backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
+  border: 0;
+  box-shadow: none;
 }
-.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
+.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
+  width: revert;
+}
+.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
+  display: none;
+  max-width: 2.3125rem;
+  max-height: revert;
+}
+.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
   flex-direction: column;
+  row-gap: var(--pf-v6-c-masthead--m-docked__main--RowGap);
+  align-items: flex-start;
+}
+.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
   flex-grow: 1;
+  flex-direction: column;
+  align-items: stretch;
   align-self: revert;
 }
 .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
-  --pf-v6-c-masthead--c-toolbar--Width: fit-content;
+  --pf-v6-c-toolbar--m-vertical--Width: auto;
   height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
 }
+@media (min-width: 62rem) {
+  .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
+    align-items: center;
+  }
+  .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
+    display: none;
+  }
+  .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
+    display: revert;
+  }
+}
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
+  display: revert;
+}
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
+  display: none;
+}
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
+  align-items: flex-start;
+}
+
 .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
   flex-wrap: nowrap;
   min-width: 0;
@@ -201,6 +238,12 @@
   padding-inline-start: var(--pf-t--global--spacer--2xl);
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
+:where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
+  background-color: var(--pf-t--global--background--color--glass--primary--default);
+  backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
+  border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
+  box-shadow: var(--pf-t--global--box-shadow--glass--default);
+}
 
 .pf-v6-c-masthead__main {
   display: var(--pf-v6-c-masthead__main--Display);

package/css/components/Masthead/masthead.d.ts

@@ -1,5 +1,6 @@
 import './masthead.css';
 declare const _default: {
+  "compassDock": "pf-v6-c-compass__dock",
   "masthead": "pf-v6-c-masthead",
   "mastheadBrand": "pf-v6-c-masthead__brand",
   "mastheadContent": "pf-v6-c-masthead__content",
@@ -10,6 +11,8 @@ declare const _default: {
   "modifiers": {
     "resizeObserver": "pf-m-resize-observer",
     "docked": "pf-m-docked",
+    "compact": "pf-m-compact",
+    "textExpanded": "pf-m-text-expanded",
     "displayStack": "pf-m-display-stack",
     "displayInline": "pf-m-display-inline",
     "insetNone": "pf-m-inset-none",
@@ -29,6 +32,8 @@ declare const _default: {
     "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
     "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
   },
+  "pageDock": "pf-v6-c-page__dock",
+  "themeGlass": "pf-v6-theme-glass",
   "toolbar": "pf-v6-c-toolbar",
   "toolbarContentSection": "pf-v6-c-toolbar__content-section",
   "toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"

package/css/components/Masthead/masthead.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./masthead.css');
 exports.default = {
+  "compassDock": "pf-v6-c-compass__dock",
   "masthead": "pf-v6-c-masthead",
   "mastheadBrand": "pf-v6-c-masthead__brand",
   "mastheadContent": "pf-v6-c-masthead__content",
@@ -12,6 +13,8 @@ exports.default = {
   "modifiers": {
     "resizeObserver": "pf-m-resize-observer",
     "docked": "pf-m-docked",
+    "compact": "pf-m-compact",
+    "textExpanded": "pf-m-text-expanded",
     "displayStack": "pf-m-display-stack",
     "displayInline": "pf-m-display-inline",
     "insetNone": "pf-m-inset-none",
@@ -31,6 +34,8 @@ exports.default = {
     "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
     "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
   },
+  "pageDock": "pf-v6-c-page__dock",
+  "themeGlass": "pf-v6-theme-glass",
   "toolbar": "pf-v6-c-toolbar",
   "toolbarContentSection": "pf-v6-c-toolbar__content-section",
   "toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"

package/css/components/Masthead/masthead.mjs

@@ -1,5 +1,6 @@
 import './masthead.css';
 export default {
+  "compassDock": "pf-v6-c-compass__dock",
   "masthead": "pf-v6-c-masthead",
   "mastheadBrand": "pf-v6-c-masthead__brand",
   "mastheadContent": "pf-v6-c-masthead__content",
@@ -10,6 +11,8 @@ export default {
   "modifiers": {
     "resizeObserver": "pf-m-resize-observer",
     "docked": "pf-m-docked",
+    "compact": "pf-m-compact",
+    "textExpanded": "pf-m-text-expanded",
     "displayStack": "pf-m-display-stack",
     "displayInline": "pf-m-display-inline",
     "insetNone": "pf-m-inset-none",
@@ -29,6 +32,8 @@ export default {
     "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
     "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
   },
+  "pageDock": "pf-v6-c-page__dock",
+  "themeGlass": "pf-v6-theme-glass",
   "toolbar": "pf-v6-c-toolbar",
   "toolbarContentSection": "pf-v6-c-toolbar__content-section",
   "toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"