@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/components/ExpandableSection/expandable-section.css

@@ -7,8 +7,8 @@
   --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
   --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
   --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
-  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: -180deg;
+  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: 180deg;
   --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
   --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
   --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
@@ -20,10 +20,24 @@
   --pf-v6-c-expandable-section__content--Opacity: 0;
   --pf-v6-c-expandable-section__content--TranslateY: 0;
   --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
+  --pf-v6-c-expandable-section__content--MaxHeight: 0px;
+  --pf-v6-c-expandable-section__content--Visibility: hidden;
+  --pf-v6-c-expandable-section__content--Opacity: 0;
   --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
   --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
   --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
   --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-expandable-section {
+    --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+    --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
+    --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-expandable-section {
   --pf-v6-c-expandable-section__content--MaxWidth: auto;
   --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
   --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -40,15 +54,6 @@
   --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
   --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-expandable-section {
-    --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
-    --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
-    --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
-  }
-}
 
 .pf-v6-c-expandable-section {
   display: flex;
@@ -107,9 +112,13 @@
 }
 .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
-  overflow: hidden;
+}
+
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
+  scale: -1 1;
 }
 
 .pf-v6-c-expandable-section__toggle-icon {
@@ -119,10 +128,6 @@
   transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
-  scale: -1 1;
-}
-
 .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
   --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
 }

package/components/ExpandableSection/expandable-section.scss

@@ -11,8 +11,8 @@
   --#{$expandable-section}__toggle-icon--Transition: transform var(--#{$expandable-section}__toggle-icon--TransitionDuration) var(--#{$expandable-section}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
   --#{$expandable-section}__toggle-icon--Rotate: 0;
   --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
-  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
-  --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: -180deg;
+  --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: 180deg;
   --#{$expandable-section}__content--TransitionDuration--collapse--slide: 0s;
   --#{$expandable-section}__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
   --#{$expandable-section}__content--TransitionDuration--expand--slide: 0s;
@@ -24,6 +24,9 @@
   --#{$expandable-section}__content--Opacity: 0;
   --#{$expandable-section}__content--TranslateY: 0;
   --#{$expandable-section}__content--PaddingInlineStart: 0;
+  --#{$expandable-section}__content--MaxHeight: 0px;
+  --#{$expandable-section}__content--Visibility: hidden;
+  --#{$expandable-section}__content--Opacity: 0;
   --#{$expandable-section}--m-expand-top__content--TranslateY: 0;
   --#{$expandable-section}--m-expand-bottom__content--TranslateY: 0;
   --#{$expandable-section}--m-expanded__content--Opacity: 1;
@@ -135,10 +138,10 @@
     &:not(.pf-m-expanded) .#{$expandable-section}__content {
       // stylelint-disable
       display: -webkit-box;
+      overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: var(--#{$expandable-section}--m-truncate__content--LineClamp);
       // stylelint-enable
-      overflow: hidden;
     }
   }
 }

package/components/Form/form.css

@@ -60,7 +60,7 @@
   --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
-  --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: -180deg;
   --pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-form__field-group-header--GridColumn: 1 / 3;
@@ -499,8 +499,8 @@
 
 .pf-v6-c-form__field-group-header-main {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .pf-v6-c-form__field-group-header-title {

package/components/Form/form.scss

@@ -139,7 +139,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --#{$form}__field-group-toggle-icon--Rotate: 0;
-  --#{$form}__field-group--m-expanded__toggle-icon--Rotate: 90deg;
+  --#{$form}__field-group--m-expanded__toggle-icon--Rotate: -180deg;
 
   // Field group header
   --#{$form}__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -459,8 +459,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
 .#{$form}__field-group-header-main {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .#{$form}__field-group-header-title {

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

@@ -48,7 +48,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 {
@@ -234,6 +234,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 +245,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

@@ -65,7 +65,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} {
@@ -95,7 +95,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} {

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,48 @@
   --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);
+}
+@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--primary--default);
   --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);
+}
+@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 +60,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 +99,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 +106,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);