@patternfly/react-styles 6.5.1 → 6.6.0-prerelease.2

package/css/components/DualListSelector/dual-list-selector.css

@@ -145,9 +145,9 @@
   max-height: var(--pf-v6-c-dual-list-selector__menu--MaxHeight);
   margin-block-start: var(--pf-v6-c-dual-list-selector__menu--MarginBlockStart);
   overflow: auto;
+  outline-offset: 2px;
   border: var(--pf-v6-c-dual-list-selector__menu--BorderWidth) solid var(--pf-v6-c-dual-list-selector__menu--BorderColor);
   border-radius: var(--pf-v6-c-dual-list-selector__menu--BorderRadius);
-  outline-offset: 2px;
 }
 
 .pf-v6-c-dual-list-selector__list {
@@ -183,25 +183,25 @@
   --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
 }
 .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expandable > .pf-v6-c-dual-list-selector__list {
-  max-height: 0;
   visibility: hidden;
+  max-height: 0;
   opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
+  translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-dual-list-selector__list--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--slide), 0s, 0s;
   transition-property: opacity, translate, visibility, max-height;
-  translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
 }
 .pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
 }
 .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
-  max-height: 99999px;
   visibility: revert;
+  max-height: 99999px;
   opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
+  translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
   transition-delay: 0s;
   transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide), 0s, 0s;
-  translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
 }
 .pf-v6-c-dual-list-selector__list-item.pf-m-disabled {
   --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color);
@@ -336,10 +336,10 @@
   min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
   color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
   text-align: center;
+  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
 }
 
 .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {

package/css/components/ExpandableSection/expandable-section.css

@@ -125,8 +125,8 @@
   display: inline-block;
   min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
   color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
-  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
+  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
 }
 .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);
@@ -141,13 +141,13 @@
   display: revert;
 }
 .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) > .pf-v6-c-expandable-section__content {
+  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
   max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
   overflow: var(--pf-v6-c-expandable-section__content--Overflow, hidden);
-  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
   opacity: var(--pf-v6-c-expandable-section__content--Opacity);
+  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
   transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
   transition-property: opacity, translate, visibility, max-height;
-  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
 }

package/css/components/Form/form.css

@@ -109,7 +109,7 @@
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -137,7 +137,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -165,7 +165,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -193,7 +193,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -221,7 +221,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -249,7 +249,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -277,7 +277,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -450,14 +450,14 @@
   --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
 }
 .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
+  visibility: visible;
   max-height: 99999px;
   padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
-  visibility: visible;
   opacity: 1;
+  translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
   transition-delay: 0s;
   transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
-  translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
 }
 
 .pf-v6-c-form__field-group-toggle {
@@ -479,10 +479,10 @@
   display: inline-block;
   min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
   text-align: center;
+  transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {
   scale: -1 1;
@@ -531,15 +531,15 @@
   padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
 }
 .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
+  visibility: hidden;
   max-height: 0;
   padding-block-start: 0;
   padding-block-end: 0;
-  visibility: hidden;
   opacity: 0;
+  translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
   transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
   transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
-  translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
 }
 
 .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {

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

@@ -147,10 +147,10 @@
   padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
   color: var(--pf-v6-c-form-control--Color);
   appearance: none;
+  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
   background-color: transparent;
   border: none;
   border-radius: var(--pf-v6-c-form-control--BorderRadius);
-  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
 }
 .pf-v6-c-form-control > ::placeholder {
   color: var(--pf-v6-c-form-control--m-placeholder--Color);

package/css/components/Hero/hero.css

@@ -59,8 +59,8 @@
 :where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass {
   --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
   --pf-v6-c-hero--BackgroundColor: var(--pf-v6-c-hero--m-glass--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
   box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
 }
 :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
   --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);

package/css/components/Hint/hint.css

@@ -21,7 +21,7 @@
 .pf-v6-c-hint {
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
+  row-gap: var(--pf-v6-c-hint--GridRowGap);
   padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);

package/css/components/InputGroup/input-group.css

@@ -55,20 +55,20 @@
   transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
 }
 .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
+  visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
   flex-grow: 1;
   max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
-  visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
   opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
+  transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
+  scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
   transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
   transition-property: opacity, scale, visibility, max-width;
-  transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
-  scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
 }
 .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
-  max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
   visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
+  max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
   opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
   transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
@@ -76,8 +76,8 @@
   transition-property: opacity, visibility, max-width;
 }
 .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
-  max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
   visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
+  max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
   opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
   transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);

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

@@ -251,8 +251,8 @@
 .pf-v6-c-jump-links__toggle-icon {
   display: inline-block;
   color: var(--pf-v6-c-jump-links__toggle-icon--Color);
+  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
   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));
 }

package/css/components/Label/label.css

@@ -208,9 +208,9 @@
   font-size: var(--pf-v6-c-label--FontSize);
   white-space: nowrap;
   background: transparent;
-  isolation: isolate;
   border: 0;
   border-radius: var(--pf-v6-c-label--BorderRadius);
+  isolation: isolate;
 }
 .pf-v6-c-label.pf-m-blue {
   --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);

package/css/components/Login/login.css

@@ -140,7 +140,7 @@
     display: grid;
     grid-template-areas: "main header" "main footer" "main .";
     grid-template-columns: var(--pf-v6-c-login__container--xl--GridTemplateColumns);
-    grid-column-gap: var(--pf-v6-c-login__container--xl--GridColumnGap);
+    column-gap: var(--pf-v6-c-login__container--xl--GridColumnGap);
     justify-content: center;
     padding-inline-start: var(--pf-v6-c-login__container--PaddingInlineStart);
     padding-inline-end: var(--pf-v6-c-login__container--PaddingInlineEnd);
@@ -166,10 +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);
+  backdrop-filter: var(--pf-v6-c-login__main--BackdropFilter);
 }
 .pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
   padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);

package/css/components/Masthead/masthead.css

@@ -3,7 +3,7 @@
   --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
   --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
-  --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
@@ -240,9 +240,9 @@
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
   background-color: var(--pf-t--global--background--color--glass--primary--default);
-  backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
   border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
   box-shadow: var(--pf-t--global--box-shadow--glass--default);
+  backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
 }
 
 .pf-v6-c-masthead__main {

package/css/components/Menu/menu.css

@@ -321,8 +321,8 @@
 }
 
 .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list {
-  overflow: hidden;
   visibility: visible;
+  overflow: hidden;
   transition: var(--pf-v6-c-menu--m-drilldown__list--Transition);
 }
 .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list {
@@ -348,8 +348,8 @@
   outline-offset: var(--pf-v6-c-menu--OutlineOffset);
 }
 .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list {
-  overflow: visible;
   visibility: hidden;
+  overflow: visible;
 }
 .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider,
 .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) {
@@ -490,10 +490,10 @@
   color: var(--pf-v6-c-menu__item--Color);
   text-align: start;
   text-decoration-line: none;
+  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
   background-color: var(--pf-v6-c-menu__item--BackgroundColor);
   border: 0;
   border-radius: var(--pf-v6-c-menu__item--BorderRadius);
-  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
   --pf-v6-hidden-visible--visible--Display: flex;
   --pf-v6-hidden-visible--hidden--Display: none;
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
@@ -587,7 +587,7 @@
 .pf-v6-c-menu__item-description {
   font-size: var(--pf-v6-c-menu__item-description--FontSize);
   color: var(--pf-v6-c-menu__item-description--Color);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-menu__item-check .pf-v6-c-check {

package/css/components/MenuToggle/menu-toggle.css

@@ -357,6 +357,9 @@
   justify-content: flex-start;
   width: 100%;
 }
+.pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
+  min-width: 1lh;
+}
 @media (min-width: 62rem) {
   .pf-v6-c-menu-toggle.pf-m-docked {
     justify-content: center;
@@ -523,10 +526,10 @@
 
 .pf-v6-c-menu-toggle__icon {
   flex-shrink: 0;
+  rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
   transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
   transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
   transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
-  rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
 }
 .pf-v6-c-menu-toggle__icon :where(picture, img) {
   vertical-align: middle;

package/css/components/ModalBox/modal-box.css

@@ -183,7 +183,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  word-break: break-word;
+  overflow-wrap: break-word;
   -webkit-overflow-scrolling: touch;
 }
 .pf-v6-c-modal-box__body:last-child {

package/css/components/Nav/nav.css

@@ -212,17 +212,17 @@
 
 .pf-v6-c-nav__subnav {
   --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
+  visibility: visible;
   max-height: 99999px;
   padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
   overflow-y: clip;
-  visibility: visible;
+  translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
   transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
   transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
   transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
-  translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
 }
 .pf-v6-c-nav__subnav[hidden] {
   --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
@@ -232,8 +232,8 @@
   --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
   --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
   display: grid;
-  max-height: 0;
   visibility: hidden;
+  max-height: 0;
   opacity: 0;
 }
 
@@ -251,10 +251,10 @@
   content: var(--pf-v6-c-nav__item--accent--content, "");
   background-color: var(--pf-v6-c-nav__item--accent--color);
   border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
+  scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
   transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
   transition-property: scale;
-  scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
 }
 .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
   margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
@@ -342,10 +342,10 @@
 
 .pf-v6-c-nav__toggle-icon {
   display: inline-block;
+  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform);
   transition-duration: var(--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
   scale: -1 1;

package/css/components/NotificationDrawer/notification-drawer.css

@@ -138,9 +138,9 @@
   padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
+  outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
   background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
   border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
-  outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
 }
 .pf-v6-c-notification-drawer__list-item::before {
   position: absolute;
@@ -197,7 +197,7 @@
 
 .pf-v6-c-notification-drawer__list-item-header-title {
   font-weight: var(--pf-v6-c-notification-drawer__list-item-header-title--FontWeight);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
   display: -webkit-box;
@@ -219,7 +219,7 @@
   grid-row: 2/3;
   grid-column: 1/2;
   margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-notification-drawer__list-item-timestamp {
@@ -250,9 +250,9 @@
   padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd);
+  outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
   background-color: var(--pf-v6-c-notification-drawer__group-toggle--BackgroundColor);
   border: none;
-  outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
 }
 
 .pf-v6-c-notification-drawer__group-toggle-title {
@@ -264,7 +264,7 @@
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
   font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
   text-align: start;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-notification-drawer__group-toggle-count {

package/css/components/Page/page.css

@@ -1,11 +1,6 @@
 .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
-  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
-  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__dock--Width: 15.625rem;
   --pf-v6-c-page__dock--desktop--Width: auto;
@@ -24,6 +19,11 @@
   --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
   --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
   --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
+  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width--base: 18.125rem;
   --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -194,20 +194,17 @@
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
-  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--BackgroundColor--glass: transparent;
   --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
-  --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
+  --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
+  --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
   --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
   --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
-  --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
+  --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
+  --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
+  --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
   --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
   --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -218,9 +215,11 @@
   --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
   --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
+  --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
+  --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
+  --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
+  --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -243,6 +242,8 @@
   --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
   --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
   --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
+  --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass);
+  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass);
 }
 @media (min-width: 75rem) {
   .pf-v6-c-page {
@@ -394,10 +395,11 @@
   inset-inline-start: 0;
   z-index: var(--pf-v6-c-page__dock--ZIndex);
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   grid-area: dock;
   width: var(--pf-v6-c-page__dock--Width);
-  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
+  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-page__dock--TransitionDuration--slide);
   translate: -100% 0;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
@@ -406,7 +408,9 @@
 
 .pf-v6-c-page__dock.pf-m-expanded {
   --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
+  visibility: visible;
   translate: 0;
+  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s 0s;
 }
 @media (min-width: 62rem) {
   .pf-v6-c-page__dock {
@@ -414,6 +418,7 @@
     --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
     position: revert;
     inset: revert;
+    visibility: revert;
     width: auto;
     translate: 0;
   }
@@ -428,9 +433,9 @@
 .pf-v6-c-page__dock-main {
   flex-grow: 1;
   background-color: var(--pf-v6-c-page__dock-main--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-page__dock-main--BackdropFilter);
   border-inline-end: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock-main--BorderInlineEndColor);
   box-shadow: var(--pf-v6-c-page__dock-main--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-page__dock-main--BackdropFilter);
 }
 .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
   border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor);
@@ -512,10 +517,10 @@
   margin-inline-start: var(--pf-v6-c-page__sidebar-main--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd);
   background-color: var(--pf-v6-c-page__sidebar-main--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
   border: var(--pf-v6-c-page__sidebar-main--BorderWidth) solid var(--pf-v6-c-page__sidebar-main--BorderColor);
   border-radius: var(--pf-v6-c-page__sidebar-main--BorderRadius);
   box-shadow: var(--pf-v6-c-page__sidebar-main--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
 }
 
 .pf-v6-c-page__sidebar-header {
@@ -881,7 +886,6 @@
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
   background: var(--pf-v6-c-page__main-container--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-page__main-container--BackdropFilter);
   border: solid var(--pf-v6-c-page__main-container--BorderColor);
   border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
   border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
@@ -889,6 +893,7 @@
   border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
   box-shadow: var(--pf-v6-c-page__main-container--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-page__main-container--BackdropFilter);
 }
 @media screen and (max-width: calc(48rem - 1px)) {
   .pf-v6-c-page__main-container {