@patternfly/patternfly 6.0.0-alpha.227 → 6.0.0-alpha.229

package/components/DescriptionList/description-list.scss

@@ -2,7 +2,7 @@
 
 $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
-:where(:root, .#{$description-list}) {
+@include pf-root($description-list) {
   --#{$description-list}--RowGap: var(--pf-t--global--spacer--lg);
   --#{$description-list}--ColumnGap: var(--pf-t--global--spacer--lg);
   --#{$description-list}--GridTemplateColumns--count: 1;

package/components/Divider/divider.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-divider) {
+:root,
+.pf-v6-c-divider {
   --pf-v6-c-divider--Display: flex;
   --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
   --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);

package/components/Divider/divider.scss

@@ -17,7 +17,7 @@ $pf-v6-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
   height: inherit;
 }
 
-:where(:root, .#{$divider}) {
+@include pf-root($divider) {
   // * Divider
   --#{$divider}--Display: flex;
   --#{$divider}--Color: var(--pf-t--global--border--color--default);

package/components/DragDrop/drag-drop.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-draggable) {
+:root,
+.pf-v6-c-draggable {
   --pf-v6-c-draggable--Cursor: auto;
   --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
   --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -34,7 +35,8 @@
   --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-v6-c-draggable--m-drag-outside--after--BorderColor);
 }
 
-:where(:root, .pf-v6-c-droppable) {
+:root,
+.pf-v6-c-droppable {
   --pf-v6-c-droppable--before--BackgroundColor: transparent;
   --pf-v6-c-droppable--before--Opacity: 0;
   --pf-v6-c-droppable--after--BorderWidth: 0;

package/components/DragDrop/drag-drop.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$draggable}) {
+@include pf-root($draggable) {
   --#{$draggable}--Cursor: auto;
   --#{$draggable}--m-dragging--Cursor: grabbing;
   --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -40,7 +40,7 @@
   }
 }
 
-:where(:root, .#{$droppable}) {
+@include pf-root($droppable) {
   --#{$droppable}--before--BackgroundColor: transparent;
   --#{$droppable}--before--Opacity: 0;
   --#{$droppable}--after--BorderWidth: 0;

package/components/Drawer/drawer.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-drawer) {
+:root,
+.pf-v6-c-drawer {
   --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -106,10 +107,12 @@
   --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
 }
 @media screen and (min-width: 75rem) {
-  :where(:root, .pf-v6-c-drawer) {
+  :root,
+  .pf-v6-c-drawer {
     --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
   }
-  :where(:root, .pf-v6-c-drawer).pf-m-panel-bottom {
+  :root.pf-m-panel-bottom,
+  .pf-v6-c-drawer.pf-m-panel-bottom {
     --pf-v6-c-drawer__panel--MinWidth: auto;
     --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
   }

package/components/Drawer/drawer.scss

@@ -5,7 +5,7 @@ $pf-v6-c-drawer--breakpoint-map: build-breakpoint-map("base", "lg", "xl", "2xl")
 $pf-v6-c-drawer--breakpoint-map--width: build-breakpoint-map("base", "lg", "xl", "2xl");
 $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
-:where(:root, .#{$drawer}) {
+@include pf-root($drawer) {
   // Section
   --#{$drawer}__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$drawer}__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);

package/components/DualListSelector/dual-list-selector.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-dual-list-selector) {
+:root,
+.pf-v6-c-dual-list-selector {
   --pf-v6-c-dual-list-selector__header--GridArea: pane-header;
   --pf-v6-c-dual-list-selector__tools--GridArea: pane-tools;
   --pf-v6-c-dual-list-selector__status--GridArea: pane-status;

package/components/DualListSelector/dual-list-selector.scss

@@ -2,7 +2,7 @@
 
 $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
-:where(:root, .#{$dual-list-selector}) {
+@include pf-root($dual-list-selector) {
   // Grid
   --#{$dual-list-selector}__header--GridArea: pane-header;
   --#{$dual-list-selector}__tools--GridArea: pane-tools;

package/components/EmptyState/empty-state.css

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

package/components/EmptyState/empty-state.scss

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

package/components/ExpandableSection/expandable-section.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-expandable-section) {
+:root,
+.pf-v6-c-expandable-section {
   --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
   --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);

package/components/ExpandableSection/expandable-section.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$expandable-section}) {
+@include pf-root($expandable-section) {
   --#{$expandable-section}--Gap: var(--pf-t--global--spacer--sm);
 
   // Toggle icon

package/components/FileUpload/file-upload.css

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

package/components/FileUpload/file-upload.scss

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

package/components/Form/form.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-form) {
+:root,
+.pf-v6-c-form {
   --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--lg);
   --pf-v6-c-form__group--Gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-form__group--m-action--MarginBlockStart: var(--pf-t--global--spacer--xl);

package/components/Form/form.scss

@@ -25,7 +25,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   }
 }
 
-:where(:root, .#{$form}) {
+@include pf-root($form) {
   --#{$form}--GridGap: var(--pf-t--global--spacer--lg);
 
   // Group

package/components/FormControl/form-control.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-form-control) {
+:root,
+.pf-v6-c-form-control {
   --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);

package/components/FormControl/form-control.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$form-control}) {
+@include pf-root($form-control) {
   --#{$form-control}--ColumnGap: var(--pf-t--global--spacer--sm);
   --#{$form-control}--Color: var(--pf-t--global--text--color--regular);
   --#{$form-control}--FontSize: var(--pf-t--global--font--size--body--default);

package/components/HelperText/helper-text.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-helper-text) {
+:root,
+.pf-v6-c-helper-text {
   --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);

package/components/HelperText/helper-text.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$helper-text}) {
+@include pf-root($helper-text) {
   --#{$helper-text}--Gap: var(--pf-t--global--spacer--xs);
   --#{$helper-text}--FontSize: var(--pf-t--global--font--size--body--sm);
 

package/components/Hint/hint.css

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

package/components/Hint/hint.scss

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

package/components/Icon/icon.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-icon) {
+:root,
+.pf-v6-c-icon {
   --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);

package/components/Icon/icon.scss

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

package/components/InlineEdit/inline-edit.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-inline-edit) {
+:root,
+.pf-v6-c-inline-edit {
   --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);

package/components/InlineEdit/inline-edit.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$inline-edit}) {
+@include pf-root($inline-edit) {
   // Group
   --#{$inline-edit}__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
 

package/components/InputGroup/input-group.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-input-group) {
+:root,
+.pf-v6-c-input-group {
   --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);

package/components/InputGroup/input-group.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$input-group}) {
+@include pf-root($input-group) {
   --#{$input-group}--Gap: var(--pf-t--global--spacer--xs);
 
   // Input group item

package/components/JumpLinks/jump-links.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-jump-links) {
+:root,
+.pf-v6-c-jump-links {
   --pf-v6-c-jump-links__list--Display: flex;
   --pf-v6-c-jump-links__list--PaddingBlockStart: 0;
   --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);

package/components/JumpLinks/jump-links.scss

@@ -2,7 +2,7 @@
 
 $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
-:where(:root, .#{$jump-links}) {
+@include pf-root($jump-links) {
   // list
   --#{$jump-links}__list--Display: flex;
   --#{$jump-links}__list--PaddingBlockStart: 0;

package/components/Label/label-group.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-label-group) {
+:root,
+.pf-v6-c-label-group {
   --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);

package/components/Label/label-group.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$label-group}) {
+@include pf-root($label-group) {
   // Label group - spaces main with the close button
   --#{$label-group}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$label-group}--ColumnGap: var(--pf-t--global--spacer--xs);

package/components/Label/label.css

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

package/components/Label/label.scss

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

package/components/List/list.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-list) {
+:root,
+.pf-v6-c-list {
   --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
   --pf-v6-c-list--Gap: var(--pf-t--global--spacer--sm);

package/components/List/list.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$list}) {
+@include pf-root($list) {
   // list
   --#{$list}--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$list}--ul--ListStyle: var(--pf-t--global--list-style);

package/components/Login/login.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-login) {
+:root,
+.pf-v6-c-login {
   --pf-v6-c-login--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__container--xl--GridColumnGap: var(--pf-t--global--spacer--3xl);
@@ -54,48 +55,56 @@
   --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
 }
 @media (min-width: 75rem) {
-  :where(:root, .pf-v6-c-login) {
+  :root,
+  .pf-v6-c-login {
     --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
   }
 }
 @media (min-width: 36rem) {
-  :where(:root, .pf-v6-c-login) {
+  :root,
+  .pf-v6-c-login {
     --pf-v6-c-login__header--PaddingInlineEnd: 0;
     --pf-v6-c-login__header--PaddingInlineStart: 0;
   }
 }
 @media (min-width: 75rem) {
-  :where(:root, .pf-v6-c-login) {
+  :root,
+  .pf-v6-c-login {
     --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
     --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
   }
 }
 @media (min-width: 75rem) {
-  :where(:root, .pf-v6-c-login) {
+  :root,
+  .pf-v6-c-login {
     --pf-v6-c-login__main--MarginBlockEnd: 0;
   }
 }
 @media (min-width: 48rem) {
-  :where(:root, .pf-v6-c-login) {
+  :root,
+  .pf-v6-c-login {
     --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
     --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
     --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
   }
 }
 @media (min-width: 48rem) {
-  :where(:root, .pf-v6-c-login) {
+  :root,
+  .pf-v6-c-login {
     --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
     --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
   }
 }
 @media (min-width: 36rem) {
-  :where(:root, .pf-v6-c-login) {
+  :root,
+  .pf-v6-c-login {
     --pf-v6-c-login__footer--PaddingInlineEnd: 0;
     --pf-v6-c-login__footer--PaddingInlineStart: 0;
   }
 }
 @media (min-width: 75rem) {
-  :where(:root, .pf-v6-c-login) {
+  :root,
+  .pf-v6-c-login {
     --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
   }
 }

package/components/Login/login.scss

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

package/components/Masthead/masthead.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-masthead) {
+:root,
+.pf-v6-c-masthead {
   --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
   --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);

package/components/Masthead/masthead.scss

@@ -3,7 +3,7 @@
 $pf-v6-c-masthead--breakpoint-map: build-breakpoint-map();
 $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-:where(:root, .#{$masthead}) {
+@include pf-root($masthead) {
   // * Masthead
   --#{$masthead}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$masthead}--ColumnGap: var(--pf-t--global--spacer--gutter--default);

package/components/Menu/menu.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-menu) {
+:root,
+.pf-v6-c-menu {
   --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu--Width: auto;
   --pf-v6-c-menu--MinWidth: auto;

package/components/Menu/menu.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$menu}) {
+@include pf-root($menu) {
   // * Menu
   --#{$menu}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$menu}--Width: auto;

package/components/MenuToggle/menu-toggle.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-menu-toggle) {
+:root,
+.pf-v6-c-menu-toggle {
   --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);

package/components/MenuToggle/menu-toggle.scss

@@ -8,7 +8,7 @@
 // TODO: update text-input-button to use gap
 // TODO: label all variables group - // * Menu toggle (vars) // - Menu toggle (selectors)
 
-:where(:root, .#{$menu-toggle}) {
+@include pf-root($menu-toggle) {
   --#{$menu-toggle}--ColumnGap: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --#{$menu-toggle}--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);

package/components/ModalBox/modal-box.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-modal-box) {
+:root,
+.pf-v6-c-modal-box {
   --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
@@ -51,7 +52,8 @@
   --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
 }
 @media (min-width: 75rem) {
-  :where(:root, .pf-v6-c-modal-box) {
+  :root,
+  .pf-v6-c-modal-box {
     --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
   }
 }

package/components/ModalBox/modal-box.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$modal-box}) {
+@include pf-root($modal-box) {
   --#{$modal-box}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$modal-box}--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$modal-box}--BoxShadow: var(--pf-t--global--box-shadow--lg);

package/components/MultipleFileUpload/multiple-file-upload.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-multiple-file-upload) {
+:root,
+.pf-v6-c-multiple-file-upload {
   --pf-v6-c-multiple-file-upload--GridTemplateColumns: 1fr;
   --pf-v6-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
   --pf-v6-c-multiple-file-upload__main--TextAlign: center;

package/components/MultipleFileUpload/multiple-file-upload.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$multiple-file-upload}) {
+@include pf-root($multiple-file-upload) {
   --#{$multiple-file-upload}--GridTemplateColumns: 1fr;
   --#{$multiple-file-upload}--Gap: var(--pf-t--global--spacer--md);
 

package/components/Nav/nav.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-nav) {
+:root,
+.pf-v6-c-nav {
   --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);

package/components/Nav/nav.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$nav}) {
+@include pf-root($nav) {
   // * Nav shared values
   --#{$nav}__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$nav}__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);

package/components/NotificationDrawer/notification-drawer.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-notification-drawer) {
+:root,
+.pf-v6-c-notification-drawer {
   --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-notification-drawer__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);

package/components/NotificationDrawer/notification-drawer.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$notification-drawer}) {
+@include pf-root($notification-drawer) {
   --#{$notification-drawer}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // Header

package/components/NumberInput/number-input.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-number-input) {
+:root,
+.pf-v6-c-number-input {
   --pf-v6-c-number-input__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
   --pf-v6-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);

package/components/NumberInput/number-input.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$number-input}) {
+@include pf-root($number-input) {
   // unit
   --#{$number-input}__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
 

package/components/OverflowMenu/overflow-menu.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-overflow-menu) {
+:root,
+.pf-v6-c-overflow-menu {
   --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);

package/components/OverflowMenu/overflow-menu.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$overflow-menu}) {
+@include pf-root($overflow-menu) {
   --#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
 
   // * Overflow menu group

package/components/Page/page.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-page) {
+:root,
+.pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
@@ -78,7 +79,8 @@
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
 }
 @media screen and (min-width: 75rem) {
-  :where(:root, .pf-v6-c-page) {
+  :root,
+  .pf-v6-c-page {
     --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
   }
 }