@patternfly/patternfly 6.5.0-prerelease.2 → 6.5.0-prerelease.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.2",
+  "version": "6.5.0-prerelease.21",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -37,10 +37,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 +48,16 @@
     "@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.29.0",
     "@patternfly/patternfly-a11y": "5.1.0",
-    "@patternfly/react-code-editor": "6.3.1",
+    "@patternfly/react-code-editor": "6.4.0",
     "@patternfly/react-core": "6.4.0",
     "@patternfly/react-table": "6.4.0",
+    "@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 +72,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 +90,33 @@
     "react-dom": "^18.2.0",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
-    "rimraf": "*",
+    "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",

package/patternfly-base-no-globals.css

@@ -55,11 +55,57 @@
   --pf-t--global--duration--200: 1ms !important;
   --pf-t--global--duration--100: 1ms !important;
   --pf-t--global--duration--50: 1ms !important;
+  --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
 }
 
+.pf-v6-m-ai-indicator {
+  position: relative;
+}
+.pf-v6-m-ai-indicator::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
+  border: var(--pf-t--global--border--width--extra-strong) solid transparent;
+  border-radius: inherit;
+  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+@property --pf-v6-global--thinking--BoxShadow--Spread {
+  syntax: "<length>";
+  initial-value: 0;
+  inherits: false;
+}
+.pf-v6-m-thinking {
+  box-shadow: 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
+  animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
+}
+.pf-v6-m-thinking.pf-m-inset {
+  box-shadow: inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
+}
+
+@keyframes pf-v6-global-thinking {
+  50% {
+    --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
+  }
+}
 :root {
   --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-global--thinking--BoxShadow--Spread: 0px;
+  --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
+  --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
+  --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
+  --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
+  --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
+  --pf-v6-global--thinking-active--Animation--Duration: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  :root {
+    --pf-v6-global--thinking-active--Animation--Duration: 2s;
+  }
 }
 
 @property --pf-v6-global--danger-jiggle--TranslateX {
@@ -7068,6 +7114,11 @@
   --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
   --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+  --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
+  --pf-t--global--text-decoration--color--hover: currentcolor;
+  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
+  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
   --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
   --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
   --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -7173,6 +7224,43 @@
     var(--pf-t--global--box-shadow--color--lg--directional);
   --pf-t--global--list-style: disc outside;
   --pf-t--temp--dev--tbd: #BC11E0;
+  --pf-t--global--background--color--glass--filter--base: none;
+  --pf-t--global--background--color--glass--opacity--base: 1;
+  --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
+  --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
+  --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
+  --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
+  --pf-t--global--light--glass--background--color--glass--color: #ffffff;
+  --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
+  --pf-t--global--light--glass--background--color--glass--opacity: 85%;
+  --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
+  --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
+  --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
+  --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
+  --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
+}
+:root:where(.pf-v6-theme-dark) {
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
+}
+:root:where(.pf-v6-theme-glass) {
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
+}
+:root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
+}
+:root:where(.pf-v6-theme-high-contrast) {
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
 }
 
 :root:where(.pf-v6-theme-dark) {

package/patternfly-base.css

@@ -118,11 +118,18 @@ pre) {
 :where(a) {
   color: var(--pf-t--global--text--color--link--default);
   text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
+  text-decoration-style: var(--pf-t--global--text-decoration--link--style--default);
+  text-decoration-color: var(--pf-t--global--text-decoration--color--default);
+  text-underline-offset: max(var(--pf-t--global--text-decoration--offset--default), 0.28em);
+  transition: ease text-underline-offset 0.3s;
 }
 
 :where(a:hover, a:focus) {
   color: var(--pf-t--global--text--color--link--hover);
   text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
+  text-decoration-style: var(--pf-t--global--text-decoration--link--style--hover);
+  text-decoration-color: var(--pf-t--global--text-decoration--color--hover);
+  text-underline-offset: max(var(--pf-t--global--text-decoration--offset--hover), 0.33em);
 }
 
 :where(a,
@@ -195,11 +202,57 @@ button) {
   --pf-t--global--duration--200: 1ms !important;
   --pf-t--global--duration--100: 1ms !important;
   --pf-t--global--duration--50: 1ms !important;
+  --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
 }
 
+.pf-v6-m-ai-indicator {
+  position: relative;
+}
+.pf-v6-m-ai-indicator::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
+  border: var(--pf-t--global--border--width--extra-strong) solid transparent;
+  border-radius: inherit;
+  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+@property --pf-v6-global--thinking--BoxShadow--Spread {
+  syntax: "<length>";
+  initial-value: 0;
+  inherits: false;
+}
+.pf-v6-m-thinking {
+  box-shadow: 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
+  animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
+}
+.pf-v6-m-thinking.pf-m-inset {
+  box-shadow: inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
+}
+
+@keyframes pf-v6-global-thinking {
+  50% {
+    --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
+  }
+}
 :root {
   --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-global--thinking--BoxShadow--Spread: 0px;
+  --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
+  --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
+  --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
+  --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
+  --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
+  --pf-v6-global--thinking-active--Animation--Duration: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  :root {
+    --pf-v6-global--thinking-active--Animation--Duration: 2s;
+  }
 }
 
 @property --pf-v6-global--danger-jiggle--TranslateX {
@@ -7208,6 +7261,11 @@ button) {
   --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
   --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+  --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
+  --pf-t--global--text-decoration--color--hover: currentcolor;
+  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
+  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
   --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
   --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
   --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -7313,6 +7371,43 @@ button) {
     var(--pf-t--global--box-shadow--color--lg--directional);
   --pf-t--global--list-style: disc outside;
   --pf-t--temp--dev--tbd: #BC11E0;
+  --pf-t--global--background--color--glass--filter--base: none;
+  --pf-t--global--background--color--glass--opacity--base: 1;
+  --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
+  --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
+  --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
+  --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
+  --pf-t--global--light--glass--background--color--glass--color: #ffffff;
+  --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
+  --pf-t--global--light--glass--background--color--glass--opacity: 85%;
+  --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
+  --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
+  --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
+  --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
+  --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
+}
+:root:where(.pf-v6-theme-dark) {
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
+}
+:root:where(.pf-v6-theme-glass) {
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
+}
+:root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
+}
+:root:where(.pf-v6-theme-high-contrast) {
+  --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
+  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
+  --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
 }
 
 :root:where(.pf-v6-theme-dark) {