@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/Table/table.scss

@@ -1,8 +1,9 @@
+@use '../../sass-utilities' as *;
+
 // TODO: clean up unused variables
 // TODO: update grouping comments to // * Table {element}
 
-:where(:root),
-:where(.#{$table}) {
+@include pf-root($table) {
   --#{$table}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$table}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$table}--border-width--base: var(--pf-t--global--border--width--divider--default);
@@ -10,34 +11,41 @@
   // * Table caption
   --#{$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-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);
+  --#{$table}__caption--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$table}__caption--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$table}__caption--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$table}__caption--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // * Table thead cell
   --#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$table}__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
+  // * Table thead toggle
+  --#{$table}__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+
   // * Table body cell
-  --#{$table}__tbody--cell--PaddingTop: var(--#{$table}--cell--Padding--base);
-  --#{$table}__tbody--cell--PaddingBottom: var(--#{$table}--cell--Padding--base);
+  --#{$table}__tbody--cell--PaddingBlockStart: var(--#{$table}--cell--Padding--base);
+  --#{$table}__tbody--cell--PaddingBlockEnd: var(--#{$table}--cell--Padding--base);
   --#{$table}__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default); // set this explicitly for input heights to calc properly
 
+  // * Table tr
+  --#{$table}__tr--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$table}__tr--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+
   // TODO: update these in order of appearance in scss declarations
 
   // * Table cell
   --#{$table}--cell--Padding--base: var(--pf-t--global--spacer--md);
+  --#{$table}--cell--PaddingBlockStart: var(--#{$table}--cell--Padding--base);
+  --#{$table}--cell--PaddingInlineEnd: var(--#{$table}--cell--Padding--base);
+  --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--cell--Padding--base);
+  --#{$table}--cell--PaddingInlineStart: var(--#{$table}--cell--Padding--base);
   --#{$table}--cell--FontSize: var(--pf-t--global--font--size--body--default);
-  --#{$table}--cell--FontWeight: var(--pf-t--global--font--weight--body);
+  --#{$table}--cell--FontWeight: var(--pf-t--global--font--weight--body--default);
   --#{$table}--cell--LineHeight: var(--pf-t--global--font--line-height--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--PaddingInline: var(--pf-t--global--spacer--sm);
-  --#{$table}__tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--#{$table}--cell--Padding--base);
+  --#{$table}__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--#{$table}--cell--Padding--base);
 
   // * Table cell - default variables
   --#{$table}--cell--MinWidth: 0;
@@ -49,100 +57,83 @@
   --#{$table}--cell--WordBreak: normal;
 
   // * Table cell border right
-  --#{$table}--cell--m-border-right--before--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$table}--cell--m-border-right--before--BorderRightColor: var(--pf-t--global--border--color--default);
-  --#{$table}--cell--m-border-left--before--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --#{$table}--cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$table}--cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
+  --#{$table}--cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$table}--cell--m-border-left--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
 
   // * Table help
   --#{$table}--cell--m-help--MinWidth: 11ch;
 
   // * Table truncate
   --#{$table}--m-truncate--cell--MaxWidth: 1px;
-  --#{$table}--m-truncate--cell--MinWidth: calc(5ch + var(--#{$table}--cell--PaddingRight) + var(--#{$table}--cell--PaddingLeft));
+  --#{$table}--m-truncate--cell--MinWidth: calc(5ch + var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineStart));
+
+  // * Table truncate
+  --#{$table}--m-truncate__text--MinWidth: 5ch;
 
   // * Table cell hidden visible
   --#{$table}--cell--hidden-visible--Display: table-cell;
 
   // * Table toggle
-  --#{$table}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$table}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$table}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$table}__toggle--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$table}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$table}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$table}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$table}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$table}__toggle--c-button__toggle-icon--Rotate: 270deg;
-  --#{$table}__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
+  --#{$table}__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
 
   // * Table button
-  --#{$table}__button--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$table}__button--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$table}__button--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$table}__button--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$table}__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$table}__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$table}__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$table}__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --#{$table}__button--Color: var(--pf-t--global--text--color--regular);
   --#{$table}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$table}__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
   --#{$table}__button--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular);
   --#{$table}__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
-  --#{$table}__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
-
-  // * Table compact
-  --#{$table}--m-compact__toggle--PaddingTop: 0;
-  --#{$table}--m-compact__toggle--PaddingBottom: 0;
 
   // * Table check
-  --#{$table}__check--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$table}__check--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$table}__check--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$table}__check--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
 
   // * Table favorite
   --#{$table}__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
   --#{$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 draggable button
-  --#{$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);
 
   // * Table ghost row
   --#{$table}__tr--m-ghost-row--Opacity: .4;
   --#{$table}__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
-  // * Table Action
-  --#{$table}__action--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$table}__action--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$table}__action--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$table}__action--PaddingRight: var(--pf-t--global--spacer--sm);
-
-  // * Table inline edit
-  --#{$table}__inline-edit-action--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$table}__inline-edit-action--PaddingBottom: var(--pf-t--global--spacer--sm);
-
-  // * Table expandable row
-  --#{$table}__expandable-row--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
-  --#{$table}__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$table}__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$table}__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$table}__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$table}__expandable-row-content--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
+  // * Table action
+  --#{$table}__action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$table}__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$table}__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$table}__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+
+  // * Table expandable row content
+  --#{$table}__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$table}__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$table}__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$table}__expandable-row-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$table}__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$table}__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+
+  // * Table control row
+  --#{$table}__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$table}__control-row--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$table}__control-row__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default);
 
   // * Table icon inline
-  --#{$table}__icon-inline--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$table}__icon-inline--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
   // * Table sort cell
-  --#{$table}__sort--MinWidth: calc(6ch + var(--#{$table}--cell--PaddingRight) + var(--#{$table}--cell--PaddingLeft) + var(--#{$table}__sort-indicator--MarginLeft));
-
-  // * Table sort button
-  --#{$table}__sort__button--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$table}__sort__button--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$table}__sort__button--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$table}__sort__button--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$table}__sort__button--MarginBottom: calc(var(--#{$table}__sort__button--PaddingBottom) * -1);
-  --#{$table}__sort__button--MarginLeft: calc(var(--#{$table}__sort__button--PaddingLeft) * -1);
-  --#{$table}__sort__button--Color: var(--pf-t--global--text--color--regular);
+  --#{$table}__sort--MinWidth: calc(6ch + var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineStart) + var(--#{$table}__sort-indicator--MarginInlineStart));
   --#{$table}__sort--m-selected__button--Color: var(--pf-t--global--color--brand--clicked);
   --#{$table}__sort--m-help--MinWidth: 15ch;
 
@@ -150,13 +141,9 @@
   --#{$table}__sort__button__text--Color: currentcolor;
   --#{$table}__sort__button--hover__text--Color: currentcolor;
 
-  // * Table sort cell
-  --#{$table}__sort--cell--PaddingLeft: var(--pf-t--global--spacer--xs);
-  --#{$table}__sort--cell--PaddingRight: var(--pf-t--global--spacer--sm);
-
   // * Table sort indicator
   --#{$table}__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
-  --#{$table}__sort-indicator--MarginLeft: var(--pf-t--global--spacer--md);
+  --#{$table}__sort-indicator--MarginInlineStart: var(--pf-t--global--spacer--md);
   --#{$table}__sort--m-selected__sort-indicator--Color: var(--pf-t--global--color--brand--clicked);
   --#{$table}__sort__button--hover__sort-indicator--Color: var(--pf-t--global--text--color--regular);
 
@@ -164,37 +151,38 @@
   --#{$table}__th--m-help--MinWidth: 11ch;
 
   // * Table header popover
-  --#{$table}__column-help--MarginLeft: var(--pf-t--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);
+  --#{$table}__column-help--MarginInlineStart: var(--pf-t--global--spacer--sm);
 
   // * Table compound expansion toggle button
   --#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
+  --#{$table}__compound-expansion-toggle__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$table}__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
+  --#{$table}__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
 
   // * Table compound expansion toggle button after
   --#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
-  --#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: 0;
-  --#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
+  --#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
+  --#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
+  --#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
+
+  // * Compound expandable
+  --#{$table}--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
 
   // * Table compact th
-  --#{$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__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
+  --#{$table}--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
 
   // * Table compact cell
-  --#{$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--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$table}--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
 
   // * Table compact action
-  --#{$table}--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$table}--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$table}--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$table}--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
 
   // * Table expandable row expanded
-  --#{$table}__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$table}__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
 
   // * Table tr clickable
   --#{$table}__tr--m-clickable--BackgroundColor: transparent;
@@ -202,41 +190,44 @@
   --#{$table}__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
 
   // * Table tr selected
-  --#{$table}__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --#{$table}__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --#{$table}__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
 
   // * Table tbody clickable
   --#{$table}__tbody--m-clickable--BackgroundColor: transparent;
   --#{$table}__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
-  --#{$table}__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$table}__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$table}__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --#{$table}__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
 
   // * Table tbody selected
-  --#{$table}__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$table}__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --#{$table}__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
 
   // * Table 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-t--global--spacer--xs);
-  --#{$table}__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$table}__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$table}__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
 
   // * Table subhead
-  --#{$table}__subhead--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$table}__subhead--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$table}__subhead--Color: var(--pf-t--global--text--color--subtle);
 
+  // * Table subhead button
+  --#{$table}__nested-column-header__button--PaddingInlineStart: calc(var(--#{$table}__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
+  --#{$table}__nested-column-header__button--PaddingInlineEnd: calc(var(--#{$table}__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
+
   // * Table striped
-  --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
-  // * Table sticky
-  --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
+  // * Table sticky header
+  --#{$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}
 // TODO: flatten the modifiers out ex: .#{$table}.pf-m-sticky-header {}
 // - Table
 .#{$table} {
-  // Base
   width: 100%;
   background-color: var(--#{$table}--BackgroundColor);
 
@@ -244,6 +235,27 @@
     table-layout: fixed;
   }
 
+  // - Table sticky header
+  &.pf-m-sticky-header > .#{$table}__thead,
+  .#{$table}__thead.pf-m-nested-column-header {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--#{$table}--m-sticky-header--ZIndex);
+    background: var(--#{$table}--BackgroundColor);
+
+    &::before {
+      position: absolute;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      z-index: var(--#{$table}--m-sticky-header--border--ZIndex);
+      pointer-events: none;
+      content: '';
+      border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+    }
+  }
+
   &.pf-m-sticky-header {
     position: relative;
 
@@ -253,51 +265,15 @@
       }
     }
 
-    // standard sticky headers
-    > thead:where(.#{$table}__thead):not(.pf-m-nested-column-header) {
-      > tr:where(.#{$table}__tr) > :where(th, td) {
-        position: sticky;
-        inset-block-start: 0;
-        background: var(--#{$table}--BackgroundColor);
-
-        // stylelint-disable-next-line
-        &::after {
-          position: absolute;
-          inset-block-end: 0;
-          inset-inline-start: 0;
-          inset-inline-end: 0;
-          content: '';
-          border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
-        }
-      }
-    }
-
-    // nested column header
+    // - Table nested column header
     > .pf-m-nested-column-header {
       position: sticky;
       inset-block-start: 0;
-      z-index: var(--pf-t--global--Zindex--xs);
       background: var(--#{$table}--BackgroundColor);
-
-      > .pf-m-border-row {
-        height: var(--#{$table}--border-width--base);
-        background-color: var(--#{$table}--BorderColor);
-      }
-
-      // TODO: remove this block
-      tr:where(.#{$table}__tr):not(:nth-last-child(2)) {
-        // stylelint-disable max-nesting-depth
-        th:where(.#{$table}__th),
-        td:where(.#{$table}__td) {
-          &:not([rowspan]) {
-            --#{$table}--cell--PaddingBottom: var(--#{$table}__thead--m-nested-column-header__tr--PaddingBottom);
-          }
-        }
-        // stylelint-enable
-      }
     }
   }
 
+  // - Table not sticky header nested column header
   &:not(.pf-m-sticky-header) > .pf-m-nested-column-header {
     tr:where(.#{$table}__tr):not(:last-child) {
       border-block-end: 0; // hard reset tr borders in nested headers
@@ -306,17 +282,17 @@
       th:where(.#{$table}__th),
       td:where(.#{$table}__td) {
         &:not([rowspan]) {
-          --#{$table}--cell--PaddingBottom: var(--#{$table}__thead--m-nested-column-header__tr--PaddingBottom);
+          --#{$table}--cell--PaddingBlockEnd: var(--#{$table}__thead--m-nested-column-header__tr--PaddingBlockEnd);
         }
       }
       // stylelint-enable
     }
   }
 
-  // For regular and expandable tables
+  // - Table striped
   // stylelint-disable
   &.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
-  &.pf-m-striped.pf-m-expandable > tbody:where(.#{$table}__tbody):nth-of-type(odd) > tr:where(.#{$table}__tr):not(.#{$table}__expandable-row), // expandable table
+  &.pf-m-striped.pf-m-expandable > tbody:where(.#{$table}__tbody):nth-of-type(odd) > tr:where(.#{$table}__tr), // expandable table
   > .pf-m-striped > tr:nth-child(odd), // tbody odd
   > .pf-m-striped-even > tr:nth-child(even), // tbody even
   tr:where(.#{$table}__tr).pf-m-striped { // tr
@@ -338,17 +314,16 @@
 
   // - Table th - Table td
   tr:where(.#{$table}__tr) > :where(th, td) {
-    @include pf-v5-hidden-visible(var(--#{$table}--cell--hidden-visible--Display));
+    @include pf-v6-hidden-visible(var(--#{$table}--cell--hidden-visible--Display));
 
-    // set position relative for ::after borders
     position: relative;
     width: var(--#{$table}--cell--Width);
     min-width: var(--#{$table}--cell--MinWidth);
     max-width: var(--#{$table}--cell--MaxWidth);
-    padding-block-start: var(--#{$table}--cell--PaddingTop);
-    padding-block-end: var(--#{$table}--cell--PaddingBottom);
-    padding-inline-start: var(--#{$table}--cell--PaddingLeft);
-    padding-inline-end: var(--#{$table}--cell--PaddingRight);
+    padding-block-start: var(--#{$table}--cell--PaddingBlockStart);
+    padding-block-end: var(--#{$table}--cell--PaddingBlockEnd);
+    padding-inline-start: var(--#{$table}--cell--PaddingInlineStart);
+    padding-inline-end: var(--#{$table}--cell--PaddingInlineEnd);
 
     // default settings
     overflow: var(--#{$table}--cell--Overflow);
@@ -362,19 +337,19 @@
 
     // First child padding left
     &:first-child {
-      padding-inline-start: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingLeft));
+      padding-inline-start: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingInlineStart));
     }
 
     // Last child padding right
     &:last-child {
-      padding-inline-end: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingRight));
+      padding-inline-end: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingInlineEnd));
     }
 
     &.pf-m-center {
       text-align: center;
     }
 
-    &:empty {
+    &:is(:empty, .#{$table}__cell-empty) {
       width: auto;
       min-width: 0;
       padding: 0;
@@ -400,29 +375,34 @@
     }
 
     &.pf-m-border-right::before {
-      border-inline-end: var(--#{$table}--cell--m-border-right--before--BorderRightWidth) solid var(--#{$table}--cell--m-border-right--before--BorderRightColor);
+      border-inline-end: var(--#{$table}--cell--m-border-right--before--BorderInlineEndWidth) solid var(--#{$table}--cell--m-border-right--before--BorderInlineEndColor);
     }
 
     &.pf-m-border-left::before {
-      border-inline-start: var(--#{$table}--cell--m-border-left--before--BorderLeftWidth) solid var(--#{$table}--cell--m-border-left--before--BorderLeftColor);
+      border-inline-start: var(--#{$table}--cell--m-border-left--before--BorderInlineStartWidth) solid var(--#{$table}--cell--m-border-left--before--BorderInlineStartColor);
     }
   }
 
   // - Table caption
   caption:where(.#{$table}__caption) {
-    padding-block-start: var(--#{$table}__caption--PaddingTop);
-    padding-block-end: var(--#{$table}__caption--PaddingBottom);
-    padding-inline-start: var(--#{$table}__caption--PaddingLeft);
+    padding-block-start: var(--#{$table}__caption--PaddingBlockStart);
+    padding-block-end: var(--#{$table}__caption--PaddingBlockEnd);
+    padding-inline-start: var(--#{$table}__caption--PaddingInlineStart);
     font-size: var(--#{$table}__caption--FontSize);
     color: var(--#{$table}__caption--Color);
     text-align: start;
     background-color: var(--#{$table}--BackgroundColor);
   }
 
-  // - Table header cell
+  // - Table thead
   thead:where(.#{$table}__thead) {
     --#{$table}--cell--FontSize: var(--#{$table}__thead--cell--FontSize);
     --#{$table}--cell--FontWeight: var(--#{$table}__thead--cell--FontWeight);
+    --#{$table}--cell--MinWidth: var(--#{$table}--m-truncate--cell--MinWidth);
+    --#{$table}--cell--MaxWidth: var(--#{$table}--m-truncate--cell--MaxWidth);
+    --#{$table}--cell--Overflow: hidden;
+    --#{$table}--cell--TextOverflow: ellipsis;
+    --#{$table}--cell--WhiteSpace: nowrap;
 
     // stylelint-disable
     &.pf-m-nested-column-header {
@@ -434,7 +414,7 @@
         th:where(.#{$table}__th),
         td:where(.#{$table}__td) {
           &:not([rowspan]) {
-            --#{$table}--cell--PaddingTop: var(--#{$table}__thead--m-nested-column-header__tr--PaddingTop);
+            --#{$table}--cell--PaddingBlockStart: var(--#{$table}__thead--m-nested-column-header__tr--PaddingBlockStart);
           }
         }
       }
@@ -443,23 +423,17 @@
 
     // - Table subhead
     .#{$table}__subhead {
-      --#{$table}--cell--PaddingLeft: var(--#{$table}__subhead--PaddingLeft);
-      --#{$table}--cell--PaddingRight: var(--#{$table}__subhead--PaddingRight);
       --#{$table}__sort__button__text--Color: var(--#{$table}__subhead--Color);
 
       color: var(--#{$table}__subhead--Color);
-
-      .#{$table}__button {
-        margin-inline-start: 0;
-      }
     }
   }
 
   // - Table tbody
   // stylelint-disable
   tbody:where(.#{$table}__tbody) {
-    --#{$table}--cell--PaddingTop: var(--#{$table}__tbody--cell--PaddingTop);
-    --#{$table}--cell--PaddingBottom: var(--#{$table}__tbody--cell--PaddingBottom);
+    --#{$table}--cell--PaddingBlockStart: var(--#{$table}__tbody--cell--PaddingBlockStart);
+    --#{$table}--cell--PaddingBlockEnd: var(--#{$table}__tbody--cell--PaddingBlockEnd);
     --#{$table}--cell--FontSize: var(--#{$table}__tbody--cell--FontSize);
 
     > tr:where(.#{$table}__tr) > :where(th, td) {
@@ -493,52 +467,13 @@
     }
   }
 
-  // - Table truncate - Table wrap - Table nowrap - Table fit content - Table wrap - Table break word
-  :where([class*='#{$table}']),
-  :where(&) > :is(thead, tbody) {
-    @at-root .#{$table} > thead,
-    &.pf-m-truncate {
-      --#{$table}--cell--MinWidth: var(--#{$table}--m-truncate--cell--MinWidth);
-      --#{$table}--cell--MaxWidth: var(--#{$table}--m-truncate--cell--MaxWidth);
-      --#{$table}--cell--Overflow: hidden;
-      --#{$table}--cell--TextOverflow: ellipsis;
-      --#{$table}--cell--WhiteSpace: nowrap;
-    }
-
-    &.pf-m-wrap {
-      --#{$table}--cell--MinWidth: 0;
-      --#{$table}--cell--MaxWidth: none;
-      --#{$table}--cell--Overflow: visible;
-      --#{$table}--cell--TextOverflow: clip;
-      --#{$table}--cell--WhiteSpace: normal;
-    }
-
-    &.pf-m-nowrap {
-      --#{$table}--cell--MinWidth: 0;
-      --#{$table}--cell--MaxWidth: none;
-      --#{$table}--cell--Overflow: visible;
-      --#{$table}--cell--TextOverflow: clip;
-      --#{$table}--cell--WhiteSpace: nowrap;
-    }
-
-    .#{$table}__icon,
-    &.pf-m-fit-content {
-      --#{$table}--cell--MinWidth: fit-content;
-      --#{$table}--cell--MaxWidth: none;
-      --#{$table}--cell--Width: 1%;
-      --#{$table}--cell--Overflow: visible;
-      --#{$table}--cell--TextOverflow: clip;
-      --#{$table}--cell--WhiteSpace: nowrap;
-    }
-
-    &.pf-m-break-word {
-      --#{$table}--cell--WordBreak: break-word;
-      --#{$table}--cell--WhiteSpace: normal;
-    }
-  }
-
   // stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
   &.pf-m-no-border-rows > tbody:where(.#{$table}__tbody) {
+    --#{$table}__tr--BorderBlockEndWidth: 0;
+    --#{$table}__tbody--BorderBlockEndWidth: 0;
+    --#{$table}--m-expandable__tbody--BorderBlockEndWidth: 0;
+    --#{$table}__control-row--BorderBlockEndWidth: 0;
+
     > tr:where(.#{$table}__tr) {
       border-block-end: 0;
     }
@@ -566,16 +501,13 @@
 
     // tr selected
     &.pf-m-selected {
-      --#{$table}__expandable-row--after--BorderLeftWidth: var(--#{$table}__tr--m-selected--after--BorderLeftWidth);
-      --#{$table}__expandable-row--after--BorderColor: var(--#{$table}__tr--m-selected--after--BorderLeftColor);
-
       position: relative;
       background-color: var(--#{$table}__tr--m-selected--BackgroundColor);
       outline-offset: var(--#{$table}__tr--m-selected--OutlineOffset);
     }
 
-    &.pf-m-first-cell-offset-reset {
-      --#{$table}--cell--first-last-child--PaddingLeft: var(--#{$table}__tr--m-first-cell-offset-reset--cell--PaddingLeft);
+    &.pf-m-first-cell-offset-reset > :first-child {
+      padding-inline-start: var(--#{$table}__tr--m-first-cell-offset-reset--cell--PaddingInlineStart);
     }
   }
 
@@ -587,28 +519,85 @@
       background-color: var(--#{$table}__tbody--m-clickable--BackgroundColor);
       outline-offset: var(--#{$table}__tbody--m-clickable--OutlineOffset);
 
-      &.pf-m-expanded:not(.pf-m-selected) {
-        --#{$table}__expandable-row--after--BorderColor: var(--#{$table}__tbody--m-clickable--m-expanded--BorderColor);
-      }
-
       &:is(:hover, :focus) {
         --#{$table}__tbody--m-clickable--BackgroundColor: var(--#{$table}__tbody--m-clickable--hover--BackgroundColor);
       }
+
+      &.pf-m-expanded {
+        --#{$table}__tbody--m-clickable--BackgroundColor: var(--#{$table}__tbody--m-clickable--m-expanded--BackgroundColor);
+      }
     }
 
     // - Table tbody expanded
     &.pf-m-selected {
-      --#{$table}__expandable-row--after--BorderLeftWidth: var(--#{$table}__tbody--m-selected--after--BorderLeftWidth);
-      --#{$table}__expandable-row--after--BorderColor: var(--#{$table}__tbody--m-selected--after--BorderLeftColor);
-
       background-color: var(--#{$table}__tbody--m-selected--BackgroundColor);
       outline-offset: var(--#{$table}__tbody--m-selected--OutlineOffset);
+
+      .#{$table}__tr.pf-m-expanded:not(.#{$table}__expandable-row) {
+        border: none;
+      }
     }
   }
 
   &.pf-m-drag-over {
     overflow-anchor: none;
   }
+
+  // - Table table
+  .#{$table}{
+    background-color: transparent;
+
+    &,
+    :is(.#{$table}__tbody, .#{$table}__tr:last-child) {
+      border-block-end: 0;
+    }
+  }
+
+  .#{$button} .#{$table}__sort-indicator {
+    --#{$table}__sort-indicator--MarginInlineStart: 0;
+  }
+}
+
+// - Table truncate - Table wrap - Table nowrap - Table fit content - Table wrap - Table break word
+[class*='#{$table}'] {
+  &.pf-m-truncate {
+    --#{$table}--cell--MinWidth: var(--#{$table}--m-truncate--cell--MinWidth);
+    --#{$table}--cell--MaxWidth: var(--#{$table}--m-truncate--cell--MaxWidth);
+    --#{$table}--cell--Overflow: hidden;
+    --#{$table}--cell--TextOverflow: ellipsis;
+    --#{$table}--cell--WhiteSpace: nowrap;
+  }
+
+  &.pf-m-wrap {
+    --#{$table}--cell--MinWidth: 0;
+    --#{$table}--cell--MaxWidth: none;
+    --#{$table}--cell--Overflow: visible;
+    --#{$table}--cell--TextOverflow: clip;
+    --#{$table}--cell--WhiteSpace: normal;
+  }
+
+  &.pf-m-nowrap {
+    --#{$table}--cell--MinWidth: 0;
+    --#{$table}--cell--MaxWidth: none;
+    --#{$table}--cell--Overflow: visible;
+    --#{$table}--cell--TextOverflow: clip;
+    --#{$table}--cell--WhiteSpace: nowrap;
+  }
+
+  .#{$table}__icon,
+  &.pf-m-fit-content {
+    --#{$table}--cell--MinWidth: fit-content;
+    --#{$table}--cell--MaxWidth: none;
+    --#{$table}--cell--Width: 1%;
+    --#{$table}--cell--Overflow: visible;
+    --#{$table}--cell--TextOverflow: clip;
+    --#{$table}--cell--WhiteSpace: nowrap;
+  }
+
+  &.pf-m-break-word {
+    --#{$table}--cell--WordBreak: break-word;
+    --#{$table}--cell--WhiteSpace: normal;
+  }
 }
 
 // - Table text
@@ -629,6 +618,7 @@
   // Only apply these settings if specifically modified
   &.pf-m-truncate {
     --#{$table}--cell--MinWidth: 100%;
+    --#{$table}--text--MinWidth: var(--#{$table}--m-truncate__text--MinWidth);
 
     > :where(th, td) {
       overflow: var(--#{$table}--cell--Overflow);
@@ -638,22 +628,15 @@
   }
 }
 
-// - Table tr
-.#{$table}__tr {
-  &.pf-m-border-row {
-    border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
-  }
-}
-
 // - Table button
 .#{$table}__button {
   width: auto;
-  padding-block-start: var(--#{$table}__button--PaddingTop);
-  padding-block-end: var(--#{$table}__button--PaddingBottom);
-  padding-inline-start: var(--#{$table}__button--PaddingLeft);
-  padding-inline-end: var(--#{$table}__button--PaddingRight);
-  margin-block-end: calc(var(--#{$table}__button--PaddingBottom) * -1);
-  margin-inline-start: calc(var(--#{$table}__button--PaddingLeft) * -1);
+  padding-block-start: var(--#{$table}__button--PaddingBlockStart);
+  padding-block-end: var(--#{$table}__button--PaddingBlockEnd);
+  padding-inline-start: var(--#{$table}__button--PaddingInlineStart);
+  padding-inline-end: var(--#{$table}__button--PaddingInlineEnd);
+  margin-block-end: calc(var(--#{$table}__button--PaddingBlockEnd) * -1);
+  margin-inline-start: calc(var(--#{$table}__button--PaddingInlineStart) * -1);
   font-size: inherit;
   font-weight: inherit;
   color: var(--#{$table}__button--Color);
@@ -663,6 +646,7 @@
   background-color: var(--#{$table}__button--BackgroundColor);
   border: 0;
   border-radius: var(--#{$table}__button--BorderRadius);
+  outline-offset: var(--#{$table}__button--OutlineOffset);
 
   // Table table table button
   .#{$table} .#{$table} & {
@@ -727,8 +711,6 @@
 .#{$table} .#{$table}__check,
 .#{$table} .#{$table}__toggle,
 .#{$table} .#{$table}__action,
-.#{$table} .#{$table}__favorite,
-.#{$table} th:where(.#{$table}__th).pf-m-favorite,
 .#{$table} .#{$table}__inline-edit-action,
 .#{$table} .#{$table}__draggable {
   --#{$table}--cell--MinWidth: 0;
@@ -736,12 +718,16 @@
 }
 // stylelint-enable
 
+.#{$table} .#{$table}__favorite {
+  --#{$table}--cell--MaxWidth: auto;
+}
+
 // - Table toggle
 .#{$table}__toggle {
-  --#{$table}--cell--PaddingTop: var(--#{$table}__toggle--PaddingTop);
-  --#{$table}--cell--PaddingBottom: var(--#{$table}__toggle--PaddingBottom);
-  --#{$table}--cell--PaddingLeft: var(--#{$table}__toggle--PaddingLeft);
-  --#{$table}--cell--PaddingRight: var(--#{$table}__toggle--PaddingRight);
+  --#{$table}--cell--PaddingBlockStart: var(--#{$table}__toggle--PaddingBlockStart);
+  --#{$table}--cell--PaddingBlockEnd: var(--#{$table}__toggle--PaddingBlockEnd);
+  --#{$table}--cell--PaddingInlineStart: var(--#{$table}__toggle--PaddingInlineStart);
+  --#{$table}--cell--PaddingInlineEnd: var(--#{$table}__toggle--PaddingInlineEnd);
 
   .#{$button} {
     &.pf-m-expanded .#{$table}__toggle-icon {
@@ -751,9 +737,9 @@
 
 
   .#{$table}__toggle-icon {
-    @include pf-v5-mirror-inline-on-rtl;
+    @include pf-v6-mirror-inline-on-rtl;
 
-    transition: var(--#{$table}__toggle--c-button__toggle-icon--Transition);
+    transition: transform var(--#{$table}__toggle--c-button__toggle-icon--TransitionDuration) var(--#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction);
     transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
   }
 
@@ -764,8 +750,8 @@
 
 // - Table check
 .#{$table}__check {
-  --#{$table}--cell--PaddingLeft: var(--#{$table}__check--PaddingLeft);
-  --#{$table}--cell--PaddingRight: var(--#{$table}__check--PaddingRight);
+  --#{$table}--cell--PaddingInlineStart: var(--#{$table}__check--PaddingInlineStart);
+  --#{$table}--cell--PaddingInlineEnd: var(--#{$table}__check--PaddingInlineEnd);
 
   vertical-align: top;
 
@@ -796,14 +782,15 @@
 
 // - Table favorite
 .#{$table}__favorite {
-  // --#{$table}--cell--PaddingLeft: var(--#{$table}__favorite--PaddingLeft);
-  // --#{$table}--cell--PaddingRight: var(--#{$table}__favorite--PaddingRight);
-
   .#{$button} {
     --#{$button}--FontSize: var(--#{$table}__favorite--c-button--FontSize);
+  }
+
+  &.pf-m-favorited .#{$button} {
+    --#{$button}--m-plain__icon--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
 
-    @at-root .pf-m-favorited#{&} {
-      --#{$button}--m-plain--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
+    &:is(:hover, :focus) {
+      --#{$button}--hover__icon--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
     }
   }
 }
@@ -824,10 +811,10 @@
 .#{$table}__favorite,
 .#{$table}__inline-edit-action,
 .#{$table}__draggable {
-  --#{$table}--cell--PaddingTop: var(--#{$table}__action--PaddingTop);
-  --#{$table}--cell--PaddingBottom: var(--#{$table}__action--PaddingBottom);
-  --#{$table}--cell--PaddingLeft: var(--#{$table}__action--PaddingLeft);
-  --#{$table}--cell--PaddingRight: var(--#{$table}__action--PaddingRight);
+  --#{$table}--cell--PaddingBlockStart: var(--#{$table}__action--PaddingBlockStart);
+  --#{$table}--cell--PaddingBlockEnd: var(--#{$table}__action--PaddingBlockEnd);
+  --#{$table}--cell--PaddingInlineStart: var(--#{$table}__action--PaddingInlineStart);
+  --#{$table}--cell--PaddingInlineEnd: var(--#{$table}__action--PaddingInlineEnd);
 }
 
 // - Table action - Table inline edit action
@@ -845,6 +832,7 @@
 
   position: relative;
   padding: 0;
+  background-color: var(--#{$table}__compound-expansion-toggle__button--BackgroundColor);
 
   // show left border, use __text to truncate content
   &.pf-m-truncate {
@@ -870,13 +858,18 @@
     inset: 0;
     content: '';
     border: 0;
-    border-block-start: var(--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth) solid var(--#{$table}__compound-expansion-toggle__button--after--BorderColor);
+    border-block-start: var(--#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth) solid var(--#{$table}__compound-expansion-toggle__button--after--BorderColor);
   }
 
   &:hover,
-  &:focus-within,
+  &:focus-within {
+    --#{$table}__compound-expansion-toggle__button--BackgroundColor: var(--#{$table}__compound-expansion-toggle__button--hover--BackgroundColor);
+    --#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth: var(--#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth);
+  }
+
   &.pf-m-expanded {
-    --#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: var(--#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth);
+    --#{$table}__compound-expansion-toggle__button--BackgroundColor: var(--#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor);
+    --#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth: var(--#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth);
   }
 
   &:focus-within {
@@ -893,7 +886,7 @@
 
 // - Table column help action
 .#{$table}__column-help-action {
-  margin-inline-start: var(--#{$table}__column-help--MarginLeft);
+  margin-inline-start: var(--#{$table}__column-help--MarginInlineStart);
 }
 
 // - Table sort
@@ -914,12 +907,14 @@
     }
   }
 
-  &.pf-m-selected .#{$table}__button {
+  &.pf-m-selected .#{$table}__button,
+  &.pf-m-selected .#{$button} {
     --#{$table}__sort-indicator--Color: var(--#{$table}__sort--m-selected__sort-indicator--Color);
-    --#{$table}__sort__button__text--Color: var(--#{$table}__sort--m-selected__button__text--Color);
 
     // override state colors on text
-    color: var(--#{$table}__sort--m-selected__button--Color);
+    .#{$table}__text {
+      color: var(--#{$table}__sort--m-selected__button--Color);
+    }
   }
 
   &.pf-m-help {
@@ -927,9 +922,9 @@
   }
 
   &.pf-m-favorite {
-    --#{$table}__sort__button__text--Color: var(--#{$table}__sort--m-favorite__button__text--Color);
-    --#{$table}__sort__button--hover__text--Color: var(--#{$table}__sort--m-favorite__button--hover__text--Color);
-    --#{$table}__sort--m-selected__button__text--Color: currentcolor;
+    .#{$table}__text {
+      font-size: var(--#{$table}__favorite--c-button--FontSize);
+    }
   }
 }
 
@@ -937,8 +932,7 @@
 .#{$table}__sort-indicator {
   grid-column: 2;
   align-self: end;
-  margin-inline-start: var(--#{$table}__sort-indicator--MarginLeft); // TODO: update this to gap
-  font-size: var(--#{$table}__sort-indicator--FontSize);
+  margin-inline-start: var(--#{$table}__sort-indicator--MarginInlineStart); // TODO: update this to gap
   color: var(--#{$table}__sort-indicator--Color);
   pointer-events: none;
 }
@@ -948,50 +942,48 @@
   position: relative;
   border-block-end: 0 solid transparent;
 
-
-  &,
-  td:where(.#{$table}__td):first-child::after {
-    transition: var(--#{$table}__expandable-row--Transition);
-  }
-
-  // stylelint-disable
-  > td,
-  > th {
-    padding-top: 0;
+  @at-root :not(.#{$table}__control-row) ~ .#{$table}__expandable-row {
+    > .#{$table}__th,
+    > .#{$table}__td {
+      padding-block-start: 0;
+    }
   }
 
   td:where(.#{$table}__td),
   th:where(.#{$table}__th) {
     &.pf-m-no-padding {
       padding-block-start: 0;
-      padding-inline-end: 0;
       padding-block-end: 0;
-      padding-inline-start: var(--#{$table}__expandable-row--after--border-width--base); // set padding-left to adjust for left border.
+      padding-inline-start: 0;
+      padding-inline-end: 0;
 
       .#{$table}__expandable-row-content {
         padding: 0;
       }
     }
   }
-  // stylelint-enable
 
+  // - Table expandable row content
   .#{$table}__expandable-row-content {
-    padding-block-start: var(--#{$table}__expandable-row-content--PaddingTop);
-    padding-block-end: var(--#{$table}__expandable-row-content--PaddingBottom);
+    padding-block-start: var(--#{$table}__expandable-row-content--PaddingBlockStart);
+    padding-block-end: var(--#{$table}__expandable-row-content--PaddingBlockEnd);
+    padding-inline-start: var(--#{$table}__expandable-row-content--PaddingInlineStart);
+    padding-inline-end: var(--#{$table}__expandable-row-content--PaddingInlineEnd);
+    background-color: var(--#{$table}__expandable-row-content--BackgroundColor);
+    border-radius: var(--#{$table}__expandable-row-content--BorderRadius);
   }
 
-  // Modifier - Expanded tr
+  // - Table expandable row content expanded
   &.pf-m-expanded {
-    border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBottomColor);
+    border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBlockEndColor);
     border-block-end-width: var(--#{$table}--border-width--base);
-
   }
 
   &:not(.pf-m-expanded) {
     display: none;
   }
 
-  // Table table
+  // - Table expandable row tr last-child
   tr:last-child {
     border-block-end: 0;
   }
@@ -999,22 +991,23 @@
 
 // - Table compact
 .#{$table}.pf-m-compact {
-  --#{$table}--cell--PaddingTop: var(--#{$table}--m-compact--cell--PaddingTop);
-  --#{$table}--cell--PaddingBottom: var(--#{$table}--m-compact--cell--PaddingBottom);
+  --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact--cell--PaddingBlockStart);
+  --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact--cell--PaddingBlockEnd);
 
+  // - Table compact table tr
   tr:where(.#{$table}__tr) {
     &:not(.#{$table}__expandable-row) {
-      --#{$table}--cell--PaddingTop: var(--#{$table}--m-compact--cell--PaddingTop);
-      --#{$table}--cell--PaddingBottom: var(--#{$table}--m-compact--cell--PaddingBottom);
+      --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact--cell--PaddingBlockStart);
+      --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact--cell--PaddingBlockEnd);
     }
   }
 
-  // Thead
+  // - Table compact thead
   thead:where(.#{$table}__thead) {
     th:where(.#{$table}__th),
     .#{$table}__toggle {
-      --#{$table}--cell--PaddingTop: var(--#{$table}--m-compact__th--PaddingTop);
-      --#{$table}--cell--PaddingBottom: var(--#{$table}--m-compact__th--PaddingBottom);
+      --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact__th--PaddingBlockStart);
+      --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__th--PaddingBlockEnd);
     }
   }
 
@@ -1022,8 +1015,8 @@
   .#{$table}__favorite,
   .#{$table}__toggle,
   .#{$table}__draggable {
-    --#{$table}--cell--PaddingTop: var(--#{$table}--m-compact__action--PaddingTop);
-    --#{$table}--cell--PaddingBottom: var(--#{$table}--m-compact__action--PaddingBottom);
+    --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact__action--PaddingBlockStart);
+    --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__action--PaddingBlockEnd);
   }
 
   .#{$table}__icon {
@@ -1033,26 +1026,78 @@
   }
 }
 
+// - Table thead
 .#{$table}__thead {
+  --#{$table}__tr--BorderBlockEndWidth: 0;
+  --#{$table}__toggle--PaddingBlockEnd: var(--#{$table}__thead__toggle--PaddingBlockEnd);
+
   vertical-align: bottom;
+
+  // - Table nested column header button
+  &.pf-m-nested-column-header {
+    .#{$table}__button {
+      --#{$table}__button--PaddingInlineStart: var(--#{$table}__nested-column-header__button--PaddingInlineStart);
+      --#{$table}__button--PaddingInlineEnd: var(--#{$table}__nested-column-header__button--PaddingInlineEnd);
+
+      // margin to align with thead padding
+      margin-inline-end: calc(var(--#{$table}__button--PaddingInlineStart) * -1);
+    }
+  }
 }
 
+// - Table tbody
 .#{$table}__tbody {
   vertical-align: top;
 
-  .#{$table}__tr {
+  // TODO: make this a class `compound expansion content`
+  .#{$table}__control-row ~ .#{$table}__expandable-row.pf-m-expanded {
+    background-color: var(--#{$table}--compound-expansion--m-expanded--BackgroundColor);
+  }
+}
+
+// Table table tbody expandable
+.#{$table}.pf-m-expandable {
+  .#{$table}__tr.pf-m-expanded {
+    border-block-end: 0;
+  }
+
+  // - Table tbody
+  .#{$table}__tbody {
+    border-block-end: var(--#{$table}__tr--BorderBlockEndWidth) solid var(--#{$table}__tr--BorderBlockEndColor);
+  }
+
+  // - Table tbody - Table tr
+  .#{$table}__tbody.pf-m-expanded {
+    border-block-end: var(--#{$table}__tr--BorderBlockEndWidth) solid var(--#{$table}__tr--BorderBlockEndColor);
+
+    // - Table tbody table control row
+    .#{$table}__control-row {
+      background-color: var(--#{$table}__control-row--BackgroundColor);
+      border-block-end: var(--#{$table}__control-row--BorderBlockEndWidth) solid var(--#{$table}__control-row__tbody--BorderBlockEndColor);
+    }
+  }
+}
+
+// - Table tr
+.#{$table}__tr {
+  border-block-end: var(--#{$table}__tr--BorderBlockEndWidth) solid var(--#{$table}__tr--BorderBlockEndColor);
+
+  .#{$table}__thead & {
+    border-block-end: 0;
+  }
+
+  &.pf-m-border-row {
     border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
   }
 }
 
-// replace this when inline text with icon is in place
-// Icon inline
+// - Table icon inline
 .#{$table}__icon-inline {
   display: flex;
   align-items: center;
 
   > :not(:last-child) {
-    margin-inline-end: var(--#{$table}__icon-inline--MarginRight);
+    margin-inline-end: var(--#{$table}__icon-inline--MarginInlineEnd);
   }
 }