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

package/utilities/Flex/flex.css

@@ -14,7 +14,7 @@
   flex-direction: row-reverse !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-flex-direction-column-on-sm {
     flex-direction: column !important;
   }
@@ -28,7 +28,7 @@
     flex-direction: row-reverse !important;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-flex-direction-column-on-md {
     flex-direction: column !important;
   }
@@ -42,7 +42,7 @@
     flex-direction: row-reverse !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-flex-direction-column-on-lg {
     flex-direction: column !important;
   }
@@ -56,7 +56,7 @@
     flex-direction: row-reverse !important;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-flex-direction-column-on-xl {
     flex-direction: column !important;
   }
@@ -70,7 +70,7 @@
     flex-direction: row-reverse !important;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-flex-direction-column-on-2xl {
     flex-direction: column !important;
   }
@@ -96,7 +96,7 @@
   flex-wrap: wrap-reverse !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-flex-wrap-on-sm {
     flex-wrap: wrap !important;
   }
@@ -107,7 +107,7 @@
     flex-wrap: wrap-reverse !important;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-flex-wrap-on-md {
     flex-wrap: wrap !important;
   }
@@ -118,7 +118,7 @@
     flex-wrap: wrap-reverse !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-flex-wrap-on-lg {
     flex-wrap: wrap !important;
   }
@@ -129,7 +129,7 @@
     flex-wrap: wrap-reverse !important;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-flex-wrap-on-xl {
     flex-wrap: wrap !important;
   }
@@ -140,7 +140,7 @@
     flex-wrap: wrap-reverse !important;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-flex-wrap-on-2xl {
     flex-wrap: wrap !important;
   }
@@ -171,7 +171,7 @@
   align-items: stretch !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-align-items-flex-start-on-sm {
     align-items: flex-start !important;
   }
@@ -188,7 +188,7 @@
     align-items: stretch !important;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-align-items-flex-start-on-md {
     align-items: flex-start !important;
   }
@@ -205,7 +205,7 @@
     align-items: stretch !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-align-items-flex-start-on-lg {
     align-items: flex-start !important;
   }
@@ -222,7 +222,7 @@
     align-items: stretch !important;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-align-items-flex-start-on-xl {
     align-items: flex-start !important;
   }
@@ -239,7 +239,7 @@
     align-items: stretch !important;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-align-items-flex-start-on-2xl {
     align-items: flex-start !important;
   }
@@ -276,7 +276,7 @@
   align-self: stretch !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-align-self-flex-start-on-sm {
     align-self: flex-start !important;
   }
@@ -293,7 +293,7 @@
     align-self: stretch !important;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-align-self-flex-start-on-md {
     align-self: flex-start !important;
   }
@@ -310,7 +310,7 @@
     align-self: stretch !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-align-self-flex-start-on-lg {
     align-self: flex-start !important;
   }
@@ -327,7 +327,7 @@
     align-self: stretch !important;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-align-self-flex-start-on-xl {
     align-self: flex-start !important;
   }
@@ -344,7 +344,7 @@
     align-self: stretch !important;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-align-self-flex-start-on-2xl {
     align-self: flex-start !important;
   }
@@ -385,7 +385,7 @@
   align-content: stretch !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-align-content-flex-start-on-sm {
     align-content: flex-start !important;
   }
@@ -405,7 +405,7 @@
     align-content: stretch !important;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-align-content-flex-start-on-md {
     align-content: flex-start !important;
   }
@@ -425,7 +425,7 @@
     align-content: stretch !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-align-content-flex-start-on-lg {
     align-content: flex-start !important;
   }
@@ -445,7 +445,7 @@
     align-content: stretch !important;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-align-content-flex-start-on-xl {
     align-content: flex-start !important;
   }
@@ -465,7 +465,7 @@
     align-content: stretch !important;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-align-content-flex-start-on-2xl {
     align-content: flex-start !important;
   }
@@ -509,7 +509,7 @@
   justify-content: stretch !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-justify-content-flex-start-on-sm {
     justify-content: flex-start !important;
   }
@@ -529,7 +529,7 @@
     justify-content: stretch !important;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-justify-content-flex-start-on-md {
     justify-content: flex-start !important;
   }
@@ -549,7 +549,7 @@
     justify-content: stretch !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-justify-content-flex-start-on-lg {
     justify-content: flex-start !important;
   }
@@ -569,7 +569,7 @@
     justify-content: stretch !important;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-justify-content-flex-start-on-xl {
     justify-content: flex-start !important;
   }
@@ -589,7 +589,7 @@
     justify-content: stretch !important;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-justify-content-flex-start-on-2xl {
     justify-content: flex-start !important;
   }
@@ -625,7 +625,7 @@
   flex-grow: 0 !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-flex-shrink-1-on-sm {
     flex-shrink: 1 !important;
   }
@@ -639,7 +639,7 @@
     flex-grow: 0 !important;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-flex-shrink-1-on-md {
     flex-shrink: 1 !important;
   }
@@ -653,7 +653,7 @@
     flex-grow: 0 !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-flex-shrink-1-on-lg {
     flex-shrink: 1 !important;
   }
@@ -667,7 +667,7 @@
     flex-grow: 0 !important;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-flex-shrink-1-on-xl {
     flex-shrink: 1 !important;
   }
@@ -681,7 +681,7 @@
     flex-grow: 0 !important;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-flex-shrink-1-on-2xl {
     flex-shrink: 1 !important;
   }
@@ -703,7 +703,7 @@
   flex-basis: auto !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-flex-basis-0-on-sm {
     flex-basis: 0 !important;
   }
@@ -711,7 +711,7 @@
     flex-basis: auto !important;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-flex-basis-0-on-md {
     flex-basis: 0 !important;
   }
@@ -719,7 +719,7 @@
     flex-basis: auto !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-flex-basis-0-on-lg {
     flex-basis: 0 !important;
   }
@@ -727,7 +727,7 @@
     flex-basis: auto !important;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-flex-basis-0-on-xl {
     flex-basis: 0 !important;
   }
@@ -735,7 +735,7 @@
     flex-basis: auto !important;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-flex-basis-0-on-2xl {
     flex-basis: 0 !important;
   }
@@ -751,7 +751,7 @@
   flex: 1 !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-flex-none-on-sm {
     flex: none !important;
   }
@@ -759,7 +759,7 @@
     flex: 1 !important;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-flex-none-on-md {
     flex: none !important;
   }
@@ -767,7 +767,7 @@
     flex: 1 !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-flex-none-on-lg {
     flex: none !important;
   }
@@ -775,7 +775,7 @@
     flex: 1 !important;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-flex-none-on-xl {
     flex: none !important;
   }
@@ -783,7 +783,7 @@
     flex: 1 !important;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-flex-none-on-2xl {
     flex: none !important;
   }
@@ -795,31 +795,31 @@
   flex: 1 1 auto !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-flex-fill-on-sm {
     flex: 1 1 auto !important;
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-flex-fill-on-md {
     flex: 1 1 auto !important;
   }
 }
 
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-flex-fill-on-lg {
     flex: 1 1 auto !important;
   }
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-flex-fill-on-xl {
     flex: 1 1 auto !important;
   }
 }
 
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-flex-fill-on-2xl {
     flex: 1 1 auto !important;
   }

package/utilities/Flex/flex.scss

@@ -1,26 +1,27 @@
-// stylelint-disable
+@use '../../sass-utilities' as *;
 
+// stylelint-disable
 // Flex direction options
-$pf-v5-u-flex-direction-options: (
+$pf-v6-u-flex-direction-options: (
   flex-direction-column:            (flex-direction column),
   flex-direction-column-reverse:    (flex-direction column-reverse),
   flex-direction-row:               (flex-direction row),
   flex-direction-row-reverse:       (flex-direction row-reverse)
 );
 
-@include pf-v5-utility-builder($pf-v5-u-flex-direction-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-flex-direction-options, $pf-v6-global--breakpoint-list);
 
 // Flex wrap options
-$pf-v5-u-flex-wrap-options: (
+$pf-v6-u-flex-wrap-options: (
   flex-wrap:                (flex-wrap wrap),
   flex-nowrap:              (flex-wrap nowrap),
   flex-wrap-reverse:        (flex-wrap wrap-reverse)
 );
 
-@include pf-v5-utility-builder($pf-v5-u-flex-wrap-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-flex-wrap-options, $pf-v6-global--breakpoint-list);
 
 // Align item options
-$pf-v5-u-align-items-options: (
+$pf-v6-u-align-items-options: (
   align-items-flex-start:   (align-items flex-start),
   align-items-flex-end:     (align-items flex-end),
   align-items-center:       (align-items center),
@@ -28,10 +29,10 @@ $pf-v5-u-align-items-options: (
   align-items-stretch:      (align-items stretch)
 );
 
-@include pf-v5-utility-builder($pf-v5-u-align-items-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-align-items-options, $pf-v6-global--breakpoint-list);
 
 // Align self options
-$pf-v5-u-align-self-options: (
+$pf-v6-u-align-self-options: (
   align-self-flex-start:    (align-self flex-start),
   align-self-flex-end:      (align-self flex-end),
   align-self-center:        (align-self center),
@@ -39,10 +40,10 @@ $pf-v5-u-align-self-options: (
   align-self-stretch:       (align-self stretch)
 );
 
-@include pf-v5-utility-builder($pf-v5-u-align-self-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-align-self-options, $pf-v6-global--breakpoint-list);
 
 // Align content options
-$pf-v5-u-align-content-options: (
+$pf-v6-u-align-content-options: (
   align-content-flex-start:    (align-content flex-start),
   align-content-flex-end:      (align-content flex-end),
   align-content-center:        (align-content center),
@@ -51,10 +52,10 @@ $pf-v5-u-align-content-options: (
   align-content-stretch:       (align-content stretch)
 );
 
-@include pf-v5-utility-builder($pf-v5-u-align-content-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-align-content-options, $pf-v6-global--breakpoint-list);
 
 // Justify content options
-$pf-v5-u-justify-content-options: (
+$pf-v6-u-justify-content-options: (
   justify-content-flex-start:    (justify-content flex-start),
   justify-content-flex-end:      (justify-content flex-end),
   justify-content-center:        (justify-content center),
@@ -63,35 +64,35 @@ $pf-v5-u-justify-content-options: (
   justify-content-stretch:       (justify-content stretch)
 );
 
-@include pf-v5-utility-builder($pf-v5-u-justify-content-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-justify-content-options, $pf-v6-global--breakpoint-list);
 
 // Justify content options
-$pf-v5-u-flex-shrink-grow-options: (
+$pf-v6-u-flex-shrink-grow-options: (
   flex-shrink-1:    (flex-shrink 1),
   flex-grow-1:      (flex-grow 1),
   flex-shrink-0:    (flex-shrink 0),
   flex-grow-0:      (flex-grow 0)
 );
 
-@include pf-v5-utility-builder($pf-v5-u-flex-shrink-grow-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-flex-shrink-grow-options, $pf-v6-global--breakpoint-list);
 
 // Flex basis options
-$pf-v5-u-flex-basis-options: (
+$pf-v6-u-flex-basis-options: (
   flex-basis-0:     (flex-basis 0),
   flex-basis-auto:  (flex-basis auto)
 );
 
-@include pf-v5-utility-builder($pf-v5-u-flex-basis-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-flex-basis-options, $pf-v6-global--breakpoint-list);
 
 // Justify content options
-$pf-v5-u-flex-options: (
+$pf-v6-u-flex-options: (
   flex-none:  (flex none),
   flex-1:     (flex 1)
 );
 
-@include pf-v5-utility-builder($pf-v5-u-flex-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-flex-options, $pf-v6-global--breakpoint-list);
 
 // Flex fill
-@include pf-v5-utility-builder(flex-fill flex "1 1 auto", $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder(flex-fill flex "1 1 auto", $pf-v6-global--breakpoint-list);
 
 // stylelint-enable

package/utilities/Float/float.css

@@ -1,48 +1,48 @@
-.pf-v6-u-float-left {
-  float: left !important;
+.pf-v6-u-float-inline-start {
+  float: inline-start !important;
 }
 
-.pf-v6-u-float-right {
-  float: right !important;
+.pf-v6-u-float-inline-end {
+  float: inline-end !important;
 }
 
-@media screen and (min-width: 576px) {
-  .pf-v6-u-float-left-on-sm {
-    float: left !important;
+@media screen and (min-width: 36rem) {
+  .pf-v6-u-float-inline-start-on-sm {
+    float: inline-start !important;
   }
-  .pf-v6-u-float-right-on-sm {
-    float: right !important;
+  .pf-v6-u-float-inline-end-on-sm {
+    float: inline-end !important;
   }
 }
-@media screen and (min-width: 768px) {
-  .pf-v6-u-float-left-on-md {
-    float: left !important;
+@media screen and (min-width: 48rem) {
+  .pf-v6-u-float-inline-start-on-md {
+    float: inline-start !important;
   }
-  .pf-v6-u-float-right-on-md {
-    float: right !important;
+  .pf-v6-u-float-inline-end-on-md {
+    float: inline-end !important;
   }
 }
-@media screen and (min-width: 992px) {
-  .pf-v6-u-float-left-on-lg {
-    float: left !important;
+@media screen and (min-width: 62rem) {
+  .pf-v6-u-float-inline-start-on-lg {
+    float: inline-start !important;
   }
-  .pf-v6-u-float-right-on-lg {
-    float: right !important;
+  .pf-v6-u-float-inline-end-on-lg {
+    float: inline-end !important;
   }
 }
-@media screen and (min-width: 1200px) {
-  .pf-v6-u-float-left-on-xl {
-    float: left !important;
+@media screen and (min-width: 75rem) {
+  .pf-v6-u-float-inline-start-on-xl {
+    float: inline-start !important;
   }
-  .pf-v6-u-float-right-on-xl {
-    float: right !important;
+  .pf-v6-u-float-inline-end-on-xl {
+    float: inline-end !important;
   }
 }
-@media screen and (min-width: 1450px) {
-  .pf-v6-u-float-left-on-2xl {
-    float: left !important;
+@media screen and (min-width: 90.625rem) {
+  .pf-v6-u-float-inline-start-on-2xl {
+    float: inline-start !important;
   }
-  .pf-v6-u-float-right-on-2xl {
-    float: right !important;
+  .pf-v6-u-float-inline-end-on-2xl {
+    float: inline-end !important;
   }
 }

package/utilities/Float/float.scss

@@ -1,11 +1,11 @@
-// stylelint-disable
+@use '../../sass-utilities' as *;
 
-$pf-v5-u-alignment-options: (
-  float-left: (float left),
-  float-right: (float right)
+// stylelint-disable
+$pf-v6-u-float-options: (
+  float-inline-start: (float inline-start),
+  float-inline-end: (float inline-end)
 );
 
 // Text utilities
-@include pf-v5-utility-builder($pf-v5-u-alignment-options, $pf-v5-global--breakpoint-list);
-
+@include pf-v6-utility-builder($pf-v6-u-float-options, $pf-v6-global--breakpoint-list);
 // stylelint-enable