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

package/css/components/Page/page.css

@@ -8,9 +8,13 @@
   --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
   --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__sidebar--BoxShadow: none;
-  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
-  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
+  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-page__sidebar--TranslateX: -100%;
+  --pf-v6-c-page__sidebar--Opacity: 0;
+  --pf-v6-c-page__sidebar--m-expanded--Opacity: 1;
+  --pf-v6-c-page__sidebar--xl--Opacity: 1;
   --pf-v6-c-page__sidebar--TranslateZ: 0;
   --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
   --pf-v6-c-page__sidebar--xl--TranslateX: 0;
@@ -88,9 +92,17 @@
   --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
 }
+@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);
   }
 }
 
@@ -111,6 +123,51 @@
     grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
   }
 }
+.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);
+  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+  --pf-v6-c-button__icon--TransitionDelay: 0s;
+  --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+}
+.pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger: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);
+  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+  --pf-v6-c-button__icon--TransitionDelay: 0s;
+  --pf-v6-c-button__icon--ScaleX: 1;
+  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+  --pf-v6-c-button--hover__icon--ScaleX: 1;
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
+    --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+    --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+  }
+  .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);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button__icon--ScaleX: 1;
+    --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+    --pf-v6-c-button--hover__icon--ScaleX: 1;
+  }
+  .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .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);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+    --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+    --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+  }
+}
 
 .pf-v6-c-page > .pf-v6-c-masthead {
   z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
@@ -139,7 +196,8 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
-  transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
+  opacity: var(--pf-v6-c-page__sidebar--Opacity);
+  transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
   transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {
@@ -148,6 +206,7 @@
 
 .pf-v6-c-page__sidebar.pf-m-expanded {
   --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
+  --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--m-expanded--Opacity);
   box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
 }
 @media screen and (min-width: 75rem) {

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

@@ -1,8 +1,11 @@
 import './page.css';
 declare const _default: {
+  "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "masthead": "pf-v6-c-masthead",
+  "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {
+    "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
     "pageInsets": "pf-m-page-insets",

package/css/components/Page/page.js

@@ -2,9 +2,12 @@
 exports.__esModule = true;
 require('./page.css');
 exports.default = {
+  "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "masthead": "pf-v6-c-masthead",
+  "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {
+    "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
     "pageInsets": "pf-m-page-insets",

package/css/components/Page/page.mjs

@@ -1,8 +1,11 @@
 import './page.css';
 export default {
+  "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "masthead": "pf-v6-c-masthead",
+  "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {
+    "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
     "pageInsets": "pf-m-page-insets",

package/css/components/Progress/progress.css

@@ -106,6 +106,22 @@
   --pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
   --pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
+    translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
+    animation-name: pf-v6-global-danger-jiggle-motion;
+    animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
+  --pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+  animation-name: pf-v6-global-fade-in;
+  animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
+}
 
 .pf-v6-c-progress__description {
   grid-column: 1/2;

package/css/components/Skeleton/skeleton.css

@@ -11,8 +11,8 @@
   --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--after--TranslateX: 0;
+  --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
   --pf-v6-c-skeleton--after--AnimationDuration: 3s;
   --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
   --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -44,6 +44,15 @@
   --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;
@@ -163,4 +172,15 @@
   100% {
     transform: translateX(100%);
   }
+}
+@keyframes pf-v6-c-skeleton-loading-reduced-motion {
+  0% {
+    opacity: 0.25;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
 }

package/css/components/Spinner/spinner.css

@@ -8,6 +8,7 @@
   --pf-v6-c-spinner--StrokeWidth: 10;
   --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
   --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
+  --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
   --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
   --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
   --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -24,6 +25,10 @@
 .pf-v6-c-spinner.pf-m-inline {
   --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
 }
+.pf-v6-c-spinner.pf-m-xs {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
+  --pf-v6-c-spinner--StrokeWidth: 15;
+}
 .pf-v6-c-spinner.pf-m-sm {
   --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
 }

package/css/components/Spinner/spinner.d.ts

@@ -2,6 +2,7 @@ import './spinner.css';
 declare const _default: {
   "modifiers": {
     "inline": "pf-m-inline",
+    "xs": "pf-m-xs",
     "sm": "pf-m-sm",
     "md": "pf-m-md",
     "lg": "pf-m-lg",

package/css/components/Spinner/spinner.js

@@ -4,6 +4,7 @@ require('./spinner.css');
 exports.default = {
   "modifiers": {
     "inline": "pf-m-inline",
+    "xs": "pf-m-xs",
     "sm": "pf-m-sm",
     "md": "pf-m-md",
     "lg": "pf-m-lg",

package/css/components/Spinner/spinner.mjs

@@ -2,6 +2,7 @@ import './spinner.css';
 export default {
   "modifiers": {
     "inline": "pf-m-inline",
+    "xs": "pf-m-xs",
     "sm": "pf-m-sm",
     "md": "pf-m-md",
     "lg": "pf-m-lg",