@patternfly/patternfly 6.0.0-alpha.227 → 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);

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);

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)};

package/components/Title/title.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-title) {
+:root,
+.pf-v6-c-title {
   --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);

package/components/Title/title.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$title}) {
+@include pf-root($title) {
   --#{$title}--FontFamily: var(--pf-t--global--font--family--heading);
 
   // SIZE modifiers (note that the modifier names match PF5 sizes but use tokens that don't match in name

package/components/ToggleGroup/toggle-group.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-toggle-group) {
+:root,
+.pf-v6-c-toggle-group {
   --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);

package/components/ToggleGroup/toggle-group.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$toggle-group}) {
+@include pf-root($toggle-group) {
   // button
   --#{$toggle-group}__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$toggle-group}__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);

package/components/Toolbar/toolbar.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-toolbar) {
+:root,
+.pf-v6-c-toolbar {
   --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--PaddingBlockStart: 0;
   --pf-v6-c-toolbar--PaddingBlockEnd: var(--pf-t--global--spacer--md);

package/components/Toolbar/toolbar.scss

@@ -10,7 +10,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   $pf-v6-c-toolbar--breakpoint-map: build-breakpoint-map();
 }
 
-:where(:root, .#{$toolbar}) {
+@include pf-root($toolbar) {
   --#{$toolbar}--RowGap: var(--pf-t--global--spacer--md);
   --#{$toolbar}--PaddingBlockStart: 0;
   --#{$toolbar}--PaddingBlockEnd: var(--pf-t--global--spacer--md);

package/components/Tooltip/tooltip.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tooltip) {
+:root,
+.pf-v6-c-tooltip {
   --pf-v6-c-tooltip--MaxWidth: 18.75rem;
   --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);

package/components/Tooltip/tooltip.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$tooltip}) {
+@include pf-root($tooltip) {
   // Component variables
   --#{$tooltip}--MaxWidth: #{pf-size-prem(300px)};
   --#{$tooltip}--BoxShadow: var(--pf-t--global--box-shadow--md);

package/components/TreeView/tree-view.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tree-view) {
+:root,
+.pf-v6-c-tree-view {
   --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
   --pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
   --pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);

package/components/TreeView/tree-view.scss

@@ -2,7 +2,7 @@
 
 $pf-v6-c-tree-view--MaxNesting: 10 !default;
 
-:where(:root, .#{$tree-view}) {
+@include pf-root($tree-view) {
   // Node base
   --#{$tree-view}__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$tree-view}__node-toggle-icon--MinWidth)); // based off of the expected width of the toggle button
   --#{$tree-view}__node--nested-indent--base: calc(var(--#{$tree-view}__node--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/Truncate/truncate.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-truncate) {
+:root,
+.pf-v6-c-truncate {
   --pf-v6-c-truncate--MinWidth: 6ch;
   --pf-v6-c-truncate__start--MinWidth: 6ch;
 }

package/components/Truncate/truncate.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$truncate}) {
+@include pf-root($truncate) {
   --#{$truncate}--MinWidth: 6ch;
   --#{$truncate}__start--MinWidth: 6ch;
 }

package/components/Wizard/wizard.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-wizard) {
+:root,
+.pf-v6-c-wizard {
   --pf-v6-c-wizard--Height: initial;
   --pf-v6-c-wizard--Height--base: 100%;
   --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
@@ -113,7 +114,8 @@
   --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
 }
 @media screen and (min-width: 62rem) {
-  :where(:root, .pf-v6-c-wizard) {
+  :root,
+  .pf-v6-c-wizard {
     --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
     --pf-v6-c-wizard__nav--BoxShadow: none;
   }

package/components/Wizard/wizard.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$wizard}) {
+@include pf-root($wizard) {
   --#{$wizard}--Height: initial;
   --#{$wizard}--Height--base: 100%;
   --#{$modal-box}--c-wizard--Height--base: #{pf-size-prem(762px)}; // this is a specific height from design for the wizard in a modal