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

package/components/Drawer/drawer.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-drawer) {
+:where(: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%;
@@ -107,12 +106,10 @@
   --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(--pf-v6-c-drawer__panel--after--Width);
 }
 @media screen and (min-width: 1200px) {
-  :where(:root),
-  :where(.pf-v6-c-drawer) {
+  :where(:root, .pf-v6-c-drawer) {
     --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
   }
-  :where(:root).pf-m-panel-bottom,
-  :where(.pf-v6-c-drawer).pf-m-panel-bottom {
+  :where(:root, .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

@@ -1,10 +1,11 @@
-// @debug $drawer; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use 'sass:math';
+@use '../../sass-utilities' as *;
+
 $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),
-:where(.#{$drawer}) {
+:where(: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);
@@ -127,7 +128,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$drawer}__panel--MinWidth: var(--#{$drawer}__panel--xl--MinWidth);
-  
+
     &.pf-m-panel-bottom {
       --#{$drawer}__panel--MinWidth: auto;
       --#{$drawer}__panel--MinHeight: var(--#{$drawer}--m-panel-bottom__panel--xl--MinHeight);
@@ -157,7 +158,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     $prop: --#{$drawer}--m-expanded__panel--BoxShadow,
     $ltr-val: var(--pf-t--global--box-shadow--lg--left),
     $rtl-val: var(--pf-t--global--box-shadow--lg--right)
-  ); 
+  );
   @include pf-v6-bidirectional-style(
     $prop: --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow,
     $ltr-val: var(--pf-t--global--box-shadow--lg--right),
@@ -185,7 +186,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
         $prop: transform,
         $ltr-val: translateX(-100%),
         $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
-      ); 
+      );
     }
 
     > .#{$drawer}__content {
@@ -205,7 +206,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
         $prop: transform,
         $ltr-val: translateX(-100%),
         $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
-      ); 
+      );
     }
 
     &.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel {
@@ -266,7 +267,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   flex-basis: var(--#{$drawer}__content--FlexBasis);
   order: 0;
   background-color: var(--#{$drawer}__content--BackgroundColor);
-  
+
   &.pf-m-primary {
     --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-primary--BackgroundColor);
   }
@@ -274,7 +275,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   &.pf-m-secondary {
     --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
   }
-  
+
   > .#{$drawer}__body {
     padding-block-start: var(--#{$drawer}__content__body--PaddingTop);
     padding-block-end: var(--#{$drawer}__content__body--PaddingBottom);
@@ -467,7 +468,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     $prop: transform,
     $ltr-val: translate(-50%, -50%),
     $rtl-val: translate(#{pf-v6-calc-inverse(-50%)}, -50%),
-  ); 
+  );
 
 
   &::after {
@@ -635,7 +636,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   @include pf-v6-apply-breakpoint($breakpoint) {
     @each $width-value in $pf-v6-c-drawer__panel--list--width {
       .#{$drawer}__panel.pf-m-width-#{$width-value}#{$breakpoint-name} {
-        --#{$drawer}__panel--md--FlexBasis: #{percentage(div($width-value, 100))};
+        --#{$drawer}__panel--md--FlexBasis: #{percentage(math.div($width-value, 100))};
       }
     }
   }
@@ -679,7 +680,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
           $prop: transform,
           $ltr-val: translateX(100%),
           $rtl-val: translateX(#{pf-v6-calc-inverse(100%)}),
-        ); 
+        );
       }
 
       // stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors
@@ -703,7 +704,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
             $prop: transform,
             $ltr-val: translateX(-100%),
             $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
-          ); 
+          );
         }
 
         // Inline, expanded, panel left

package/components/Dropdown/dropdown.scss

@@ -1,4 +1,5 @@
-// @debug $dropdown; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
 .#{$dropdown} {

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

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

@@ -1,7 +1,8 @@
-// @debug $dual-list-selector; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
-:where(:root), :where(.#{$dual-list-selector}) {
+:where(:root, .#{$dual-list-selector}) {
   // Grid
   --#{$dual-list-selector}__header--GridArea: pane-header;
   --#{$dual-list-selector}__tools--GridArea: pane-tools;
@@ -174,7 +175,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
         $prop: transform,
         $ltr-val: translateX(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX)),
         $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX))}),
-      ); 
+      );
 
       position: absolute;
       inset-inline-start: var(--#{$dual-list-selector}__list__list__item-toggle--Left);

package/components/EmptyState/empty-state.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-empty-state) {
   --pf-v6-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
   --pf-v6-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
   --pf-v6-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);

package/components/EmptyState/empty-state.scss

@@ -1,6 +1,6 @@
-// @debug $empty-state; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$empty-state}) {
   --#{$empty-state}--PaddingTop: var(--pf-t--global--spacer--xl);
   --#{$empty-state}--PaddingRight: var(--pf-t--global--spacer--xl);
   --#{$empty-state}--PaddingBottom: var(--pf-t--global--spacer--xl);

package/components/ExpandableSection/expandable-section.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-expandable-section) {
   --pf-v6-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);

package/components/ExpandableSection/expandable-section.scss

@@ -1,6 +1,6 @@
-// @debug $expandable-section; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$expandable-section}) {
   // Toggle
   --#{$expandable-section}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
@@ -8,7 +8,7 @@
   --#{$expandable-section}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__toggle--BackgroundColor: transparent;
   --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
-  
+
   // Toggle icon
   --#{$expandable-section}__toggle-icon--MinWidth: 1em;
   --#{$expandable-section}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -17,23 +17,22 @@
   --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
   --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
   --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
-  
+
   // Toggle text
   --#{$expandable-section}__toggle-text--Color: var(--pf-t--global--color--brand--default);
   --#{$expandable-section}__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
   --#{$expandable-section}--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
 
-
   // Content
   --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__content--PaddingBottom: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__content--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__content--MaxWidth: auto;
-  
+
   // Limit Width
   --#{$expandable-section}--m-limit-width__content--MaxWidth: #{pf-size-prem(750px)};
-  
+
   // Large / Disclosure
   --#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
@@ -52,12 +51,11 @@
   --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
   --#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
 
-
   // Indented
   --#{$expandable-section}--m-indented__content--PaddingLeft--base: calc(var(--#{$expandable-section}__toggle--ColumnGap) + var(--#{$expandable-section}__toggle-icon--MinWidth));
   --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}__toggle--PaddingLeft));
   --#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}--m-display-lg__content--PaddingLeft));
-  
+
   // Truncate
   --#{$expandable-section}--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);

package/components/FileUpload/file-upload.css

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

package/components/Form/form.scss

@@ -1,4 +1,5 @@
-// @debug $form; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
 
 @mixin pf-v6-c-form--m-horizontal {
@@ -24,8 +25,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   }
 }
 
-:root,
-.#{$form} {
+:where(:root, .#{$form}) {
   --#{$form}--GridGap: var(--pf-t--global--spacer--lg);
 
   // Group
@@ -116,7 +116,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   // Section title
   --#{$form}__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
   --#{$form}__section-title--FontWeight: var(--pf-t--global--font--weight--heading);
-  --#{$form}__section-title--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); 
+  --#{$form}__section-title--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
 
   // Field groups
   --#{$form}__field-group--border-width-base: var(--pf-t--global--border--width--divider--default);

package/components/FormControl/form-control.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-form-control {
+:where(: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,5 +1,6 @@
-:root,
-.#{$form-control} {
+@use '../../sass-utilities' as *;
+
+:where(: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);
@@ -93,7 +94,7 @@
   --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
   --#{$form-control}--textarea--Height: auto;
 
-  // Form control icon 
+  // Form control icon
   --#{$form-control}__icon--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$form-control}__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$form-control}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
@@ -172,7 +173,7 @@
   > ::placeholder {
     color: var(--#{$form-control}--m-placeholder--Color); // TODO update to set --#{$form-control}--Color in breaking change - also look for any other place to do that in this component
   }
-  
+
   > :is(input, select) {
     text-overflow: ellipsis;
   }
@@ -180,7 +181,7 @@
   &.pf-m-readonly {
     --#{$form-control}--BackgroundColor: var(--#{$form-control}--m-readonly--BackgroundColor);
     --#{$form-control}--BorderColor: var(--#{$form-control}--m-readonly--BorderColor);
-    
+
     &:hover {
       --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
     }

package/components/HelperText/helper-text.css

@@ -1,4 +1,4 @@
-:root {
+:where(: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,5 +1,6 @@
-// @debug $helper-text; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-:root {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$helper-text}) {
   --#{$helper-text}--Gap: var(--pf-t--global--spacer--xs);
   --#{$helper-text}--FontSize: var(--pf-t--global--font--size--body--sm);
 
@@ -62,7 +63,7 @@
   &.pf-m-success {
     --#{$helper-text}__item-text--FontWeight: var(--#{$helper-text}__item-text--m-success--FontWeight);
     --#{$helper-text}__item-icon--Color: var(--#{$helper-text}__item-icon--m-success--Color);
-    --#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$helper-text}--m-dynamic--m-success__item-icon--Color);  
+    --#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$helper-text}--m-dynamic--m-success__item-icon--Color);
   }
 
   &.pf-m-error {

package/components/Hint/hint.css

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

package/components/Hint/hint.scss

@@ -1,6 +1,6 @@
-// @debug $hint; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$hint}) {
   --#{$hint}--GridRowGap: var(--pf-t--global--spacer--sm);
   --#{$hint}--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$hint}--PaddingRight: var(--pf-t--global--spacer--lg);

package/components/Icon/icon.css

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

package/components/Icon/icon.scss

@@ -1,7 +1,6 @@
-// @debug $icon; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-:where(.#{$icon}) {
+:where(:root, .#{$icon}) {
   // Sizes
   --#{$icon}--Width: 1em;
   --#{$icon}--Height: 1em;

package/components/InlineEdit/inline-edit.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-inline-edit) {
+:where(:root, .pf-v6-c-inline-edit) {
   --pf-v6-c-inline-edit__group--item--MarginRight: var(--pf-t--global--spacer--sm);
   --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,7 +1,6 @@
-// @debug $inline-edit; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where( .#{$inline-edit}) {
+:where(:root,  .#{$inline-edit}) {
   // Group
   --#{$inline-edit}__group--item--MarginRight: var(--pf-t--global--spacer--sm);
 

package/components/InputGroup/input-group.css

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

package/components/JumpLinks/jump-links.css

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

package/components/JumpLinks/jump-links.scss

@@ -1,8 +1,8 @@
-// @debug $jump-links; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
-:where(:root),
-:where(.#{$jump-links}) {
+:where(:root, .#{$jump-links}) {
   // list
   --#{$jump-links}__list--Display: flex;
   --#{$jump-links}__list--PaddingTop: 0;

package/components/Label/label-group.css

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

package/components/Label/label.scss

@@ -1,8 +1,6 @@
-// @debug $label; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-@import '../../sass-utilities/all';
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$label}) {
+:where(:root, .#{$label}) {
   --#{$label}--PaddingTop: var(--pf-t--global--spacer--xs);
   --#{$label}--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$label}--PaddingBottom: var(--pf-t--global--spacer--xs);

package/components/List/list.scss

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

package/components/LogViewer/log-viewer.scss

@@ -1,4 +1,4 @@
-// @debug $log-viewer; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 .#{$log-viewer} {
   --#{$log-viewer}--Height: 100%;

package/components/Login/login.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-login) {
   --pf-v6-c-login--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login--PaddingBottom: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__container--xl--GridColumnGap: var(--pf-t--global--spacer--3xl);
@@ -54,48 +54,48 @@
   --pf-v6-c-login__footer--c-list--xl--PaddingTop: var(--pf-t--global--spacer--2xl);
 }
 @media (min-width: 1200px) {
-  :root {
+  :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
   }
 }
 @media (min-width: 576px) {
-  :root {
+  :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__header--PaddingRight: 0;
     --pf-v6-c-login__header--PaddingLeft: 0;
   }
 }
 @media (min-width: 1200px) {
-  :root {
+  :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__header--MarginBottom: var(--pf-v6-c-login__header--xl--MarginBottom);
     --pf-v6-c-login__header--c-brand--MarginBottom: var(--pf-v6-c-login__header--c-brand--xl--MarginBottom);
   }
 }
 @media (min-width: 1200px) {
-  :root {
+  :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__main--MarginBottom: 0;
   }
 }
 @media (min-width: 768px) {
-  :root {
+  :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__main-header--PaddingRight: var(--pf-v6-c-login__main-header--md--PaddingRight);
     --pf-v6-c-login__main-header--PaddingLeft: var(--pf-v6-c-login__main-header--md--PaddingLeft);
     --pf-v6-c-login__main-header-desc--MarginBottom: var(--pf-v6-c-login__main-header-desc--md--MarginBottom);
   }
 }
 @media (min-width: 768px) {
-  :root {
+  :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__main-body--PaddingRight: var(--pf-v6-c-login__main-body--md--PaddingRight);
     --pf-v6-c-login__main-body--PaddingLeft: var(--pf-v6-c-login__main-body--md--PaddingLeft);
   }
 }
 @media (min-width: 576px) {
-  :root {
+  :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__footer--PaddingRight: 0;
     --pf-v6-c-login__footer--PaddingLeft: 0;
   }
 }
 @media (min-width: 1200px) {
-  :root {
+  :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__footer--c-list--PaddingTop: var(--pf-v6-c-login__footer--c-list--xl--PaddingTop);
   }
 }

package/components/Login/login.scss

@@ -1,6 +1,6 @@
-// @debug $login; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$login}) {
   --#{$login}--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$login}--PaddingBottom: var(--pf-t--global--spacer--lg);
 

package/components/Masthead/masthead.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-masthead) {
+:where(: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--md);
   --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);

package/components/Masthead/masthead.scss

@@ -1,8 +1,9 @@
+@use '../../sass-utilities' as *;
+
 $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),
-:where(.#{$masthead}) {
+:where(:root, .#{$masthead}) {
   // * Masthead
   --#{$masthead}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$masthead}--ColumnGap: var(--pf-t--global--spacer--md);

package/components/Menu/menu.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-menu) {
+:where(: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,5 +1,6 @@
-:where(:root),
-:where(.#{$menu}) {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$menu}) {
   // * Menu
   --#{$menu}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$menu}--Width: auto;