@patternfly/patternfly 6.0.0-alpha.226 → 6.0.0-alpha.228

package/components/Page/page.scss

@@ -5,7 +5,7 @@ $pf-page-v6--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl"
 $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 // stylelint-enable
 
-:where(:root, .#{$page}) {
+@include pf-root($page) {
   --#{$page}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}--inset: var(--pf-t--global--spacer--inset--page-chrome);
 

package/components/Pagination/pagination.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-pagination) {
+:root,
+.pf-v6-c-pagination {
   --pf-v6-c-pagination--inset: 0;
   --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
@@ -36,7 +37,8 @@
   --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
 }
 @media screen and (min-width: 48rem) {
-  :where(:root, .pf-v6-c-pagination) {
+  :root,
+  .pf-v6-c-pagination {
     --pf-v6-c-pagination--m-bottom--BoxShadow: none;
     --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
     --pf-v6-c-pagination__nav--Display: inline-flex;
@@ -44,7 +46,8 @@
   }
 }
 @media screen and (min-width: 75rem) {
-  :where(:root, .pf-v6-c-pagination) {
+  :root,
+  .pf-v6-c-pagination {
     --pf-v6-c-pagination__scroll-button--Width: var(--pf-v6-c-pagination__scroll-button--xl--Width);
   }
 }

package/components/Pagination/pagination.scss

@@ -3,7 +3,7 @@
 $pf-v6-c-pagination--breakpoint-map: build-breakpoint-map();
 $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-:where(:root, .#{$pagination}) {
+@include pf-root($pagination) {
   --#{$pagination}--inset: 0;
   --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
 

package/components/Panel/panel.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-panel) {
+:root,
+.pf-v6-c-panel {
   --pf-v6-c-panel--Width: auto;
   --pf-v6-c-panel--MinWidth: auto;
   --pf-v6-c-panel--MaxWidth: none;

package/components/Panel/panel.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$panel}) {
+@include pf-root($panel) {
   --#{$panel}--Width: auto;
   --#{$panel}--MinWidth: auto;
   --#{$panel}--MaxWidth: none;

package/components/Popover/popover.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-popover) {
+:root,
+.pf-v6-c-popover {
   --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
   --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);

package/components/Popover/popover.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$popover}) {
+@include pf-root($popover) {
   // Component
   --#{$popover}--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});

package/components/Progress/progress.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-progress) {
+:root,
+.pf-v6-c-progress {
   --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
   --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);

package/components/Progress/progress.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$progress}) {
+@include pf-root($progress) {
   // Component variables
   --#{$progress}--GridGap: var(--pf-t--global--spacer--md);
 

package/components/ProgressStepper/progress-stepper.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-progress-stepper) {
+:root,
+.pf-v6-c-progress-stepper {
   --pf-v6-c-progress-stepper--m-vertical--GridAutoFlow: row;
   --pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
   --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart: 0;
@@ -119,7 +120,8 @@
   --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
 }
 @media screen and (min-width: 48rem) {
-  :where(:root, .pf-v6-c-progress-stepper) {
+  :root,
+  .pf-v6-c-progress-stepper {
     --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
     --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
     --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart);

package/components/ProgressStepper/progress-stepper.scss

@@ -58,7 +58,7 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 }
 
 // Progress stepper is vertically oriented by default
-:where(:root, .#{$progress-stepper}) {
+@include pf-root($progress-stepper) {
   // Vertical - these are the default settings
   --#{$progress-stepper}--m-vertical--GridAutoFlow: row;
   --#{$progress-stepper}--m-vertical--GridTemplateColumns: auto 1fr;

package/components/Radio/radio.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-radio) {
+:root,
+.pf-v6-c-radio {
   --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));

package/components/Radio/radio.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$radio}) {
+@include pf-root($radio) {
   --#{$radio}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --#{$radio}--AccentColor: var(--pf-t--global--icon--color--brand--default);
   --#{$radio}--Height: calc(var(--#{$radio}__label--FontSize) * var(--#{$radio}__label--LineHeight));

package/components/Sidebar/sidebar.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-sidebar) {
+:root,
+.pf-v6-c-sidebar {
   --pf-v6-c-sidebar--inset: var(--pf-t--global--spacer--md);
   --pf-v6-c-sidebar--xl--inset: var(--pf-t--global--spacer--lg);
   --pf-v6-c-sidebar--BorderWidth--base: var(--pf-t--global--border--width--regular);

package/components/Sidebar/sidebar.scss

@@ -4,7 +4,7 @@
 $pf-v6-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
-:where(:root, .#{$sidebar}) {
+@include pf-root($sidebar) {
   --#{$sidebar}--inset: var(--pf-t--global--spacer--md);
   --#{$sidebar}--xl--inset: var(--pf-t--global--spacer--lg);
   --#{$sidebar}--BorderWidth--base: var(--pf-t--global--border--width--regular);

package/components/SimpleList/simple-list.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-simple-list) {
+:root,
+.pf-v6-c-simple-list {
   --pf-v6-c-simple-list__item-link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-simple-list__item-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-simple-list__item-link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);

package/components/SimpleList/simple-list.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$simple-list}) {
+@include pf-root($simple-list) {
   // Simple list item link
   --#{$simple-list}__item-link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --#{$simple-list}__item-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);

package/components/Skeleton/skeleton.css

@@ -1,5 +1,6 @@
 @charset "UTF-8";
-:where(:root, .pf-v6-c-skeleton) {
+:root,
+.pf-v6-c-skeleton {
   --pf-v6-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-skeleton--Width: auto;
   --pf-v6-c-skeleton--Height: auto;

package/components/Skeleton/skeleton.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$skeleton}) {
+@include pf-root($skeleton) {
   --#{$skeleton}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$skeleton}--Width: auto;
   --#{$skeleton}--Height: auto;

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

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-skip-to-content) {
+:root,
+.pf-v6-c-skip-to-content {
   --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
   --pf-v6-c-skip-to-content--focus--InsetInlineStart: var(--pf-t--global--spacer--md);

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

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$skip-to-content}) {
+@include pf-root($skip-to-content) {
   --#{$skip-to-content}--InsetBlockStart: var(--pf-t--global--spacer--md);
   --#{$skip-to-content}--ZIndex: var(--pf-t--global--z-index--2xl);
   --#{$skip-to-content}--focus--InsetInlineStart: var(--pf-t--global--spacer--md);

package/components/Slider/slider.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-slider) {
+:root,
+.pf-v6-c-slider {
   --pf-v6-c-slider--value: 0;
   --pf-v6-c-slider__step--InsetInlineStart: 0;
   --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);

package/components/Slider/slider.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$slider}) {
+@include pf-root($slider) {
   --#{$slider}--value: 0; // should always be set inline
   --#{$slider}__step--InsetInlineStart: 0; // should always be set inline
 

package/components/Spinner/spinner.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-spinner) {
+:root,
+.pf-v6-c-spinner {
   --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
   --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
   --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);

package/components/Spinner/spinner.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$spinner}) {
+@include pf-root($spinner) {
   --#{$spinner}--diameter: var(--pf-t--global--icon--size--2xl);
   --#{$spinner}--Width: var(--#{$spinner}--diameter);
   --#{$spinner}--Height: var(--#{$spinner}--diameter);

package/components/Switch/switch.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-switch) {
+:root,
+.pf-v6-c-switch {
   --pf-v6-c-switch--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-switch__toggle-icon--FontSize: calc(var(--pf-v6-c-switch--FontSize) * .625);

package/components/Switch/switch.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$switch}) {
+@include pf-root($switch) {
   // Switch - the vars for this file don't follow our normal order so that the IE11 script can convert the vars correctly
   --#{$switch}--FontSize: var(--pf-t--global--font--size--sm);
   --#{$switch}--ColumnGap: var(--pf-t--global--spacer--sm);

package/components/TabContent/tab-content.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tab-content) {
+:root,
+.pf-v6-c-tab-content {
   --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
   --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
   --pf-v6-c-tab-content__body--PaddingBlockEnd: 0;

package/components/TabContent/tab-content.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$tab-content}) {
+@include pf-root($tab-content) {
   --#{$tab-content}__body--PaddingBlockStart: 0;
   --#{$tab-content}__body--PaddingInlineEnd: 0;
   --#{$tab-content}__body--PaddingBlockEnd: 0;

package/components/Table/table-grid.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-table[class*=pf-m-grid]) {
+:root,
+.pf-v6-c-table {
   --pf-v6-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);

package/components/Table/table-grid.scss

@@ -32,7 +32,7 @@
 }
 
 // - Table grid
-:where(:root, .#{$table}[class*="pf-m-grid"]) {
+@include pf-root($table, '[class*="pf-m-grid"]') {
   // ============================================================ //
   // Start non-conformant variables
   //

package/components/Table/table-scrollable.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-table) {
+:root,
+.pf-v6-c-table {
   --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
   --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
   --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);

package/components/Table/table-scrollable.scss

@@ -1,7 +1,7 @@
 @use '../../sass-utilities' as *;
 
 // * Table scrollable
-:where(:root, .#{$table}) {
+@include pf-root($table) {
   --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(140px)};
   --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
   --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);

package/components/Table/table-tree-view.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-table) {
+:root,
+.pf-v6-c-table {
   --pf-v6-c-table__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-table__tree-view-icon--MinWidth));
   --pf-v6-c-table__tree-view-main--nested-indent--base: calc(var(--pf-v6-c-table__tree-view-main--indent--base) - var(--pf-t--global--spacer--md));
   --pf-v6-c-table__tree-view-main--c-button--MarginInlineEnd: var(--pf-t--global--spacer--sm);

package/components/Table/table-tree-view.scss

@@ -3,7 +3,7 @@
 $pf-v6-c-tree-view--MaxDepth: 10;
 
 // * Table tree view
-:where(:root, .#{$table}) {
+@include pf-root($table) {
   --#{$table}__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$table}__tree-view-icon--MinWidth)); // based off of the expected width of the toggle button
   --#{$table}__tree-view-main--nested-indent--base: calc(var(--#{$table}__tree-view-main--indent--base) - var(--pf-t--global--spacer--md)); // nested spacing that removes the toggle button's left padding, so the icon aligns with text on the node above it
 

package/components/Table/table.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-table) {
+:root,
+.pf-v6-c-table {
   --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-table--border-width--base: var(--pf-t--global--border--width--divider--default);
@@ -300,6 +301,11 @@
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
   --pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__thead--cell--FontSize);
   --pf-v6-c-table--cell--FontWeight: var(--pf-v6-c-table__thead--cell--FontWeight);
+  --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
+  --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
+  --pf-v6-c-table--cell--Overflow: hidden;
+  --pf-v6-c-table--cell--TextOverflow: ellipsis;
+  --pf-v6-c-table--cell--WhiteSpace: nowrap;
 }
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
   outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
@@ -326,40 +332,6 @@
 .pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td).pf-m-help {
   min-width: var(--pf-v6-c-table__th--m-help--MinWidth);
 }
-.pf-v6-c-table > thead, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-truncate, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-truncate {
-  --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
-  --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
-  --pf-v6-c-table--cell--Overflow: hidden;
-  --pf-v6-c-table--cell--TextOverflow: ellipsis;
-  --pf-v6-c-table--cell--WhiteSpace: nowrap;
-}
-
-.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-wrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-wrap {
-  --pf-v6-c-table--cell--MinWidth: 0;
-  --pf-v6-c-table--cell--MaxWidth: none;
-  --pf-v6-c-table--cell--Overflow: visible;
-  --pf-v6-c-table--cell--TextOverflow: clip;
-  --pf-v6-c-table--cell--WhiteSpace: normal;
-}
-.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-nowrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-nowrap {
-  --pf-v6-c-table--cell--MinWidth: 0;
-  --pf-v6-c-table--cell--MaxWidth: none;
-  --pf-v6-c-table--cell--Overflow: visible;
-  --pf-v6-c-table--cell--TextOverflow: clip;
-  --pf-v6-c-table--cell--WhiteSpace: nowrap;
-}
-.pf-v6-c-table :where([class*=pf-v6-c-table]) .pf-v6-c-table__icon, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-fit-content, :where(.pf-v6-c-table) > :is(thead, tbody) .pf-v6-c-table__icon, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-fit-content {
-  --pf-v6-c-table--cell--MinWidth: fit-content;
-  --pf-v6-c-table--cell--MaxWidth: none;
-  --pf-v6-c-table--cell--Width: 1%;
-  --pf-v6-c-table--cell--Overflow: visible;
-  --pf-v6-c-table--cell--TextOverflow: clip;
-  --pf-v6-c-table--cell--WhiteSpace: nowrap;
-}
-.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-break-word, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-break-word {
-  --pf-v6-c-table--cell--WordBreak: break-word;
-  --pf-v6-c-table--cell--WhiteSpace: normal;
-}
 .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) {
   --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   --pf-v6-c-table__tbody--BorderBlockEndWidth: 0;
@@ -423,6 +395,40 @@
   --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
 }
 
+[class*=pf-v6-c-table].pf-m-truncate {
+  --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
+  --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
+  --pf-v6-c-table--cell--Overflow: hidden;
+  --pf-v6-c-table--cell--TextOverflow: ellipsis;
+  --pf-v6-c-table--cell--WhiteSpace: nowrap;
+}
+[class*=pf-v6-c-table].pf-m-wrap {
+  --pf-v6-c-table--cell--MinWidth: 0;
+  --pf-v6-c-table--cell--MaxWidth: none;
+  --pf-v6-c-table--cell--Overflow: visible;
+  --pf-v6-c-table--cell--TextOverflow: clip;
+  --pf-v6-c-table--cell--WhiteSpace: normal;
+}
+[class*=pf-v6-c-table].pf-m-nowrap {
+  --pf-v6-c-table--cell--MinWidth: 0;
+  --pf-v6-c-table--cell--MaxWidth: none;
+  --pf-v6-c-table--cell--Overflow: visible;
+  --pf-v6-c-table--cell--TextOverflow: clip;
+  --pf-v6-c-table--cell--WhiteSpace: nowrap;
+}
+[class*=pf-v6-c-table] .pf-v6-c-table__icon, [class*=pf-v6-c-table].pf-m-fit-content {
+  --pf-v6-c-table--cell--MinWidth: fit-content;
+  --pf-v6-c-table--cell--MaxWidth: none;
+  --pf-v6-c-table--cell--Width: 1%;
+  --pf-v6-c-table--cell--Overflow: visible;
+  --pf-v6-c-table--cell--TextOverflow: clip;
+  --pf-v6-c-table--cell--WhiteSpace: nowrap;
+}
+[class*=pf-v6-c-table].pf-m-break-word {
+  --pf-v6-c-table--cell--WordBreak: break-word;
+  --pf-v6-c-table--cell--WhiteSpace: normal;
+}
+
 .pf-v6-c-table__text {
   --pf-v6-c-table--cell--MaxWidth: 100%;
   position: relative;

package/components/Table/table.scss

@@ -3,7 +3,7 @@
 // TODO: clean up unused variables
 // TODO: update grouping comments to // * Table {element}
 
-:where(:root, .#{$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);
@@ -400,6 +400,11 @@
   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 {
@@ -464,50 +469,6 @@
     }
   }
 
-  // - 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;
@@ -599,6 +560,48 @@
   }
 }
 
+// - 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
 .#{$table}__text {
   --#{$table}--cell--MaxWidth: 100%;
@@ -947,7 +950,7 @@
   }
 
   @at-root :not(.#{$table}__control-row) ~ .#{$table}__expandable-row {
-    > .#{$table}__th, 
+    > .#{$table}__th,
     > .#{$table}__td {
       padding-block-start: 0;
     }

package/components/Tabs/tabs.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tabs) {
+:root,
+.pf-v6-c-tabs {
   --pf-v6-c-tabs--inset: 0;
   --pf-v6-c-tabs--Width: auto;
   --pf-v6-c-tabs--before--BorderColor: var(--pf-t--global--border--color--default);

package/components/Tabs/tabs.scss

@@ -3,7 +3,7 @@
 $pf-v6-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-:where(:root, .#{$tabs}) {
+@include pf-root($tabs) {
   --#{$tabs}--inset: 0;
   --#{$tabs}--Width: auto;
   --#{$tabs}--before--BorderColor: var(--pf-t--global--border--color--default);

package/components/TextInputGroup/text-input-group.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-text-input-group) {
+:root,
+.pf-v6-c-text-input-group {
   --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);

package/components/TextInputGroup/text-input-group.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$text-input-group}) {
+@include pf-root($text-input-group) {
   --#{$text-input-group}--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --#{$text-input-group}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$text-input-group}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);

package/components/Tile/tile.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tile) {
+:root,
+.pf-v6-c-tile {
   --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tile--PaddingBlockEnd: var(--pf-t--global--spacer--lg);

package/components/Tile/tile.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$tile}) {
+@include pf-root($tile) {
   --#{$tile}--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --#{$tile}--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --#{$tile}--PaddingBlockEnd: var(--pf-t--global--spacer--lg);

package/components/Timestamp/timestamp.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-timestamp) {
+:root,
+.pf-v6-c-timestamp {
   --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;

package/components/Timestamp/timestamp.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$timestamp}) {
+@include pf-root($timestamp) {
   --#{$timestamp}--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$timestamp}--Color: var(--pf-t--global--text--color--regular);
   --#{$timestamp}--OutlineOffset: #{pf-size-prem(3px)};