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

package/css/components/Sidebar/sidebar.css

@@ -1,26 +1,52 @@
 .pf-c-sidebar {
+  --pf-c-sidebar--inset: var(--pf-global--spacer--md);
+  --pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);
+  --pf-c-sidebar__panel--PaddingTop: 0;
+  --pf-c-sidebar__panel--PaddingRight: 0;
+  --pf-c-sidebar__panel--PaddingBottom: 0;
+  --pf-c-sidebar__panel--PaddingLeft: 0;
+  --pf-c-sidebar__panel--Order: -1;
+  --pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--PaddingTop: 0;
+  --pf-c-sidebar__content--PaddingRight: 0;
+  --pf-c-sidebar__content--PaddingBottom: 0;
+  --pf-c-sidebar__content--PaddingLeft: 0;
+  --pf-c-sidebar__content--Order: 1;
+  --pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
   --pf-c-sidebar__main--FlexDirection: column;
   --pf-c-sidebar__main--md--FlexDirection: row;
   --pf-c-sidebar__main--AlignItems: stretch;
   --pf-c-sidebar__main--md--AlignItems: start;
   --pf-c-sidebar__main--child--MarginTop: 0;
-  --pf-c-sidebar__main--child--MarginLeft: 0;
-  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
-  --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
-  --pf-c-sidebar--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__main--m-border--before--Display: none;
+  --pf-c-sidebar__main--m-border--before--md--Display: block;
+  --pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
+  --pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);
+  --pf-c-sidebar--m-panel-right__panel--Order: -1;
   --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
+  --pf-c-sidebar--m-panel-right__content--md--Order: -1;
   --pf-c-sidebar--m-stack__main--FlexDirection: column;
   --pf-c-sidebar--m-stack__main--AlignItems: stretch;
   --pf-c-sidebar--m-stack__panel--Position: sticky;
   --pf-c-sidebar--m-stack__panel--Top: 0;
   --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
-  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
   --pf-c-sidebar--m-split__main--AlignItems: start;
   --pf-c-sidebar--m-split__main--FlexDirection: row;
   --pf-c-sidebar--m-split__panel--Position: static;
   --pf-c-sidebar--m-split__panel--Top: auto;
   --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
+  --pf-c-sidebar--m-split__main--m-border--before--Display: block;
   --pf-c-sidebar__panel--FlexBasis--base: auto;
   --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
   --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
@@ -34,7 +60,6 @@
   --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
   --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
   --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-sidebar__panel--Order: 0;
   --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-sidebar__panel--m-sticky--Top: 0;
@@ -44,60 +69,50 @@
 @media (min-width: 768px) {
   .pf-c-sidebar {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
+    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
+    --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display);
     --pf-c-sidebar__panel--BoxShadow: none;
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
-    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
   }
 }
 @media (min-width: 1200px) {
   .pf-c-sidebar {
-    --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
+    --pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
   }
 }
-.pf-c-sidebar.pf-m-gutter {
-  --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-  --pf-c-sidebar__main--child--MarginLeft: 0;
-}
-.pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
-  margin-top: var(--pf-c-sidebar__main--child--MarginTop);
-  margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
-}
-@media (min-width: 768px) {
-  .pf-c-sidebar.pf-m-gutter {
-    --pf-c-sidebar__main--child--MarginTop: 0;
-    --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
-  }
+.pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main {
+  gap: var(--pf-c-sidebar--m-gutter__main--Gap);
 }
 .pf-c-sidebar.pf-m-panel-right {
   --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
+  --pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);
 }
 @media (min-width: 768px) {
   .pf-c-sidebar.pf-m-panel-right {
     --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
+    --pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
   }
 }
 .pf-c-sidebar.pf-m-stack {
   --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
   --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
-  --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-  --pf-c-sidebar__main--child--MarginLeft: 0;
   --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
   --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
   --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
   --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
+  --pf-c-sidebar__main--m-border--before--Display: none;
   --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
 }
 .pf-c-sidebar.pf-m-split {
   --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
   --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
-  --pf-c-sidebar__main--child--MarginTop: 0;
-  --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
   --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
   --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
   --pf-c-sidebar__panel--BoxShadow: none;
   --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
+  --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
   --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
 }
 
@@ -106,17 +121,31 @@
   flex-direction: var(--pf-c-sidebar__main--FlexDirection);
   align-items: var(--pf-c-sidebar__main--AlignItems);
 }
+.pf-c-sidebar__main.pf-m-border::before {
+  display: var(--pf-c-sidebar__main--m-border--before--Display);
+  flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
+  align-self: stretch;
+  content: "";
+  background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
+}
 
 .pf-c-sidebar__panel {
   position: var(--pf-c-sidebar__panel--Position);
   top: var(--pf-c-sidebar__panel--Top);
   z-index: var(--pf-c-sidebar__panel--ZIndex);
-  flex-shrink: 0;
   flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
+  flex-shrink: 0;
   order: var(--pf-c-sidebar__panel--Order);
+  padding: var(--pf-c-sidebar__panel--PaddingTop) var(--pf-c-sidebar__panel--PaddingRight) var(--pf-c-sidebar__panel--PaddingBottom) var(--pf-c-sidebar__panel--PaddingLeft);
   background-color: var(--pf-c-sidebar__panel--BackgroundColor);
   box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
 }
+.pf-c-sidebar__panel.pf-m-padding {
+  --pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
+  --pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
+  --pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
+  --pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
+}
 .pf-c-sidebar__panel.pf-m-sticky {
   --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
   --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
@@ -128,11 +157,25 @@
 
 .pf-c-sidebar__content {
   flex-grow: 1;
+  order: var(--pf-c-sidebar__content--Order);
+  padding: var(--pf-c-sidebar__content--PaddingTop) var(--pf-c-sidebar__content--PaddingRight) var(--pf-c-sidebar__content--PaddingBottom) var(--pf-c-sidebar__content--PaddingLeft);
   background-color: var(--pf-c-sidebar__content--BackgroundColor);
 }
+.pf-c-sidebar__content.pf-m-padding {
+  --pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+  --pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
+  --pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
+  --pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+}
 .pf-c-sidebar__content.pf-m-no-background {
   --pf-c-sidebar__content--BackgroundColor: transparent;
 }
+.pf-c-sidebar__content + .pf-c-sidebar__panel {
+  --pf-c-sidebar__panel--Order: 1;
+}
+:where(.pf-c-sidebar__content:first-child) {
+  --pf-c-sidebar__content--Order: -1;
+}
 
 .pf-c-sidebar.pf-m-no-background,
 .pf-c-sidebar__panel.pf-m-no-background,

package/css/components/Sidebar/sidebar.d.ts

@@ -5,6 +5,8 @@ declare const _default: {
     "panelRight": "pf-m-panel-right",
     "stack": "pf-m-stack",
     "split": "pf-m-split",
+    "border": "pf-m-border",
+    "padding": "pf-m-padding",
     "sticky": "pf-m-sticky",
     "static": "pf-m-static",
     "noBackground": "pf-m-no-background",

package/css/components/Sidebar/sidebar.js

@@ -7,6 +7,8 @@ exports.default = {
     "panelRight": "pf-m-panel-right",
     "stack": "pf-m-stack",
     "split": "pf-m-split",
+    "border": "pf-m-border",
+    "padding": "pf-m-padding",
     "sticky": "pf-m-sticky",
     "static": "pf-m-static",
     "noBackground": "pf-m-no-background",

package/css/components/Sidebar/sidebar.mjs

@@ -5,6 +5,8 @@ export default {
     "panelRight": "pf-m-panel-right",
     "stack": "pf-m-stack",
     "split": "pf-m-split",
+    "border": "pf-m-border",
+    "padding": "pf-m-padding",
     "sticky": "pf-m-sticky",
     "static": "pf-m-static",
     "noBackground": "pf-m-no-background",

package/css/components/SimpleList/simple-list.css

@@ -40,9 +40,9 @@
   border: none;
 }
 .pf-c-simple-list__item-link:hover {
-  text-decoration: none;
   --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
   --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
+  text-decoration: none;
 }
 .pf-c-simple-list__item-link:focus {
   --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);

package/css/components/Spinner/spinner.css

@@ -187,13 +187,13 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-spinner__path {
   width: 100%;
   height: 100%;
-  transform-origin: 50% 50%;
-  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
   stroke: var(--pf-c-spinner--Color);
-  stroke-linecap: round;
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
+  stroke-linecap: round;
   stroke-width: var(--pf-c-spinner--stroke-width);
+  transform-origin: 50% 50%;
+  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
 }
 
 @keyframes pf-c-spinner-animation-rotate {
@@ -213,8 +213,8 @@ svg.pf-c-spinner.pf-m-xl {
     stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
   }
   40% {
-    stroke-dashoffset: 150;
     stroke-dasharray: 220;
+    stroke-dashoffset: 150;
   }
   100% {
     stroke-dashoffset: 280;

package/css/components/Table/table-scrollable.css

@@ -1,37 +1,42 @@
 .pf-c-table {
-  --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
-  --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
-  --pf-c-table__sticky-column--Left: 0;
-  --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
-  --pf-c-table__sticky-column--Top: 0;
-  --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
-  --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
-  --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
+  --pf-c-table__sticky-cell--MinWidth--base: 12.5rem;
+  --pf-c-table__sticky-cell--MinWidth: var(--pf-c-table__sticky-cell--MinWidth--base);
+  --pf-c-table__sticky-cell--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-table__sticky-cell--Right: auto;
+  --pf-c-table__sticky-cell--Left: auto;
+  --pf-c-table__sticky-cell--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-cell--m-right--Right: 0;
+  --pf-c-table__sticky-cell--m-left--Left: 0;
+  --pf-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-c-table__sticky-cell--ZIndex) + 1);
 }
-.pf-c-table .pf-c-table__sticky-column {
+.pf-c-table .pf-c-table__sticky-cell {
+  --pf-c-table--cell--Overflow: visible;
+  --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-c-table--m-sticky-header__sticky-cell--ZIndex);
   position: sticky;
-  left: var(--pf-c-table__sticky-column--Left);
-  z-index: var(--pf-c-table__sticky-column--ZIndex);
-  min-width: var(--pf-c-table__sticky-column--MinWidth);
-  background-color: var(--pf-c-table__sticky-column--BackgroundColor);
+  right: var(--pf-c-table__sticky-cell--Right);
+  left: var(--pf-c-table__sticky-cell--Left);
+  z-index: var(--pf-c-table__sticky-cell--ZIndex);
+  min-width: var(--pf-c-table__sticky-cell--MinWidth);
+  background-color: var(--pf-c-table__sticky-cell--BackgroundColor);
   background-clip: padding-box;
 }
-.pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
-  --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
-  --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
+.pf-c-table .pf-c-table__sticky-cell.pf-m-border-right::before {
+  --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
+  --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightColor);
 }
-.pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
-  --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
-  --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
+.pf-c-table .pf-c-table__sticky-cell.pf-m-border-left::before {
+  --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
+  --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
 }
-.pf-c-table.pf-m-sticky-header {
-  --pf-c-table--cell--Overflow: visible;
+.pf-c-table .pf-c-table__sticky-cell.pf-m-right {
+  --pf-c-table__sticky-cell--Right: var(--pf-c-table__sticky-cell--m-right--Right);
 }
-.pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
-  z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
+.pf-c-table .pf-c-table__sticky-cell.pf-m-left {
+  --pf-c-table__sticky-cell--Left: var(--pf-c-table__sticky-cell--m-left--Left);
 }
 
 .pf-c-scroll-outer-wrapper {

package/css/components/Table/table-scrollable.d.ts

@@ -3,11 +3,12 @@ declare const _default: {
   "modifiers": {
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "stickyHeader": "pf-m-sticky-header"
+    "right": "pf-m-right",
+    "left": "pf-m-left"
   },
   "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
   "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
   "table": "pf-c-table",
-  "tableStickyColumn": "pf-c-table__sticky-column"
+  "tableStickyCell": "pf-c-table__sticky-cell"
 };
 export default _default;

package/css/components/Table/table-scrollable.js

@@ -5,10 +5,11 @@ exports.default = {
   "modifiers": {
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "stickyHeader": "pf-m-sticky-header"
+    "right": "pf-m-right",
+    "left": "pf-m-left"
   },
   "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
   "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
   "table": "pf-c-table",
-  "tableStickyColumn": "pf-c-table__sticky-column"
+  "tableStickyCell": "pf-c-table__sticky-cell"
 };

package/css/components/Table/table-scrollable.mjs

@@ -3,10 +3,11 @@ export default {
   "modifiers": {
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "stickyHeader": "pf-m-sticky-header"
+    "right": "pf-m-right",
+    "left": "pf-m-left"
   },
   "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
   "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
   "table": "pf-c-table",
-  "tableStickyColumn": "pf-c-table__sticky-column"
+  "tableStickyCell": "pf-c-table__sticky-cell"
 };

package/css/components/Table/table.css

@@ -261,6 +261,7 @@
   --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-table__subhead--Color: var(--pf-global--Color--200);
   --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+  --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-global--ZIndex--xs);
   color: var(--pf-global--Color--100);
   width: 100%;
   background-color: var(--pf-c-table--BackgroundColor);
@@ -289,7 +290,7 @@
   border-bottom: 0;
 }
 .pf-c-table.pf-m-sticky-header > thead > tr > * {
-  z-index: var(--pf-global--ZIndex--xs);
+  z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex);
 }
 .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
   position: sticky;
@@ -660,9 +661,9 @@
 .pf-c-table__button-content,
 .pf-c-table__column-help {
   display: grid;
+  grid-template-columns: auto max-content;
   align-items: end;
   justify-content: start;
-  grid-template-columns: auto max-content;
 }
 .pf-c-table__button-content .pf-c-table__text,
 .pf-c-table__column-help .pf-c-table__text {

package/css/components/TextInputGroup/text-input-group.css

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

package/css/components/Tile/tile.css

@@ -42,11 +42,11 @@
   --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
   position: relative;
   display: inline-grid;
+  grid-template-rows: min-content;
   padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
   text-align: center;
   cursor: pointer;
   background-color: var(--pf-c-tile--BackgroundColor);
-  grid-template-rows: min-content;
   transition: var(--pf-c-tile--Transition);
   transform: translateY(var(--pf-c-tile--TranslateY));
 }

package/css/components/Timestamp/timestamp.css

@@ -17,12 +17,12 @@
   outline-offset: var(--pf-c-timestamp--OutlineOffset);
 }
 .pf-c-timestamp.pf-m-help-text {
-  cursor: pointer;
   text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
-  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
   text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
-  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
   text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  cursor: pointer;
 }
 .pf-c-timestamp.pf-m-help-text:hover {
   --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);

package/css/components/Toolbar/toolbar.css

@@ -49,26 +49,30 @@
 
 .pf-c-toolbar {
   --pf-c-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-toolbar--RowGap: var(--pf-global--spacer--lg);
+  --pf-c-toolbar--RowGap--base: var(--pf-global--spacer--lg);
+  --pf-c-toolbar--RowGap: var(--pf-c-toolbar--RowGap--base);
   --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-toolbar--item--RowGap--base: var(--pf-global--spacer--xs);
   --pf-c-toolbar__item--Display: block;
   --pf-c-toolbar__item--MinWidth--base: auto;
   --pf-c-toolbar__item--AlignSelf: auto;
   --pf-c-toolbar__group--Display: flex;
   --pf-c-toolbar__group--AlignItems: baseline;
   --pf-c-toolbar__group--AlignSelf: auto;
+  --pf-c-toolbar__group--RowGap: var(--pf-c-toolbar--item--RowGap--base);
   --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-toolbar__content--Display: flex;
+  --pf-c-toolbar__content--RowGap: var(--pf-c-toolbar--RowGap--base);
   --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-toolbar__content-section--Display: flex;
   --pf-c-toolbar__content-section--AlignItems: baseline;
+  --pf-c-toolbar__content-section--RowGap: var(--pf-c-toolbar--item--RowGap--base);
   --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
   --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-toolbar__expandable-content--Display: grid;
-  --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-toolbar--RowGap);
   --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-toolbar__content--PaddingRight);
   --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-toolbar__content--PaddingLeft);
@@ -111,8 +115,8 @@
   --pf-c-toolbar--m-full-height__item--Display: flex;
   --pf-c-toolbar--m-full-height__item--AlignItems: center;
   position: relative;
-  row-gap: var(--pf-c-toolbar--RowGap);
   display: grid;
+  row-gap: var(--pf-c-toolbar--RowGap);
   padding-top: var(--pf-c-toolbar--PaddingTop);
   padding-bottom: var(--pf-c-toolbar--PaddingBottom);
   background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -186,6 +190,7 @@
 .pf-c-toolbar__group {
   --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
+  row-gap: var(--pf-c-toolbar__group--RowGap);
   align-items: var(--pf-c-toolbar__group--AlignItems);
   align-self: var(--pf-c-toolbar__group--AlignSelf);
   margin-right: var(--pf-c-toolbar--spacer);
@@ -352,6 +357,7 @@
 .pf-c-toolbar__content {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
   position: relative;
+  row-gap: var(--pf-c-toolbar__content--RowGap);
   align-items: center;
   padding-right: var(--pf-c-toolbar__content--PaddingRight);
   padding-left: var(--pf-c-toolbar__content--PaddingLeft);
@@ -359,6 +365,7 @@
 
 .pf-c-toolbar__content-section {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
+  row-gap: var(--pf-c-toolbar__content-section--RowGap);
   align-items: var(--pf-c-toolbar__content-section--AlignItems);
   width: 100%;
 }
@@ -368,13 +375,13 @@
 
 .pf-c-toolbar__expandable-content {
   position: absolute;
-  top: 100%;
+  top: calc(100% + var(--pf-c-toolbar__content--RowGap));
   right: 0;
   left: 0;
   z-index: var(--pf-c-toolbar__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
+  padding: 0 var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
   background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
   box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
 }
@@ -405,9 +412,9 @@
 .pf-c-toolbar__group.pf-m-chip-container {
   display: flex;
   flex-wrap: wrap;
+  grid-row-gap: 0;
   align-items: baseline;
   margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
-  grid-row-gap: 0;
 }
 .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item,
 .pf-c-toolbar__group.pf-m-chip-container .pf-c-toolbar__item {

package/css/components/Wizard/wizard.css

@@ -7,27 +7,6 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-wizard__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-c-wizard__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-wizard {
   --pf-c-wizard--Height: 100%;
@@ -47,6 +26,10 @@
   --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
   --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
+  --pf-c-wizard__title-text--FontSize: var(--pf-global--FontSize--3xl);
+  --pf-c-wizard__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-wizard__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-wizard__title-text--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
   --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
@@ -230,6 +213,8 @@
   position: absolute;
   top: var(--pf-c-wizard__close--Top);
   right: var(--pf-c-wizard__close--Right);
+}
+.pf-c-wizard__header .pf-c-wizard__close button {
   font-size: var(--pf-c-wizard__close--FontSize);
 }
 
@@ -238,6 +223,13 @@
   word-wrap: break-word;
 }
 
+.pf-c-wizard__title-text {
+  font-family: var(--pf-c-wizard__title-text--FontFamily);
+  font-size: var(--pf-c-wizard__title-text--FontSize);
+  font-weight: var(--pf-c-wizard__title-text--FontWeight);
+  line-height: var(--pf-c-wizard__title-text--LineHeight);
+}
+
 .pf-c-wizard__description {
   display: none;
   padding-top: var(--pf-c-wizard__description--PaddingTop);
@@ -486,8 +478,8 @@
   position: relative;
   z-index: var(--pf-c-wizard__footer--ZIndex);
   display: flex;
-  flex-wrap: wrap;
   flex-shrink: 0;
+  flex-wrap: wrap;
   padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
   background-color: var(--pf-c-wizard__footer--BackgroundColor);
 }
@@ -514,23 +506,6 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
-:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
-}
-:where(.pf-theme-dark) .pf-c-wizard__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-wizard {
   --pf-c-wizard__header--BackgroundColor: var(--pf-global--palette--black-1000);

package/css/components/Wizard/wizard.d.ts

@@ -1,7 +1,5 @@
 import './wizard.css';
 declare const _default: {
-  "button": "pf-c-button",
-  "card": "pf-c-card",
   "drawer": "pf-c-drawer",
   "modalBox": "pf-c-modal-box",
   "modifiers": {
@@ -32,6 +30,7 @@ declare const _default: {
   "wizardNavList": "pf-c-wizard__nav-list",
   "wizardOuterWrap": "pf-c-wizard__outer-wrap",
   "wizardTitle": "pf-c-wizard__title",
+  "wizardTitleText": "pf-c-wizard__title-text",
   "wizardToggle": "pf-c-wizard__toggle",
   "wizardToggleIcon": "pf-c-wizard__toggle-icon",
   "wizardToggleList": "pf-c-wizard__toggle-list",