@patternfly/react-styles 6.5.0-prerelease.1 → 6.5.0-prerelease.11

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

@@ -191,9 +191,9 @@
 }
 .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
-  overflow: hidden;
 }
 
 .pf-v6-c-notification-drawer__list-item-action {
@@ -247,9 +247,9 @@
 
 .pf-v6-c-notification-drawer__group-toggle-title {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
-  overflow: hidden;
   flex: 1;
   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);
@@ -262,15 +262,15 @@
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-notification-drawer__group-toggle-icon {
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
   color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
-  scale: -1 1;
-}
-
 .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
 }

package/css/components/Page/page.css

@@ -2,6 +2,7 @@
   --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--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
+  --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
   --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);
@@ -24,6 +25,15 @@
   --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
   --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__sidebar--Opacity: 1;
+    --pf-v6-c-page__sidebar--TransitionProperty: transform;
+    --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+}
+.pf-v6-c-page {
   --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -39,6 +49,15 @@
   --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
+}
+@media screen and (min-width: 75rem) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
+    --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
+    --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
+  }
+}
+.pf-v6-c-page {
   --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page__main-container--GridArea: main;
   --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
@@ -61,6 +80,17 @@
   --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
   --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
   --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
+}
+@media screen and (max-width: calc(48rem - 1px)) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
+    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
+    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
+    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
+    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
+  }
+}
+.pf-v6-c-page {
   --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -109,29 +139,9 @@
   --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);
-}
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-page {
-    --pf-v6-c-page__sidebar--Opacity: 1;
-    --pf-v6-c-page__sidebar--TransitionProperty: transform;
-    --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
-  }
-}
-@media screen and (min-width: 75rem) {
-  .pf-v6-c-page {
-    --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
-    --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
-    --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
-  }
-}
-@media screen and (max-width: calc(48rem - 1px)) {
-  .pf-v6-c-page {
-    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
-    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
-    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
-    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
-    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
-  }
+  --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 {
@@ -151,6 +161,16 @@
     grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
   }
 }
+.pf-v6-c-page.pf-m-dock {
+  --pf-v6-c-page--masthead--main-container--GridArea: main;
+  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
+  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
+  --pf-v6-c-page__main-container--MarginInlineStart: 0;
+  grid-template-areas: "dock main";
+  grid-template-rows: auto;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
+}
 .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
   --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
   --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -197,15 +217,20 @@
   }
 }
 
-.pf-v6-c-page > .pf-v6-c-masthead {
-  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
-  grid-area: header;
-}
 @media (min-width: 75rem) {
   .pf-v6-c-page > .pf-v6-c-masthead {
     --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
   }
 }
+.pf-v6-c-page > .pf-v6-c-masthead {
+  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
+  grid-area: header;
+}
+
+.pf-v6-c-page__dock {
+  z-index: var(--pf-v6-c-page__dock--ZIndex);
+  grid-area: dock;
+}
 
 .pf-v6-c-page__sidebar {
   z-index: var(--pf-v6-c-page__sidebar--ZIndex);
@@ -317,8 +342,8 @@
 .pf-v6-c-page__main-group,
 .pf-v6-c-page__main-subnav {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
 }
 .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll,
 .pf-v6-c-page__main-tabs.pf-m-overflow-scroll,
@@ -510,6 +535,7 @@
   flex-direction: column;
   align-self: var(--pf-v6-c-page__main-container--AlignSelf);
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
+  margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
   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);
@@ -561,8 +587,8 @@
 .pf-v6-c-page__main-drawer,
 .pf-v6-c-page__main-group {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .pf-v6-c-page__main {

package/css/components/Page/page.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
   "masthead": "pf-v6-c-masthead",
   "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {
+    "dock": "pf-m-dock",
     "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
@@ -49,6 +50,7 @@ declare const _default: {
     "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
   },
   "page": "pf-v6-c-page",
+  "pageDock": "pf-v6-c-page__dock",
   "pageDrawer": "pf-v6-c-page__drawer",
   "pageMain": "pf-v6-c-page__main",
   "pageMainBody": "pf-v6-c-page__main-body",

package/css/components/Page/page.js

@@ -10,6 +10,7 @@ exports.default = {
   "masthead": "pf-v6-c-masthead",
   "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {
+    "dock": "pf-m-dock",
     "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
@@ -51,6 +52,7 @@ exports.default = {
     "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
   },
   "page": "pf-v6-c-page",
+  "pageDock": "pf-v6-c-page__dock",
   "pageDrawer": "pf-v6-c-page__drawer",
   "pageMain": "pf-v6-c-page__main",
   "pageMainBody": "pf-v6-c-page__main-body",

package/css/components/Page/page.mjs

@@ -8,6 +8,7 @@ export default {
   "masthead": "pf-v6-c-masthead",
   "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {
+    "dock": "pf-m-dock",
     "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
@@ -49,6 +50,7 @@ export default {
     "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
   },
   "page": "pf-v6-c-page",
+  "pageDock": "pf-v6-c-page__dock",
   "pageDrawer": "pf-v6-c-page__drawer",
   "pageMain": "pf-v6-c-page__main",
   "pageMainBody": "pf-v6-c-page__main-body",

package/css/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/css/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);
 }

package/css/components/Slider/slider.css

@@ -67,12 +67,14 @@
 
 .pf-v6-c-slider {
   --pf-v6-c-slider__rail-track--before--fill--direction: right;
-  display: flex;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider {
   --pf-v6-c-slider__rail-track--before--fill--direction: left;
 }
 
+.pf-v6-c-slider {
+  display: flex;
+}
 .pf-v6-c-slider.pf-m-disabled {
   --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
   --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -135,6 +137,12 @@
 
 .pf-v6-c-slider__step-tick {
   transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
+  transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-slider__step-tick {
   position: absolute;
   inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
   inset-inline-start: 0;
@@ -144,22 +152,28 @@
   border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
   border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
-  transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
-}
 
 .pf-v6-c-slider__step-label {
   transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
-  position: absolute;
-  inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
-  word-break: normal;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
   transform: translateX(calc(var(--pf-v6-c-slider__step-label--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
 }
 
+.pf-v6-c-slider__step-label {
+  position: absolute;
+  inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
+  word-break: normal;
+}
+
 .pf-v6-c-slider__thumb {
   transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
+  transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
+}
+
+.pf-v6-c-slider__thumb {
   position: absolute;
   inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
   inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
@@ -171,12 +185,14 @@
   border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
   box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
-  transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
+.pf-v6-c-slider__thumb::before {
+  transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
+  transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
 }
 
 .pf-v6-c-slider__thumb::before {
-  transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;
@@ -185,10 +201,6 @@
   content: "";
   border-radius: var(--pf-v6-c-slider__thumb--before--BorderRadius);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
-  transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
-}
-
 .pf-v6-c-slider__thumb:hover {
   --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--hover--BoxShadow);
 }
@@ -205,16 +217,18 @@
 }
 .pf-v6-c-slider__value.pf-m-floating {
   transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
+  transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
+}
+
+.pf-v6-c-slider__value.pf-m-floating {
   --pf-v6-c-slider__value--MarginInlineStart: 0;
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
   z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
-  transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
-}
-
 .pf-v6-c-slider__value .pf-v6-c-form-control {
   width: var(--pf-v6-c-slider__value--c-form-control--Width);
 }

package/css/components/Switch/switch.css

@@ -78,12 +78,14 @@
 }
 .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
   transform: translate(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX), -50%);
-  background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
   transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
 }
 
+.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
+  background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
+}
 .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
   color: var(--pf-v6-c-switch__input--not-checked__label--Color);
 }

package/css/components/Table/table-tree-view.css

@@ -67,13 +67,15 @@
 }
 .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
   transform: translateX(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX));
-  position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
-  inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
   transform: translateX(calc(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
 }
 
+.pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
+  position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
+  inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
+}
 .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
   min-width: var(--pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
 }

package/css/components/Table/table.css

@@ -87,6 +87,15 @@
   --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
   --pf-v6-c-table__expandable-row--TranslateY: 0;
   --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-table {
+    --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-table {
   --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -155,13 +164,6 @@
   --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
   --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-table {
-    --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
-  }
-}
 
 .pf-v6-c-table {
   width: 100%;
@@ -226,22 +228,6 @@
   --pf-v6-hidden-visible--hidden--Display: none;
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   display: var(--pf-v6-hidden-visible--Display);
-  position: relative;
-  width: var(--pf-v6-c-table--cell--Width);
-  min-width: var(--pf-v6-c-table--cell--MinWidth);
-  max-width: var(--pf-v6-c-table--cell--MaxWidth);
-  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
-  overflow: var(--pf-v6-c-table--cell--Overflow);
-  font-size: var(--pf-v6-c-table--cell--FontSize);
-  font-weight: var(--pf-v6-c-table--cell--FontWeight);
-  line-height: var(--pf-v6-c-table--cell--LineHeight);
-  color: var(--pf-v6-c-table--cell--Color);
-  text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
-  word-break: var(--pf-v6-c-table--cell--WordBreak);
-  white-space: var(--pf-v6-c-table--cell--WhiteSpace);
 }
 .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden {
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -286,6 +272,24 @@
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
+.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+  position: relative;
+  width: var(--pf-v6-c-table--cell--Width);
+  min-width: var(--pf-v6-c-table--cell--MinWidth);
+  max-width: var(--pf-v6-c-table--cell--MaxWidth);
+  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
+  overflow: var(--pf-v6-c-table--cell--Overflow);
+  font-size: var(--pf-v6-c-table--cell--FontSize);
+  font-weight: var(--pf-v6-c-table--cell--FontWeight);
+  line-height: var(--pf-v6-c-table--cell--LineHeight);
+  color: var(--pf-v6-c-table--cell--Color);
+  text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
+  word-break: var(--pf-v6-c-table--cell--WordBreak);
+  white-space: var(--pf-v6-c-table--cell--WhiteSpace);
+}
 .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
   padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
 }
@@ -642,16 +646,16 @@
 .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
   transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
 }
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
   transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
   transition-property: transform;
   transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
-  scale: -1 1;
-}
-
 .pf-v6-c-table__toggle svg {
   pointer-events: none;
 }