@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/Table/table.scss

@@ -16,22 +16,15 @@
   --#{$table}--border-width--base: var(--pf-t--global--border--width--divider--default);
 
   // Caption
-  --#{$table}__caption--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}__caption--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}__caption--Color: var(--pf-t--global--text--color--subtle);
-  --#{$table}__caption--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$table}__caption--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$table}__caption--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$table}__caption--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$table}__caption--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$table}__caption--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
-
-  @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
-    --#{$table}__caption--PaddingRight: var(--#{$table}__caption--xl--PaddingRight);
-    --#{$table}__caption--PaddingLeft: var(--#{$table}__caption--xl--PaddingLeft);
-  }
+  --#{$table}__caption--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$table}__caption--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$table}__caption--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$table}__caption--PaddingLeft: var(--pf-t--global--spacer--lg);
 
   // Thead
-  --#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Tbody cell
@@ -42,18 +35,16 @@
   --#{$table}__tr--BoxShadow--top--base: 0 #{pf-size-prem(-3px)} #{pf-size-prem(4px)} #{pf-size-prem(-2px)} rgba(3,3,3,.08);
 
   // Th / td shared variables
-  --#{$table}--cell--Padding--base: var(--#{$pf-global}--spacer--md);
-  --#{$table}--cell--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}--cell--Padding--base: var(--pf-t--global--spacer--md);
+  --#{$table}--cell--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}--cell--FontWeight: var(--pf-t--global--font--weight--body);
   --#{$table}--cell--Color: var(--pf-t--global--text--color--regular);
   --#{$table}--cell--PaddingTop: var(--#{$table}--cell--Padding--base);
   --#{$table}--cell--PaddingRight: var(--#{$table}--cell--Padding--base);
   --#{$table}--cell--PaddingBottom: var(--#{$table}--cell--Padding--base);
   --#{$table}--cell--PaddingLeft: var(--#{$table}--cell--Padding--base);
-  --#{$table}--cell--first-last-child--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$table}--cell--first-last-child--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$table}--cell--first-last-child--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$table}--cell--first-last-child--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
+  --#{$table}--cell--first-last-child--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$table}--cell--first-last-child--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$table}__tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--#{$table}--cell--Padding--base);
 
   // Default cell variables
@@ -87,8 +78,8 @@
   // ============================================================ //
 
   // Table cell - toggle
-  --#{$table}__toggle--c-button--MarginTop: calc(#{pf-size-prem(6px)} * -1); // use var(--#{$pf-global}--spacer--form-element) at breaking change
-  --#{$table}__toggle--c-button--MarginBottom: calc(#{pf-size-prem(6px)} * -1); // use var(--#{$pf-global}--spacer--form-element) at breaking change
+  --#{$table}__toggle--c-button--MarginTop: calc(var(--#{$button}--PaddingTop) * -1);
+  --#{$table}__toggle--c-button--MarginBottom: calc(var(--#{$button}--PaddingTop) * -1);
   --#{$table}__toggle--c-button__toggle-icon--Rotate: 270deg;
   --#{$table}__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
   --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
@@ -99,35 +90,36 @@
   --#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular);
   --#{$table}__button--focus--Color: var(--pf-t--global--text--color--regular);
   --#{$table}__button--active--Color: var(--pf-t--global--text--color--regular);
-  --#{$table}__button--OutlineOffset: calc(var(--#{$pf-global}--BorderWidth--lg) * -1);
+  --#{$table}__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
 
   // Compact
   --#{$table}--m-compact__toggle--PaddingTop: 0;
   --#{$table}--m-compact__toggle--PaddingBottom: 0;
 
   // Check
-  --#{$table}__check--input--MarginTop: #{pf-size-prem(4px)};
-  --#{$table}__check--input--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}__check--input--MarginTop: #{pf-size-prem(3px)};
+  --#{$table}__thead__check--input--TranslateY: var(--#{$table}__check--input--MarginTop);
+  --#{$table}__check--input--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Favorite
   --#{$table}--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
   --#{$table}__favorite--c-button--Color: var(--pf-t--global--text--color--subtle);
-  --#{$table}__favorite--c-button--FontSize: var(--pf-t--global--font--size--body);
-  --#{$table}__favorite--c-button--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$table}__favorite--c-button--MarginRight: calc(var(--#{$pf-global}--spacer--md) * -1);
-  --#{$table}__favorite--c-button--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$table}__favorite--c-button--MarginLeft: calc(var(--#{$pf-global}--spacer--md) * -1);
-  --#{$table}__favorite--m-favorited--c-button--Color: var(--#{$pf-global}--palette--gold-400);
+  --#{$table}__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$table}__favorite--c-button--MarginTop: calc(var(--#{$button}--PaddingTop) * -1);
+  --#{$table}__favorite--c-button--MarginRight: calc(var(--#{$button}--PaddingRight) * -1);
+  --#{$table}__favorite--c-button--MarginBottom: calc(var(--#{$button}--PaddingBottom) * -1);
+  --#{$table}__favorite--c-button--MarginLeft: calc(var(--#{$button}--PaddingLeft) * -1);
+  --#{$table}__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked);
   --#{$table}__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
   --#{$table}__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
   --#{$table}__sort--m-favorite__button--focus__text--Color: var(--pf-t--global--text--color--regular);
   --#{$table}__sort--m-favorite__button--active__text--Color: var(--pf-t--global--text--color--regular);
 
   // Draggable
-  --#{$table}__draggable--c-button--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$table}__draggable--c-button--MarginRight: calc(var(--#{$pf-global}--spacer--md) * -1);
-  --#{$table}__draggable--c-button--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$table}__draggable--c-button--MarginLeft: calc(var(--#{$pf-global}--spacer--md) * -1);
+  --#{$table}__draggable--c-button--MarginTop: calc(var(--#{$button}--PaddingTop) * -1);
+  --#{$table}__draggable--c-button--MarginRight: calc(var(--#{$button}--PaddingRight) * -1);
+  --#{$table}__draggable--c-button--MarginBottom: calc(var(--#{$button}--PaddingBottom) * -1);
+  --#{$table}__draggable--c-button--MarginLeft: calc(var(--#{$button}--PaddingLeft) * -1);
 
   // Ghost row
   --#{$table}__tr--m-ghost-row--Opacity: .4;
@@ -147,30 +139,30 @@
 
   // Expandable row
   // hardcoding to match design spec
-  --#{$table}__expandable-row--Transition: var(--#{$pf-global}--Transition);
+  --#{$table}__expandable-row--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
   --#{$table}__expandable-row--MaxHeight: #{pf-size-prem(450px)};
-  --#{$table}__expandable-row-content--Transition: var(--#{$pf-global}--Transition);
-  --#{$table}__expandable-row-content--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$table}__expandable-row-content--PaddingBottom: var(--#{$pf-global}--spacer--lg);
+  --#{$table}__expandable-row-content--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
+  --#{$table}__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$table}__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--lg);
 
   // ::before border
   --#{$table}__expandable-row--after--Top: calc(var(--#{$table}--border-width--base) * -1);
   --#{$table}__expandable-row--after--Bottom: calc(var(--#{$table}--border-width--base) * -1);
-  --#{$table}__expandable-row--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
+  --#{$table}__expandable-row--after--border-width--base: var(--pf-t--global--border--width--strong);
   --#{$table}__expandable-row--after--BorderLeftWidth: 0;
   --#{$table}__expandable-row--after--BorderColor: var(--pf-t--global--border--color--active);
 
   // Icon inline
-  --#{$table}__icon-inline--MarginRight: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__icon-inline--MarginRight: var(--pf-t--global--spacer--sm);
 
   // Sort cell
   --#{$table}__sort--MinWidth: calc(6ch + var(--#{$table}--cell--PaddingRight) + var(--#{$table}--cell--PaddingLeft) + var(--#{$table}__sort-indicator--MarginLeft));
 
   // Sort button
-  --#{$table}__sort__button--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$table}__sort__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$table}__sort__button--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$table}__sort__button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__sort__button--PaddingTop: var(--pf-t--global--spacer--control--vertical);
+  --#{$table}__sort__button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$table}__sort__button--PaddingBottom: var(--pf-t--global--spacer--control--vertical);
+  --#{$table}__sort__button--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$table}__sort__button--MarginTop: calc(var(--#{$table}__sort__button--PaddingTop) * -1);
   --#{$table}__sort__button--MarginBottom: calc(var(--#{$table}__sort__button--PaddingBottom) * -1);
   --#{$table}__sort__button--MarginLeft: calc(var(--#{$table}__sort__button--PaddingLeft) * -1);
@@ -186,7 +178,7 @@
 
   // Sort indicator
   --#{$table}__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
-  --#{$table}__sort-indicator--MarginLeft: var(--#{$pf-global}--spacer--md);
+  --#{$table}__sort-indicator--MarginLeft: var(--pf-t--global--spacer--md);
   --#{$table}__sort--m-selected__sort-indicator--Color: var(--pf-t--global--border--color--active);
   --#{$table}__sort__button--hover__sort-indicator--Color: var(--pf-t--global--text--color--regular);
   --#{$table}__sort__button--active__sort-indicator--Color: var(--pf-t--global--text--color--regular);
@@ -196,12 +188,12 @@
   --#{$table}__th--m-help--MinWidth: 11ch;
 
   // Table header popover
-  --#{$table}__column-help--MarginLeft: var(--#{$pf-global}--spacer--xs);
+  --#{$table}__column-help--MarginLeft: var(--pf-t--global--spacer--xs);
   --#{$table}__column-help--TranslateY: #{pf-size-prem(2px)};
-  --#{$table}__column-help--c-button--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$table}__column-help--c-button--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$table}__column-help--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$table}__column-help--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__column-help--c-button--MarginTop: calc(var(--#{$button}--PaddingTop) * -1);
+  --#{$table}__column-help--c-button--MarginBottom: calc(var(--#{$button}--PaddingBottom) * -1);
+  --#{$table}__column-help--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$table}__column-help--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
 
   // Compound expansion toggle button
   --#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
@@ -218,28 +210,26 @@
   --#{$table}__compound-expansion-toggle__button--before--Left: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
 
   // ::before border treatment
-  --#{$table}__compound-expansion-toggle__button--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
+  --#{$table}__compound-expansion-toggle__button--after--border-width--base: var(--pf-t--global--border--width--strong);
   --#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--active);
   --#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: 0;
   --#{$table}__compound-expansion-toggle__button--after--Top: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
   --#{$table}__compound-expansion-toggle__button--after--Left: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
 
   // Compact table
-  --#{$table}--m-compact__th--PaddingTop: calc(var(--#{$pf-global}--spacer--sm) + var(--#{$pf-global}--spacer--xs));
-  --#{$table}--m-compact__th--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$table}--m-compact--cell--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$table}--m-compact--cell--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$table}--m-compact--cell--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$table}--m-compact--cell--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$table}--m-compact--cell--first-last-child--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$table}--m-compact--cell--first-last-child--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$table}--m-compact--cell--first-last-child--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$table}--m-compact--cell--first-last-child--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$table}--m-compact--FontSize: var(--pf-t--global--font--size--body);
-  --#{$table}--m-compact__expandable-row-content--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$table}--m-compact__expandable-row-content--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$table}--m-compact__expandable-row-content--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$table}--m-compact__expandable-row-content--PaddingLeft: var(--#{$pf-global}--spacer--lg);
+  --#{$table}--m-compact__th--PaddingTop: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
+  --#{$table}--m-compact__th--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$table}--m-compact--cell--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$table}--m-compact--cell--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$table}--m-compact--cell--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$table}--m-compact--cell--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$table}--m-compact--cell--first-last-child--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$table}--m-compact--cell--first-last-child--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$table}--m-compact--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$table}--m-compact__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$table}--m-compact__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$table}--m-compact__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --#{$table}--m-compact__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--lg);
 
   // Nested table
   --#{$table}--nested--first-last-child--PaddingRight: var(--#{$table}--m-compact--cell--first-last-child--PaddingLeft);
@@ -252,8 +242,7 @@
   --#{$table}__tr--m-clickable--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
   --#{$table}__tr--m-clickable--BackgroundColor: transparent;
   --#{$table}__tr--m-clickable--BoxShadow: none;
-  --#{$table}__tr--m-clickable--BorderRadius: var(--pf-t--global--border--radius--small);
-  --#{$table}__tr--m-clickable--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
+  --#{$table}__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
 
   // TODO Shadow tokens START HERE AGAIN
   --#{$table}__tr--m-clickable--hover--BoxShadow: var(--#{$table}__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
@@ -270,7 +259,7 @@
   --#{$table}__tr--m-selected--BoxShadow: var(--#{$table}__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
   --#{$table}__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --#{$table}__tr--m-selected--after--BorderLeftWidth: calc(2 * var(--#{$table}__expandable-row--after--border-width--base));
-  --#{$table}__tr--m-selected--after--BorderLeftColor: var(--#{$pf-global}--active-color--100);
+  --#{$table}__tr--m-selected--after--BorderLeftColor: var(--pf-t--global--color--brand--default);
   --#{$table}__tr--m-selected--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
   --#{$table}__tr--m-selected--hover__tr--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
   --#{$table}__tr--m-selected__tr--m-selected--hover--BoxShadow: var(--#{$table}__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
@@ -279,7 +268,7 @@
   --#{$table}__tbody--m-clickable--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
   --#{$table}__tbody--m-clickable--BoxShadow: none;
   --#{$table}__tbody--m-clickable--BackgroundColor: transparent;
-  --#{$table}__tbody--m-clickable--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
+  --#{$table}__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --#{$table}__tbody--m-clickable--hover--BoxShadow: var(--#{$table}__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
   --#{$table}__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$table}__tbody--m-clickable--focus--BoxShadow: var(--#{$table}__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
@@ -293,7 +282,7 @@
   --#{$table}__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$table}__tbody--m-selected--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
   --#{$table}__tbody--m-selected--BoxShadow: var(--#{$table}__tbody--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$table}__tbody--m-selected--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
+  --#{$table}__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --#{$table}__tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--#{$table}__expandable-row--after--border-width--base));
   --#{$table}__tbody--m-selected--after--BorderLeftColor: var(--pf-t--global--border--color--active);
   --#{$table}__tbody--m-selected--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -302,8 +291,8 @@
 
   // Nested column header
   --#{$table}__thead--m-nested-column-header--button--OutlineOffset: #{pf-size-prem(-3px)};
-  --#{$table}__thead--m-nested-column-header__tr--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$table}__thead--m-nested-column-header__tr--PaddingBottom: var(--#{$pf-global}--spacer--xs);
+  --#{$table}__thead--m-nested-column-header__tr--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$table}__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--xs);
 
   // Subhead
   --#{$table}__subhead--Color: var(--pf-t--global--text--color--subtle);
@@ -312,14 +301,7 @@
   --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   // Sticky
-  --#{$table}--m-sticky-header--cell--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$table}--cell--first-last-child--PaddingRight: var(--#{$table}--cell--first-last-child--xl--PaddingRight);
-    --#{$table}--cell--first-last-child--PaddingLeft: var(--#{$table}--cell--first-last-child--xl--PaddingLeft);
-    --#{$table}--m-compact--cell--first-last-child--PaddingLeft: var(--#{$table}--m-compact--cell--first-last-child--xl--PaddingLeft);
-    --#{$table}--m-compact--cell--first-last-child--PaddingRight: var(--#{$table}--m-compact--cell--first-last-child--xl--PaddingRight);
-  }
+  --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
 
   @include pf-v5-t-light; // This component always needs to be light
 
@@ -346,7 +328,7 @@
     > thead:where(.#{$table}__thead):not(.pf-m-nested-column-header) {
       > tr:where(.#{$table}__tr) > * {
         position: sticky;
-       inset-block-start: 0;
+        inset-block-start: 0;
         background: var(--#{$table}--BackgroundColor);
 
         // stylelint-disable-next-line
@@ -364,8 +346,8 @@
     // nested column header
     > .pf-m-nested-column-header {
       position: sticky;
-     inset-block-start: 0;
-      z-index: var(--#{$pf-global}--ZIndex--xs);
+      inset-block-start: 0;
+      z-index: var(--pf-t--global--Zindex--xs);
       background: var(--#{$table}--BackgroundColor);
 
       > .pf-m-border-row {
@@ -570,9 +552,9 @@
       position: absolute;
 
       // offset top to extend above tr border
-     inset-block-start: var(--#{$table}__expandable-row--after--Top);
-     inset-block-end: var(--#{$table}__expandable-row--after--Bottom);
-     inset-inline-start: 0;
+      inset-block-start: var(--#{$table}__expandable-row--after--Top);
+      inset-block-end: var(--#{$table}__expandable-row--after--Bottom);
+      inset-inline-start: 0;
       content: "";
 
       // add border left
@@ -690,18 +672,9 @@
 
   // tr clickable
   tr:where(.#{$table}__tr) {
-    position: relative;
-
-    &::before {
-      position: absolute;
-      inset:0;
-      content: "";
-      background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
-      border-radius: var(--#{$table}__tr--m-clickable--BorderRadius);
-    }
-
     &.pf-m-clickable {
       cursor: pointer;
+      background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
       outline-offset: var(--#{$table}__tr--m-clickable--OutlineOffset);
       box-shadow: var(--#{$table}__tr--m-clickable--BoxShadow);
 
@@ -989,12 +962,17 @@
   }
 
   label {
-    display: block;
+    display: inline-flex;
     padding: inherit;
     margin-block-start: calc(var(--#{$table}--cell--PaddingTop) * -1);
     margin-block-end: calc(var(--#{$table}--cell--PaddingBottom) * -1);
     margin-inline-start: calc(var(--#{$table}--cell--PaddingLeft) * -1);
     margin-inline-end: calc(var(--#{$table}--cell--PaddingRight) * -1);
+
+  }
+
+  @at-root .#{$table}__thead .#{$check}.pf-m-standalone {
+    --#{$check}__input--TranslateY: var(--#{$table}__thead__check--input--TranslateY);
   }
 }
 
@@ -1085,25 +1063,25 @@
   .#{$table}__button::before,
   .#{$table}__button::after {
     position: absolute;
-   inset-inline-end: 0;
+    inset-inline-end: 0;
     content: "";
     border-style: solid;
     border-width: 0;
   }
 
   .#{$table}__button::before {
-   inset-block-start: 0;
-   inset-block-end: var(--#{$table}__compound-expansion-toggle__button--before--Bottom);
-   inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--before--Left);
-    border-color: var(--#{$table}__compound-expansion-toggle__button--before--BorderColor);
+    inset-block-start: 0;
+    inset-block-end: var(--#{$table}__compound-expansion-toggle__button--before--Bottom);
+    inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--before--Left);
+      border-color: var(--#{$table}__compound-expansion-toggle__button--before--BorderColor);
     border-inline-start-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth);
     border-inline-end-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderRightWidth);
   }
 
   .#{$table}__button::after {
     // overlap previous row's border
-   inset-block-start: var(--#{$table}__compound-expansion-toggle__button--after--Top);
-   inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--after--Left);
+    inset-block-start: var(--#{$table}__compound-expansion-toggle__button--after--Top);
+    inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--after--Left);
     pointer-events: none;
     border-color: var(--#{$table}__compound-expansion-toggle__button--after--BorderColor);
     border-block-start-width: var(--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth);