@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.61

package/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/components/FormControl/form-control.scss

@@ -7,10 +7,10 @@
   --#{$form-control}--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$form-control}--Resize: none;
   --#{$form-control}--OutlineOffset: -6px;
-  --#{$form-control}--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$form-control}--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
   --#{$form-control}--before--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--before--BorderStyle: solid;
-  --#{$form-control}--before--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$form-control}--before--BorderColor: var(--pf-t--global--border--color--control--default);
   --#{$form-control}--before--BorderRadius: var(--#{$form-control}--BorderRadius);
   --#{$form-control}--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--after--BorderStyle: solid;
@@ -244,8 +244,8 @@
     }
 
     > textarea {
-      outline-offset: 0;
       scrollbar-gutter: stable;
+      outline-offset: 0;
     }
 
     .#{$form-control}__utilities {

package/components/Hero/hero.css

@@ -0,0 +1,74 @@
+.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--primary--default);
+  --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --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));
+}

package/components/Hero/hero.scss

@@ -0,0 +1,86 @@
+@use '../../sass-utilities' as *;
+
+@include pf-root($hero) {
+  --#{$hero}--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --#{$hero}--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --#{$hero}--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+  --#{$hero}--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$hero}--gradient--angle: 109deg;
+  --#{$hero}--gradient--stop-1--light: transparent;
+  --#{$hero}--gradient--stop-2--light: transparent;
+  --#{$hero}--gradient--stop-3--light: transparent;
+  --#{$hero}--gradient--stop-1--dark: transparent;
+  --#{$hero}--gradient--stop-2--dark: transparent;
+  --#{$hero}--gradient--stop-3--dark: transparent;
+  --#{$hero}--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+  --#{$hero}--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --#{$hero}--BackgroundImage--light: none;
+  --#{$hero}--BackgroundImage--dark: none;
+  --#{$hero}--BackgroundRepeat: no-repeat;
+  --#{$hero}--BackgroundPosition: right center;
+  --#{$hero}--BackgroundSize: contain;
+  --#{$hero}--BorderStyle: solid;
+  --#{$hero}--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --#{$hero}--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --#{$hero}--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --#{$hero}--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --#{$hero}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$hero}--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
+  --#{$hero}--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --#{$hero}--BorderStartStartRadius: 24px;
+  --#{$hero}--BorderStartEndRadius: 72px;
+  --#{$hero}--BorderEndEndRadius: 24px;
+  --#{$hero}--BorderEndStartRadius: 72px;
+  --#{$hero}__body--Width: 800px;
+  --#{$hero}__body--MaxWidth: 80%;
+}
+
+.#{$hero} {
+  display: flex;
+  padding-block-start: var(--#{$hero}--PaddingBlockStart);
+  padding-block-end: var(--#{$hero}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$hero}--PaddingInlineStart);
+  padding-inline-end: var(--#{$hero}--PaddingInlineEnd);
+  background-image: var(--#{$hero}--BackgroundImage, var(--#{$hero}--BackgroundImage--light)),
+    linear-gradient(
+      var(--#{$hero}--gradient--angle),
+      var(--#{$hero}--gradient--stop-1, var(--#{$hero}--gradient--stop-1--light)) 0%,
+      var(--#{$hero}--gradient--stop-2, var(--#{$hero}--gradient--stop-2--light)) 50%,
+      var(--#{$hero}--gradient--stop-3, var(--#{$hero}--gradient--stop-3--light)) 100%
+    );
+  background-repeat: var(--#{$hero}--BackgroundRepeat);
+  background-position: var(--#{$hero}--BackgroundPosition);
+  background-size: var(--#{$hero}--BackgroundSize);
+  border-color: var(--#{$hero}--BorderColor);
+  border-style: var(--#{$hero}--BorderStyle);
+  border-block-start-width: var(--#{$hero}--BorderBlockStartWidth);
+  border-block-end-width: var(--#{$hero}--BorderBlockEndWidth);
+  border-inline-start-width: var(--#{$hero}--BorderInlineStartWidth);
+  border-inline-end-width: var(--#{$hero}--BorderInlineEndWidth);
+  border-start-start-radius: var(--#{$hero}--BorderStartStartRadius);
+  border-start-end-radius: var(--#{$hero}--BorderStartEndRadius);
+  border-end-start-radius: var(--#{$hero}--BorderEndStartRadius);
+  border-end-end-radius: var(--#{$hero}--BorderEndEndRadius);
+
+  :root:where(.#{$pf-prefix}theme-dark) & {
+    --#{$hero}--BackgroundImage: var(--#{$hero}--BackgroundImage--dark);
+    --#{$hero}--gradient--stop-1: var(--#{$hero}--gradient--stop-1--dark);
+    --#{$hero}--gradient--stop-2: var(--#{$hero}--gradient--stop-2--dark);
+    --#{$hero}--gradient--stop-3: var(--#{$hero}--gradient--stop-3--dark);
+  }
+
+  :root:where(.#{$pf-prefix}theme-glass) & {
+    --#{$hero}--BorderColor: var(--#{$hero}--m-glass--BorderColor);
+  
+    box-shadow: var(--#{$hero}--m-glass--BoxShadow);
+  }
+
+  &:not(.pf-m-no-glass) {
+    background-color: var(--#{$hero}--BackgroundColor);
+    backdrop-filter: var(--#{$hero}--BackdropFilter);
+  }
+}
+
+.#{$hero}__body {
+  width: min(var(--#{$hero}__body--Width), var(--#{$hero}__body--MaxWidth));
+}

package/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/components/JumpLinks/jump-links.scss

@@ -35,14 +35,19 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   --#{$jump-links}__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
 
   // before
+  --#{$jump-links}__link--before--Height: var(--#{$jump-links}__item--m-current__link--before--BorderBlockStartWidth);
+  --#{$jump-links}__link--before--Width: auto;
   --#{$jump-links}__link--before--BorderBlockStartWidth: 0;
   --#{$jump-links}__link--before--BorderInlineEndWidth: 0;
   --#{$jump-links}__link--before--BorderBlockEndWidth: 0;
   --#{$jump-links}__link--before--BorderInlineStartWidth: 0;
   --#{$jump-links}__link--before--BorderColor: transparent;
+  --#{$jump-links}__link--before--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$jump-links}__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong);
   --#{$jump-links}__item--m-current__link--before--BorderInlineStartWidth: 0;
-  --#{$jump-links}__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$jump-links}__item--m-current__link--before--BorderColor: var(--pf-t--global--color--brand--accent--default);
+  --#{$jump-links}--m-vertical__link--before--Height: auto;
+  --#{$jump-links}--m-vertical__link--before--Width: var(--#{$jump-links}__item--m-current__link--before--BorderInlineStartWidth);
   --#{$jump-links}--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0;
   --#{$jump-links}--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong);
 
@@ -65,7 +70,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   --#{$jump-links}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$jump-links}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$jump-links}__toggle-icon--Rotate: 0;
-  --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
+  --#{$jump-links}--m-expanded__toggle-icon--Rotate: -180deg;
 }
 
 .#{$jump-links} {
@@ -85,6 +90,8 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
     --#{$jump-links}__list--PaddingInlineEnd: var(--#{$jump-links}--m-vertical__list--PaddingInlineEnd);
     --#{$jump-links}__list--PaddingBlockEnd: var(--#{$jump-links}--m-vertical__list--PaddingBlockEnd);
     --#{$jump-links}__list--PaddingInlineStart: var(--#{$jump-links}--m-vertical__list--PaddingInlineStart);
+    --#{$jump-links}__link--before--Width: var(--#{$jump-links}--m-vertical__link--before--Width);
+    --#{$jump-links}__link--before--Height: var(--#{$jump-links}--m-vertical__link--before--Height);
     --#{$jump-links}__list--before--BorderBlockStartWidth: var(--#{$jump-links}--m-vertical__list--before--BorderBlockStartWidth);
     --#{$jump-links}__list--before--BorderInlineStartWidth: var(--#{$jump-links}--m-vertical__list--before--BorderInlineStartWidth);
     --#{$jump-links}__item--m-current__link--before--BorderBlockStartWidth: var(--#{$jump-links}--m-vertical__item--m-current__link--before--BorderBlockStartWidth);
@@ -95,7 +102,11 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   }
 
   @each $breakpoint, $breakpoint-value in $pf-v6-c-jump-links--m-expandable--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-expandable#{$breakpoint-name} {
@@ -170,6 +181,8 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   &::before {
     position: absolute;
     inset: 0;
+    width: var(--#{$jump-links}__link--before--Width);
+    height: var(--#{$jump-links}__link--before--Height);
     pointer-events: none;
     content: "";
     border-color: var(--#{$jump-links}__link--before--BorderColor);
@@ -178,6 +191,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
     border-block-end-width: var(--#{$jump-links}__link--before--BorderBlockEndWidth);
     border-inline-start-width: var(--#{$jump-links}__link--before--BorderInlineStartWidth);
     border-inline-end-width: var(--#{$jump-links}__link--before--BorderInlineEndWidth);
+    border-radius: var(--#{$jump-links}__link--before--BorderRadius);
   }
 }
 

package/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/components/Label/label-group.scss

@@ -163,11 +163,11 @@
   padding-inline-end: var(--#{$label-group}__textarea--PaddingInlineEnd);
   white-space: nowrap;
   resize: none;
-  border: 0;
 
   // Hide scrollbar for IE, Edge and Firefox
-  -ms-overflow-style: none;  // IE and Edge
   scrollbar-width: none;  // Firefox
+  -ms-overflow-style: none;  // IE and Edge
+  border: 0;
 
   // Hide scrollbar for Chrome, Safari and Opera
   &::-webkit-scrollbar {

package/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/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/components/Login/login.scss

@@ -37,11 +37,13 @@
   }
 
   // main
-  --#{$login}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$login}__main--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
+  --#{$login}__main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
   --#{$login}__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
   --#{$login}__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --#{$login}__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
-  --#{$login}__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$login}__main--BorderWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
+  --#{$login}__main--BorderColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--high-contrast));
+  --#{$login}__main--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
 
   @media (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$login}__main--MarginBlockEnd: 0;
@@ -165,8 +167,10 @@
   align-self: start;
   margin-block-end: var(--#{$login}__main--MarginBlockEnd);
   background-color: var(--#{$login}__main--BackgroundColor);
+  backdrop-filter: var(--#{$login}__main--BackdropFilter);
   border: var(--#{$login}__main--BorderWidth) solid var(--#{$login}__main--BorderColor);
   border-radius: var(--#{$login}__main--BorderRadius);
+  box-shadow: var(--#{$login}__main--BoxShadow);
 
   // If the first child isn't a header, then we need to put the header's top padding there
   > :first-child:not(.#{$login}__main-header) {