@patternfly/patternfly 6.3.0-prerelease.47 → 6.3.0-prerelease.49

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 (16) hide show
  1. package/base/normalize.scss +4 -0
  2. package/components/TextInputGroup/text-input-group.css +3 -0
  3. package/components/TextInputGroup/text-input-group.scss +4 -1
  4. package/components/_index.css +3 -0
  5. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  6. package/docs/components/TextInputGroup/examples/TextInputGroup.md +28 -0
  7. package/docs/demos/Card/examples/Card.md +8 -5
  8. package/docs/demos/Dashboard/examples/Dashboard.md +5 -2
  9. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  10. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  11. package/package.json +4 -4
  12. package/patternfly-base.css +4 -0
  13. package/patternfly-no-globals.css +3 -0
  14. package/patternfly.css +7 -0
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
package/base/normalize.scss CHANGED
@@ -122,6 +122,10 @@
122
122
  cursor: pointer;
123
123
  }
124
124
 
125
+ :where(:root) {
126
+ color-scheme: light;
127
+ }
128
+
125
129
  :where(.pf-v6-theme-dark) {
126
130
  color-scheme: dark;
127
131
  }
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -128,6 +128,9 @@
128
128
  .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
129
129
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
130
130
  }
131
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
132
+ --pf-v6-c-text-input-group__text--Position: relative;
133
+ }
131
134
  .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
132
135
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
133
136
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -147,6 +147,10 @@
147
147
 
148
148
  &:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
149
149
  --#{$text-input-group}__text-input--PaddingInlineEnd: var(--#{$text-input-group}--status__text-input--PaddingInlineEnd);
150
+
151
+ & .pf-v6-c-text-input-group__text {
152
+ --#{$text-input-group}__text--Position: relative;
153
+ }
150
154
  }
151
155
 
152
156
  &:has(> .#{$text-input-group}__utilities) {
@@ -250,4 +254,3 @@
250
254
  .#{$text-input-group}__group {
251
255
  display: flex;
252
256
  }
253
-
package/components/_index.css CHANGED
@@ -20133,6 +20133,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20133
20133
  .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
20134
20134
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
20135
20135
  }
20136
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
20137
+ --pf-v6-c-text-input-group__text--Position: relative;
20138
+ }
20136
20139
  .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
20137
20140
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
20138
20141
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
package/docs/components/DescriptionList/examples/DescriptionList.md CHANGED
@@ -7,7 +7,7 @@ cssPrefix: pf-v6-c-description-list
7
7
  ### Default
8
8
 
9
9
  ```html
10
- <dl class="pf-v6-c-description-list">
10
+ <dl class="pf-v6-c-description-list" aria-label="Default example">
11
11
  <div class="pf-v6-c-description-list__group">
12
12
  <dt class="pf-v6-c-description-list__term">
13
13
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -64,7 +64,7 @@ cssPrefix: pf-v6-c-description-list
64
64
  ### Term help text
65
65
 
66
66
  ```html
67
- <dl class="pf-v6-c-description-list">
67
+ <dl class="pf-v6-c-description-list" aria-label="Term help text example">
68
68
  <div class="pf-v6-c-description-list__group">
69
69
  <dt class="pf-v6-c-description-list__term">
70
70
  <span
@@ -146,7 +146,10 @@ cssPrefix: pf-v6-c-description-list
146
146
  ### Default, two column
147
147
 
148
148
  ```html
149
- <dl class="pf-v6-c-description-list pf-m-2-col">
149
+ <dl
150
+ class="pf-v6-c-description-list pf-m-2-col"
151
+ aria-label="Default, two column example"
152
+ >
150
153
  <div class="pf-v6-c-description-list__group">
151
154
  <dt class="pf-v6-c-description-list__term">
152
155
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -205,7 +208,10 @@ cssPrefix: pf-v6-c-description-list
205
208
  ### Default, three column on lg breakpoint
206
209
 
207
210
  ```html
208
- <dl class="pf-v6-c-description-list pf-m-3-col-on-lg">
211
+ <dl
212
+ class="pf-v6-c-description-list pf-m-3-col-on-lg"
213
+ aria-label="Default, three column on lg breakpoint example"
214
+ >
209
215
  <div class="pf-v6-c-description-list__group">
210
216
  <dt class="pf-v6-c-description-list__term">
211
217
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -262,7 +268,10 @@ cssPrefix: pf-v6-c-description-list
262
268
  ### Horizontal
263
269
 
264
270
  ```html
265
- <dl class="pf-v6-c-description-list pf-m-horizontal">
271
+ <dl
272
+ class="pf-v6-c-description-list pf-m-horizontal"
273
+ aria-label="Horizontal example"
274
+ >
266
275
  <div class="pf-v6-c-description-list__group">
267
276
  <dt class="pf-v6-c-description-list__term">
268
277
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -319,7 +328,10 @@ cssPrefix: pf-v6-c-description-list
319
328
  ### Horizontal, two column
320
329
 
321
330
  ```html
322
- <dl class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col">
331
+ <dl
332
+ class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col"
333
+ aria-label="Horizontal, two column example"
334
+ >
323
335
  <div class="pf-v6-c-description-list__group">
324
336
  <dt class="pf-v6-c-description-list__term">
325
337
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -376,7 +388,10 @@ cssPrefix: pf-v6-c-description-list
376
388
  ### Horizontal, three column on lg breakpoint
377
389
 
378
390
  ```html
379
- <dl class="pf-v6-c-description-list pf-m-horizontal pf-m-3-col-on-lg">
391
+ <dl
392
+ class="pf-v6-c-description-list pf-m-horizontal pf-m-3-col-on-lg"
393
+ aria-label="Horizontal, three column on lg breakpoint example"
394
+ >
380
395
  <div class="pf-v6-c-description-list__group">
381
396
  <dt class="pf-v6-c-description-list__term">
382
397
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -433,7 +448,7 @@ cssPrefix: pf-v6-c-description-list
433
448
  ### Compact
434
449
 
435
450
  ```html
436
- <dl class="pf-v6-c-description-list pf-m-compact">
451
+ <dl class="pf-v6-c-description-list pf-m-compact" aria-label="Compact example">
437
452
  <div class="pf-v6-c-description-list__group">
438
453
  <dt class="pf-v6-c-description-list__term">
439
454
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -490,7 +505,10 @@ cssPrefix: pf-v6-c-description-list
490
505
  ### Compact horizontal
491
506
 
492
507
  ```html
493
- <dl class="pf-v6-c-description-list pf-m-compact pf-m-horizontal pf-m-2-col">
508
+ <dl
509
+ class="pf-v6-c-description-list pf-m-compact pf-m-horizontal pf-m-2-col"
510
+ aria-label="Compact horizontal example"
511
+ >
494
512
  <div class="pf-v6-c-description-list__group">
495
513
  <dt class="pf-v6-c-description-list__term">
496
514
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -547,7 +565,10 @@ cssPrefix: pf-v6-c-description-list
547
565
  ### Fluid horizontal
548
566
 
549
567
  ```html
550
- <dl class="pf-v6-c-description-list pf-m-horizontal pf-m-fluid pf-m-2-col">
568
+ <dl
569
+ class="pf-v6-c-description-list pf-m-horizontal pf-m-fluid pf-m-2-col"
570
+ aria-label="Fluid horizontal example"
571
+ >
551
572
  <div class="pf-v6-c-description-list__group">
552
573
  <dt class="pf-v6-c-description-list__term">
553
574
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -608,6 +629,7 @@ Column fill will modify the default placement of description list groups to fill
608
629
  ```html
609
630
  <dl
610
631
  class="pf-v6-c-description-list pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg"
632
+ aria-label="Column fill example"
611
633
  >
612
634
  <div class="pf-v6-c-description-list__group">
613
635
  <dt class="pf-v6-c-description-list__term">
@@ -669,7 +691,10 @@ Column fill will modify the default placement of description list groups to fill
669
691
  ### Auto-fit basic
670
692
 
671
693
  ```html
672
- <dl class="pf-v6-c-description-list pf-m-auto-fit">
694
+ <dl
695
+ class="pf-v6-c-description-list pf-m-auto-fit"
696
+ aria-label="Auto-fit basic example"
697
+ >
673
698
  <div class="pf-v6-c-description-list__group">
674
699
  <dt class="pf-v6-c-description-list__term">
675
700
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -728,6 +753,7 @@ Column fill will modify the default placement of description list groups to fill
728
753
  ```html
729
754
  <dl
730
755
  class="pf-v6-c-description-list pf-m-auto-fit"
756
+ aria-label="Auto-fit, min width modified, grid template columns example"
731
757
  style="--pf-v6-c-description-list--GridTemplateColumns--min: 200px;"
732
758
  >
733
759
  <div class="pf-v6-c-description-list__group">
@@ -788,6 +814,7 @@ Column fill will modify the default placement of description list groups to fill
788
814
  ```html
789
815
  <dl
790
816
  class="pf-v6-c-description-list pf-m-auto-fit"
817
+ aria-label="Auto-fit, min width modified, responsive grid template columns example"
791
818
  style="--pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
792
819
  >
793
820
  <div class="pf-v6-c-description-list__group">
@@ -848,7 +875,10 @@ Column fill will modify the default placement of description list groups to fill
848
875
  ### Default, responsive columns
849
876
 
850
877
  ```html
851
- <dl class="pf-v6-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl">
878
+ <dl
879
+ class="pf-v6-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl"
880
+ aria-label="Default, responsive columns example"
881
+ >
852
882
  <div class="pf-v6-c-description-list__group">
853
883
  <dt class="pf-v6-c-description-list__term">
854
884
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -907,6 +937,7 @@ Column fill will modify the default placement of description list groups to fill
907
937
  ```html
908
938
  <dl
909
939
  class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"
940
+ aria-label="Horizontal, responsive columns example"
910
941
  >
911
942
  <div class="pf-v6-c-description-list__group">
912
943
  <dt class="pf-v6-c-description-list__term">
@@ -966,6 +997,7 @@ Column fill will modify the default placement of description list groups to fill
966
997
  ```html
967
998
  <dl
968
999
  class="pf-v6-c-description-list pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
1000
+ aria-label="Responsive, horizontal, vertical group layout example"
969
1001
  >
970
1002
  <div class="pf-v6-c-description-list__group">
971
1003
  <dt class="pf-v6-c-description-list__term">
@@ -1025,7 +1057,10 @@ Column fill will modify the default placement of description list groups to fill
1025
1057
  ### Default, auto columns width
1026
1058
 
1027
1059
  ```html
1028
- <dl class="pf-v6-c-description-list pf-m-auto-column-widths pf-m-3-col">
1060
+ <dl
1061
+ class="pf-v6-c-description-list pf-m-auto-column-widths pf-m-3-col"
1062
+ aria-label="Default, auto columns width example"
1063
+ >
1029
1064
  <div class="pf-v6-c-description-list__group">
1030
1065
  <dt class="pf-v6-c-description-list__term">
1031
1066
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1084,6 +1119,7 @@ Column fill will modify the default placement of description list groups to fill
1084
1119
  ```html
1085
1120
  <dl
1086
1121
  class="pf-v6-c-description-list pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"
1122
+ aria-label="Horizontal, auto column width example"
1087
1123
  >
1088
1124
  <div class="pf-v6-c-description-list__group">
1089
1125
  <dt class="pf-v6-c-description-list__term">
@@ -1143,7 +1179,10 @@ Column fill will modify the default placement of description list groups to fill
1143
1179
  ### Default, inline grid
1144
1180
 
1145
1181
  ```html
1146
- <dl class="pf-v6-c-description-list pf-m-3-col pf-m-inline-grid">
1182
+ <dl
1183
+ class="pf-v6-c-description-list pf-m-3-col pf-m-inline-grid"
1184
+ aria-label="Default, inline grid example"
1185
+ >
1147
1186
  <div class="pf-v6-c-description-list__group">
1148
1187
  <dt class="pf-v6-c-description-list__term">
1149
1188
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1200,7 +1239,10 @@ Column fill will modify the default placement of description list groups to fill
1200
1239
  ### Display variant
1201
1240
 
1202
1241
  ```html
1203
- <dl class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
1242
+ <dl
1243
+ class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg"
1244
+ aria-label="Display variant example"
1245
+ >
1204
1246
  <div class="pf-v6-c-description-list__group">
1205
1247
  <dt class="pf-v6-c-description-list__term">
1206
1248
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1261,7 +1303,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1261
1303
  ### Description list group wrapper as card
1262
1304
 
1263
1305
  ```html
1264
- <dl class="pf-v6-c-description-list pf-m-2-col-on-lg">
1306
+ <dl
1307
+ class="pf-v6-c-description-list pf-m-2-col-on-lg"
1308
+ aria-label="Description list group wrapper as card example"
1309
+ >
1265
1310
  <div class="pf-v6-c-card">
1266
1311
  <dt class="pf-v6-c-description-list__term">
1267
1312
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1318,7 +1363,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1318
1363
  ### Display lg and card variant
1319
1364
 
1320
1365
  ```html
1321
- <dl class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
1366
+ <dl
1367
+ class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg"
1368
+ aria-label="Display lg and card variant example"
1369
+ >
1322
1370
  <div class="pf-v6-c-card">
1323
1371
  <dt class="pf-v6-c-description-list__term">
1324
1372
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1375,7 +1423,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1375
1423
  ### Display 2xl and card variant
1376
1424
 
1377
1425
  ```html
1378
- <dl class="pf-v6-c-description-list pf-m-display-2xl pf-m-2-col-on-lg">
1426
+ <dl
1427
+ class="pf-v6-c-description-list pf-m-display-2xl pf-m-2-col-on-lg"
1428
+ aria-label="Display 2xl and card variant example"
1429
+ >
1379
1430
  <div class="pf-v6-c-card">
1380
1431
  <dt class="pf-v6-c-description-list__term">
1381
1432
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1432,7 +1483,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1432
1483
  ### Display and card variant, three column on lg breakpoint
1433
1484
 
1434
1485
  ```html
1435
- <dl class="pf-v6-c-description-list pf-m-3-col-on-lg pf-m-display-lg">
1486
+ <dl
1487
+ class="pf-v6-c-description-list pf-m-3-col-on-lg pf-m-display-lg"
1488
+ aria-label="Display and card variant, three column on lg breakpoint example"
1489
+ >
1436
1490
  <div class="pf-v6-c-card">
1437
1491
  <dt class="pf-v6-c-description-list__term">
1438
1492
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1468,6 +1522,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1468
1522
  ```html
1469
1523
  <dl
1470
1524
  class="pf-v6-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"
1525
+ aria-label="Display and card variant, horizontal, modified term width example"
1471
1526
  style="--pf-v6-c-description-list__term--width: 10ch;"
1472
1527
  >
1473
1528
  <div class="pf-v6-c-card">
@@ -1504,7 +1559,8 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1504
1559
 
1505
1560
  ### Horizontal 2 col auto term width
1506
1561
  ```hbs
1507
- {{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
1562
+ {{> description-list__example
1563
+ description-list--aria-label="Horizontal 2 column auto term width example" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
1508
1564
  ``` -->
1509
1565
 
1510
1566
  ## With icons
@@ -1512,7 +1568,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1512
1568
  ### Icons on terms
1513
1569
 
1514
1570
  ```html
1515
- <dl class="pf-v6-c-description-list">
1571
+ <dl class="pf-v6-c-description-list" aria-label="Icons on terms example">
1516
1572
  <div class="pf-v6-c-description-list__group">
1517
1573
  <dt class="pf-v6-c-description-list__term">
1518
1574
  <span class="pf-v6-c-description-list__term-icon">
@@ -1589,7 +1645,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1589
1645
 
1590
1646
  | Attribute | Applied to | Outcome |
1591
1647
  | -- | -- | -- |
1592
- | `title` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** |
1648
+ | `aria-label` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** |
1593
1649
  | `tabindex="0"` | `.pf-v6-c-description-list__text.pf-m-help-text` | Inserts the `.pf-v6-c-description-list__text` into the tab order of the page so that it is focusable. **Required when the element is clickable** |
1594
1650
 
1595
1651
  ### Usage
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -165,6 +165,34 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
165
165
  </div>
166
166
  </div>
167
167
 
168
+ <br />
169
+ <div class="pf-v6-c-text-input-group pf-m-error">
170
+ <div class="pf-v6-c-text-input-group__main">
171
+ <span class="pf-v6-c-text-input-group__text">
172
+ <input
173
+ class="pf-v6-c-text-input-group__text-input"
174
+ type="text"
175
+ value="Error validation with no icon but with utilities"
176
+ aria-label="Type to filter"
177
+ />
178
+ <span class="pf-v6-c-text-input-group__icon pf-m-status">
179
+ <i aria-hidden="true" class="fas fa-exclamation-circle"></i>
180
+ </span>
181
+ </span>
182
+ </div>
183
+ <div class="pf-v6-c-text-input-group__utilities">
184
+ <button
185
+ class="pf-v6-c-button pf-m-plain"
186
+ type="button"
187
+ aria-label="Clear input"
188
+ >
189
+ <span class="pf-v6-c-button__text">
190
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
191
+ </span>
192
+ </button>
193
+ </div>
194
+ </div>
195
+
168
196
  ```
169
197
 
170
198
  ### Filters
package/docs/demos/Card/examples/Card.md CHANGED
@@ -336,7 +336,7 @@ wrapperTag: div
336
336
  <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
337
337
  </div>
338
338
  <div class="pf-v6-c-card__body">
339
- <dl class="pf-v6-c-description-list">
339
+ <dl class="pf-v6-c-description-list" aria-label="API 1">
340
340
  <div class="pf-v6-c-description-list__group">
341
341
  <dt class="pf-v6-c-description-list__term">Cluster API Address</dt>
342
342
  <dd class="pf-v6-c-description-list__description">
@@ -385,7 +385,7 @@ wrapperTag: div
385
385
  <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
386
386
  </div>
387
387
  <div class="pf-v6-c-card__body">
388
- <dl class="pf-v6-c-description-list">
388
+ <dl class="pf-v6-c-description-list" aria-label="API 2">
389
389
  <div class="pf-v6-c-description-list__group">
390
390
  <dt class="pf-v6-c-description-list__term">Cluster API Address</dt>
391
391
  <dd class="pf-v6-c-description-list__description">
@@ -760,7 +760,10 @@ wrapperTag: div
760
760
  tabindex="0"
761
761
  >
762
762
  <div class="pf-v6-c-tab-content__body">
763
- <dl class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col-on-lg">
763
+ <dl
764
+ class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col-on-lg"
765
+ aria-label="Status"
766
+ >
764
767
  <div class="pf-v6-c-description-list__group">
765
768
  <dt class="pf-v6-c-description-list__term">
766
769
  <span class="pf-v6-c-description-list__text">
@@ -2787,7 +2790,7 @@ wrapperTag: div
2787
2790
  </div>
2788
2791
  </div>
2789
2792
  <div class="pf-v6-c-card__body">
2790
- <dl class="pf-v6-c-description-list">
2793
+ <dl class="pf-v6-c-description-list" aria-label="Activity">
2791
2794
  <div class="pf-v6-c-description-list__group">
2792
2795
  <dt class="pf-v6-c-description-list__term">Readiness probe failed</dt>
2793
2796
  <dd class="pf-v6-c-description-list__description">
@@ -2910,7 +2913,7 @@ wrapperTag: div
2910
2913
  </div>
2911
2914
  </div>
2912
2915
  <div class="pf-v6-c-card__body">
2913
- <dl class="pf-v6-c-description-list">
2916
+ <dl class="pf-v6-c-description-list" aria-label="Events">
2914
2917
  <div class="pf-v6-c-description-list__group">
2915
2918
  <dt class="pf-v6-c-description-list__term">
2916
2919
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -1150,7 +1150,7 @@ cssPrefix: pf-d-dashboard
1150
1150
  <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
1151
1151
  </div>
1152
1152
  <div class="pf-v6-c-card__body">
1153
- <dl class="pf-v6-c-description-list">
1153
+ <dl class="pf-v6-c-description-list" aria-label="Details">
1154
1154
  <div class="pf-v6-c-description-list__group">
1155
1155
  <dt
1156
1156
  class="pf-v6-c-description-list__term"
@@ -1393,7 +1393,10 @@ cssPrefix: pf-d-dashboard
1393
1393
  </div>
1394
1394
  </div>
1395
1395
  <div class="pf-v6-c-card__body">
1396
- <dl class="pf-v6-c-description-list pf-m-compact">
1396
+ <dl
1397
+ class="pf-v6-c-description-list pf-m-compact"
1398
+ aria-label="Events"
1399
+ >
1397
1400
  <div class="pf-v6-c-description-list__group">
1398
1401
  <dt class="pf-v6-c-description-list__term">
1399
1402
  <div class="pf-v6-l-flex pf-m-nowrap">
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -291,7 +291,10 @@ cssPrefix: pf-d-description-list
291
291
  </div>
292
292
  <hr class="pf-v6-c-divider" />
293
293
  <div class="pf-v6-c-card__body">
294
- <dl class="pf-v6-c-description-list pf-m-auto-fit">
294
+ <dl
295
+ class="pf-v6-c-description-list pf-m-auto-fit"
296
+ aria-label="Details"
297
+ >
295
298
  <div class="pf-v6-c-description-list__group">
296
299
  <dt class="pf-v6-c-description-list__term">
297
300
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -804,6 +807,7 @@ cssPrefix: pf-d-description-list
804
807
  <div class="pf-v6-c-tab-content__body">
805
808
  <dl
806
809
  class="pf-v6-c-description-list pf-m-fill-columns pf-m-2-col pf-m-compact"
810
+ aria-label="Overview"
807
811
  >
808
812
  <div class="pf-v6-c-description-list__group">
809
813
  <dt class="pf-v6-c-description-list__term">
@@ -1334,7 +1338,10 @@ cssPrefix: pf-d-description-list
1334
1338
  <h2 class="pf-v6-c-title pf-m-lg">Service overview</h2>
1335
1339
  </div>
1336
1340
  <div class="pf-v6-l-grid__item">
1337
- <dl class="pf-v6-c-description-list pf-m-2-col-on-xl">
1341
+ <dl
1342
+ class="pf-v6-c-description-list pf-m-2-col-on-xl"
1343
+ aria-label="Service overview"
1344
+ >
1338
1345
  <div class="pf-v6-c-description-list__group">
1339
1346
  <dt class="pf-v6-c-description-list__term">
1340
1347
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1433,7 +1440,10 @@ cssPrefix: pf-d-description-list
1433
1440
  <h2 class="pf-v6-c-title pf-m-lg">Service routing</h2>
1434
1441
  </div>
1435
1442
  <div class="pf-v6-l-grid__item">
1436
- <dl class="pf-v6-c-description-list">
1443
+ <dl
1444
+ class="pf-v6-c-description-list"
1445
+ aria-label="Service routing"
1446
+ >
1437
1447
  <div class="pf-v6-c-description-list__group">
1438
1448
  <dt class="pf-v6-c-description-list__term">
1439
1449
  <span
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -382,6 +382,7 @@ section: components
382
382
  <div class="pf-v6-l-flex__item">
383
383
  <dl
384
384
  class="pf-v6-c-description-list pf-m-2-col-on-lg"
385
+ aria-label="API 1"
385
386
  aria-labelledby="-details-title"
386
387
  >
387
388
  <div class="pf-v6-c-description-list__group">
@@ -997,7 +998,7 @@ section: components
997
998
  <div class="pf-v6-l-flex__item">
998
999
  <dl
999
1000
  class="pf-v6-c-description-list pf-m-2-col-on-lg"
1000
- aria-label="Pod information list"
1001
+ aria-label="API 2"
1001
1002
  >
1002
1003
  <div class="pf-v6-c-description-list__group">
1003
1004
  <dt class="pf-v6-c-description-list__term">Name</dt>
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.3.0-prerelease.47",
4
+ "version": "6.3.0-prerelease.49",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -49,9 +49,9 @@
49
49
  "@octokit/rest": "^20.1.0",
50
50
  "@patternfly/documentation-framework": "6.17.0",
51
51
  "@patternfly/patternfly-a11y": "5.1.0",
52
- "@patternfly/react-code-editor": "6.3.0",
53
- "@patternfly/react-core": "6.3.0",
54
- "@patternfly/react-table": "6.3.0",
52
+ "@patternfly/react-code-editor": "6.3.1",
53
+ "@patternfly/react-core": "6.3.1",
54
+ "@patternfly/react-table": "6.3.1",
55
55
  "@starptech/prettyhtml": "^0.10.0",
56
56
  "backstopjs": "^6.3.23",
57
57
  "cheerio": "^1.0.0-rc.12",
package/patternfly-base.css CHANGED
@@ -130,6 +130,10 @@ button) {
130
130
  cursor: pointer;
131
131
  }
132
132
 
133
+ :where(:root) {
134
+ color-scheme: light;
135
+ }
136
+
133
137
  :where(.pf-v6-theme-dark) {
134
138
  color-scheme: dark;
135
139
  }
package/patternfly-no-globals.css CHANGED
@@ -27629,6 +27629,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27629
27629
  .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
27630
27630
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
27631
27631
  }
27632
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
27633
+ --pf-v6-c-text-input-group__text--Position: relative;
27634
+ }
27632
27635
  .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
27633
27636
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
27634
27637
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
package/patternfly.css CHANGED
@@ -131,6 +131,10 @@ button) {
131
131
  cursor: pointer;
132
132
  }
133
133
 
134
+ :where(:root) {
135
+ color-scheme: light;
136
+ }
137
+
134
138
  :where(.pf-v6-theme-dark) {
135
139
  color-scheme: dark;
136
140
  }
@@ -27765,6 +27769,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27765
27769
  .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
27766
27770
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
27767
27771
  }
27772
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
27773
+ --pf-v6-c-text-input-group__text--Position: relative;
27774
+ }
27768
27775
  .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
27769
27776
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
27770
27777
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);