@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/layouts/Flex/flex.scss

@@ -1,4 +1,6 @@
 @use '../../sass-utilities' as *;
+@use 'sass:list';
+@use 'sass:map';
 
 // Always keep list of spacers and breakpoints up-to-date
 $pf-v6-l-flex--breakpoint-map: build-breakpoint-map();
@@ -74,7 +76,11 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
 .#{$flex} {
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       // display
@@ -301,13 +307,17 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
   // .pf-m-space-items-{size}{-on-[breakpoint]}
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         &.pf-m-space-items-#{$spacer}#{$breakpoint-name} {
           > * {
-            --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
+            --#{$flex}--spacer: var(#{map.get($pf-v6-l-flex--variable-map, $spacer-value)});
           }
 
           > :last-child {
@@ -320,15 +330,19 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
   // .pf-m-spacer-{size}{-on-[breakpoint]}
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         .pf-m-spacer-#{$spacer}#{$breakpoint-name} {
-          --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
+          --#{$flex}--spacer: var(#{map.get($pf-v6-l-flex--variable-map, $spacer-value)});
 
           &:last-child {
-            --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
+            --#{$flex}--spacer: var(#{map.get($pf-v6-l-flex--variable-map, $spacer-value)});
           }
         }
       }
@@ -341,12 +355,32 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
       @include pf-v6-apply-breakpoint($breakpoint) {
         @each $spacer, $value in $pf-v6-l-flex--gap-map {
-          $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
-          $spacer-name: if($spacer == "base", "", -#{$spacer});
-          $spacer-row: if($spacer == "base", var(--#{$flex}--m-gap--RowGap), $value);
-          $spacer-column: if($spacer == "base", var(--#{$flex}--m-gap--ColumnGap), $value);
+          $breakpoint-name: -on-#{$breakpoint};
+
+          @if $breakpoint == "base" {
+            $breakpoint-name: "";
+          }
+
+          $spacer-name: -#{$spacer};
+
+          @if $spacer == "base" {
+            $spacer-name: "";
+          }
+
+          $spacer-row: $value;
+
+          @if $spacer == "base" {
+            $spacer-row: var(--#{$flex}--m-gap--RowGap);
+          }
+
+          $spacer-column: $value;
+
+          @if $spacer == "base" {
+            $spacer-column: var(--#{$flex}--m-gap--ColumnGap);
+          }
+
           $selector: ".pf-m-gap#{$spacer-name}#{$breakpoint-name}";
-          $pf-v6-l-flex--gap--selectors: append($pf-v6-l-flex--gap--selectors, $selector, $separator: comma);
+          $pf-v6-l-flex--gap--selectors: list.append($pf-v6-l-flex--gap--selectors, $selector, $separator: comma);
 
           &#{$selector} {
             --#{$flex}--RowGap: #{$spacer-row};
@@ -369,11 +403,26 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
       $pf-v6-l-flex--row-gap--selectors: ();
 
       @each $spacer, $value in $pf-v6-l-flex--gap-map {
-        $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
-        $spacer-name: if($spacer == "base", "", -#{$spacer});
-        $spacer-value: if($spacer == "base", var(--#{$flex}--m-row-gap--RowGap), $value);
+        $breakpoint-name: -on-#{$breakpoint};
+
+        @if $breakpoint == "base" {
+          $breakpoint-name: "";
+        }
+
+        $spacer-name: -#{$spacer};
+
+        @if $spacer == "base" {
+          $spacer-name: "";
+        }
+
+        $spacer-value: $value;
+
+        @if $spacer == "base" {
+          $spacer-value: var(--#{$flex}--m-row-gap--RowGap);
+        }
+
         $selector: ".pf-m-row-gap#{$spacer-name}#{$breakpoint-name}";
-        $pf-v6-l-flex--row-gap--selectors: append($pf-v6-l-flex--row-gap--selectors, $selector, $separator: comma);
+        $pf-v6-l-flex--row-gap--selectors: list.append($pf-v6-l-flex--row-gap--selectors, $selector, $separator: comma);
 
        &#{$selector} {
           --#{$flex}--RowGap: #{$spacer-value};
@@ -394,11 +443,26 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $value in $pf-v6-l-flex--gap-map {
-        $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
-        $spacer-name: if($spacer == "base", "", -#{$spacer});
-        $spacer-value: if($spacer == "base", var(--#{$flex}--m-column-gap--ColumnGap), $value);
+        $breakpoint-name: -on-#{$breakpoint};
+
+        @if $breakpoint == "base" {
+          $breakpoint-name: "";
+        }
+
+        $spacer-name: -#{$spacer};
+
+        @if $spacer == "base" {
+          $spacer-name: "";
+        }
+
+        $spacer-value: $value;
+
+        @if $spacer == "base" {
+          $spacer-value: var(--#{$flex}--m-column-gap--ColumnGap);
+        }
+
         $selector: ".pf-m-column-gap#{$spacer-name}#{$breakpoint-name}";
-        $pf-v6-l-flex--column-gap--selectors: append($pf-v6-l-flex--column-gap--selectors, $selector, $separator: comma);
+        $pf-v6-l-flex--column-gap--selectors: list.append($pf-v6-l-flex--column-gap--selectors, $selector, $separator: comma);
 
         &#{$selector} {
           --#{$flex}--ColumnGap: #{$spacer-value};

package/layouts/Gallery/gallery.css

@@ -12,12 +12,13 @@
   display: grid;
   grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
   grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
 }
 .pf-v6-l-gallery.pf-m-gutter {
   grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
@@ -43,6 +44,9 @@
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
   }
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));

package/layouts/_index.css

@@ -2406,12 +2406,13 @@
   display: grid;
   grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
   grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
 }
 .pf-v6-l-gallery.pf-m-gutter {
   grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
@@ -2437,6 +2438,9 @@
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
   }
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));

package/package.json

@@ -1,17 +1,38 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.8",
+  "version": "6.5.0-prerelease.81",
   "keywords": [],
   "license": "MIT",
   "scripts": {
     "a11y": "patternfly-a11y --config patternfly-a11y.config",
-    "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
+    "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/bitmaps_test_glass backstop_data/html_report",
     "backstop:test": "backstop test --config='backstop.js'",
     "backstop:test:dark": "backstop test --config='backstop.js' --dark",
+    "backstop:test:glass": "backstop test --config='backstop.js' --glass",
+    "backstop:test:hc": "backstop test --config='backstop.js' --high-contrast",
+    "backstop:test:dark-hc": "backstop test --config='backstop.js' --dark --high-contrast",
+    "backstop:test:dark-glass": "backstop test --config='backstop.js' --dark --glass",
+    "backstop:test:felt": "backstop test --config='backstop.js' --felt",
+    "backstop:test:felt-dark": "backstop test --config='backstop.js' --felt --dark",
+    "backstop:test:felt-glass": "backstop test --config='backstop.js' --felt --glass",
+    "backstop:test:felt-hc": "backstop test --config='backstop.js' --felt --high-contrast",
+    "backstop:test:felt-dark-hc": "backstop test --config='backstop.js' --felt --dark --high-contrast",
+    "backstop:test:felt-dark-glass": "backstop test --config='backstop.js' --felt --dark --glass",
     "backstop:approve": "backstop approve --config='backstop.js'",
     "backstop:approve:dark": "backstop approve --config='backstop.js' --dark",
+    "backstop:approve:glass": "backstop approve --config='backstop.js' --glass",
+    "backstop:approve:hc": "backstop approve --config='backstop.js' --high-contrast",
+    "backstop:approve:dark-hc": "backstop approve --config='backstop.js' --dark --high-contrast",
+    "backstop:approve:dark-glass": "backstop approve --config='backstop.js' --dark --glass",
+    "backstop:approve:felt": "backstop approve --config='backstop.js' --felt",
+    "backstop:approve:felt-dark": "backstop approve --config='backstop.js' --felt --dark",
+    "backstop:approve:felt-glass": "backstop approve --config='backstop.js' --felt --glass",
+    "backstop:approve:felt-hc": "backstop approve --config='backstop.js' --felt --high-contrast",
+    "backstop:approve:felt-dark-hc": "backstop approve --config='backstop.js' --felt --dark --high-contrast",
+    "backstop:approve:felt-dark-glass": "backstop approve --config='backstop.js' --felt --dark --glass",
     "backstop:chrome": "node backstop_data/engine_scripts/puppet/chrome.js",
+    "playwright": "node ./node_modules/playwright/cli.js",
     "build-patternfly": "gulp buildPatternfly",
     "build": "gulp build",
     "build:docs": "gulp buildWebpack",
@@ -37,10 +58,10 @@
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@babel/eslint-parser": "^7.24.1",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-class-properties": "^7.24.4",
+    "@babel/plugin-transform-optional-chaining": "^7.24.4",
+    "@babel/plugin-transform-private-methods": "^7.24.4",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.4",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
@@ -48,13 +69,17 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.1.0",
-    "@patternfly/documentation-framework": "6.28.8",
+    "@patternfly/documentation-framework": "6.38.5",
     "@patternfly/patternfly-a11y": "5.1.0",
-    "@patternfly/react-code-editor": "6.4.0",
-    "@patternfly/react-core": "6.4.0",
-    "@patternfly/react-table": "6.4.0",
+    "@patternfly/react-code-editor": "6.4.3",
+    "@patternfly/react-core": "6.4.3",
+    "@patternfly/react-icons": "6.5.0-prerelease.13",
+    "@patternfly/react-table": "6.4.3",
+    "@rspack/cli": "^1.6.0",
+    "@rspack/core": "^1.6.0",
+    "@rspack/dev-server": "^1.1.4",
     "@starptech/prettyhtml": "^0.10.0",
-    "backstopjs": "^6.3.23",
+    "backstopjs": "^6.3.25",
     "cheerio": "^1.0.0-rc.12",
     "commander": "^12.0.0",
     "cssnano": "^6.1.2",
@@ -69,9 +94,9 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.12",
-    "gulp": "^4.0.2",
-    "gulp-cli": "^2.3.0",
-    "gulp-iconfont": "^11.0.1",
+    "gulp": "^5.0.1",
+    "gulp-cli": "^3.1.0",
+    "gulp-iconfont": "^12.0.0",
     "gulp-iconfont-css": "^3.0.0",
     "gulp-postcss": "^10.0.0",
     "gulp-rename": "^2.0.0",
@@ -87,21 +112,34 @@
     "react-dom": "^18.2.0",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
-    "rimraf": "*",
+    "resemblejs": "^5.0.0",
+    "rimraf": "^6.0.1",
     "sass": "^1.74.1",
     "stylelint": "^16.3.1",
     "stylelint-config-recess-order": "^5.0.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-use-logical-spec": "^5.0.1",
-    "surge": "^0.23.1",
+    "surge": "^0.24.6",
     "unified": "^11.0.4",
     "webpack": "^5.91.0"
   },
   "resolutions": {
     "@babel/preset-env": "7.18.2",
     "monaco-editor": "0.34.1",
-    "on-headers": "~1.1.0"
+    "on-headers": "~1.1.0",
+    "form-data": "^4.0.4",
+    "minimist": "^1.2.8",
+    "tar-fs": "^3.1.1",
+    "axios": "^1.13.1",
+    "body-parser": "^2.2.0",
+    "ws": "^8.18.0",
+    "follow-redirects": "^1.15.11",
+    "express": "^4.21.2",
+    "parse-git-config": "^3.0.0",
+    "braces": "^3.0.3",
+    "ip": "^2.0.1",
+    "request": "^2.88.2"
   },
   "repository": {
     "type": "git",