@patternfly/react-styles 6.5.0-prerelease.2 → 6.5.0-prerelease.20

package/css/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/css/components/Panel/panel.d.ts

@@ -4,12 +4,18 @@ declare const _default: {
     "bordered": "pf-m-bordered",
     "secondary": "pf-m-secondary",
     "raised": "pf-m-raised",
-    "scrollable": "pf-m-scrollable"
+    "scrollable": "pf-m-scrollable",
+    "scrollableAutoHeight": "pf-m-scrollable-auto-height",
+    "glass": "pf-m-glass",
+    "noBorder": "pf-m-no-border",
+    "pill": "pf-m-pill",
+    "fullHeight": "pf-m-full-height"
   },
   "panel": "pf-v6-c-panel",
   "panelFooter": "pf-v6-c-panel__footer",
   "panelHeader": "pf-v6-c-panel__header",
   "panelMain": "pf-v6-c-panel__main",
-  "panelMainBody": "pf-v6-c-panel__main-body"
+  "panelMainBody": "pf-v6-c-panel__main-body",
+  "themeGlass": "pf-v6-theme-glass"
 };
 export default _default;

package/css/components/Panel/panel.js

@@ -6,11 +6,17 @@ exports.default = {
     "bordered": "pf-m-bordered",
     "secondary": "pf-m-secondary",
     "raised": "pf-m-raised",
-    "scrollable": "pf-m-scrollable"
+    "scrollable": "pf-m-scrollable",
+    "scrollableAutoHeight": "pf-m-scrollable-auto-height",
+    "glass": "pf-m-glass",
+    "noBorder": "pf-m-no-border",
+    "pill": "pf-m-pill",
+    "fullHeight": "pf-m-full-height"
   },
   "panel": "pf-v6-c-panel",
   "panelFooter": "pf-v6-c-panel__footer",
   "panelHeader": "pf-v6-c-panel__header",
   "panelMain": "pf-v6-c-panel__main",
-  "panelMainBody": "pf-v6-c-panel__main-body"
+  "panelMainBody": "pf-v6-c-panel__main-body",
+  "themeGlass": "pf-v6-theme-glass"
 };

package/css/components/Panel/panel.mjs

@@ -4,11 +4,17 @@ export default {
     "bordered": "pf-m-bordered",
     "secondary": "pf-m-secondary",
     "raised": "pf-m-raised",
-    "scrollable": "pf-m-scrollable"
+    "scrollable": "pf-m-scrollable",
+    "scrollableAutoHeight": "pf-m-scrollable-auto-height",
+    "glass": "pf-m-glass",
+    "noBorder": "pf-m-no-border",
+    "pill": "pf-m-pill",
+    "fullHeight": "pf-m-full-height"
   },
   "panel": "pf-v6-c-panel",
   "panelFooter": "pf-v6-c-panel__footer",
   "panelHeader": "pf-v6-c-panel__header",
   "panelMain": "pf-v6-c-panel__main",
-  "panelMainBody": "pf-v6-c-panel__main-body"
+  "panelMainBody": "pf-v6-c-panel__main-body",
+  "themeGlass": "pf-v6-theme-glass"
 };

package/css/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/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

@@ -25,7 +25,7 @@
   --pf-v6-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-switch__toggle--Height: calc(var(--pf-v6-c-switch--FontSize) * var(--pf-v6-c-switch--LineHeight));
   --pf-v6-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
@@ -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-grid.css

@@ -367,7 +367,7 @@
   --pf-v6-c-table--cell--Width: auto;
 }
 
-@media screen and (max-width: calc(48rem - 1px)) {
+@container pf-v6-contain-table (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -645,15 +645,13 @@
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -679,7 +677,7 @@
   }
 }
 
-@media screen and (max-width: calc(62rem - 1px)) {
+@container pf-v6-contain-table (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -957,15 +955,13 @@
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -991,7 +987,7 @@
   }
 }
 
-@media screen and (max-width: calc(75rem - 1px)) {
+@container pf-v6-contain-table (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -1269,15 +1265,13 @@
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -1303,7 +1297,7 @@
   }
 }
 
-@media screen and (max-width: calc(90.625rem - 1px)) {
+@container pf-v6-contain-table (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -1581,15 +1575,13 @@
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
     text-align: end;
   }
-}
-@media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
-  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    margin-inline-start: 0;
+  @media screen and (max-width: 36rem) {
+    .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
+      grid-row-start: 1;
+      grid-column-start: 2;
+      margin-inline-start: 0;
+    }
   }
-}
-@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;

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);
 }