@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/patternfly.scss

@@ -1,4 +1,3 @@
-// Version
-@import "patternfly-base";
-@import "components/all";
-@import "layouts/all";
+@use './patternfly-base';
+@use './components';
+@use './layouts';

package/sass-utilities/_index.scss

@@ -0,0 +1,6 @@
+@forward './init';
+@forward './scss-variables';
+@forward './functions';
+@forward './mixins';
+@forward './namespaces-components';
+@forward './namespaces-layouts';

package/sass-utilities/functions.scss

@@ -1,56 +1,56 @@
 // PatternFly functions
 // --------------------------------------------------
-@import "./div";
+@use '../sass-utilities/scss-variables.scss' as *;
+@use '../sass-utilities/init.scss' as *;
+@use 'sass:math';
 
 // Transform px to rems
 @function pf-strip-unit($num) {
-  @return div($num, ($num * 0 + 1));
-}
+  @if type-of($num) == 'number' and not unitless($num) {
+    @return math.div($num, ($num * 0 + 1));
+  }
 
-@function pf-size-prem($pxval, $base: $pf-v5-global--space-size-root) {
-  @return div(pf-strip-unit($pxval), $base) * 1rem;
+  @return $num;
 }
 
-@function pf-font-prem($pxval, $base: $pf-v5-global--font-size-root) {
-  @return div(pf-strip-unit($pxval), $base) * 1rem;
+@function pf-size-prem($pxval, $base: $pf-v6-global--space-size-root) {
+  @return math.div(pf-strip-unit($pxval), $base) * 1rem;
 }
 
-@function pf-bg-svg($svg-coordinates, $viewBox: "512", $svg-color: "currentColor") {
-  $color: str-slice(#{$svg-color}, 2);
-
-  @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$viewBox} 512'%3E%3Cpath fill='%23#{$color}' d='#{$svg-coordinates}'/%3E%3C/svg%3E");
+@function pf-font-prem($pxval, $base: $pf-v6-global--font-size-root) {
+  @return math.div(pf-strip-unit($pxval), $base) * 1rem;
 }
 
 // Return (width) breakpoint value if it exists
-@function pf-breakpoint-value($breakpoint, $breakpoint-map: $pf-v5-global--breakpoint-name-map) {
+@function pf-breakpoint-value($breakpoint, $breakpoint-map: $pf-v6-global--breakpoint-name-map) {
   $breakpoint-value: if(map-has-key($breakpoint-map, #{$breakpoint}), map-get($breakpoint-map, #{$breakpoint}), false);
 
   @return #{$breakpoint-value};
 }
 
 // Return height breakpoint value if it exists
-@function pf-height-breakpoint-value($height-breakpoint, $height-breakpoint-map: $pf-v5-global--height-breakpoint-name-map) {
+@function pf-height-breakpoint-value($height-breakpoint, $height-breakpoint-map: $pf-v6-global--height-breakpoint-name-map) {
   $height-breakpoint-value: if(map-has-key($height-breakpoint-map, #{$height-breakpoint}), map-get($height-breakpoint-map, #{$height-breakpoint}), false);
 
   @return #{$height-breakpoint-value};
 }
 
 // Build breakpoint map
-// Based on $pf-v5-global--breakpoint-name-map
+// Based on $pf-v6-global--breakpoint-name-map
 @function build-breakpoint-map($map-items...) {
   $map: ();
 
   @if length($map-items) == 0 {
     $map: ("base": null);
-    $map: map-merge($map, $pf-v5-global--breakpoint-name-map);
+    $map: map-merge($map, $pf-v6-global--breakpoint-name-map);
   } @else {
     @each $breakpoint in $map-items {
-      @if not map-has-key($pf-v5-global--breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
+      @if not map-has-key($pf-v6-global--breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
         $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
       } @else if $breakpoint == "base" {
         $map: map-merge($map, ($breakpoint: null));
       } @else {
-        $map: map-merge($map, ($breakpoint: map-get($pf-v5-global--breakpoint-name-map, #{$breakpoint})));
+        $map: map-merge($map, ($breakpoint: map-get($pf-v6-global--breakpoint-name-map, #{$breakpoint})));
       }
     }
   }
@@ -59,21 +59,21 @@
 }
 
 // Build height breakpoint map
-// Based on $pf-v5-global--height-breakpoint-name-map
+// Based on $pf-v6-global--height-breakpoint-name-map
 @function build-height-breakpoint-map($map-items...) {
   $map: ();
 
   @if length($map-items) == 0 {
     $map: ("base": null);
-    $map: map-merge($map, $pf-v5-global--height-breakpoint-name-map);
+    $map: map-merge($map, $pf-v6-global--height-breakpoint-name-map);
   } @else {
     @each $breakpoint in $map-items {
-      @if not map-has-key($pf-v5-global--height-breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
+      @if not map-has-key($pf-v6-global--height-breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
         $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
       } @else if $breakpoint == "base" {
         $map: map-merge($map, ($breakpoint: null));
       } @else {
-        $map: map-merge($map, ($breakpoint: map-get($pf-v5-global--height-breakpoint-name-map, #{$breakpoint})));
+        $map: map-merge($map, ($breakpoint: map-get($pf-v6-global--height-breakpoint-name-map, #{$breakpoint})));
       }
     }
   }
@@ -83,13 +83,13 @@
 
 
 // Build spacer map
-// Based on $pf-v5-global--spacer-map
+// Based on $pf-v6-global--spacer-map
 @function build-spacer-map($map-items...) {
   $map: ();
 
   @if length($map-items) == 0 {
     $map: ("none": 0);
-    $map: map-merge($map, $pf-v5-global--spacer-map);
+    $map: map-merge($map, $pf-v6-global--spacer-map);
     $map: map-remove($map, "auto", "0");
   }
 
@@ -97,7 +97,7 @@
     @if $spacer == "none" {
       $map: map-merge($map, ($spacer: 0));
     } @else {
-      $map: map-merge($map, ($spacer: map-get($pf-v5-global--spacer-map, #{$spacer})));
+      $map: map-merge($map, ($spacer: map-get($pf-v6-global--spacer-map, #{$spacer})));
     }
   }
 
@@ -118,6 +118,6 @@
 
 // Returns a calc() with the inverse of a value used for RTL. Most commonly used as the inverse/negative of a value in a transform function (eg, translate(), rotate(), scale(), etc)
 // Shouldn't be used on an existing LTR style as adding a calc() in an existing style could be breaking. Should used within an RTL selector, which is basically an opt-in.
-@function pf-v5-calc-inverse($val, $multiplier: var(--#{$pf-global}--inverse--multiplier)) {
+@function pf-v6-calc-inverse($val, $multiplier: var(--#{$pf-global}--inverse--multiplier)) {
   @return calc(#{$val} * #{$multiplier});
 }

package/sass-utilities/{_init.scss → init.scss}

@@ -23,11 +23,11 @@ $pf-global--theme-light--placeholder--class: 't-light' !default;
 // stylelint-enable
 
 // Dark theme versioned variables
-$pf-v5--theme-dark--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--class} !default; // include the operator here
-$pf-v5--theme-dark--target: '' !default; // include the operator here
-$pf-v5--theme-dark--placeholder--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--placeholder--class} !default; // include the operator here
+$pf-v6--theme-dark--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--class} !default; // include the operator here
+$pf-v6--theme-dark--target: '' !default; // include the operator here
+$pf-v6--theme-dark--placeholder--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--placeholder--class} !default; // include the operator here
 
 // Light theme versioned variables
-$pf-v5--theme-light--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-light--class} !default; // include the operator here
-$pf-v5--theme-light--target: '' !default; // include the operator here
-$pf-v5--theme-light--placeholder--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-light--placeholder--class} !default; // include the operator here
+$pf-v6--theme-light--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-light--class} !default; // include the operator here
+$pf-v6--theme-light--target: '' !default; // include the operator here
+$pf-v6--theme-light--placeholder--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-light--placeholder--class} !default; // include the operator here

package/sass-utilities/mixins.scss

@@ -1,52 +1,56 @@
+@use '../sass-utilities/functions.scss' as *;
+@use '../sass-utilities/init.scss' as *;
+@use '../sass-utilities/scss-variables.scss' as *;
+
 // Media query used to create responsive classes
-@mixin pf-v5-media-query($point) {
+@mixin pf-v6-media-query($point) {
   @if $point == "" or not $point or $point == "base" {
     @content;
   } @else if $point == "sm" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       @content;
     }
   } @else if $point == "md" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
       @content;
     }
   } @else if $point == "lg" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
       @content;
     }
   } @else if $point == "xl" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
       @content;
     }
   } @else if $point == "2xl" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--2xl) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--2xl) {
       @content;
     }
   }
 }
 
 // Media query used to create responsive classes
-@mixin pf-v5-height-media-query($point) {
+@mixin pf-v6-height-media-query($point) {
   @if $point == "" or not $point or $point == "base" {
     @content;
   } @else if $point == "sm" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--sm) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--sm) {
       @content;
     }
   } @else if $point == "md" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--md) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--md) {
       @content;
     }
   } @else if $point == "lg" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--lg) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--lg) {
       @content;
     }
   } @else if $point == "xl" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--xl) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--xl) {
       @content;
     }
   } @else if $point == "2xl" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--2xl) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--2xl) {
       @content;
     }
   }
@@ -56,35 +60,34 @@
 // @group mixins
 // @moduleType mixin
 // @parameter: [Suffix] xs, sm, md, lg, xl, base or null
-// @usage: @include pf-v5-utility-builder(class-name, base sm md lg xl);
+// @usage: @include pf-v6-utility-builder(class-name, base sm md lg xl);
 // ===============================================================================================
 
 // ## Example sass map:
 // this must be used when order matters or a cluster of similar utilties need to overwrite each other
 
 // Justify content options
-// $pf-v5-u-flex-options: (
+// $pf-v6-u-flex-options: (
 //   flex-none:  (flex none),
 //   flex-1:     (flex 1)
 // );
 
-// non-responsive, base only                @include pf-v5-utility-builder($sass-map)
-// responsive, including all breakpoints    @include pf-v5-utility-builder($sass-map, $pf-v5-global--breakpoint-list)
-// responsive height breakpoints            @include pf-v5-utility-builder($sass-map, $pf-v5-global--height-breakpoint-list, 'height')
+// non-responsive, base only                @include pf-v6-utility-builder($sass-map)
+// responsive, including all breakpoints    @include pf-v6-utility-builder($sass-map, $pf-v6-global--breakpoint-list)
+// responsive height breakpoints            @include pf-v6-utility-builder($sass-map, $pf-v6-global--height-breakpoint-list, 'height')
 
 // ## Passing individual utilities values
 // ===============================================================================================
 // Example individual utility:
-// @include pf-v5-utility-builder(flex-fill flex "1 1 auto", $pf-v5-global--breakpoint-list);
-
-@mixin pf-v5-utility-builder($props, $breakpoints: null, $direction: "width") {
+// @include pf-v6-utility-builder(flex-fill flex "1 1 auto", $pf-v6-global--breakpoint-list);
+@mixin pf-v6-utility-builder($props, $breakpoints: null, $direction: 'width') {
   // if $class-name is a map
 
   // stylelint-disable
   @if type-of($props) == map {
     @each $class, $val in $props {
       $property: nth($val, 1);
-      $value: #{nth($val, 2) !important};
+      $value: #{nth($val, 2)} !important;
 
       .#{$pf-prefix}u-#{$class} {
         #{$property}: #{$value};
@@ -97,10 +100,10 @@
         $suffix: -on-#{$breakpoint};
 
         @if $direction == 'height' {
-          @include pf-v5-height-media-query($breakpoint) {
+          @include pf-v6-height-media-query($breakpoint) {
             @each $class, $val in $props {
               $property: nth($val, 1);
-              $value: #{nth($val, 2) !important};
+              $value: #{nth($val, 2)} !important;
 
               .#{$pf-prefix}u-#{$class}#{$suffix}-height {
                 #{$property}: #{$value};
@@ -108,11 +111,11 @@
             }
           }
         }
-        @else if $direction == 'width' {
-          @include pf-v5-media-query($breakpoint) {
+        @else if ($direction == 'width') {
+          @include pf-v6-media-query($breakpoint) {
             @each $class, $val in $props {
               $property: nth($val, 1);
-              $value: #{nth($val, 2) !important};
+              $value: #{nth($val, 2)} !important;
 
               .#{$pf-prefix}u-#{$class}#{$suffix} {
                 #{$property}: #{$value};
@@ -123,7 +126,6 @@
       }
     }
   }
-
   @else if type-of($props) == list {
     $class: nth($props, 1);
     $property: nth($props, 2);
@@ -138,7 +140,7 @@
         $suffix: -on-#{$breakpoint};
 
         .#{$pf-prefix}u-#{$class}#{$suffix} {
-          @include pf-v5-media-query($breakpoint) {
+          @include pf-v6-media-query($breakpoint) {
             #{$property}: #{$value};
           }
         }
@@ -149,17 +151,17 @@
 
 // stylelint-enable
 
-@mixin pf-v5-u-screen-reader {
+@mixin pf-v6-u-screen-reader {
   position: fixed;
- inset-block-start: 0;
- inset-inline-start: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
 }
 
-@mixin pf-v5-u-visible {
+@mixin pf-v6-u-visible {
   position: static;
   overflow: visible;
   clip: auto;
@@ -167,27 +169,13 @@
   border: inherit;
 }
 
-@mixin pf-v5-t-light($color: "--#{$pf-global}--Color--100") {
-  @if $color {
-    color: var(#{$color});
-  }
-
-  @extend %pf-v5-t-light;
-}
-
-@mixin pf-v5-t-dark($color: "--#{$pf-global}--Color--100") {
-  color: var(#{$color});
-
-  @extend %pf-v5-t-dark;
-}
-
-@mixin pf-v5-text-overflow {
+@mixin pf-v6-text-overflow {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-@mixin pf-v5-line-clamp($line-clamp-val: 1) {
+@mixin pf-v6-line-clamp($line-clamp-val: 1) {
   // stylelint-disable
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -196,7 +184,7 @@
   overflow: hidden;
 }
 
-@mixin pf-v5-overflow-hide-scroll {
+@mixin pf-v6-overflow-hide-scroll {
   &::-webkit-scrollbar {
     display: none;
   } // hides scrollbars in Chrome
@@ -205,15 +193,44 @@
   -ms-overflow-style: -ms-autohiding-scrollbar; // auto hides scrollbars in Edge
 }
 
-@mixin pf-v5-hidden-visible($val: "block") {
+@mixin pf-v6-hidden-visible($val: "block") {
   // stylelint-disable-next-line
-  --pf-v5-hidden-visible--visible--Display: #{$val};
+  --#{$pf-prefix}hidden-visible--visible--Display: #{$val};
+
+  // base value for visible display property is set to 'block' by default and passed in to
+  // placeholder via `pf-v6-hidden-visible` mixin
+
+  // set hidden var values
+  // stylelint-disable custom-property-pattern
+  --#{$pf-prefix}hidden-visible--hidden--Display: none;
+
+  // set visibile var values
+  --#{$pf-prefix}hidden-visible--Display: var(--#{$pf-prefix}hidden-visible--visible--Display);
+
+  // set default state to visible
+  display: var(--#{$pf-prefix}hidden-visible--Display);
+
+  // toggle values based on state
+  &.pf-m-hidden {
+    --#{$pf-prefix}hidden-visible--Display: var(--#{$pf-prefix}hidden-visible--hidden--Display);
+  }
 
-  @extend %pf-v5-hidden-visible;
+  @each $size, $bp in $pf-v6-global--breakpoint-name-map {
+    @media screen and (min-width: $bp) {
+      &.pf-m-hidden-on-#{$size} {
+        --#{$pf-prefix}hidden-visible--Display: var(--#{$pf-prefix}hidden-visible--hidden--Display);
+      }
+
+      &.pf-m-visible-on-#{$size} {
+        --#{$pf-prefix}hidden-visible--Display: var(--#{$pf-prefix}hidden-visible--visible--Display);
+      }
+    }
+  }
+  // stylelint-enable
 }
 
 // Apply media query if value is passed
-@mixin pf-v5-apply-breakpoint($breakpoint) {
+@mixin pf-v6-apply-breakpoint($breakpoint) {
   @if $breakpoint == "null" or $breakpoint == "base" or $breakpoint == "" {
     @content;
   } @else {
@@ -226,7 +243,7 @@
 }
 
 // Apply height media query if value is passed
-@mixin pf-v5-apply-height-breakpoint($breakpoint) {
+@mixin pf-v6-apply-height-breakpoint($breakpoint) {
   @if $breakpoint == "null" or $breakpoint == "base" or $breakpoint == "" {
     @content;
   } @else {
@@ -238,14 +255,14 @@
   }
 }
 
-@mixin pf-v5-emit-properties($map) {
+@mixin pf-v6-emit-properties($map) {
   @each $prop, $value in $map {
     #{$value}: #{$prop};
   }
 }
 
 // Animate tab focus removal
-@mixin pf-v5-animate-remove-tab-focus($element, $delay: $pf-v5-global--TransitionDuration) {
+@mixin pf-v6-animate-remove-tab-focus($element, $delay: $pf-v6-global--TransitionDuration) {
   @keyframes pf-remove-tab-focus {
     to {
       visibility: hidden;
@@ -260,7 +277,7 @@
 }
 
 // Build variable stack
-@mixin pf-v5-build-css-variable-stack($prop, $css-var, $breakpoint-map: $pf-v5-global--breakpoint-map, $important: false) {
+@mixin pf-v6-build-css-variable-stack($prop, $css-var, $breakpoint-map: $pf-v6-global--breakpoint-map, $important: false) {
   $list: ();
 
   @each $breakpoint, $breakpoint-value in $breakpoint-map {
@@ -283,7 +300,7 @@
     }
 
     // Assign variable stack to $prop
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       @if $important == true {
         // stylelint-disable declaration-no-important
         #{$prop}: #{$variable-list} !important;
@@ -296,7 +313,7 @@
 }
 
 // Build variable stack
-@mixin pf-v5-output-root-variables($css-var, $breakpoint-map: $pf-v5-global--breakpoint-map) {
+@mixin pf-v6-output-root-variables($css-var, $breakpoint-map: $pf-v6-global--breakpoint-map) {
   $list: ();
 
   @each $breakpoint, $breakpoint-value in $breakpoint-map {
@@ -314,13 +331,13 @@
 }
 
 // Dark theme style block
-@mixin pf-v5-theme-dark($theme-dark-class: $pf-v5--theme-dark--class, $theme-dark-target: $pf-v5--theme-dark--target) {
+@mixin pf-v6-theme-dark($theme-dark-class: $pf-v6--theme-dark--class, $theme-dark-target: $pf-v6--theme-dark--target) {
   #{$theme-dark-target}:where(#{$theme-dark-class}) {
     @content;
   }
 }
 
-@mixin pf-v5-construct-global-vars($prefix: $pf-prefix--version, $maps...) {
+@mixin pf-v6-construct-global-vars($prefix: $pf-prefix--version, $maps...) {
   @each $map in $maps {
     @each $name, $val in $map {
       #{$prefix}#{$name}: #{$val};
@@ -328,11 +345,23 @@
   }
 }
 
+@mixin pf-v6-remove-num-arrows {
+  appearance: textfield;
+
+  // stylelint-disable
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+  // stylelint-enable
+    margin: 0;
+    appearance: none;
+  }
+}
+
 // RTL helpers
 
 // Used to create the RTL selector for RTL specific styles
 
-// @include pf-v5-rtl {
+// @include pf-v6-rtl {
 //   background: red;
 // }
 
@@ -341,14 +370,14 @@
 // [dir="rtl"] {
 //   background: red;
 // }
-@mixin pf-v5-rtl {
+@mixin pf-v6-rtl {
   @at-root :where(.#{$pf-prefix}m-dir-rtl, [dir="rtl"]) #{&} {
     @content;
   }
 }
 
 // Used to create the LTR selector for LTR specific styles
-@mixin pf-v5-ltr {
+@mixin pf-v6-ltr {
   @at-root :where(.#{$pf-prefix}m-dir-ltr, [dir="ltr"]) #{&} {
     @content;
   }
@@ -356,7 +385,7 @@
 
 // Creates a default/LTR declaration, and an RTL declaration.
 
-// @include pf-v5-bidirectional-style(background, blue, red)
+// @include pf-v6-bidirectional-style(background, blue, red)
 
 // renders as
 
@@ -364,26 +393,33 @@
 // [dir="rtl"] {
 //   background: red;
 // }
-@mixin pf-v5-bidirectional-style($prop, $ltr-val, $rtl-val) {
+@mixin pf-v6-bidirectional-style($prop, $ltr-val, $rtl-val) {
   #{$prop}: #{$ltr-val};
 
-  @include pf-v5-rtl {
+  @include pf-v6-rtl {
     #{$prop}: #{$rtl-val};
   }
 }
 
 // Mirrors/flips something horizontally/inline. Relies upon scale/scale() not already being used for the element. Can be extended to take arguments to use different methods other than scale().
-@mixin pf-v5-mirror-inline {
+@mixin pf-v6-mirror-inline {
   scale: -1 1;
 }
 
-@mixin pf-v5-mirror-inline-on-rtl {
-  @include pf-v5-rtl {
-    @include pf-v5-mirror-inline;
+@mixin pf-v6-mirror-inline-on-rtl {
+  @include pf-v6-rtl {
+    @include pf-v6-mirror-inline;
   }
 }
 
 // Declares a global inverse multiplier var used for returning the inverse of a number. Defined within blocks that reference the global var in calc() functions to conditionally return the default or inverse value of a number.
-@mixin pf-v5-set-inverse($val: true) {
+@mixin pf-v6-set-inverse($val: true) {
   --#{$pf-global}--inverse--multiplier: #{if($val, -1, 1)};
 }
+
+@mixin pf-root($selector, $mods: null) {
+  :root,
+  .#{$selector} {
+    @content
+  }
+}

package/sass-utilities/{component-namespaces.scss → namespaces-components.scss}

@@ -1,3 +1,6 @@
+@use '../sass-utilities/init.scss' as *;
+@use '../sass-utilities/scss-variables.scss' as *;
+
 // Globally scoped component variables
 // About Modal Box
 // stylelint-disable scss/dollar-variable-pattern
@@ -15,9 +18,6 @@ $alert: #{$pf-prefix} + 'c-alert';
 // Alert Group
 $alert-group: #{$pf-prefix} + 'c-alert-group';
 
-// App Launcher
-$app-launcher: #{$pf-prefix} + 'c-app-launcher';
-
 // Avatar
 $avatar: #{$pf-prefix} + 'c-avatar';
 
@@ -54,12 +54,6 @@ $card: #{$pf-prefix} + 'c-card';
 // Check
 $check: #{$pf-prefix} + 'c-check';
 
-// Chip
-$chip: #{$pf-prefix} + 'c-chip';
-
-// Chip Group
-$chip-group: #{$pf-prefix} + 'c-chip-group';
-
 // Clipboard Copy
 $clipboard-copy: #{$pf-prefix} + 'c-clipboard-copy';
 
@@ -72,9 +66,6 @@ $code-editor: #{$pf-prefix} + 'c-code-editor';
 // Content
 $content: #{$pf-prefix} + 'c-content';
 
-// Context Selector
-$context-selector: #{$pf-prefix} + 'c-context-selector';
-
 // Data List
 $data-list: #{$pf-prefix} + 'c-data-list';
 
@@ -95,9 +86,6 @@ $droppable: #{$pf-prefix} + 'c-droppable';
 // Drawer
 $drawer: #{$pf-prefix} + 'c-drawer';
 
-// Dropdown
-$dropdown: #{$pf-prefix} + 'c-dropdown';
-
 // Dual List Selector
 $dual-list-selector: #{$pf-prefix} + 'c-dual-list-selector';
 
@@ -146,9 +134,6 @@ $list: #{$pf-prefix} + 'c-list';
 // Login
 $login: #{$pf-prefix} + 'c-login';
 
-// Log Viewer
-$log-viewer: #{$pf-prefix} + 'c-log-viewer';
-
 // Masthead
 $masthead: #{$pf-prefix} + 'c-masthead';
 
@@ -167,18 +152,12 @@ $multiple-file-upload: #{$pf-prefix} + 'c-multiple-file-upload';
 // Nav
 $nav: #{$pf-prefix} + 'c-nav';
 
-// Notification Badge
-$notification-badge: #{$pf-prefix} + 'c-notification-badge';
-
 // Notification Drawer
 $notification-drawer: #{$pf-prefix} + 'c-notification-drawer';
 
 // Number Input
 $number-input: #{$pf-prefix} + 'c-number-input';
 
-// Options Menu
-$options-menu: #{$pf-prefix} + 'c-options-menu';
-
 // Overflow Menu
 $overflow-menu: #{$pf-prefix} + 'c-overflow-menu';
 
@@ -203,9 +182,6 @@ $progress-stepper: #{$pf-prefix} + 'c-progress-stepper';
 // Radio
 $radio: #{$pf-prefix} + 'c-radio';
 
-// Select
-$select: #{$pf-prefix} + 'c-select';
-
 // Sidebar
 $sidebar: #{$pf-prefix} + 'c-sidebar';