@patternfly/react-styles 5.0.0-alpha.4 → 5.0.0-alpha.6

package/css/components/Page/page.css

@@ -8,7 +8,7 @@
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
 }
 
-.pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header {
+.pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__sidebar, .pf-c-page__header {
   --pf-global--Color--100: var(--pf-global--Color--light-100);
   --pf-global--Color--200: var(--pf-global--Color--light-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -17,27 +17,6 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
-}
 
 .pf-c-page__header-tools-item, .pf-c-page__header-tools-group {
   --pf-hidden-visible--hidden--Display: none;
@@ -90,6 +69,8 @@
 
 .pf-c-page {
   --pf-c-page--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
+  --pf-c-page--inset: var(--pf-global--spacer--md);
+  --pf-c-page--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-page__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-page__header--ZIndex: var(--pf-global--ZIndex--md);
   --pf-c-page__header--MinHeight: 4.75rem;
@@ -136,10 +117,10 @@
   --pf-c-page__sidebar--TranslateZ: 0;
   --pf-c-page__sidebar--m-expanded--TranslateX: 0;
   --pf-c-page__sidebar--xl--TranslateX: 0;
-  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
-  --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
+  --pf-c-page__sidebar-body--PaddingRight: 0;
+  --pf-c-page__sidebar-body--PaddingLeft: 0;
+  --pf-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-c-page--inset);
+  --pf-c-page__sidebar-body--m-page-insets--PaddingLeft: var(--pf-c-page--inset);
   --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
   --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
@@ -201,15 +182,16 @@
   --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
   display: grid;
-  height: 100%;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content 1fr;
   grid-template-areas: "header" "main";
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: 1fr;
+  height: 100%;
   background-color: var(--pf-c-page--BackgroundColor);
 }
 @media (min-width: 1200px) {
   .pf-c-page {
     --pf-c-page__header-brand--PaddingLeft: var(--pf-c-page__header-brand--xl--PaddingLeft);
+    --pf-c-page--inset: var(--pf-c-page--xl--inset);
   }
 }
 @media screen and (min-width: 1200px) {
@@ -251,8 +233,8 @@
 }
 @media (min-width: 1200px) {
   .pf-c-page {
-    grid-template-columns: max-content 1fr;
     grid-template-areas: "header header" "nav main";
+    grid-template-columns: max-content 1fr;
   }
 }
 .pf-c-page.pf-m-full-height {
@@ -263,14 +245,14 @@
 
 .pf-c-page__header,
 .pf-c-page > .pf-c-masthead {
-  grid-area: header;
   z-index: var(--pf-c-page__header--ZIndex);
+  grid-area: header;
 }
 
 .pf-c-page__header {
   color: var(--pf-global--Color--100);
-  grid-template-columns: auto auto;
   display: grid;
+  grid-template-columns: auto auto;
   align-items: center;
   min-width: 0;
   min-height: var(--pf-c-page__header--MinHeight);
@@ -318,18 +300,18 @@
 }
 
 .pf-c-page__header-nav {
+  grid-row: 2/3;
+  grid-column: 1/-1;
   align-self: stretch;
   min-width: 0;
   padding-right: var(--pf-c-page__header-nav--PaddingRight);
   padding-left: var(--pf-c-page__header-nav--PaddingLeft);
   background-color: var(--pf-c-page__header-nav--BackgroundColor);
-  grid-column: 1/-1;
-  grid-row: 2/3;
 }
 @media screen and (min-width: 1200px) {
   .pf-c-page__header-nav {
-    grid-column: 2/3;
     grid-row: 1/2;
+    grid-column: 2/3;
   }
 }
 .pf-c-page__header-nav .pf-c-nav {
@@ -395,10 +377,13 @@
 }
 
 .pf-c-page__sidebar {
+  color: var(--pf-global--Color--100);
+  z-index: var(--pf-c-page__sidebar--ZIndex);
+  display: flex;
+  flex-direction: column;
   grid-area: nav;
   grid-row-start: 2;
   grid-column-start: 1;
-  z-index: var(--pf-c-page__sidebar--ZIndex);
   width: var(--pf-c-page__sidebar--Width);
   overflow-x: hidden;
   overflow-y: auto;
@@ -427,12 +412,13 @@
 }
 
 .pf-c-page__sidebar-body {
-  padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
-  padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
+  padding-right: var(--pf-c-page__sidebar-body--PaddingRight);
+  padding-left: var(--pf-c-page__sidebar-body--PaddingLeft);
+}
+.pf-c-page__sidebar-body:last-child {
+  flex-grow: 1;
 }
 .pf-c-page__sidebar-body.pf-m-menu {
-  --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
-  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
   background-color: var(--pf-global--palette--black-900);
   border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
 }
@@ -448,6 +434,20 @@
   color: var(--pf-global--Color--100);
   width: 100%;
 }
+.pf-c-page__sidebar-body.pf-m-page-insets {
+  --pf-c-page__sidebar-body--PaddingRight: var(--pf-c-page__sidebar-body--m-page-insets--PaddingRight);
+  --pf-c-page__sidebar-body--PaddingLeft: var(--pf-c-page__sidebar-body--m-page-insets--PaddingLeft);
+}
+.pf-c-page__sidebar-body.pf-m-inset-none {
+  --pf-c-page__sidebar-body--PaddingRight: 0;
+  --pf-c-page__sidebar-body--PaddingLeft: 0;
+}
+.pf-c-page__sidebar-body.pf-m-fill {
+  flex-grow: 1;
+}
+.pf-c-page__sidebar-body.pf-m-no-fill {
+  flex-grow: 0;
+}
 
 .pf-c-page__main-nav.pf-m-limit-width,
 .pf-c-page__main-breadcrumb.pf-m-limit-width,
@@ -678,8 +678,8 @@
 
 .pf-c-page__main,
 .pf-c-page__drawer {
-  grid-area: main;
   z-index: var(--pf-c-page__main--ZIndex);
+  grid-area: main;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -963,27 +963,6 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
-:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card,
-:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card,
-:where(.pf-theme-dark) .pf-c-page__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
-}
-:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
-:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
-:where(.pf-theme-dark) .pf-c-page__header .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
-}
 
 :where(.pf-theme-dark) .pf-c-page {
   --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);

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

@@ -3,7 +3,6 @@ declare const _default: {
   "avatar": "pf-c-avatar",
   "brand": "pf-c-brand",
   "button": "pf-c-button",
-  "card": "pf-c-card",
   "contextSelector": "pf-c-context-selector",
   "drawer": "pf-c-drawer",
   "masthead": "pf-c-masthead",
@@ -28,6 +27,10 @@ declare const _default: {
     "attention": "pf-m-attention",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
+    "pageInsets": "pf-m-page-insets",
+    "insetNone": "pf-m-inset-none",
+    "fill": "pf-m-fill",
+    "noFill": "pf-m-no-fill",
     "limitWidth": "pf-m-limit-width",
     "alignCenter": "pf-m-align-center",
     "overflowScroll": "pf-m-overflow-scroll",
@@ -45,8 +48,6 @@ declare const _default: {
     "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
     "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
     "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
-    "fill": "pf-m-fill",
-    "noFill": "pf-m-no-fill",
     "light_100": "pf-m-light-100",
     "dark_100": "pf-m-dark-100",
     "dark_200": "pf-m-dark-200",

package/css/components/Page/page.js

@@ -5,7 +5,6 @@ exports.default = {
   "avatar": "pf-c-avatar",
   "brand": "pf-c-brand",
   "button": "pf-c-button",
-  "card": "pf-c-card",
   "contextSelector": "pf-c-context-selector",
   "drawer": "pf-c-drawer",
   "masthead": "pf-c-masthead",
@@ -30,6 +29,10 @@ exports.default = {
     "attention": "pf-m-attention",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
+    "pageInsets": "pf-m-page-insets",
+    "insetNone": "pf-m-inset-none",
+    "fill": "pf-m-fill",
+    "noFill": "pf-m-no-fill",
     "limitWidth": "pf-m-limit-width",
     "alignCenter": "pf-m-align-center",
     "overflowScroll": "pf-m-overflow-scroll",
@@ -47,8 +50,6 @@ exports.default = {
     "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
     "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
     "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
-    "fill": "pf-m-fill",
-    "noFill": "pf-m-no-fill",
     "light_100": "pf-m-light-100",
     "dark_100": "pf-m-dark-100",
     "dark_200": "pf-m-dark-200",

package/css/components/Page/page.mjs

@@ -3,7 +3,6 @@ export default {
   "avatar": "pf-c-avatar",
   "brand": "pf-c-brand",
   "button": "pf-c-button",
-  "card": "pf-c-card",
   "contextSelector": "pf-c-context-selector",
   "drawer": "pf-c-drawer",
   "masthead": "pf-c-masthead",
@@ -28,6 +27,10 @@ export default {
     "attention": "pf-m-attention",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
+    "pageInsets": "pf-m-page-insets",
+    "insetNone": "pf-m-inset-none",
+    "fill": "pf-m-fill",
+    "noFill": "pf-m-no-fill",
     "limitWidth": "pf-m-limit-width",
     "alignCenter": "pf-m-align-center",
     "overflowScroll": "pf-m-overflow-scroll",
@@ -45,8 +48,6 @@ export default {
     "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
     "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
     "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
-    "fill": "pf-m-fill",
-    "noFill": "pf-m-no-fill",
     "light_100": "pf-m-light-100",
     "dark_100": "pf-m-dark-100",
     "dark_200": "pf-m-dark-200",

package/css/components/Popover/popover.css

@@ -7,12 +7,12 @@
   --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
   --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
   --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
-  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
   --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
   --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
+  --pf-c-popover--m-custom__title-text--Color: var(--pf-global--custom-color--300);
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
@@ -43,6 +43,7 @@
   --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
   --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
+  --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
   position: relative;
   min-width: var(--pf-c-popover--MinWidth);
@@ -106,9 +107,9 @@
   --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
   --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
 }
-.pf-c-popover.pf-m-default {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
+.pf-c-popover.pf-m-custom {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-custom__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-custom__title-text--Color);
 }
 .pf-c-popover.pf-m-info {
   --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
@@ -150,6 +151,7 @@
 
 .pf-c-popover__title-icon {
   margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  font-size: var(--pf-c-popover__title-icon--FontSize);
   color: var(--pf-c-popover__title-icon--Color);
 }
 
@@ -171,7 +173,7 @@
 :where(.pf-theme-dark) .pf-c-popover {
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-default__title-text--Color: var(--pf-global--custom-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
 }

package/css/components/Popover/popover.d.ts

@@ -18,7 +18,7 @@ declare const _default: {
     "danger": "pf-m-danger",
     "warning": "pf-m-warning",
     "success": "pf-m-success",
-    "default": "pf-m-default",
+    "custom": "pf-m-custom",
     "info": "pf-m-info"
   },
   "popover": "pf-c-popover",

package/css/components/Popover/popover.js

@@ -20,7 +20,7 @@ exports.default = {
     "danger": "pf-m-danger",
     "warning": "pf-m-warning",
     "success": "pf-m-success",
-    "default": "pf-m-default",
+    "custom": "pf-m-custom",
     "info": "pf-m-info"
   },
   "popover": "pf-c-popover",

package/css/components/Popover/popover.mjs

@@ -18,7 +18,7 @@ export default {
     "danger": "pf-m-danger",
     "warning": "pf-m-warning",
     "success": "pf-m-success",
-    "default": "pf-m-default",
+    "custom": "pf-m-custom",
     "info": "pf-m-info"
   },
   "popover": "pf-c-popover",

package/css/components/Progress/progress.css

@@ -27,10 +27,10 @@
   --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
   display: grid;
-  align-items: end;
-  grid-gap: var(--pf-c-progress--GridGap);
-  grid-template-columns: auto auto;
   grid-template-rows: 1fr auto;
+  grid-template-columns: auto auto;
+  grid-gap: var(--pf-c-progress--GridGap);
+  align-items: end;
 }
 .pf-c-progress.pf-m-sm {
   --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
@@ -59,8 +59,8 @@
   grid-column: 1/3;
 }
 .pf-c-progress.pf-m-outside .pf-c-progress__status {
-  grid-column: 2/3;
   grid-row: 2/3;
+  grid-column: 2/3;
   align-self: center;
 }
 .pf-c-progress.pf-m-outside .pf-c-progress__measure {
@@ -108,8 +108,8 @@
 }
 
 .pf-c-progress__description {
-  word-break: break-word;
   grid-column: 1/2;
+  word-break: break-word;
 }
 .pf-c-progress__description.pf-m-truncate {
   overflow: hidden;
@@ -119,13 +119,13 @@
 
 .pf-c-progress__status {
   display: flex;
+  grid-row: 1/2;
+  grid-column: 2/3;
+  gap: var(--pf-c-progress__status--Gap);
   align-items: flex-start;
   justify-content: flex-end;
-  grid-column: 2/3;
-  grid-row: 1/2;
   text-align: right;
   word-break: break-word;
-  gap: var(--pf-c-progress__status--Gap);
 }
 
 .pf-c-progress__status-icon {
@@ -134,8 +134,8 @@
 
 .pf-c-progress__bar {
   position: relative;
-  grid-column: 1/3;
   grid-row: 2/3;
+  grid-column: 1/3;
   align-self: center;
   height: var(--pf-c-progress__bar--Height);
   background-color: var(--pf-c-progress__bar--BackgroundColor);
@@ -160,8 +160,8 @@
 }
 
 .pf-c-progress__helper-text {
-  grid-column: 1/3;
   grid-row: 3/4;
+  grid-column: 1/3;
   margin-top: var(--pf-c-progress__helper-text--MarginTop);
 }
 

package/css/components/ProgressStepper/progress-stepper.css

@@ -114,10 +114,10 @@
   --pf-c-progress-stepper--m-center__step-main--before--Content: "";
   position: relative;
   display: grid;
-  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
-  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);
+  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-auto-columns: 1fr;
+  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
 }
 @media screen and (min-width: 768px) {
   .pf-c-progress-stepper {
@@ -184,8 +184,8 @@
   grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
 }
 .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-connector {
-  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
   grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
+  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
   padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
 }
 .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-main {
@@ -302,11 +302,11 @@
 }
 .pf-c-progress-stepper__step-title.pf-m-help-text {
   text-decoration: underline;
-  cursor: pointer;
+  text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
   text-decoration-style: dashed;
   text-decoration-color: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor);
-  text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
   text-underline-offset: var(--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
+  cursor: pointer;
 }
 .pf-c-progress-stepper__step-title.pf-m-help-text:hover {
   --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step-title--m-help-text--hover--Color);

package/css/components/SearchInput/search-input.css

@@ -57,9 +57,9 @@
 
 .pf-c-search-input__text {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "text-input";
   flex: 1;
+  grid-template-areas: "text-input";
+  grid-template-columns: 1fr;
 }
 .pf-c-search-input__text::before, .pf-c-search-input__text::after {
   position: absolute;

package/css/components/Select/select.css

@@ -356,8 +356,8 @@
 .pf-c-select__toggle-typeahead {
   flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
   flex-grow: 1;
-  min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
   flex-shrink: 0;
+  min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
 }
 .pf-c-select__toggle-typeahead.pf-c-form-control {
   background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);