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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/base/patternfly-common.css +46 -0
  2. package/base/patternfly-common.scss +56 -0
  3. package/docs/components/DataList/examples/DataList.md +22 -41
  4. package/package.json +1 -1
  5. package/patternfly-base-no-globals.css +46 -0
  6. package/patternfly-base.css +46 -0
  7. package/patternfly-no-globals.css +46 -0
  8. package/patternfly.css +46 -0
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/base/patternfly-common.css CHANGED
@@ -55,11 +55,57 @@
55
55
  --pf-t--global--duration--200: 1ms !important;
56
56
  --pf-t--global--duration--100: 1ms !important;
57
57
  --pf-t--global--duration--50: 1ms !important;
58
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
58
59
  }
59
60
 
61
+ .pf-v6-m-ai-indicator {
62
+ position: relative;
63
+ }
64
+ .pf-v6-m-ai-indicator::before {
65
+ position: absolute;
66
+ inset: 0;
67
+ pointer-events: none;
68
+ content: "";
69
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
70
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
71
+ border-radius: inherit;
72
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
73
+ mask-composite: exclude;
74
+ }
75
+
76
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
77
+ syntax: "<length>";
78
+ initial-value: 0;
79
+ inherits: false;
80
+ }
81
+ .pf-v6-m-thinking {
82
+ 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);
83
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
84
+ }
85
+ .pf-v6-m-thinking.pf-m-inset {
86
+ 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);
87
+ }
88
+
89
+ @keyframes pf-v6-global-thinking {
90
+ 50% {
91
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
92
+ }
93
+ }
60
94
  :root {
61
95
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
62
96
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
97
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
98
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
99
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
100
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
101
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
102
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
103
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
104
+ }
105
+ @media screen and (prefers-reduced-motion: no-preference) {
106
+ :root {
107
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
108
+ }
63
109
  }
64
110
 
65
111
  @property --pf-v6-global--danger-jiggle--TranslateX {
package/base/patternfly-common.scss CHANGED
@@ -64,13 +64,69 @@
64
64
  --pf-t--global--duration--200: 1ms !important;
65
65
  --pf-t--global--duration--100: 1ms !important;
66
66
  --pf-t--global--duration--50: 1ms !important;
67
+ --#{$pf-global}--thinking-active--Animation--Duration: 0 !important;
67
68
 
68
69
  // stylelink-enable declaration-no-important
69
70
  }
70
71
 
72
+ .#{$pf-prefix}m-ai-indicator {
73
+ position: relative;
74
+
75
+ &::before {
76
+ position: absolute;
77
+ inset: 0;
78
+ pointer-events: none;
79
+ content: "";
80
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%)
81
+ border-box;
82
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
83
+ border-radius: inherit;
84
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
85
+ mask-composite: exclude;
86
+ }
87
+ }
88
+
89
+ @property --#{$pf-global}--thinking--BoxShadow--Spread {
90
+ syntax: "<length>";
91
+ initial-value: 0;
92
+ inherits: false;
93
+ }
94
+
95
+ .#{$pf-prefix}m-thinking {
96
+ box-shadow: 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-End),
97
+ 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-End),
98
+ 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-Start),
99
+ 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-Start);
100
+ animation: #{$pf-global}-thinking var(--#{$pf-global}--thinking-active--Animation--Duration) infinite ease-in-out;
101
+
102
+ &.pf-m-inset {
103
+ box-shadow: inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-End),
104
+ inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-End),
105
+ inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-Start),
106
+ inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-Start);
107
+ }
108
+ }
109
+
110
+ @keyframes #{$pf-global}-thinking {
111
+ 50% {
112
+ --#{$pf-global}--thinking--BoxShadow--Spread: var(--#{$pf-global}--thinking-active--BoxShadow--Spread);
113
+ }
114
+ }
115
+
71
116
  :root {
72
117
  --#{$pf-global}--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
73
118
  --#{$pf-global}--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
119
+ --#{$pf-global}--thinking--BoxShadow--Spread: 0px;
120
+ --#{$pf-global}--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
121
+ --#{$pf-global}--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
122
+ --#{$pf-global}--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
123
+ --#{$pf-global}--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
124
+ --#{$pf-global}--thinking-active--BoxShadow--Spread: 15px;
125
+ --#{$pf-global}--thinking-active--Animation--Duration: 0;
126
+
127
+ @media screen and (prefers-reduced-motion: no-preference) {
128
+ --#{$pf-global}--thinking-active--Animation--Duration: 2s;
129
+ }
74
130
  }
75
131
 
76
132
  // Register the property type for the custom property to be animatable
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -78,7 +78,7 @@ cssPrefix: pf-v6-c-data-list
78
78
  <div class="pf-v6-c-data-list__item-row">
79
79
  <div class="pf-v6-c-data-list__item-content">
80
80
  <div class="pf-v6-c-data-list__cell">
81
- <h2 id="data-list-with-headings-item-1">Primary content</h2>
81
+ <h4 id="data-list-with-headings-item-1">Primary content</h4>
82
82
  </div>
83
83
  <div class="pf-v6-c-data-list__cell">Secondary content</div>
84
84
  </div>
@@ -89,9 +89,9 @@ cssPrefix: pf-v6-c-data-list
89
89
  <div class="pf-v6-c-data-list__item-row">
90
90
  <div class="pf-v6-c-data-list__item-content">
91
91
  <div class="pf-v6-c-data-list__cell pf-m-no-fill">
92
- <h2
92
+ <h4
93
93
  id="data-list-with-headings-item-2"
94
- >Secondary content (pf-m-no-fill)</h2>
94
+ >Secondary content (pf-m-no-fill)</h4>
95
95
  </div>
96
96
  <div
97
97
  class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
@@ -1226,12 +1226,11 @@ When a list item includes more than one block of content, it can be difficult fo
1226
1226
  ### Data list flex modifiers example
1227
1227
 
1228
1228
  ```html
1229
- <h2 class="Preview__section-title">Default fitting - example 1</h2>
1230
1229
  <ul
1231
1230
  class="pf-v6-c-data-list"
1232
1231
  role="list"
1233
1232
  aria-label="Width modifier data list example 1"
1234
- id="data-list-default-fitting"
1233
+ id="data-list-modifiers"
1235
1234
  >
1236
1235
  <li class="pf-v6-c-data-list__item">
1237
1236
  <div class="pf-v6-c-data-list__item-row">
@@ -1239,13 +1238,13 @@ When a list item includes more than one block of content, it can be difficult fo
1239
1238
  <div class="pf-v6-c-data-list__check">
1240
1239
  <label
1241
1240
  class="pf-v6-c-check pf-m-standalone"
1242
- for="data-list-default-fitting-item-1&quot;-input"
1241
+ for="data-list-modifiers-item-1&quot;-input"
1243
1242
  >
1244
1243
  <input
1245
1244
  class="pf-v6-c-check__input"
1246
1245
  type="checkbox"
1247
- id="data-list-default-fitting-item-1&quot;-input"
1248
- name="data-list-default-fitting-item-1&quot;-input"
1246
+ id="data-list-modifiers-item-1&quot;-input"
1247
+ name="data-list-modifiers-item-1&quot;-input"
1249
1248
  aria-label="Standalone check"
1250
1249
  />
1251
1250
  </label>
@@ -1254,7 +1253,7 @@ When a list item includes more than one block of content, it can be difficult fo
1254
1253
  <div class="pf-v6-c-data-list__item-content">
1255
1254
  <div class="pf-v6-c-data-list__cell">
1256
1255
  <div class="Preview__placeholder">
1257
- <b id="data-list-default-fitting-item-1">default</b>
1256
+ <b id="data-list-modifiers-item-1">default</b>
1258
1257
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
1259
1258
  </div>
1260
1259
  </div>
@@ -1267,28 +1266,19 @@ When a list item includes more than one block of content, it can be difficult fo
1267
1266
  </div>
1268
1267
  </div>
1269
1268
  </li>
1270
- </ul>
1271
-
1272
- <h2 class="Preview__section-title">Flex modifiers - example 2</h2>
1273
- <ul
1274
- class="pf-v6-c-data-list"
1275
- role="list"
1276
- aria-label="Width modifier data list example 2"
1277
- id="data-list-flex-modifiers"
1278
- >
1279
1269
  <li class="pf-v6-c-data-list__item">
1280
1270
  <div class="pf-v6-c-data-list__item-row">
1281
1271
  <div class="pf-v6-c-data-list__item-control">
1282
1272
  <div class="pf-v6-c-data-list__check">
1283
1273
  <label
1284
1274
  class="pf-v6-c-check pf-m-standalone"
1285
- for="data-list-flex-modifiers-item-1&quot;-input"
1275
+ for="data-list-modifiers-item-2&quot;-input"
1286
1276
  >
1287
1277
  <input
1288
1278
  class="pf-v6-c-check__input"
1289
1279
  type="checkbox"
1290
- id="data-list-flex-modifiers-item-1&quot;-input"
1291
- name="data-list-flex-modifiers-item-1&quot;-input"
1280
+ id="data-list-modifiers-item-2&quot;-input"
1281
+ name="data-list-modifiers-item-2&quot;-input"
1292
1282
  aria-label="Standalone check"
1293
1283
  />
1294
1284
  </label>
@@ -1297,7 +1287,7 @@ When a list item includes more than one block of content, it can be difficult fo
1297
1287
  <div class="pf-v6-c-data-list__item-content">
1298
1288
  <div class="pf-v6-c-data-list__cell pf-m-flex-2">
1299
1289
  <div class="Preview__placeholder">
1300
- <b id="data-list-flex-modifiers-item-1">.pf-m-flex-2</b>
1290
+ <b id="data-list-modifiers-item-2">.pf-m-flex-2</b>
1301
1291
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
1302
1292
  </div>
1303
1293
  </div>
@@ -1314,7 +1304,7 @@ When a list item includes more than one block of content, it can be difficult fo
1314
1304
  type="button"
1315
1305
  aria-expanded="false"
1316
1306
  aria-label="Data list item menu toggle"
1317
- id="data-list-flex-modifiers-item-1-menu-toggle"
1307
+ id="data-list-modifiers-item-2-menu-toggle"
1318
1308
  >
1319
1309
  <span class="pf-v6-c-menu-toggle__icon">
1320
1310
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -1323,15 +1313,6 @@ When a list item includes more than one block of content, it can be difficult fo
1323
1313
  </div>
1324
1314
  </div>
1325
1315
  </li>
1326
- </ul>
1327
-
1328
- <h2 class="Preview__section-title">Flex modifiers - example 3</h2>
1329
- <ul
1330
- class="pf-v6-c-data-list"
1331
- role="list"
1332
- aria-label="Width modifier data list example 3"
1333
- id="data-list-flex-modifiers-2"
1334
- >
1335
1316
  <li class="pf-v6-c-data-list__item pf-m-expanded">
1336
1317
  <div class="pf-v6-c-data-list__item-row">
1337
1318
  <div class="pf-v6-c-data-list__item-control">
@@ -1339,11 +1320,11 @@ When a list item includes more than one block of content, it can be difficult fo
1339
1320
  <button
1340
1321
  class="pf-v6-c-button pf-m-plain"
1341
1322
  type="button"
1342
- aria-labelledby="data-list-flex-modifiers-2-toggle1 data-list-flex-modifiers-2-item-1"
1343
- id="data-list-flex-modifiers-2-toggle1"
1323
+ aria-labelledby="data-list-modifiers-toggle1 data-list-modifiers-item-1"
1324
+ id="data-list-modifiers-toggle1"
1344
1325
  aria-label="Toggle details for"
1345
1326
  aria-expanded="true"
1346
- aria-controls="data-list-flex-modifiers-2-content1"
1327
+ aria-controls="data-list-modifiers-content1"
1347
1328
  >
1348
1329
  <span class="pf-v6-c-button__icon pf-m-start">
1349
1330
  <div class="pf-v6-c-data-list__toggle-icon">
@@ -1356,13 +1337,13 @@ When a list item includes more than one block of content, it can be difficult fo
1356
1337
  <div class="pf-v6-c-data-list__check">
1357
1338
  <label
1358
1339
  class="pf-v6-c-check pf-m-standalone"
1359
- for="data-list-flex-modifiers-2-item-1&quot;-input"
1340
+ for="data-list-modifiers-item-3&quot;-input"
1360
1341
  >
1361
1342
  <input
1362
1343
  class="pf-v6-c-check__input"
1363
1344
  type="checkbox"
1364
- id="data-list-flex-modifiers-2-item-1&quot;-input"
1365
- name="data-list-flex-modifiers-2-item-1&quot;-input"
1345
+ id="data-list-modifiers-item-3&quot;-input"
1346
+ name="data-list-modifiers-item-3&quot;-input"
1366
1347
  aria-label="Standalone check"
1367
1348
  />
1368
1349
  </label>
@@ -1371,7 +1352,7 @@ When a list item includes more than one block of content, it can be difficult fo
1371
1352
  <div class="pf-v6-c-data-list__item-content">
1372
1353
  <div class="pf-v6-c-data-list__cell pf-m-flex-5">
1373
1354
  <div class="Preview__placeholder">
1374
- <b id="data-list-flex-modifiers-2-item-1">.pf-m-flex-5</b>
1355
+ <b id="data-list-modifiers-item-3">.pf-m-flex-5</b>
1375
1356
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
1376
1357
  </div>
1377
1358
  </div>
@@ -1400,7 +1381,7 @@ When a list item includes more than one block of content, it can be difficult fo
1400
1381
  type="button"
1401
1382
  aria-expanded="false"
1402
1383
  aria-label="Data list item menu toggle"
1403
- id="data-list-flex-modifiers-2-item-1-menu-toggle"
1384
+ id="data-list-modifiers-item-3-menu-toggle"
1404
1385
  >
1405
1386
  <span class="pf-v6-c-menu-toggle__icon">
1406
1387
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -1410,7 +1391,7 @@ When a list item includes more than one block of content, it can be difficult fo
1410
1391
  </div>
1411
1392
  <section
1412
1393
  class="pf-v6-c-data-list__expandable-content"
1413
- id="data-list-flex-modifiers-2-content1"
1394
+ id="data-list-modifiers-content1"
1414
1395
  aria-label="Flex modifier expandable primary content details"
1415
1396
  >
1416
1397
  <div
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.8",
4
+ "version": "6.5.0-prerelease.9",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -55,11 +55,57 @@
55
55
  --pf-t--global--duration--200: 1ms !important;
56
56
  --pf-t--global--duration--100: 1ms !important;
57
57
  --pf-t--global--duration--50: 1ms !important;
58
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
58
59
  }
59
60
 
61
+ .pf-v6-m-ai-indicator {
62
+ position: relative;
63
+ }
64
+ .pf-v6-m-ai-indicator::before {
65
+ position: absolute;
66
+ inset: 0;
67
+ pointer-events: none;
68
+ content: "";
69
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
70
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
71
+ border-radius: inherit;
72
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
73
+ mask-composite: exclude;
74
+ }
75
+
76
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
77
+ syntax: "<length>";
78
+ initial-value: 0;
79
+ inherits: false;
80
+ }
81
+ .pf-v6-m-thinking {
82
+ 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);
83
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
84
+ }
85
+ .pf-v6-m-thinking.pf-m-inset {
86
+ 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);
87
+ }
88
+
89
+ @keyframes pf-v6-global-thinking {
90
+ 50% {
91
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
92
+ }
93
+ }
60
94
  :root {
61
95
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
62
96
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
97
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
98
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
99
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
100
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
101
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
102
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
103
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
104
+ }
105
+ @media screen and (prefers-reduced-motion: no-preference) {
106
+ :root {
107
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
108
+ }
63
109
  }
64
110
 
65
111
  @property --pf-v6-global--danger-jiggle--TranslateX {
package/patternfly-base.css CHANGED
@@ -195,11 +195,57 @@ button) {
195
195
  --pf-t--global--duration--200: 1ms !important;
196
196
  --pf-t--global--duration--100: 1ms !important;
197
197
  --pf-t--global--duration--50: 1ms !important;
198
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
198
199
  }
199
200
 
201
+ .pf-v6-m-ai-indicator {
202
+ position: relative;
203
+ }
204
+ .pf-v6-m-ai-indicator::before {
205
+ position: absolute;
206
+ inset: 0;
207
+ pointer-events: none;
208
+ content: "";
209
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
210
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
211
+ border-radius: inherit;
212
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
213
+ mask-composite: exclude;
214
+ }
215
+
216
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
217
+ syntax: "<length>";
218
+ initial-value: 0;
219
+ inherits: false;
220
+ }
221
+ .pf-v6-m-thinking {
222
+ 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);
223
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
224
+ }
225
+ .pf-v6-m-thinking.pf-m-inset {
226
+ 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);
227
+ }
228
+
229
+ @keyframes pf-v6-global-thinking {
230
+ 50% {
231
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
232
+ }
233
+ }
200
234
  :root {
201
235
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
202
236
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
237
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
238
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
239
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
240
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
241
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
242
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
243
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
244
+ }
245
+ @media screen and (prefers-reduced-motion: no-preference) {
246
+ :root {
247
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
248
+ }
203
249
  }
204
250
 
205
251
  @property --pf-v6-global--danger-jiggle--TranslateX {
package/patternfly-no-globals.css CHANGED
@@ -56,11 +56,57 @@
56
56
  --pf-t--global--duration--200: 1ms !important;
57
57
  --pf-t--global--duration--100: 1ms !important;
58
58
  --pf-t--global--duration--50: 1ms !important;
59
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
59
60
  }
60
61
 
62
+ .pf-v6-m-ai-indicator {
63
+ position: relative;
64
+ }
65
+ .pf-v6-m-ai-indicator::before {
66
+ position: absolute;
67
+ inset: 0;
68
+ pointer-events: none;
69
+ content: "";
70
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
71
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
72
+ border-radius: inherit;
73
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
74
+ mask-composite: exclude;
75
+ }
76
+
77
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
78
+ syntax: "<length>";
79
+ initial-value: 0;
80
+ inherits: false;
81
+ }
82
+ .pf-v6-m-thinking {
83
+ 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);
84
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
85
+ }
86
+ .pf-v6-m-thinking.pf-m-inset {
87
+ 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);
88
+ }
89
+
90
+ @keyframes pf-v6-global-thinking {
91
+ 50% {
92
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
93
+ }
94
+ }
61
95
  :root {
62
96
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
63
97
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
98
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
99
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
100
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
101
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
102
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
103
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
104
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
105
+ }
106
+ @media screen and (prefers-reduced-motion: no-preference) {
107
+ :root {
108
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
109
+ }
64
110
  }
65
111
 
66
112
  @property --pf-v6-global--danger-jiggle--TranslateX {
package/patternfly.css CHANGED
@@ -196,11 +196,57 @@ button) {
196
196
  --pf-t--global--duration--200: 1ms !important;
197
197
  --pf-t--global--duration--100: 1ms !important;
198
198
  --pf-t--global--duration--50: 1ms !important;
199
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
199
200
  }
200
201
 
202
+ .pf-v6-m-ai-indicator {
203
+ position: relative;
204
+ }
205
+ .pf-v6-m-ai-indicator::before {
206
+ position: absolute;
207
+ inset: 0;
208
+ pointer-events: none;
209
+ content: "";
210
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
211
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
212
+ border-radius: inherit;
213
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
214
+ mask-composite: exclude;
215
+ }
216
+
217
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
218
+ syntax: "<length>";
219
+ initial-value: 0;
220
+ inherits: false;
221
+ }
222
+ .pf-v6-m-thinking {
223
+ 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);
224
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
225
+ }
226
+ .pf-v6-m-thinking.pf-m-inset {
227
+ 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);
228
+ }
229
+
230
+ @keyframes pf-v6-global-thinking {
231
+ 50% {
232
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
233
+ }
234
+ }
201
235
  :root {
202
236
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
203
237
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
238
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
239
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
240
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
241
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
242
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
243
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
244
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
245
+ }
246
+ @media screen and (prefers-reduced-motion: no-preference) {
247
+ :root {
248
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
249
+ }
204
250
  }
205
251
 
206
252
  @property --pf-v6-global--danger-jiggle--TranslateX {