@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/components/Pagination/pagination.css

@@ -17,7 +17,7 @@
   --pf-v6-c-pagination__total-items--Display: block;
   --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
   --pf-v6-c-pagination--m-display-full__total-items--Display: none;
-  --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
   --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
   --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -26,6 +26,12 @@
   --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
   --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
+  --pf-v6-c-pagination--m-sticky-base--BorderRadius: 0;
+  --pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
+  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
   --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -40,6 +46,15 @@
   --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
   --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
+}
+:where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
+  --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
+  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
+}
+.pf-v6-c-pagination {
   --pf-v6-c-pagination__page-menu--Display--base: block;
   --pf-v6-c-pagination__page-menu--Display: none;
   --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
@@ -74,6 +89,9 @@
   border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
   border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
 }
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
+  --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
+}
 .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
   display: var(--pf-v6-c-pagination__page-menu--Display);
 }
@@ -91,6 +109,9 @@
   background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
   box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
 }
+:where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
+  --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
+}
 .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
 .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
 .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -145,15 +166,46 @@
   --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
   --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
   --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
-  position: sticky;
   inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
+  background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
+  box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
+}
+.pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
+  position: sticky;
   z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
   padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
-  box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
+}
+.pf-v6-c-pagination.pf-m-sticky-base {
+  inset-block-start: var(--pf-v6-c-pagination--m-sticky-base--InsetBlockStart);
+  border-radius: var(--pf-v6-c-pagination--m-sticky-base--BorderRadius, 0);
+}
+.pf-v6-c-pagination.pf-m-sticky-base.pf-m-bottom {
+  --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
+  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: var(--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd);
+}
+.pf-v6-c-pagination.pf-m-sticky-base::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  content: "";
+  background-color: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
+  border-radius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
+  box-shadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
+  opacity: 0;
+  transition-timing-function: var(--pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-pagination--m-sticky-base--TransitionDuration);
+  transition-property: opacity;
+}
+.pf-v6-c-pagination.pf-m-sticky-stuck {
+  --pf-v6-c-pagination--m-sticky-base--BoxShadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
+  --pf-v6-c-pagination--m-sticky-base--BorderRadius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
+  --pf-v6-c-pagination--m-sticky-base--BackgroundColor: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
+}
+.pf-v6-c-pagination.pf-m-sticky-stuck::before {
+  opacity: 1;
 }
 .pf-v6-c-pagination.pf-m-page-insets {
   --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);

package/components/Pagination/pagination.scss

@@ -32,7 +32,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-display-full__total-items--Display: none;
 
   // top
-  --#{$pagination}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$pagination}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
   --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
   --#{$pagination}--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$pagination}--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -41,6 +41,12 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$pagination}--m-sticky--InsetBlockStart: 0;
   --#{$pagination}--m-sticky--BorderBlockEndWidth:  var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$pagination}--m-sticky-base--InsetBlockStart: 0;
+  --#{$pagination}--m-sticky-base--BorderRadius: 0;
+  --#{$pagination}--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$pagination}--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --#{$pagination}--m-sticky-stuck--BoxShadow: var(--#{$pagination}--m-sticky--BoxShadow);
+  --#{$pagination}--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
 
   // bottom
   --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -57,6 +63,14 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
   --#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$pagination}--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd: 0;
+
+  :where(:root.pf-v6-theme-glass) & {
+    --#{$pagination}--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
+    --#{$pagination}--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
+    --#{$pagination}--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+    --#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
+  }
 
   // page menu
   --#{$pagination}__page-menu--Display--base: block;
@@ -91,6 +105,11 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   border-block-start-width: var(--#{$pagination}--BorderBlockStartWidth);
   border-block-end-width: var(--#{$pagination}--BorderBlockEndWidth);
 
+  :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
+  :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
+    --#{$pagination}--m-bottom--BackgroundColor: transparent;
+  }
+
   .#{$pagination}__page-menu {
     display: var(--#{$pagination}__page-menu--Display);
   }
@@ -110,6 +129,10 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
 
+    :where(:root.pf-v6-theme-glass) &.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
+      --#{$pagination}--m-bottom--BackgroundColor: transparent;
+    }
+
     .#{$pagination}__nav-control.pf-m-first,
     .#{$pagination}__nav-control.pf-m-last,
     .#{$pagination}__nav-page-select {
@@ -168,21 +191,59 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     border: 0;
     box-shadow: none;
   }
-
+  
   &.pf-m-sticky {
     --#{$pagination}--m-bottom--InsetBlockEnd: 0;
     --#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
     --#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);
 
-    position: sticky;
     inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
+    background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
+    box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
+  }
+
+  &.pf-m-sticky,
+  &.pf-m-sticky-base {
+    position: sticky;
     z-index: var(--#{$pagination}--m-sticky--ZIndex);
     padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
     padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
     padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
     padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
-    background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
-    box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
+  }
+
+  &.pf-m-sticky-base {
+    inset-block-start: var(--#{$pagination}--m-sticky-base--InsetBlockStart);
+    border-radius: var(--#{$pagination}--m-sticky-base--BorderRadius, 0);
+
+    &.pf-m-bottom {
+      --#{$pagination}--m-sticky-base--InsetBlockStart: 0;
+      --#{$pagination}--m-bottom--InsetBlockEnd: var(--#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd);
+    }
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      content: "";
+      background-color: var(--#{$pagination}--m-sticky-stuck--BackgroundColor);
+      border-radius: var(--#{$pagination}--m-sticky-stuck--BorderRadius);
+      box-shadow: var(--#{$pagination}--m-sticky-stuck--BoxShadow);
+      opacity: 0;
+      transition-timing-function: var(--#{$pagination}--m-sticky-base--TransitionTimingFunction);
+      transition-duration: var(--#{$pagination}--m-sticky-base--TransitionDuration);
+      transition-property: opacity;
+    }
+  }
+
+  &.pf-m-sticky-stuck {
+    --#{$pagination}--m-sticky-base--BoxShadow: var(--#{$pagination}--m-sticky-stuck--BoxShadow);
+    --#{$pagination}--m-sticky-base--BorderRadius: var(--#{$pagination}--m-sticky-stuck--BorderRadius);
+    --#{$pagination}--m-sticky-base--BackgroundColor: var(--#{$pagination}--m-sticky-stuck--BackgroundColor);
+
+    &::before {
+      opacity: 1;
+    }
   }
 
   &.pf-m-page-insets {
@@ -230,7 +291,11 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 // stylelint-disable no-duplicate-selectors
 .#{$pagination} {
   @each $breakpoint, $breakpoint-value in $pf-v6-c-pagination--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-display-summary#{$breakpoint-name} {

package/components/Panel/panel.css

@@ -4,25 +4,27 @@
   --pf-v6-c-panel--MaxWidth: none;
   --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-panel--BoxShadow: none;
-  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-panel--before--BorderWidth: 0;
   --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-panel--m-no-border--before--BorderWidth: 0;
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-panel--m-raised--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main--MaxHeight: none;
   --pf-v6-c-panel__main--Overflow: visible;
-  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -31,6 +33,7 @@
   --pf-v6-c-panel__footer--BoxShadow: none;
   --pf-v6-c-panel__footer--BorderColor: transparent;
   --pf-v6-c-panel__footer--BorderWidth: 0;
+  --pf-v6-c-panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
   --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -38,6 +41,12 @@
   --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-panel--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+  --pf-v6-c-panel--m-glass--before--BorderWidth: var(--pf-t--global--border--width--glass--default);
+  --pf-v6-c-panel--m-glass--before--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --pf-v6-c-panel--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+  --pf-v6-c-panel--m-glass--BorderRadius: var(--pf-t--global--border--radius--glass--default);
+  --pf-v6-c-panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
 }
 
 .pf-v6-c-panel {
@@ -69,6 +78,7 @@
   --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
   --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
   --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-raised--before--BorderWidth);
+  --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-raised--BorderRadius);
 }
 .pf-v6-c-panel.pf-m-scrollable {
   --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
@@ -79,6 +89,33 @@
   --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
   --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
 }
+.pf-v6-c-panel.pf-m-scrollable-auto-height {
+  --pf-v6-c-panel__main--MaxHeight: 100%;
+  max-height: 100%;
+}
+:where(.pf-v6-theme-glass) .pf-v6-c-panel.pf-m-glass {
+  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
+  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
+  --pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
+  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-glass--BoxShadow);
+  --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
+  backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
+}
+.pf-v6-c-panel.pf-m-no-border {
+  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-no-border--before--BorderWidth);
+}
+.pf-v6-c-panel.pf-m-pill {
+  --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-pill--BorderRadius);
+}
+.pf-v6-c-panel.pf-m-full-height {
+  height: 100%;
+}
+
+.pf-v6-c-panel,
+.pf-v6-c-panel__main {
+  display: flex;
+  flex-direction: column;
+}
 
 .pf-v6-c-panel__header {
   padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
@@ -88,6 +125,7 @@
 }
 
 .pf-v6-c-panel__main {
+  min-height: 0;
   max-height: var(--pf-v6-c-panel__main--MaxHeight);
   overflow: var(--pf-v6-c-panel__main--Overflow);
 }

package/components/Panel/panel.scss

@@ -6,7 +6,7 @@
   --#{$panel}--MaxWidth: none;
   --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$panel}--BoxShadow: none;
-  --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--medium);
 
   // border
   --#{$panel}--before--BorderWidth: 0;
@@ -20,10 +20,14 @@
   --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --#{$panel}--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
 
+  // no border
+  --#{$panel}--m-no-border--before--BorderWidth: 0;
+
   // raised
   --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$panel}--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$panel}--m-raised--BorderRadius: var(--pf-t--global--border--radius--small);
 
   // header
   --#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -36,9 +40,9 @@
   --#{$panel}__main--Overflow: visible;
 
   // body
-  --#{$panel}__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --#{$panel}__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // footer
@@ -50,6 +54,9 @@
   --#{$panel}__footer--BorderColor: transparent;
   --#{$panel}__footer--BorderWidth: 0;
 
+  // pill
+  --#{$panel}--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
+
   // scrollable
   --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
   --#{$panel}--m-scrollable__main--Overflow: auto;
@@ -58,6 +65,14 @@
   --#{$panel}--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$panel}--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$panel}--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+
+  // glass
+  --#{$panel}--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+  --#{$panel}--m-glass--before--BorderWidth: var(--pf-t--global--border--width--glass--default);
+  --#{$panel}--m-glass--before--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --#{$panel}--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+  --#{$panel}--m-glass--BorderRadius: var(--pf-t--global--border--radius--glass--default);
+  --#{$panel}--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
 }
 
 .#{$panel} {
@@ -92,6 +107,7 @@
     --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
     --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
     --#{$panel}--before--BorderWidth: var(--#{$panel}--m-raised--before--BorderWidth);
+    --#{$panel}--BorderRadius: var(--#{$panel}--m-raised--BorderRadius);
   }
 
   &.pf-m-scrollable {
@@ -103,6 +119,42 @@
     --#{$panel}__footer--BorderColor: var(--#{$panel}--m-scrollable__footer--BorderColor);
     --#{$panel}__footer--BorderWidth: var(--#{$panel}--m-scrollable__footer--BorderWidth);
   }
+
+  &.pf-m-scrollable-auto-height {
+    --#{$panel}__main--MaxHeight: 100%;
+
+    max-height: 100%;
+  }
+
+  :where(.pf-v6-theme-glass) & {
+    &.pf-m-glass {
+      --#{$panel}--BackgroundColor: var(--#{$panel}--m-glass--BackgroundColor);
+      --#{$panel}--before--BorderWidth: var(--#{$panel}--m-glass--before--BorderWidth);
+      --#{$panel}--before--BorderColor: var(--#{$panel}--m-glass--before--BorderColor);
+      --#{$panel}--BoxShadow: var(--#{$panel}--m-glass--BoxShadow);
+      --#{$panel}--BorderRadius: var(--#{$panel}--m-glass--BorderRadius);
+
+      backdrop-filter: var(--#{$panel}--m-glass--BackdropFilter);
+    }
+  }
+
+  &.pf-m-no-border {
+    --#{$panel}--before--BorderWidth: var(--#{$panel}--m-no-border--before--BorderWidth);
+  }
+
+  &.pf-m-pill {
+    --#{$panel}--BorderRadius: var(--#{$panel}--m-pill--BorderRadius);
+  }
+
+  &.pf-m-full-height {
+    height: 100%;
+  }
+}
+
+.#{$panel},
+.#{$panel}__main {
+  display: flex;
+  flex-direction: column;
 }
 
 .#{$panel}__header {
@@ -113,6 +165,7 @@
 }
 
 .#{$panel}__main {
+  min-height: 0;
   max-height: var(--#{$panel}__main--MaxHeight);
   overflow: var(--#{$panel}__main--Overflow);
 }

package/components/Progress/progress.css

@@ -2,7 +2,7 @@
   --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
   --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
-  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
@@ -12,6 +12,7 @@
   --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
   --pf-v6-c-progress__indicator--BorderColor: transparent;
+  --pf-v6-c-progress__indicator--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
   --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
   --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -181,6 +182,7 @@
   position: absolute;
   height: var(--pf-v6-c-progress__indicator--Height);
   background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
+  border-radius: var(--pf-v6-c-progress__indicator--BorderRadius);
 }
 .pf-v6-c-progress__indicator::before {
   position: absolute;

package/components/Progress/progress.scss

@@ -7,7 +7,7 @@
   // Element variables
   --#{$progress}__bar--Height: var(--pf-t--global--spacer--md);
   --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
-  --#{$progress}__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$progress}__bar--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$progress}__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$progress}__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
@@ -17,6 +17,7 @@
   --#{$progress}__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$progress}__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
   --#{$progress}__indicator--BorderColor: transparent;
+  --#{$progress}__indicator--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$progress}__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--#{$progress}--GridGap));
 
   // Modifier variables
@@ -222,6 +223,7 @@
   position: absolute; // position absolute to bring above the semi-transparent bar overlay
   height: var(--#{$progress}__indicator--Height);
   background-color: var(--#{$progress}__indicator--BackgroundColor);
+  border-radius: var(--#{$progress}__indicator--BorderRadius);
 
   // for forced colors mode
   &::before {

package/components/ProgressStepper/progress-stepper.scss

@@ -430,7 +430,11 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 // stylelint-disable no-duplicate-selectors
 .#{$progress-stepper} {
   @each $breakpoint, $breakpoint-value in $pf-v6-c-progress-stepper--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-horizontal#{$breakpoint-name} {

package/components/Sidebar/sidebar.css

@@ -143,8 +143,8 @@
   position: var(--pf-v6-c-sidebar__panel--Position);
   inset-block-start: var(--pf-v6-c-sidebar__panel--InsetBlockStart);
   z-index: var(--pf-v6-c-sidebar__panel--ZIndex);
-  flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
   flex-shrink: 0;
+  flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
   order: var(--pf-v6-c-sidebar__panel--Order);
   padding-block-start: var(--pf-v6-c-sidebar__panel--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-sidebar__panel--PaddingBlockEnd);

package/components/Sidebar/sidebar.scss

@@ -177,8 +177,8 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   position: var(--#{$sidebar}__panel--Position);
   inset-block-start: var(--#{$sidebar}__panel--InsetBlockStart);
   z-index: var(--#{$sidebar}__panel--ZIndex);
-  flex-basis: var(--#{$sidebar}__panel--FlexBasis);
   flex-shrink: 0;
+  flex-basis: var(--#{$sidebar}__panel--FlexBasis);
   order: var(--#{$sidebar}__panel--Order);
   padding-block-start: var(--#{$sidebar}__panel--PaddingBlockStart);
   padding-block-end: var(--#{$sidebar}__panel--PaddingBlockEnd);
@@ -253,7 +253,11 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 // Responsive width modifiers
 @each $breakpoint, $breakpoint-value in $pf-v6-c-sidebar--breakpoint-map--width {
-  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+  $breakpoint-name: "";
+
+  @if $breakpoint != "base" {
+    $breakpoint-name: -on-#{$breakpoint};
+  }
 
   @include pf-v6-apply-breakpoint($breakpoint) {
     @each $width-value in $pf-v6-c-sidebar__panel--list--width {
@@ -261,7 +265,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
         @if $width-value == "default" {
           --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--FlexBasis--base);
         } @else {
-          --#{$sidebar}__panel--FlexBasis: #{percentage(math.div($width-value, 100))};
+          --#{$sidebar}__panel--FlexBasis: #{math.percentage(math.div($width-value, 100))};
         }
       }
     }

package/components/Skeleton/skeleton.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 .pf-v6-c-skeleton {
   --pf-v6-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-skeleton--Width: auto;
@@ -6,7 +5,7 @@
   --pf-v6-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
   --pf-v6-c-skeleton--before--PaddingBlockEnd: 0;
   --pf-v6-c-skeleton--before--Height: auto;
-  --pf-v6-c-skeleton--before--Content: " ";
+  --pf-v6-c-skeleton--before--Content: "\00a0";
   --pf-v6-c-skeleton--after--LinearGradientAngle: 90deg;
   --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
@@ -17,6 +16,17 @@
   --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
   --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
   --pf-v6-c-skeleton--after--AnimationDelay: .5s;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-skeleton {
+    --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
+    --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-skeleton--after--TranslateX: -100%;
+    --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
+  }
+}
+.pf-v6-c-skeleton {
   --pf-v6-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd: 100%;
   --pf-v6-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
@@ -44,15 +54,6 @@
   --pf-v6-c-skeleton--m-height-75--Height: 75%;
   --pf-v6-c-skeleton--m-height-100--Height: 100%;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-skeleton {
-    --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
-    --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
-    --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
-    --pf-v6-c-skeleton--after--TranslateX: -100%;
-    --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
-  }
-}
 
 .pf-v6-c-skeleton {
   position: relative;
@@ -69,6 +70,10 @@
   padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBlockEnd);
   content: var(--pf-v6-c-skeleton--before--Content);
 }
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
+  scale: -1 1;
+}
+
 .pf-v6-c-skeleton::after {
   position: absolute;
   inset: 0;
@@ -78,10 +83,6 @@
   transform: translate3d(var(--pf-v6-c-skeleton--after--TranslateX), 0, 0);
   animation: var(--pf-v6-c-skeleton--after--AnimationName) var(--pf-v6-c-skeleton--after--AnimationDuration) var(--pf-v6-c-skeleton--after--AnimationTimingFunction) var(--pf-v6-c-skeleton--after--AnimationDelay) var(--pf-v6-c-skeleton--after--AnimationIterationCount);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
-  scale: -1 1;
-}
-
 .pf-v6-c-skeleton.pf-m-circle {
   --pf-v6-c-skeleton--BorderRadius: var(--pf-v6-c-skeleton--m-circle--BorderRadius);
 }