@patternfly/patternfly 6.0.0-alpha.115 → 6.0.0-alpha.117

package/components/Page/page.css

@@ -67,7 +67,7 @@
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
   --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
   --pf-v6-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-page__header--ZIndex: var(--pf-t--global--Zindex--md);
+  --pf-v6-c-page__header--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__header--MinHeight: 4.75rem;
   --pf-v6-c-page__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
@@ -92,7 +92,7 @@
   --pf-v6-c-page__header-tools-item--Display: block;
   --pf-v6-c-page__header-tools--c-button--m-selected--before--Width: auto;
   --pf-v6-c-page__header-tools--c-button--m-selected--before--Height: auto;
-  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width: 18.125rem;
   --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__sidebar--BoxShadow: none;
@@ -121,7 +121,7 @@
   --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
   --pf-v6-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
   --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
@@ -131,7 +131,7 @@
   --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
   --pf-v6-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
+  --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-section--PaddingBottom: 0;
   --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
@@ -140,14 +140,14 @@
   --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
-  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--Zindex--md);
+  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--Zindex--md);
+  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
-  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-nav--PaddingRight: 0;
@@ -158,8 +158,8 @@
   --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0;
-  --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
-  --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
+  --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
+  --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--PaddingBottom: 0;

package/components/Page/page.scss

@@ -11,7 +11,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Header
   --#{$page}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$page}__header--ZIndex: var(--pf-t--global--Zindex--md);
+  --#{$page}__header--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}__header--MinHeight: #{pf-size-prem(76px)}; // fixed height for header to ensure consistency across screen sizes.
 
   // Header brand
@@ -65,7 +65,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Sidebar
-  --#{$page}__sidebar--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
   --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__sidebar--BoxShadow: none;
@@ -105,7 +105,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Container for the main content area (grid area)
-  --#{$page}__main-container--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$page}__main-container--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
   --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$page}__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
@@ -117,7 +117,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Main section
   --#{$page}__main-section--MarginTop: var(--pf-t--global--spacer--md);
   --#{$page}__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$page}__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section - TODO, see if we can remove the need for this calc(), or possibly move it down to the property definition so a user can theme this without a calc()
+  --#{$page}__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section - TODO, see if we can remove the need for this calc(), or possibly move it down to the property definition so a user can theme this without a calc()
   --#{$page}__main-section--PaddingBottom: 0;
   --#{$page}__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
@@ -130,16 +130,16 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
 
   // Sticky
-  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--Zindex--md);
+  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$page}--section--m-sticky-bottom--ZIndex: var(--pf-t--global--Zindex--md);
+  --#{$page}--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
 
   // Shadows
   --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$page}--section--m-shadow-bottom--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$page}--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
-  --#{$page}--section--m-shadow-top--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$page}--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Main section horizontal nav
   --#{$page}__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -154,8 +154,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$page}__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$page}__main-subnav--PaddingBlockEnd: 0;
-  --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth));
-  --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth));
+  --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));
+  --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));
 
   // Main section breadcrumb
   --#{$page}__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);

package/components/Panel/panel.css

@@ -11,7 +11,7 @@
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);

package/components/Panel/panel.scss

@@ -21,7 +21,7 @@
 
   // raised
   --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --#{$panel}--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$panel}--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // header

package/components/ProgressStepper/progress-stepper.css

@@ -61,7 +61,7 @@
   --pf-v6-c-progress-stepper--m-center__step-description--MarginLeft: 0;
   --pf-v6-c-progress-stepper--GridTemplateRows: auto 1fr;
   --pf-v6-c-progress-stepper__step-connector--JustifyContent: flex-start;
-  --pf-v6-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-progress-stepper__step-icon--Width: 1.5rem;
   --pf-v6-c-progress-stepper__step-icon--Height: var(--pf-v6-c-progress-stepper__step-icon--Width);
   --pf-v6-c-progress-stepper__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);

package/components/ProgressStepper/progress-stepper.scss

@@ -139,7 +139,7 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}__step-connector--JustifyContent: flex-start;
 
   // Step icon variables
-  --#{$progress-stepper}__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$progress-stepper}__step-icon--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$progress-stepper}__step-icon--Width: #{pf-size-prem(24px)};
   --#{$progress-stepper}__step-icon--Height: var(--#{$progress-stepper}__step-icon--Width);
   --#{$progress-stepper}__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);

package/components/Select/select.css

@@ -92,7 +92,7 @@
   --pf-v6-c-select__menu--PaddingTop: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-select__menu--PaddingBottom: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-select__menu--Top: calc(100% + var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-select__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-select__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-select__menu--Width: auto;
   --pf-v6-c-select__menu--MinWidth: 100%;
   --pf-v6-c-select__menu--m-top--TranslateY: calc(-100% - var(--pf-v6-global--spacer--xs));

package/components/Select/select.scss

@@ -109,7 +109,7 @@
   --#{$select}__menu--PaddingTop: var(--#{$pf-global}--spacer--sm);
   --#{$select}__menu--PaddingBottom: var(--#{$pf-global}--spacer--sm);
   --#{$select}__menu--Top: calc(100% + var(--#{$pf-global}--spacer--xs)); // The top of the menu must be pushed down to create space between the toggle and menu
-  --#{$select}__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$select}__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$select}__menu--Width: auto;
   --#{$select}__menu--MinWidth: 100%;
   --#{$select}__menu--m-top--TranslateY: calc(-100% - var(--#{$pf-global}--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu

package/components/Sidebar/sidebar.css

@@ -59,7 +59,7 @@
   --pf-v6-c-sidebar__panel--md--FlexBasis: 15.625rem;
   --pf-v6-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
   --pf-v6-c-sidebar__panel--m-stack--FlexBasis: auto;
-  --pf-v6-c-sidebar__panel--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-sidebar__panel--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-sidebar__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-sidebar__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-sidebar__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);

package/components/Sidebar/sidebar.scss

@@ -85,7 +85,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}__panel--md--FlexBasis: #{pf-size-prem(250px)};
   --#{$sidebar}__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
   --#{$sidebar}__panel--m-stack--FlexBasis: auto;
-  --#{$sidebar}__panel--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$sidebar}__panel--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$sidebar}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$sidebar}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 

package/components/SkipToContent/skip-to-content.css

@@ -1,6 +1,6 @@
 :root {
   --pf-v6-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
-  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--Zindex--2xl);
+  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
   --pf-v6-c-skip-to-content--focus--Left: var(--pf-t--global--spacer--md);
 }
 

package/components/SkipToContent/skip-to-content.scss

@@ -2,7 +2,7 @@
 
 :root {
   --#{$skip-to-content}--Top: var(--pf-t--global--spacer--md);
-  --#{$skip-to-content}--ZIndex: var(--pf-t--global--Zindex--2xl);
+  --#{$skip-to-content}--ZIndex: var(--pf-t--global--z-index--2xl);
   --#{$skip-to-content}--focus--Left: var(--pf-t--global--spacer--md);
 }
 

package/components/Slider/slider.css

@@ -52,7 +52,7 @@
   --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
   --pf-v6-c-slider__value--m-floating--TranslateY: -100%;
   --pf-v6-c-slider__value--m-floating--Left: var(--pf-v6-c-slider--value);
-  --pf-v6-c-slider__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-slider__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-slider__actions--MarginRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-slider__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
   --pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);

package/components/Slider/slider.scss

@@ -66,7 +66,7 @@
   --#{$slider}__value--m-floating--TranslateX: -50%;
   --#{$slider}__value--m-floating--TranslateY: -100%;
   --#{$slider}__value--m-floating--Left: var(--#{$slider}--value);
-  --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
   
   // actions
   --#{$slider}__actions--MarginRight: var(--pf-t--global--spacer--sm);

package/components/Table/table-scrollable.css

@@ -2,7 +2,7 @@
 :where(.pf-v6-c-table) {
   --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
   --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
-  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-table__sticky-cell--Right: auto;
   --pf-v6-c-table__sticky-cell--Left: auto;
   --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);

package/components/Table/table-scrollable.scss

@@ -3,7 +3,7 @@
 :where(.#{$table}) {
   --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(140px)};
   --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
-  --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$table}__sticky-cell--Right: auto;
   --#{$table}__sticky-cell--Left: auto;
   --#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);

package/components/Table/table.css

@@ -177,9 +177,9 @@
   --pf-v6-c-table__nested-column-header__button--PaddingLeft: calc(var(--pf-v6-c-table__button--PaddingLeft) - var(--pf-t--global--spacer--sm));
   --pf-v6-c-table__nested-column-header__button--PaddingRight: calc(var(--pf-v6-c-table__button--PaddingRight) - var(--pf-t--global--spacer--xs));
   --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
-  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 1);
-  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 2);
+  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
+  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
 
 .pf-v6-c-table {

package/components/Table/table.scss

@@ -219,9 +219,9 @@
   --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // * Table sticky header
-  --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
-  --#{$table}--m-sticky-header--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 1);
-  --#{$table}--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 2);
+  --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
+  --#{$table}--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
+  --#{$table}--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
 
 // TODO: update grouping comments to // Table {element}

package/components/Tabs/tabs.css

@@ -34,7 +34,7 @@
   --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);

package/components/Tabs/tabs.scss

@@ -48,7 +48,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   --#{$tabs}--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$tabs}--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$tabs}--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --#{$tabs}__item--m-action--before--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$tabs}__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
 
   // Tabs link
   --#{$tabs}__link--Color: var(--pf-t--global--text--color--subtle);

package/components/ToggleGroup/toggle-group.css

@@ -10,7 +10,7 @@
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-toggle-group__button--ZIndex: auto;
   --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
@@ -24,12 +24,12 @@
   --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
   --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toggle-group--m-compact__button--PaddingTop: 0;
   --pf-v6-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group--m-compact__button--PaddingBottom: 0;

package/components/ToggleGroup/toggle-group.scss

@@ -13,7 +13,7 @@
   --#{$toggle-group}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$toggle-group}__button--ZIndex: auto;
   --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
   --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
@@ -33,14 +33,14 @@
   --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
   --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
   --#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
-  --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
 
   // disabled
   --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
   --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
-  --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Compact
   --#{$toggle-group}--m-compact__button--PaddingTop: 0;

package/components/Toolbar/toolbar.css

@@ -93,10 +93,10 @@
   --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
-  --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);

package/components/Toolbar/toolbar.scss

@@ -38,12 +38,12 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   --#{$toolbar}__content--PaddingInline: var(--#{$toolbar}--PaddingInline);
 
   // * Toolbar expandable content
-  --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$toolbar}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --#{$toolbar}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // * Toolbar sticky
-  --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$toolbar}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --#{$toolbar}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 

package/components/TreeView/tree-view.css

@@ -56,7 +56,7 @@
   --pf-v6-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-v6-c-tree-view--m-guides--guide-color--base);
   --pf-v6-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-v6-c-tree-view--m-guides__node--before--Top);
   --pf-v6-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-v6-c-tree-view--m-guides__list-item--last-child--before--Top);
-  --pf-v6-c-tree-view--m-guides__list-item--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-tree-view--m-guides__list-item--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-tree-view--m-guides__node--before--Width: 1rem;
   --pf-v6-c-tree-view--m-guides__node--before--Height: var(--pf-v6-c-tree-view--m-guides--guide-width--base);
   --pf-v6-c-tree-view--m-guides__node--before--Top: 1.125rem;

package/components/TreeView/tree-view.scss

@@ -95,7 +95,7 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
   --#{$tree-view}--m-guides__list-item--before--BackgroundColor: var(--#{$tree-view}--m-guides--guide-color--base);
   --#{$tree-view}--m-guides__list-item--last-child--before--Top: var(--#{$tree-view}--m-guides__node--before--Top);
   --#{$tree-view}--m-guides__list-item--last-child--before--Height: var(--#{$tree-view}--m-guides__list-item--last-child--before--Top);
-  --#{$tree-view}--m-guides__list-item--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$tree-view}--m-guides__list-item--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Node
   --#{$tree-view}--m-guides__node--before--Width: #{pf-size-prem(16px)};

package/components/Wizard/wizard.css

@@ -53,7 +53,7 @@
   --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
   --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-wizard__toggle--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v6-c-wizard__toggle--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v6-c-wizard__toggle--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -70,7 +70,7 @@
   --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
   --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
-  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-wizard__nav--Width: 100%;
@@ -93,7 +93,7 @@
   --pf-v6-c-wizard__main-body--PaddingBottom: var(--pf-t--global--spacer--lg);
   --pf-v6-c-wizard__main-body--PaddingLeft: var(--pf-t--global--spacer--lg);
   --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-wizard__footer--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v6-c-wizard__footer--PaddingRight: var(--pf-t--global--spacer--lg);
   --pf-v6-c-wizard__footer--PaddingBottom: var(--pf-t--global--spacer--md);

package/components/Wizard/wizard.scss

@@ -73,7 +73,7 @@
 
   // Toggle
   --#{$wizard}__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$wizard}__toggle--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$wizard}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$wizard}__toggle--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$wizard}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$wizard}__toggle--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -102,7 +102,7 @@
   --#{$wizard}__toggle--m-expanded__toggle-icon--Rotate: 180deg;
 
   // Nav
-  --#{$wizard}__nav--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --#{$wizard}__nav--Width: 100%;
@@ -142,7 +142,7 @@
 
   // Footer
   --#{$wizard}__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$wizard}__footer--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$wizard}__footer--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$wizard}__footer--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$wizard}__footer--PaddingRight: var(--pf-t--global--spacer--lg);
   --#{$wizard}__footer--PaddingBottom: var(--pf-t--global--spacer--md);

package/docs/components/TextInputGroup/examples/TextInputGroup.css

@@ -7,7 +7,7 @@
   position: absolute;
   inset-block-start: 40px;
   width: 100%;
-  z-index: var(--pf-t--global--Zindex--2xl);
+  z-index: var(--pf-t--global--z-index--2xl);
 }
 
 #ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.115",
+  "version": "6.0.0-alpha.117",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-base-no-globals-theme-dark-unversioned.css

@@ -159,12 +159,12 @@
   --pf-v6-global--spacer--form-element: 0.375rem;
   --pf-v6-global--gutter: 1rem;
   --pf-v6-global--gutter--md: 1.5rem;
-  --pf-t--global--Zindex--xs: 100;
-  --pf-t--global--Zindex--sm: 200;
-  --pf-t--global--Zindex--md: 300;
-  --pf-t--global--Zindex--lg: 400;
-  --pf-t--global--Zindex--xl: 500;
-  --pf-t--global--Zindex--2xl: 600;
+  --pf-t--global--z-index--xs: 100;
+  --pf-t--global--z-index--sm: 200;
+  --pf-t--global--z-index--md: 300;
+  --pf-t--global--z-index--lg: 400;
+  --pf-t--global--z-index--xl: 500;
+  --pf-t--global--z-index--2xl: 600;
   --pf-v6-global--breakpoint--xs: 0;
   --pf-v6-global--breakpoint--sm: 576px;
   --pf-v6-global--breakpoint--md: 768px;
@@ -227,7 +227,7 @@
   --pf-v6-global--ListStyle: disc outside;
   --pf-t--global--transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
   --pf-t--global--transition--timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --pf-t--global--transitionDuration: 250ms;
+  --pf-t--global--transition--duration: 250ms;
   --pf-v6-global--arrow--width: 0.9375rem;
   --pf-v6-global--arrow--width-lg: 1.5625rem;
   --pf-v6-global--target-size--MinWidth: 44px;
@@ -470,12 +470,12 @@ html .ws-preview {
   --pf-t--global--box-shadow--X--300: -1px;
   --pf-t--global--box-shadow--X--200: -4px;
   --pf-t--global--box-shadow--X--100: -8px;
-  --pf-t--global--Zindex--600: 600;
-  --pf-t--global--Zindex--500: 500;
-  --pf-t--global--Zindex--400: 400;
-  --pf-t--global--Zindex--300: 300;
-  --pf-t--global--Zindex--200: 200;
-  --pf-t--global--Zindex--100: 100;
+  --pf-t--global--z-index--600: 600;
+  --pf-t--global--z-index--500: 500;
+  --pf-t--global--z-index--400: 400;
+  --pf-t--global--z-index--300: 300;
+  --pf-t--global--z-index--200: 200;
+  --pf-t--global--z-index--100: 100;
   --pf-t--global--font--size--800: 36px;
   --pf-t--global--font--size--700: 28px;
   --pf-t--global--font--size--600: 22px;
@@ -609,12 +609,12 @@ html .ws-preview {
   --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
   --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
   --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
-  --pf-t--global--Zindex--2xl: 600;
-  --pf-t--global--Zindex--xl: 500;
-  --pf-t--global--Zindex--lg: 400;
-  --pf-t--global--Zindex--md: 300;
-  --pf-t--global--Zindex--sm: 200;
-  --pf-t--global--Zindex--xs: 100;
+  --pf-t--global--z-index--2xl: 600;
+  --pf-t--global--z-index--xl: 500;
+  --pf-t--global--z-index--lg: 400;
+  --pf-t--global--z-index--md: 300;
+  --pf-t--global--z-index--sm: 200;
+  --pf-t--global--z-index--xs: 100;
   --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
   --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
   --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);