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

package/components/Table/table-grid.css

@@ -68,7 +68,7 @@
   display: grid;
   border: none;
 }
-.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > * {
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
   width: auto;
   min-width: 0;
   max-width: none;
@@ -128,13 +128,13 @@
   padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBottom);
   padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingLeft);
 }
-.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > * {
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
   padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingTop);
   padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingRight);
   padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBottom);
   padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingLeft);
 }
-.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > *:first-child {
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
   --pf-v6-c-table--cell--responsive--PaddingTop: var(--pf-v6-c-table--cell--first-child--responsive--PaddingTop);
 }
 .pf-m-grid.pf-v6-c-table.pf-m-compact {
@@ -170,10 +170,10 @@
   text-align: start;
   content: attr(data-label);
 }
-.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:first-child {
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
   --pf-v6-c-table--cell--PaddingLeft: 0;
 }
-.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:last-child {
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
   --pf-v6-c-table--cell--PaddingRight: 0;
 }
 .pf-m-grid.pf-v6-c-table .pf-v6-c-table {
@@ -226,9 +226,8 @@
   max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
   overflow-y: auto;
   border-block-end: none;
-  box-shadow: none;
 }
-.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row > * {
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
   position: static;
   display: block;
 }
@@ -383,7 +382,7 @@
     display: grid;
     border: none;
   }
-  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > * {
+  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
     width: auto;
     min-width: 0;
     max-width: none;
@@ -443,13 +442,13 @@
     padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBottom);
     padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingLeft);
   }
-  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > * {
+  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
     padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingTop);
     padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingRight);
     padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBottom);
     padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingLeft);
   }
-  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > *:first-child {
+  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
     --pf-v6-c-table--cell--responsive--PaddingTop: var(--pf-v6-c-table--cell--first-child--responsive--PaddingTop);
   }
   .pf-m-grid-md.pf-v6-c-table.pf-m-compact {
@@ -485,10 +484,10 @@
     text-align: start;
     content: attr(data-label);
   }
-  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:first-child {
+  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
     --pf-v6-c-table--cell--PaddingLeft: 0;
   }
-  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:last-child {
+  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
     --pf-v6-c-table--cell--PaddingRight: 0;
   }
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table {
@@ -541,9 +540,8 @@
     max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
     overflow-y: auto;
     border-block-end: none;
-    box-shadow: none;
   }
-  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row > * {
+  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
     position: static;
     display: block;
   }
@@ -701,7 +699,7 @@
     display: grid;
     border: none;
   }
-  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > * {
+  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
     width: auto;
     min-width: 0;
     max-width: none;
@@ -761,13 +759,13 @@
     padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBottom);
     padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingLeft);
   }
-  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > * {
+  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
     padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingTop);
     padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingRight);
     padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBottom);
     padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingLeft);
   }
-  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > *:first-child {
+  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
     --pf-v6-c-table--cell--responsive--PaddingTop: var(--pf-v6-c-table--cell--first-child--responsive--PaddingTop);
   }
   .pf-m-grid-lg.pf-v6-c-table.pf-m-compact {
@@ -803,10 +801,10 @@
     text-align: start;
     content: attr(data-label);
   }
-  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:first-child {
+  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
     --pf-v6-c-table--cell--PaddingLeft: 0;
   }
-  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:last-child {
+  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
     --pf-v6-c-table--cell--PaddingRight: 0;
   }
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table {
@@ -859,9 +857,8 @@
     max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
     overflow-y: auto;
     border-block-end: none;
-    box-shadow: none;
   }
-  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row > * {
+  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
     position: static;
     display: block;
   }
@@ -1019,7 +1016,7 @@
     display: grid;
     border: none;
   }
-  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > * {
+  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
     width: auto;
     min-width: 0;
     max-width: none;
@@ -1079,13 +1076,13 @@
     padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBottom);
     padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingLeft);
   }
-  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > * {
+  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
     padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingTop);
     padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingRight);
     padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBottom);
     padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingLeft);
   }
-  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > *:first-child {
+  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
     --pf-v6-c-table--cell--responsive--PaddingTop: var(--pf-v6-c-table--cell--first-child--responsive--PaddingTop);
   }
   .pf-m-grid-xl.pf-v6-c-table.pf-m-compact {
@@ -1121,10 +1118,10 @@
     text-align: start;
     content: attr(data-label);
   }
-  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:first-child {
+  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
     --pf-v6-c-table--cell--PaddingLeft: 0;
   }
-  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:last-child {
+  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
     --pf-v6-c-table--cell--PaddingRight: 0;
   }
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table {
@@ -1177,9 +1174,8 @@
     max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
     overflow-y: auto;
     border-block-end: none;
-    box-shadow: none;
   }
-  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row > * {
+  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
     position: static;
     display: block;
   }
@@ -1337,7 +1333,7 @@
     display: grid;
     border: none;
   }
-  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > * {
+  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
     width: auto;
     min-width: 0;
     max-width: none;
@@ -1397,13 +1393,13 @@
     padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBottom);
     padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingLeft);
   }
-  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > * {
+  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
     padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingTop);
     padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingRight);
     padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBottom);
     padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingLeft);
   }
-  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > *:first-child {
+  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
     --pf-v6-c-table--cell--responsive--PaddingTop: var(--pf-v6-c-table--cell--first-child--responsive--PaddingTop);
   }
   .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact {
@@ -1439,10 +1435,10 @@
     text-align: start;
     content: attr(data-label);
   }
-  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:first-child {
+  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
     --pf-v6-c-table--cell--PaddingLeft: 0;
   }
-  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:last-child {
+  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
     --pf-v6-c-table--cell--PaddingRight: 0;
   }
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table {
@@ -1495,9 +1491,8 @@
     max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
     overflow-y: auto;
     border-block-end: none;
-    box-shadow: none;
   }
-  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row > * {
+  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
     position: static;
     display: block;
   }

package/components/Table/table-grid.scss

@@ -29,6 +29,7 @@
   }
 }
 
+// - Table grid
 .#{$table}[class*="pf-m-grid"] {
   // ============================================================ //
   // Start non-conformant variables
@@ -37,16 +38,16 @@
   // this is purposeful and necessary to avoid adding selectors to each td/th
   // ============================================================ //
 
-  // Table
+  // * Table responsive
   --#{$table}--responsive--BorderColor: var(--pf-t--global--border--color--default);
 
-  // Body
+  // * Table body
   --#{$table}__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --#{$table}__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
   --#{$table}__tbody--after--BorderLeftWidth: 0;
   --#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--clicked);
 
-  // Row
+  // * Table tr responsive
   --#{$table}__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --#{$table}__tr--responsive--last-child--BorderBottomWidth: var(--#{$table}__tbody--responsive--border-width--base);
   --#{$table}__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
@@ -62,26 +63,26 @@
   --#{$table}__tr--responsive--nested-table--PaddingBottom: var(--pf-t--global--spacer--xl);
   --#{$table}__tr--responsive--nested-table--PaddingLeft: var(--pf-t--global--spacer--lg);
 
-  // expandable
+  // * Table tbody
   --#{$table}__tbody--after__tr--BorderLeftWidth: 0;
   --#{$table}__tbody--after__tr--BorderLeftColor: transparent;
   --#{$table}__tbody--m-expanded--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
   --#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
 
-  // selected
+  // * Table tbody selected
   --#{$table}__tbody--m-selected--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
   --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
 
-  // Cell display
+  // * Table grid cell
   --#{$table}--m-grid--cell--hidden-visible--Display: grid;
 
-  // Cell
+  // * Table grid cell
   --#{$table}--m-grid--cell--PaddingTop: 0;
   --#{$table}--m-grid--cell--PaddingRight: 0;
   --#{$table}--m-grid--cell--PaddingBottom: 0;
   --#{$table}--m-grid--cell--PaddingLeft: 0;
 
-  // Td
+  // * Table td responsive
   --#{$table}-td--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
   --#{$table}--cell--responsive--PaddingTop: var(--pf-t--global--spacer--md);
   --#{$table}--cell--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -89,7 +90,7 @@
   --#{$table}--cell--responsive--PaddingRight: 0;
   --#{$table}--cell--responsive--PaddingLeft: 0;
 
-  // Compact table
+  // * Table grid compact table
   --#{$table}--m-compact__tr--responsive--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$table}--m-compact__tr--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
   --#{$table}--m-compact__tr__td--responsive--PaddingTop: var(--pf-t--global--spacer--xs);
@@ -99,37 +100,38 @@
   --#{$table}--m-compact__action--responsive--MarginBottom: calc(var(--pf-t--global--spacer--xs) * -1);
   --#{$table}--m-compact__toggle--c-button--responsive--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
 
-  // Expandable row content
+  // * Table grid expandable row content
   --#{$table}__expandable-row-content--responsive--PaddingRight: var(--pf-t--global--spacer--lg);
   --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--pf-t--global--spacer--lg);
   --#{$table}__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
-  // Check
+  // * Table check
   --#{$table}__check--responsive--MarginLeft: var(--#{$table}__tbody--responsive--border-width--base);
   --#{$table}__check--responsive--MarginTop: #{pf-size-prem(14px)};
 
-  // Favorite
+  // * Table grid favorite
   --#{$table}--m-grid__favorite--MarginTop: #{pf-size-prem(8px)};
   --#{$table}--m-grid__check--favorite--MarginLeft: var(--pf-t--global--spacer--xl);
 
-  // Action
+  // * Table grid action
   --#{$table}--m-grid__action--MarginTop: #{pf-size-prem(6px)};
   --#{$table}__action--responsive--MarginLeft: var(--pf-t--global--spacer--xl);
   --#{$table}--m-grid__favorite--action--MarginLeft: var(--pf-t--global--spacer--2xl);
   --#{$table}--m-grid__check--favorite--action--MarginLeft: calc(var(--#{$table}--m-grid__check--favorite--MarginLeft) + var(--#{$table}--m-grid__favorite--action--MarginLeft));
 
-  // Toggle icons
+  // * Table grid toggle icon
   --#{$table}__toggle__icon--Transition: .2s ease-in 0s;
   --#{$table}__toggle--m-expanded__icon--Rotate: 180deg;
 }
 
+// - Table mobile layout
 @include pf-mobile-layout {
   --#{$table}--cell--PaddingTop: var(--#{$table}--m-grid--cell--PaddingTop);
   --#{$table}--cell--PaddingRight: var(--#{$table}--m-grid--cell--PaddingRight);
   --#{$table}--cell--PaddingBottom: var(--#{$table}--m-grid--cell--PaddingBottom);
   --#{$table}--cell--PaddingLeft: var(--#{$table}--m-grid--cell--PaddingLeft);
 
-  // Favorite
+  // - Table favorite
   --#{$table}__favorite--c-button--MarginTop: auto;
   --#{$table}__favorite--c-button--MarginRight: auto;
   --#{$table}__favorite--c-button--MarginBottom: auto;
@@ -139,7 +141,7 @@
   border: none;
 
   // reset cell modifications
-  tr:where(.#{$table}__tr) > * {
+  tr:where(.#{$table}__tr) > :where(th, td) {
     width: auto;
     min-width: 0;
     max-width: none;
@@ -159,12 +161,12 @@
     white-space: var(--#{$table}--cell--WhiteSpace);
   }
 
-  // Thead
+  // - Table thead
   thead:where(.#{$table}__thead) {
     display: none;
   }
 
-  // Tbody
+  // - Table tbody
   tbody:where(.#{$table}__tbody) {
     display: block;
 
@@ -178,7 +180,7 @@
     border-block-start: 0;
   }
 
-  // Table row
+  // - Table grid not expandable row
   tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
     border-block-end: var(--#{$table}__tr--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
   }
@@ -189,6 +191,7 @@
     border-block-end-width: var(--#{$table}__tr--responsive--last-child--BorderBottomWidth);
   }
 
+  // - Table grid tbody expanded
   tbody:where(.#{$table}__tbody).pf-m-expanded {
     border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
 
@@ -201,6 +204,7 @@
     }
   }
 
+  // - Table grid tr selected
   tr:where(.#{$table}__tr).pf-m-selected {
     --#{$table}__expandable-row--after--BorderLeftWidth: 0;
     --#{$table}__expandable-row--after--BorderColor: transparent;
@@ -208,6 +212,7 @@
 
   // Standard table row (non-expandable)
   // exclude expandable rows
+  // - Table grid tr not expandable row
   tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
     display: grid;
     grid-template-columns: 1fr;
@@ -224,7 +229,7 @@
     padding-inline-start: var(--#{$table}__tr--responsive--PaddingLeft);
 
     // Reset td padding
-    & > * {
+    & > :where(th, td) {
       padding-block-start: var(--#{$table}--cell--responsive--PaddingTop);
       padding-inline-end: var(--#{$table}--cell--responsive--PaddingRight);
       padding-block-end: var(--#{$table}--cell--responsive--PaddingBottom);
@@ -237,6 +242,7 @@
     }
   }
 
+  // - Table grid compact
   &.pf-m-compact {
     --#{$table}__tr--responsive--PaddingTop: var(--#{$table}--m-compact__tr--responsive--PaddingTop);
     --#{$table}__tr--responsive--PaddingBottom: var(--#{$table}--m-compact__tr--responsive--PaddingBottom);
@@ -259,7 +265,7 @@
     text-align: start;
   }
 
-  // Standard td, in standard row (non-expandable)
+  // - Table grid th td data label
   :where(.#{$table}__th, .#{$table}__td)[data-label] {
     // default pf-v5-hidden-visible() mixin is called in table.scss. redefining variable here
     --#{$table}--cell--hidden-visible--Display: var(--#{$table}--m-grid--cell--hidden-visible--Display);
@@ -283,7 +289,7 @@
     }
   }
 
-  tr:where(.#{$table}__tr) > * {
+  tr:where(.#{$table}__tr) > :where(th, td) {
     // Remove first child padding left
     &:first-child {
       --#{$table}--cell--PaddingLeft: 0;
@@ -295,7 +301,7 @@
     }
   }
 
-  // nested tables
+  // - Table grid table
   .#{$table} {
     --#{$table}__tr--responsive--PaddingTop: var(--#{$table}__tr--responsive--nested-table--PaddingTop);
     --#{$table}__tr--responsive--PaddingRight: var(--#{$table}__tr--responsive--nested-table--PaddingRight);
@@ -309,6 +315,7 @@
     }
   }
 
+  // - Table grid compound expansion toggle
   .#{$table}__compound-expansion-toggle {
     --#{$table}__compound-expansion-toggle__button--before--BorderRightWidth: 0;
     --#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
@@ -316,7 +323,7 @@
   }
 
   // Compound expansion responsive
-  // Tbody
+  // - Table grid tbody
   tbody:where(.#{$table}__tbody) {
     position: relative;
 
@@ -347,7 +354,7 @@
     }
   }
 
-  // Expandable row
+  // - Table grid expandable row
   .#{$table}__expandable-row {
     --#{$table}--cell--responsive--PaddingTop: 0;
     --#{$table}--cell--responsive--PaddingRight: 0;
@@ -360,10 +367,9 @@
     max-height: var(--#{$table}__expandable-row--MaxHeight);  // Overflow scroll should only happen on responsive
     overflow-y: auto;
     border-block-end: none;
-    box-shadow: none;
 
     // cells
-    > * {
+    > :where(th, td) {
       position: static;
       display: block;
     }
@@ -397,7 +403,7 @@
     }
   }
 
-  // tr selected
+  // - Table grid tbody hoverable
   tbody:where(.#{$table}__tbody).pf-m-hoverable {
     --#{$table}__tbody--after--BorderLeftWidth: 0;
     --#{$table}__tbody--after--BorderLeftColor: transparent;
@@ -429,7 +435,7 @@
   }
 
 
-  // tr selected
+  // - Table grid tr selected
   tr:where(.#{$table}__tr).pf-m-selected {
     &::after {
       content: '';
@@ -453,6 +459,7 @@
     }
   }
 
+  // - Table grid toggle
   .#{$table}__toggle {
     grid-row-start: 20;
     grid-column: -1;
@@ -464,6 +471,7 @@
     }
   }
 
+  // - Table grid button
   .#{$table}__button {
     --#{$table}--cell--PaddingTop: var(--#{$table}--m-grid--cell--PaddingTop);
     --#{$table}--cell--PaddingRight: var(--#{$table}--m-grid--cell--PaddingRight);
@@ -471,6 +479,7 @@
     --#{$table}--cell--PaddingLeft: var(--#{$table}--m-grid--cell--PaddingLeft);
   }
 
+  // - Table grid check - Table grid favorite - Table grid action
   .#{$table}__check,
   .#{$table}__favorite,
   .#{$table}__action {
@@ -478,7 +487,7 @@
     grid-column-start: 2;
   }
 
-  // Check table cell
+  // - Table grid check
   .#{$table}__check {
     margin-block-start: var(--#{$table}__check--responsive--MarginTop);
     margin-inline-start: var(--#{$table}__check--responsive--MarginLeft);
@@ -502,6 +511,7 @@
     }
   }
 
+  // - Table grid favorite
   .#{$table}__favorite {
     margin-block-start: var(--#{$table}--m-grid__favorite--MarginTop);
 
@@ -510,7 +520,7 @@
     }
   }
 
-  // Action cell
+  // - Table grid action
   .#{$table}__action {
     margin-block-start: var(--#{$table}--m-grid__action--MarginTop);
     text-align: end;
@@ -523,11 +533,13 @@
     }
   }
 
+  // - Table grid inline edit action
   .#{$table}__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
   }
 
+  // - Table grid toggle icon
   .#{$table}__toggle-icon {
     transition: var(--#{$table}__toggle__icon--Transition);
 
@@ -536,6 +548,7 @@
     }
   }
 
+  // - Table grid nowrap - Table grid fit content - Table grid truncate - Table grid width
   :where(.#{$table}, .#{$table}__thead, .#{$table}__tbody, .#{$table}__tr, .#{$table}__th, .#{$table}__td, .#{$table}__text) {
 
     // No wrap
@@ -559,5 +572,4 @@
     --#{$table}--cell--Width: auto;
   }
 }
-
 // stylelint-enable

package/components/Table/table-scrollable.css

@@ -1,4 +1,5 @@
-.pf-v6-c-table {
+:where(:root),
+:where(.pf-v6-c-table) {
   --pf-v6-c-table__sticky-cell--MinWidth--base: 12.5rem;
   --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
   --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
@@ -13,7 +14,8 @@
   --pf-v6-c-table__sticky-cell--m-left--Left: 0;
   --pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v6-c-table__sticky-cell--ZIndex) + 1);
 }
-.pf-v6-c-table .pf-v6-c-table__sticky-cell {
+:where(:root) .pf-v6-c-table__sticky-cell,
+:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell {
   --pf-v6-c-table--cell--Overflow: visible;
   --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
   position: sticky;
@@ -24,18 +26,24 @@
   background-color: var(--pf-v6-c-table__sticky-cell--BackgroundColor);
   background-clip: padding-box;
 }
-.pf-v6-c-table .pf-v6-c-table__sticky-cell.pf-m-border-right::before {
+:where(:root) .pf-v6-c-table__sticky-cell.pf-m-border-right::before,
+:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-border-right::before {
   --pf-v6-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
   --pf-v6-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderRightColor);
 }
-.pf-v6-c-table .pf-v6-c-table__sticky-cell.pf-m-border-left::before {
+:where(:root) .pf-v6-c-table__sticky-cell.pf-m-border-left::before,
+:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-border-left::before {
   --pf-v6-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
   --pf-v6-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
 }
-.pf-v6-c-table .pf-v6-c-table__sticky-cell.pf-m-right, .pf-v6-c-table .pf-v6-c-table__sticky-cell.pf-m-inline-end {
+:where(:root) .pf-v6-c-table__sticky-cell.pf-m-right, :where(:root) .pf-v6-c-table__sticky-cell.pf-m-inline-end,
+:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-right,
+:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-inline-end {
   --pf-v6-c-table__sticky-cell--Right: var(--pf-v6-c-table__sticky-cell--m-right--Right);
 }
-.pf-v6-c-table .pf-v6-c-table__sticky-cell.pf-m-left, .pf-v6-c-table .pf-v6-c-table__sticky-cell.pf-m-inline-start {
+:where(:root) .pf-v6-c-table__sticky-cell.pf-m-left, :where(:root) .pf-v6-c-table__sticky-cell.pf-m-inline-start,
+:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-left,
+:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-inline-start {
   --pf-v6-c-table__sticky-cell--Left: var(--pf-v6-c-table__sticky-cell--m-left--Left);
 }
 

package/components/Table/table-scrollable.scss

@@ -1,4 +1,6 @@
-.#{$table} {
+// * Table scrollable
+:where(:root),
+:where(.#{$table}) {
   --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(200px)};
   --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
   --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
@@ -13,6 +15,7 @@
   --#{$table}__sticky-cell--m-left--Left: 0;
   --#{$table}--m-sticky-header__sticky-cell--ZIndex: calc(var(--#{$table}__sticky-cell--ZIndex) + 1);
 
+  // * Table sticky cell
   .#{$table}__sticky-cell {
     --#{$table}--cell--Overflow: visible;
     --#{$table}--m-sticky-header--cell--ZIndex: var(--#{$table}--m-sticky-header__sticky-cell--ZIndex);
@@ -48,6 +51,7 @@
   }
 }
 
+// * Scroll outer wrapper
 .#{$scroll-outer-wrapper} {
   --#{$scroll-outer-wrapper}--MinHeight: #{pf-size-prem(400px)};
   --#{$scroll-outer-wrapper}--MaxHeight: 100%;
@@ -60,6 +64,7 @@
   overflow: hidden;
 }
 
+// * Scroll inner wrapper
 .#{$scroll-inner-wrapper} {
   display: flex;
   flex-direction: column;