@patternfly/patternfly 6.0.0-alpha.119 → 6.0.0-alpha.120

package/components/MenuToggle/menu-toggle.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-menu-toggle) {
+:where(:root, .pf-v6-c-menu-toggle) {
   --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu-toggle--PaddingRight: var(--pf-t--global--spacer--sm);

package/components/MenuToggle/menu-toggle.scss

@@ -1,4 +1,4 @@
-// @debug $menu-toggle; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 // TODO: standardize this layout
 // TODO: add .#{$menu-toggle}__main to house extra elements, like .#{$menu-toggle}__icon, .#{$menu-toggle}__text, .#{$menu-toggle}__count, .#{$menu-toggle}__controls
@@ -8,8 +8,7 @@
 // TODO: update text-input-button to use gap
 // TODO: label all variables group - // * Menu toggle (vars) // - Menu toggle (selectors)
 
-:where(:root),
-:where(.#{$menu-toggle}) {
+:where(:root, .#{$menu-toggle}) {
   --#{$menu-toggle}--ColumnGap: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--PaddingRight: var(--pf-t--global--spacer--sm);

package/components/ModalBox/modal-box.css

@@ -1,4 +1,4 @@
-:root {
+:where(: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);
@@ -48,7 +48,7 @@
   --pf-v6-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginRight) / 2);
 }
 @media (min-width: 1200px) {
-  :root {
+  :where(: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 @@
-// @debug $modal-box; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(: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);
@@ -49,7 +49,7 @@
   // Description
   --#{$modal-box}__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$modal-box}__description--Color: var(--pf-t--global--text--color--subtle);
-  
+
   // Body
   --#{$modal-box}__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)); // Allow for at least 1 line of content in the body
   --#{$modal-box}__body--PaddingTop: var(--pf-t--global--spacer--lg);

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

@@ -1,5 +1,4 @@
-:root,
-:where(.pf-v6-c-multiple-file-upload) {
+:where(: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,7 +1,6 @@
-// @debug $multiple-file-upload; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-:where(.#{$multiple-file-upload}) {
+:where(: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,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-nav) {
+:where(: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,5 +1,6 @@
-:where(:root),
-:where(.#{$nav}) {
+@use '../../sass-utilities' as *;
+
+:where(: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/NotificationBadge/notification-badge.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-notification-badge) {
   --pf-v6-c-notification-badge--BackgroundColor: transparent;
   --pf-v6-c-notification-badge--MinWidth: 40px;
   --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);

package/components/NotificationBadge/notification-badge.scss

@@ -1,6 +1,6 @@
-// @debug $notification-badge; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$notification-badge}) {
   --#{$notification-badge}--BackgroundColor: transparent;
   --#{$notification-badge}--MinWidth: 40px;
   --#{$notification-badge}--Gap: var(--pf-t--global--spacer--xs);

package/components/NotificationDrawer/notification-drawer.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-notification-drawer {
+:where(: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--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-notification-drawer__header--PaddingRight: var(--pf-t--global--spacer--lg);

package/components/NotificationDrawer/notification-drawer.scss

@@ -1,7 +1,6 @@
-// @debug $notification-drawer; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root, 
-.#{$notification-drawer} {
+:where(:root, .#{$notification-drawer}) {
   --#{$notification-drawer}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // Header

package/components/NumberInput/number-input.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-number-input {
+:where(:root, .pf-v6-c-number-input) {
   --pf-v6-c-number-input__unit--c-input-group--MarginLeft: 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,7 +1,6 @@
-// @debug $number-input; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$number-input} {
+:where(:root, .#{$number-input}) {
   // unit
   --#{$number-input}__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
 

package/components/OptionsMenu/options-menu.scss

@@ -1,4 +1,4 @@
-// @debug $option-menu; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 .#{$options-menu} {
   // Toggle

package/components/OverflowMenu/overflow-menu.css

@@ -1,4 +1,4 @@
-:root {
+:where(: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,4 +1,6 @@
-:root {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$overflow-menu}) {
   --#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
 
   // * Overflow menu group

package/components/Page/page.css

@@ -1,4 +1,4 @@
-:root {
+:where(: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--md);
   --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
@@ -110,25 +110,25 @@
   --pf-v6-c-page__main-wizard--BorderTopWidth: var(--pf-t--global--border--width--button--default);
 }
 @media (min-width: 1200px) {
-  :root {
+  :where(:root, .pf-v6-c-page) {
     --pf-v6-c-page__header-brand--PaddingLeft: var(--pf-v6-c-page__header-brand--xl--PaddingLeft);
     --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
   }
 }
 @media screen and (min-width: 1200px) {
-  :root {
+  :where(:root, .pf-v6-c-page) {
     --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-v6-c-page__header-nav--xl--BackgroundColor);
     --pf-v6-c-page__header-nav--PaddingRight: var(--pf-v6-c-page__header-nav--xl--PaddingRight);
     --pf-v6-c-page__header-nav--PaddingLeft: var(--pf-v6-c-page__header-nav--xl--PaddingLeft);
   }
 }
 @media screen and (min-width: 1200px) {
-  :root {
+  :where(:root, .pf-v6-c-page) {
     --pf-v6-c-page__header-tools--MarginRight: var(--pf-v6-c-page__header-tools--xl--MarginRight);
   }
 }
 @media screen and (min-width: 1200px) {
-  :root {
+  :where(:root, .pf-v6-c-page) {
     --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
   }
 }

package/components/Page/page.scss

@@ -1,10 +1,11 @@
-// @debug $page; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 // stylelint-disable
 $pf-page-v6--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 // stylelint-enable
 
-:root {
+:where(:root, .#{$page}) {
   --#{$page}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}--inset: var(--pf-t--global--spacer--md);
   --#{$page}--xl--inset: var(--pf-t--global--spacer--xl);

package/components/Pagination/pagination.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-pagination) {
+:where(: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);
@@ -34,8 +33,7 @@
   --pf-v6-c-pagination--m-display-full__page-menu--Display: inline-flex;
 }
 @media screen and (min-width: 768px) {
-  :where(:root),
-  :where(.pf-v6-c-pagination) {
+  :where(:root, .pf-v6-c-pagination) {
     --pf-v6-c-pagination--m-bottom--BoxShadow: none;
     --pf-v6-c-pagination__page-menu--Display: inline-flex;
     --pf-v6-c-pagination__nav--Display: inline-flex;
@@ -43,8 +41,7 @@
   }
 }
 @media screen and (min-width: 1200px) {
-  :where(:root),
-  :where(.pf-v6-c-pagination) {
+  :where(: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

@@ -1,9 +1,9 @@
-// @debug $pagination; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $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),
-:where(.#{$pagination}) {
+:where(:root, .#{$pagination}) {
   --#{$pagination}--inset: 0;
   --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
 

package/components/Panel/panel.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-panel {
+:where(: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,7 +1,6 @@
-// @debug $panel; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$panel} {
+:where(:root, .#{$panel}) {
   --#{$panel}--Width: auto;
   --#{$panel}--MinWidth: auto;
   --#{$panel}--MaxWidth: none;

package/components/Popover/popover.scss

@@ -1,4 +1,4 @@
-// @debug $popover; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 .#{$popover} {
   // Component

package/components/Progress/progress.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-progress {
+:where(: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,10 +1,9 @@
-// @debug $progress; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$progress} {
+:where(:root, .#{$progress}) {
   // Component variables
   --#{$progress}--GridGap: var(--pf-t--global--spacer--md);
-  
+
   // Element variables
   --#{$progress}__bar--Height: var(--pf-t--global--spacer--md);
   --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
@@ -14,7 +13,7 @@
   --#{$progress}__indicator--Height: var(--#{$progress}__bar--Height);
   --#{$progress}__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$progress}__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--#{$progress}--GridGap));
-  
+
   // Modifier variables
   --#{$progress}--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
   --#{$progress}--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -135,7 +134,7 @@
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-warning__status-icon--Color);
     --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-warning--m-inside__measure--Color);
   }
-  
+
   &.pf-m-danger {
     --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-danger__indicator--BackgroundColor);
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-danger__status-icon--Color);

package/components/ProgressStepper/progress-stepper.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-progress-stepper) {
+:where(: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--Top: 0;
@@ -118,8 +117,7 @@
   --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
 }
 @media screen and (min-width: 768px) {
-  :where(:root),
-  :where(.pf-v6-c-progress-stepper) {
+  :where(: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--Top: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Top);

package/components/ProgressStepper/progress-stepper.scss

@@ -1,4 +1,5 @@
-// @debug $progress-stepper; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
 // Default layout is vertical
@@ -57,8 +58,7 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 }
 
 // Progress stepper is vertically oriented by default
-:where(:root),
-:where(.#{$progress-stepper}) {
+:where(: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,5 +1,4 @@
-:root,
-.pf-v6-c-radio {
+:where(: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,7 +1,6 @@
-// @debug $radio; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$radio} {
+:where(: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/Select/select.scss

@@ -1,4 +1,4 @@
-// @debug $select; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 .#{$select} {
   // Toggle

package/components/Sidebar/sidebar.css

@@ -1,5 +1,4 @@
-:root,
-:where(.pf-v6-c-sidebar) {
+:where(: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

@@ -1,9 +1,10 @@
-// @debug $sidebar; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use 'sass:math';
+@use '../../sass-utilities' as *;
+
 $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);
 
-:root,
-:where(.#{$sidebar}) {
+:where(: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);
@@ -243,7 +244,6 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   }
 }
 
-
 // Responsive width modifiers
 @each $breakpoint, $breakpoint-value in $pf-v6-c-sidebar--breakpoint-map--width {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
@@ -254,7 +254,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
         @if $width-value == "default" {
           --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
         } @else {
-          --pf-v6-c-sidebar__panel--FlexBasis: #{percentage(div($width-value, 100))};
+          --pf-v6-c-sidebar__panel--FlexBasis: #{percentage(math.div($width-value, 100))};
         }
       }
     }

package/components/SimpleList/simple-list.css

@@ -1,4 +1,4 @@
-:root, .pf-v6-c-simple-list {
+:where(:root, .pf-v6-c-simple-list) {
   --pf-v6-c-simple-list__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
   --pf-v6-c-simple-list__item-link--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v6-c-simple-list__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);

package/components/SimpleList/simple-list.scss

@@ -1,6 +1,6 @@
-// @debug $simple-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root, .#{$simple-list} {
+:where(:root, .#{$simple-list}) {
   // Simple list item link
   --#{$simple-list}__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
   --#{$simple-list}__item-link--PaddingRight: var(--pf-t--global--spacer--md);
@@ -47,7 +47,7 @@
   background-color: var(--#{$simple-list}__item-link--BackgroundColor);
   border: none;
   border-radius: var(--#{$simple-list}__item-link--BorderRadius);
-  
+
   &.pf-m-link {
     --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-link--Color);
     --#{$simple-list}__item-link--hover--Color: var(--#{$simple-list}__item-link--m-link--m-current--Color);

package/components/Skeleton/skeleton.css

@@ -1,6 +1,5 @@
 @charset "UTF-8";
-:root,
-.pf-v6-c-skeleton {
+:where(: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,7 +1,6 @@
-// @debug $skeleton; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$skeleton} {
+:where(: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,4 @@
-:root {
+:where(:root, .pf-v6-c-skip-to-content) {
   --pf-v6-c-skip-to-content--Top: 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--Left: var(--pf-t--global--spacer--md);

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

@@ -1,6 +1,6 @@
-// @debug $skip-to-content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$skip-to-content}) {
   --#{$skip-to-content}--Top: var(--pf-t--global--spacer--md);
   --#{$skip-to-content}--ZIndex: var(--pf-t--global--z-index--2xl);
   --#{$skip-to-content}--focus--Left: var(--pf-t--global--spacer--md);

package/components/Slider/slider.css

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

package/components/Slider/slider.scss

@@ -1,10 +1,9 @@
-// @debug $slider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$slider} {
+:where(:root, .#{$slider}) {
   --#{$slider}--value: 0; // should always be set inline
   --#{$slider}__step--Left: 0; // should always be set inline
-  
+
   // rail
   --#{$slider}__rail--PaddingTop: var(--pf-t--global--spacer--md);
   --#{$slider}__rail--PaddingBottom: var(--pf-t--global--spacer--md);
@@ -13,11 +12,11 @@
   --#{$slider}__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
   --#{$slider}__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
   --#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
-    
+
   // steps
   --#{$slider}__steps--FontSize: var(--pf-t--global--font--size--sm);
   --#{$slider}__steps--Height: var(--#{$slider}__steps--FontSize);
-  
+
   // step tick
   --#{$slider}__step-tick--Top: var(--pf-t--global--spacer--md);
   --#{$slider}__step-tick--Width: #{pf-size-prem(4px)};
@@ -28,13 +27,13 @@
   --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
   --#{$slider}__step--first-child__step-tick--TranslateX: 0;
   --#{$slider}__step--last-child__step-tick--TranslateX: -100%;
-  
+
   // step label
   --#{$slider}__step-label--TranslateX: -50%;
   --#{$slider}__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--#{$slider}__rail-track--Height));
   --#{$slider}__step--first-child__step-label--TranslateX: 0;
   --#{$slider}__step--last-child__step-label--TranslateX: -100%;
-  
+
   // thumb
   --#{$slider}__thumb--Top: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
   --#{$slider}__thumb--Width: #{pf-size-prem(16px)};
@@ -57,7 +56,7 @@
   --#{$slider}__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$slider}__thumb--before--TranslateX: -50%;
   --#{$slider}__thumb--before--TranslateY: -50%;
-  
+
   // value
   --#{$slider}__value--MarginLeft: var(--pf-t--global--spacer--md);
   --#{$slider}__value--c-form-control--width-base: calc(var(--#{$form-control}--PaddingLeft) + var(--#{$form-control}--PaddingRight) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
@@ -67,11 +66,11 @@
   --#{$slider}__value--m-floating--TranslateY: -100%;
   --#{$slider}__value--m-floating--Left: var(--#{$slider}--value);
   --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
-  
+
   // actions
   --#{$slider}__actions--MarginRight: var(--pf-t--global--spacer--sm);
   --#{$slider}__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
-  
+
   // disabled
   --#{$slider}--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --#{$slider}--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
@@ -80,11 +79,11 @@
 
 .#{$slider} {
   @include pf-v6-bidirectional-style(
-    $prop: --#{$slider}__rail-track--before--fill--direction, 
+    $prop: --#{$slider}__rail-track--before--fill--direction,
     $ltr-val: right,
     $rtl-val: left
   );
-  
+
   display: flex;
 
   &.pf-m-disabled {

package/components/Spinner/spinner.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-spinner {
+:where(: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,7 +1,6 @@
-// @debug $spinner; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$spinner} {
+:where(:root, .#{$spinner}) {
   --#{$spinner}--diameter: var(--pf-t--global--icon--size--2xl);
   --#{$spinner}--Width: var(--#{$spinner}--diameter);
   --#{$spinner}--Height: var(--#{$spinner}--diameter);
@@ -13,13 +12,13 @@
   // path
   --#{$spinner}__path--StrokeWidth: var(--#{$spinner}--StrokeWidth);
   --#{$spinner}__path--AnimationTimingFunction: ease-in-out;
-  
+
   // sizes
   --#{$spinner}--m-sm--diameter: var(--pf-t--global--icon--size--md);
   --#{$spinner}--m-md--diameter: var(--pf-t--global--icon--size--lg);
   --#{$spinner}--m-lg--diameter: var(--pf-t--global--icon--size--xl);
   --#{$spinner}--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
-  
+
   // inline
   --#{$spinner}--m-inline--diameter: 1em;
 }

package/components/Switch/switch.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-switch {
+:where(: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);