@patternfly/patternfly 6.0.0-alpha.98 → 6.0.0-alpha.99

package/components/Table/table.scss

@@ -7,7 +7,7 @@
   --#{$table}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$table}--border-width--base: var(--pf-t--global--border--width--divider--default);
 
-  // Caption
+  // * 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);
@@ -15,21 +15,18 @@
   --#{$table}__caption--PaddingBottom: var(--pf-t--global--spacer--md);
   --#{$table}__caption--PaddingLeft: var(--pf-t--global--spacer--lg);
 
-  // Thead
+  // * 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);
 
-  // Tbody cell
+  // * Table body cell
   --#{$table}__tbody--cell--PaddingTop: var(--#{$table}--cell--Padding--base);
   --#{$table}__tbody--cell--PaddingBottom: 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
 
-  // Tr
-  --#{$table}__tr--BoxShadow--top--base: 0 #{pf-size-prem(-3px)} #{pf-size-prem(4px)} #{pf-size-prem(-2px)} rgba(3,3,3,.08);
-
   // TODO: update these in order of appearance in scss declarations
 
-  // Th / td shared variables
+  // * Table cell
   --#{$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);
@@ -42,7 +39,7 @@
   --#{$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);
 
-  // Default cell variables
+  // * Table cell - default variables
   --#{$table}--cell--MinWidth: 0;
   --#{$table}--cell--MaxWidth: none;
   --#{$table}--cell--Width: auto;
@@ -51,23 +48,23 @@
   --#{$table}--cell--WhiteSpace: normal;
   --#{$table}--cell--WordBreak: normal;
 
-  // Border
+  // * 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);
 
-  // Help
+  // * Table help
   --#{$table}--cell--m-help--MinWidth: 11ch;
 
-  // Truncate
+  // * Table truncate
   --#{$table}--m-truncate--cell--MaxWidth: 1px;
   --#{$table}--m-truncate--cell--MinWidth: calc(5ch + var(--#{$table}--cell--PaddingRight) + var(--#{$table}--cell--PaddingLeft));
 
-  // Hidden visible
+  // * Table cell hidden visible
   --#{$table}--cell--hidden-visible--Display: table-cell;
 
-  // Table cell - toggle
+  // * 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);
@@ -76,58 +73,55 @@
   --#{$table}__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
   --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
 
-  // Button
-  --#{$table}__button--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$table}__button--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --#{$table}__button--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$table}__button--PaddingRight: var(--pf-t--global--spacer--sm);
+  // * 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--Color: var(--pf-t--global--text--color--regular);
-  --#{$table}__button--BackgroundColor: transparent;
+  --#{$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--focus--Color: var(--pf-t--global--text--color--regular);
-  --#{$table}__button--active--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);
 
-  // Compact
+  // * Table compact
   --#{$table}--m-compact__toggle--PaddingTop: 0;
   --#{$table}--m-compact__toggle--PaddingBottom: 0;
 
-  // Check
+  // * Table check
   --#{$table}__check--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$table}__check--PaddingRight: var(--pf-t--global--spacer--sm);
 
-  // Favorite
-  --#{$table}__favorite--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$table}__favorite--PaddingRight: 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}__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 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);
 
-  // Ghost row
+  // * Table ghost row
   --#{$table}__tr--m-ghost-row--Opacity: .4;
   --#{$table}__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
-  // Action
+  // * 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);
 
-  // Inline edit
+  // * 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);
 
-  // Expandable row
+  // * 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);
@@ -135,167 +129,113 @@
   --#{$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
 
-  // ::after 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-t--global--border--width--strong);
-  --#{$table}__expandable-row--after--BorderLeftWidth: 0;
-  --#{$table}__expandable-row--after--BorderColor: var(--pf-t--global--border--color--clicked);
-
-  // Icon inline
+  // * Table icon inline
   --#{$table}__icon-inline--MarginRight: var(--pf-t--global--spacer--sm);
 
-  // Sort cell
+  // * Table 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-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
+  --#{$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--m-selected__button--Color: var(--pf-t--global--border--color--clicked);
+  --#{$table}__sort--m-selected__button--Color: var(--pf-t--global--color--brand--clicked);
   --#{$table}__sort--m-help--MinWidth: 15ch;
 
-  // Sort text
+  // * Table sort button
   --#{$table}__sort__button__text--Color: currentcolor;
   --#{$table}__sort__button--hover__text--Color: currentcolor;
-  --#{$table}__sort__button--focus__text--Color: currentcolor;
-  --#{$table}__sort__button--active__text--Color: currentcolor;
 
-  // Sort text
+  // * Table sort cell
   --#{$table}__sort--cell--PaddingLeft: var(--pf-t--global--spacer--xs);
   --#{$table}__sort--cell--PaddingRight: var(--pf-t--global--spacer--sm);
 
-  // Sort indicator
+  // * 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--m-selected__sort-indicator--Color: var(--pf-t--global--border--color--clicked);
+  --#{$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);
-  --#{$table}__sort__button--active__sort-indicator--Color: var(--pf-t--global--text--color--regular);
-  --#{$table}__sort__button--focus__sort-indicator--Color: var(--pf-t--global--text--color--regular);
 
-  // Help
+  // * Table help
   --#{$table}__th--m-help--MinWidth: 11ch;
 
-  // Table header popover
+  // * 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);
 
-  // Compound expansion toggle button
+  // * Table compound expansion toggle button
   --#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
   --#{$table}__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
-  --#{$table}__compound-expansion-toggle__button--focus--Color: var(--pf-t--global--icon--color--brand--hover);
-  --#{$table}__compound-expansion-toggle__button--active--Color: var(--pf-t--global--icon--color--brand--clicked);
-
-  // ::before border treatment
-  --#{$table}__compound-expansion-toggle__button--before--border-width--base: var(--pf-t--global--border--width--button--default);
-  --#{$table}__compound-expansion-toggle__button--before--BorderColor: var(--pf-t--global--border--color--default);
-  --#{$table}__compound-expansion-toggle__button--before--BorderRightWidth: 0;
-  --#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
-  --#{$table}__compound-expansion-toggle__button--before--Bottom: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
-  --#{$table}__compound-expansion-toggle__button--before--Left: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
-
-  // ::after border treatment
-  --#{$table}__compound-expansion-toggle__button--after--border-width--base: var(--pf-t--global--border--width--strong);
+
+  // * 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__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);
+  --#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
 
-  // Compact table
+  // * 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 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 compact action
   --#{$table}--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
   --#{$table}--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
 
-  // Modifier - expandable row expanded
+  // * Table expandable row expanded
   --#{$table}__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
 
-  // tr clickable
-  --#{$table}__tr--m-clickable--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
+  // * Table tr clickable
   --#{$table}__tr--m-clickable--BackgroundColor: transparent;
-  --#{$table}__tr--m-clickable--BoxShadow: none;
   --#{$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);
   --#{$table}__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --#{$table}__tr--m-clickable--focus--BoxShadow: var(--#{$table}__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$table}__tr--m-clickable--focus--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --#{$table}__tr--m-clickable--active--BoxShadow: var(--#{$table}__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$table}__tr--m-clickable--active--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --#{$table}__tr--m-clickable--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
-
-  // tr selected
-  --#{$table}__tr--m-selected--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
+
+  // * Table tr selected
   --#{$table}__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --#{$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-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);
-
-  // tbody clickable
-  --#{$table}__tbody--m-clickable--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
-  --#{$table}__tbody--m-clickable--BoxShadow: none;
+
+  // * 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--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);
-  --#{$table}__tbody--m-clickable--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$table}__tbody--m-clickable--active--BoxShadow: var(--#{$table}__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$table}__tbody--m-clickable--active--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--m-selected--hover__tr--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
 
-  // tbody selected
+  // * Table tbody selected
   --#{$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-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--clicked);
-  --#{$table}__tbody--m-selected--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$table}__tbody--m-selected--hover__tbody--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$table}__tbody--m-selected__tbody--m-selected--hover--BoxShadow: var(--#{$table}__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
 
-  // Nested column header
+  // * 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);
 
-  // Subhead
+  // * 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);
 
-  // Striped
+  // * Table striped
   --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
-  // Sticky
+  // * Table sticky
   --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
 }
 
 // TODO: update grouping comments to // Table {element}
 // TODO: flatten the modifiers out ex: .#{$table}.pf-m-sticky-header {}
-// Table
+// - Table
 .#{$table} {
-  @include pf-v5-t-light; // This component always needs to be light
-
   // Base
   width: 100%;
   background-color: var(--#{$table}--BackgroundColor);
@@ -308,16 +248,14 @@
     position: relative;
 
     thead:where(.#{$table}__thead) tr:where(.#{$table}__tr) {
-      border-block-end: 0;
-
-      > * {
+      > :where(th, td) {
         z-index: var(--#{$table}--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
       }
     }
 
     // standard sticky headers
     > thead:where(.#{$table}__thead):not(.pf-m-nested-column-header) {
-      > tr:where(.#{$table}__tr) > * {
+      > tr:where(.#{$table}__tr) > :where(th, td) {
         position: sticky;
         inset-block-start: 0;
         background: var(--#{$table}--BackgroundColor);
@@ -346,6 +284,7 @@
         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),
@@ -390,8 +329,6 @@
   // Standard table row (non-expandable)
   // exclude expandable rows
   tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
-    border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
-
     // stylelint-disable-next-line
     &.pf-m-ghost-row {
       background-color: var(--#{$table}__tr--m-ghost-row--BackgroundColor);
@@ -399,11 +336,11 @@
     }
   }
 
-  // Table cell
-  tr:where(.#{$table}__tr) > * {
+  // - Table th - Table td
+  tr:where(.#{$table}__tr) > :where(th, td) {
     @include pf-v5-hidden-visible(var(--#{$table}--cell--hidden-visible--Display));
 
-    // set position relative for ::before/::after borders
+    // set position relative for ::after borders
     position: relative;
     width: var(--#{$table}--cell--Width);
     min-width: var(--#{$table}--cell--MinWidth);
@@ -471,7 +408,7 @@
     }
   }
 
-  // Table caption
+  // - Table caption
   caption:where(.#{$table}__caption) {
     padding-block-start: var(--#{$table}__caption--PaddingTop);
     padding-block-end: var(--#{$table}__caption--PaddingBottom);
@@ -482,13 +419,11 @@
     background-color: var(--#{$table}--BackgroundColor);
   }
 
-  // Table header cell
+  // - Table header cell
   thead:where(.#{$table}__thead) {
     --#{$table}--cell--FontSize: var(--#{$table}__thead--cell--FontSize);
     --#{$table}--cell--FontWeight: var(--#{$table}__thead--cell--FontWeight);
 
-    vertical-align: baseline;
-
     // stylelint-disable
     &.pf-m-nested-column-header {
       button:where(.#{$button}) {
@@ -506,6 +441,7 @@
     }
     // stylelint-enable
 
+    // - Table subhead
     .#{$table}__subhead {
       --#{$table}--cell--PaddingLeft: var(--#{$table}__subhead--PaddingLeft);
       --#{$table}--cell--PaddingRight: var(--#{$table}__subhead--PaddingRight);
@@ -519,39 +455,16 @@
     }
   }
 
-  // Table body cell
+  // - Table tbody
   // stylelint-disable
   tbody:where(.#{$table}__tbody) {
     --#{$table}--cell--PaddingTop: var(--#{$table}__tbody--cell--PaddingTop);
     --#{$table}--cell--PaddingBottom: var(--#{$table}__tbody--cell--PaddingBottom);
-
-    vertical-align: top;
-
     --#{$table}--cell--FontSize: var(--#{$table}__tbody--cell--FontSize);
 
-    > tr:where(.#{$table}__tr) > * {
+    > tr:where(.#{$table}__tr) > :where(th, td) {
       overflow-wrap: break-word;
     }
-
-    // Border treatment
-    // using first child as row does not calculate height appropriately
-    > tr:where(.#{$table}__tr) > :first-child::after {
-      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;
-      content: '';
-
-      // add border left
-      background-color: transparent;
-      border-inline-start: var(--#{$table}__expandable-row--after--BorderLeftWidth) solid var(--#{$table}__expandable-row--after--BorderColor);
-    }
-
-    &.pf-m-expanded > :first-child:not(.#{$table}__control-row) {
-      border-block-end-width: 0;
-    }
   }
   // stylelint-enable
 
@@ -568,6 +481,7 @@
   //   }
   // }
 
+  // - Table sort
   // set property here to increase specificity
   .#{$table}__sort {
     min-width: var(--#{$table}__sort--MinWidth);
@@ -579,6 +493,7 @@
     }
   }
 
+  // - 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,
@@ -626,40 +541,25 @@
   &.pf-m-no-border-rows > tbody:where(.#{$table}__tbody) {
     > tr:where(.#{$table}__tr) {
       border-block-end: 0;
-
-      > :first-child::after {
-        border-inline-start: 0;
-      }
     }
 
     &:not(.pf-m-expanded) .#{$table}__compound-expansion-toggle .#{$table}__button::before {
       display: none;
     }
-
-    &.pf-m-expanded > .#{$table}__control-row {
-      border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
-    }
-
-    .#{$table}__control-row > .#{$table}__compound-expansion-toggle:first-child > ::before {
-      border-inline-start-width: 0;
-    }
   }
 
   tr.pf-m-clickable:last-child {
     border-block-end-color: transparent;
   }
 
-  // tr clickable
+  // - Table tr clickable
   tr:where(.#{$table}__tr) {
     &.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);
 
-      &:hover,
-      &:focus,
-      &:active {
+      &:is(:hover, :focus) {
         --#{$table}__tr--m-clickable--BackgroundColor: var(--#{$table}__tr--m-clickable--hover--BackgroundColor);
       }
     }
@@ -672,19 +572,6 @@
       position: relative;
       background-color: var(--#{$table}__tr--m-selected--BackgroundColor);
       outline-offset: var(--#{$table}__tr--m-selected--OutlineOffset);
-      box-shadow: var(--#{$table}__tr--m-selected--BoxShadow);
-
-      & + tr:where(.#{$table}__tr).pf-m-selected {
-        box-shadow: var(--#{$table}__tr--m-selected--m-selected--BoxShadow);
-      }
-
-      & + tr:where(.#{$table}__tr).pf-m-selected:hover {
-        box-shadow: var(--#{$table}__tr--m-selected__tr--m-selected--hover--BoxShadow);
-      }
-
-      &:hover + tr:where(.#{$table}__tr).pf-m-selected {
-        box-shadow: var(--#{$table}__tr--m-selected--hover__tr--m-selected--BoxShadow);
-      }
     }
 
     &.pf-m-first-cell-offset-reset {
@@ -692,65 +579,30 @@
     }
   }
 
-  // tbody clickable
+  // - Table tbody clickable
   // stylelint-disable no-duplicate-selectors
   tbody:where(.#{$table}__tbody) {
     &.pf-m-clickable {
       cursor: pointer;
       background-color: var(--#{$table}__tbody--m-clickable--BackgroundColor);
       outline-offset: var(--#{$table}__tbody--m-clickable--OutlineOffset);
-      box-shadow: var(--#{$table}__tbody--m-clickable--BoxShadow);
 
       &.pf-m-expanded:not(.pf-m-selected) {
         --#{$table}__expandable-row--after--BorderColor: var(--#{$table}__tbody--m-clickable--m-expanded--BorderColor);
       }
 
-      &:hover,
-      &:focus,
-      &:active {
-        // stylelint-disable max-nesting-depth
-        &:not(.pf-m-selected) + tbody:where(.#{$table}__tbody).pf-m-selected {
-          box-shadow: var(--#{$table}__tbody--m-clickable--m-selected--hover__tr--BoxShadow);
-        }
-        // stylelint-enable
-      }
-
-      &:hover {
-        --#{$table}__tbody--m-clickable--BoxShadow: var(--#{$table}__tbody--m-clickable--hover--BoxShadow);
+      &:is(:hover, :focus) {
         --#{$table}__tbody--m-clickable--BackgroundColor: var(--#{$table}__tbody--m-clickable--hover--BackgroundColor);
       }
-
-      &:focus {
-        --#{$table}__tbody--m-clickable--BoxShadow: var(--#{$table}__tbody--m-clickable--focus--BoxShadow);
-        --#{$table}__tbody--m-clickable--BackgroundColor: var(--#{$table}__tbody--m-clickable--focus--BackgroundColor);
-      }
-
-      &:active {
-        --#{$table}__tbody--m-clickable--BoxShadow: var(--#{$table}__tbody--m-clickable--active--BoxShadow);
-        --#{$table}__tbody--m-clickable--BackgroundColor: var(--#{$table}__tbody--m-clickable--active--BackgroundColor);
-      }
     }
 
-    // tbody selected
+    // - 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);
-      box-shadow: var(--#{$table}__tbody--m-selected--BoxShadow);
-
-      & + tbody:where(.#{$table}__tbody).pf-m-selected {
-        --#{$table}__tbody--m-selected--BoxShadow: var(--#{$table}__tbody--m-selected--m-selected--BoxShadow);
-      }
-
-      & + tbody:where(.#{$table}__tbody).pf-m-selected:hover {
-        box-shadow: var(--#{$table}__tbody--m-selected__tbody--m-selected--hover--BoxShadow);
-      }
-
-      &:hover + tbody:where(.#{$table}__tbody).pf-m-selected {
-        box-shadow: var(--#{$table}__tbody--m-selected--hover__tbody--m-selected--BoxShadow);
-      }
     }
   }
 
@@ -759,7 +611,7 @@
   }
 }
 
-// Text
+// - Table text
 .#{$table}__text {
   --#{$table}--cell--MaxWidth: 100%;
 
@@ -778,7 +630,7 @@
   &.pf-m-truncate {
     --#{$table}--cell--MinWidth: 100%;
 
-    > * {
+    > :where(th, td) {
       overflow: var(--#{$table}--cell--Overflow);
       text-overflow: var(--#{$table}--cell--TextOverflow);
       white-space: var(--#{$table}--cell--WhiteSpace);
@@ -786,14 +638,21 @@
   }
 }
 
-// Table button
+// - Table tr
+.#{$table}__tr {
+  &.pf-m-border-row {
+    border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+  }
+}
+
+// - Table button
 .#{$table}__button {
-  position: static;
   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);
   font-size: inherit;
   font-weight: inherit;
@@ -810,31 +669,12 @@
     margin-block-end: 0; // remove offset in nested tables
   }
 
-  // Define clickable area with invisible ::before pseudo
-  &::before {
-    position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    cursor: pointer;
-    content: '';
-  }
-
-  &:hover {
+  &:is(:hover, :focus) {
     color: var(--#{$table}__button--hover--Color);
   }
-
-  &:focus {
-    color: var(--#{$table}__button--focus--Color);
-  }
-
-  &:active {
-    color: var(--#{$table}__button--active--Color);
-  }
 }
 
-// Focus styles
+// - Table sort - Table compound expansion toggle
 .#{$table}__sort,
 .#{$table}__compound-expansion-toggle {
   // Pass properties to text
@@ -847,7 +687,7 @@
   }
 }
 
-// Sort content
+// - Table button content - Table column help
 // display grid for buttons is not supported
 .#{$table}__button-content,
 .#{$table}__column-help {
@@ -883,7 +723,7 @@
 }
 
 // stylelint-disable
-// Minimize width
+// - Table check - Table toggle - Table action - Table favorite - Table inline-edit-action - Table draggable
 .#{$table} .#{$table}__check,
 .#{$table} .#{$table}__toggle,
 .#{$table} .#{$table}__action,
@@ -896,7 +736,7 @@
 }
 // stylelint-enable
 
-// Toggle table cell
+// - Table toggle
 .#{$table}__toggle {
   --#{$table}--cell--PaddingTop: var(--#{$table}__toggle--PaddingTop);
   --#{$table}--cell--PaddingBottom: var(--#{$table}__toggle--PaddingBottom);
@@ -922,33 +762,42 @@
   }
 }
 
-// Check table cell
+// - Table check
 .#{$table}__check {
   --#{$table}--cell--PaddingLeft: var(--#{$table}__check--PaddingLeft);
   --#{$table}--cell--PaddingRight: var(--#{$table}__check--PaddingRight);
 
-  .#{$check}.pf-m-standalone {
-    display: inline-flex;
+  vertical-align: top;
 
-    thead & {
-      vertical-align: bottom;
-    }
+  .#{$check} {
+    --#{$check}__label--FontSize: var(--#{$table}--cell--FontSize);
+    --#{$check}__label--LineHeight: var(--#{$table}--cell--LineHeight);
+  }
 
-    tbody & {
-      vertical-align: top;
-    }
+  .#{$radio} {
+    --#{$radio}__label--FontSize: var(--#{$table}--cell--FontSize);
+    --#{$radio}__label--LineHeight: var(--#{$table}--cell--LineHeight);
   }
 
-  // TODO: remove label wrapper at breaking change
-  label {
-    display: contents;
+  thead & {
+    vertical-align: bottom;
+  }
+
+  .#{$check}.pf-m-standalone,
+  .#{$radio}.pf-m-standalone {
+    thead & {
+      display: table-cell;
+      height: auto;
+      line-height: 1;
+      vertical-align: baseline;
+    }
   }
 }
 
-// Favorite body cell
+// - Table favorite
 .#{$table}__favorite {
-  --#{$table}--cell--PaddingLeft: var(--#{$table}__favorite--PaddingLeft);
-  --#{$table}--cell--PaddingRight: var(--#{$table}__favorite--PaddingRight);
+  // --#{$table}--cell--PaddingLeft: var(--#{$table}__favorite--PaddingLeft);
+  // --#{$table}--cell--PaddingRight: var(--#{$table}__favorite--PaddingRight);
 
   .#{$button} {
     --#{$button}--FontSize: var(--#{$table}__favorite--c-button--FontSize);
@@ -959,7 +808,7 @@
   }
 }
 
-// Draggable
+// - Table draggable
 .#{$table}__draggable {
   .#{$button} {
     cursor: grab;
@@ -970,14 +819,18 @@
   }
 }
 
-// Table action cell
+// - Table action - Table favorite - Table inline edit action - Table draggable
 .#{$table}__action,
+.#{$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 action - Table inline edit action
 .#{$table}__action,
 .#{$table}__inline-edit-action {
   &:last-child {
@@ -985,12 +838,10 @@
   }
 }
 
-// Compound expansion toggle
+// - Table compound expansion toggle
 .#{$table}__compound-expansion-toggle {
   --#{$table}__button--Color: var(--#{$table}__compound-expansion-toggle__button--Color);
   --#{$table}__button--hover--Color: var(--#{$table}__compound-expansion-toggle__button--hover--Color);
-  --#{$table}__button--focus--Color: var(--#{$table}__compound-expansion-toggle__button--focus--Color);
-  --#{$table}__button--active--Color: var(--#{$table}__compound-expansion-toggle__button--active--Color);
 
   position: relative;
   padding: 0;
@@ -1008,58 +859,24 @@
     overflow: hidden;
 
     // Remove outline and apply to parent td
-    &:hover,
-    &:focus,
-    &:active {
+    &:is(:hover, :focus) {
       outline: 0;
     }
   }
 
-
   // Apply borders to button to avoid conflicts with expanded states
-  .#{$table}__button::before,
   .#{$table}__button::after {
     position: absolute;
     inset: 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);
-    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);
-    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);
+    border: 0;
+    border-block-start: var(--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth) solid var(--#{$table}__compound-expansion-toggle__button--after--BorderColor);
   }
 
   &:hover,
   &:focus-within,
   &.pf-m-expanded {
-    --#{$table}__compound-expansion-toggle__button--before--BorderRightWidth: var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
-    --#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth: var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
-    --#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: var(--#{$table}__compound-expansion-toggle__button--after--border-width--base);
-  }
-
-  &.pf-m-expanded {
-    .#{$table}__button::before {
-      border-block-end: var(--#{$table}--BackgroundColor) solid var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
-    }
-
-    &:first-child {
-      --#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
-    }
+    --#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: var(--#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth);
   }
 
   &:focus-within {
@@ -1079,27 +896,19 @@
   margin-inline-start: var(--#{$table}__column-help--MarginLeft);
 }
 
-// Table sort
-// ==================================================================
+// - Table sort
 .#{$table}__sort {
-  // - Table sort button
-  // ==================================================================
+  vertical-align: bottom;
+
+  // - Table button
   .#{$table}__button {
-    &:hover {
+    &:is(:hover, :focus) {
       --#{$table}__sort-indicator--Color: var(--#{$table}__sort__button--hover__sort-indicator--Color);
       --#{$table}__sort__button__text--Color: var(--#{$table}__sort__button--hover__text--Color);
+      --#{$table}__button--BackgroundColor: var(--#{$table}__button--hover--BackgroundColor);
     }
 
-    &:focus {
-      --#{$table}__sort-indicator--Color: var(--#{$table}__sort__button--focus__sort-indicator--Color);
-      --#{$table}__sort__button__text--Color: var(--#{$table}__sort__button--focus__text--Color);
-    }
-
-    &:active {
-      --#{$table}__sort-indicator--Color: var(--#{$table}__sort__button--active__sort-indicator--Color);
-      --#{$table}__sort__button__text--Color: var(--#{$table}__sort__button--active__text--Color);
-    }
-
+    // - Table text
     .#{$table}__text {
       color: var(--#{$table}__sort__button__text--Color);
     }
@@ -1120,27 +929,25 @@
   &.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__button--focus__text--Color: var(--#{$table}__sort--m-favorite__button--focus__text--Color);
-    --#{$table}__sort__button--active__text--Color: var(--#{$table}__sort--m-favorite__button--active__text--Color);
     --#{$table}__sort--m-selected__button__text--Color: currentcolor;
   }
 }
 
-// Sort indicator
+// - Table sort indicator
 .#{$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);
   color: var(--#{$table}__sort-indicator--Color);
-  color: var(--#{$table}__sort-indicator--FontSize);
   pointer-events: none;
 }
 
-// Expandable row
-// ==================================================================
+// - Table expandable row
 .#{$table}__expandable-row {
   position: relative;
   border-block-end: 0 solid transparent;
-  box-shadow: 0 0 0 0 transparent;
+
 
   &,
   td:where(.#{$table}__td):first-child::after {
@@ -1177,7 +984,7 @@
   &.pf-m-expanded {
     border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBottomColor);
     border-block-end-width: var(--#{$table}--border-width--base);
-    box-shadow: var(--#{$table}__expandable-row--m-expanded--BoxShadow);
+
   }
 
   &:not(.pf-m-expanded) {
@@ -1190,8 +997,7 @@
   }
 }
 
-// Compact table
-// ==================================================================
+// - Table compact
 .#{$table}.pf-m-compact {
   --#{$table}--cell--PaddingTop: var(--#{$table}--m-compact--cell--PaddingTop);
   --#{$table}--cell--PaddingBottom: var(--#{$table}--m-compact--cell--PaddingBottom);
@@ -1227,6 +1033,18 @@
   }
 }
 
+.#{$table}__thead {
+  vertical-align: bottom;
+}
+
+.#{$table}__tbody {
+  vertical-align: top;
+
+  .#{$table}__tr {
+    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 {
@@ -1238,7 +1056,7 @@
   }
 }
 
-// Modifier - Width
+// - Table width
 // stylelint-disable
 .#{$table} .pf-m-width-10 {
   --#{$table}--cell--Width: 10%;
@@ -1296,10 +1114,3 @@
   --#{$table}--cell--Width: 100%;
 }
 // stylelint-enable
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import 'themes/dark/table';
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-table;
-}