@patternfly/patternfly 6.3.0-prerelease.46 → 6.3.0-prerelease.48

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 (17) hide show
  1. package/components/Table/table.css +12 -1
  2. package/components/Table/table.scss +15 -2
  3. package/components/TextInputGroup/text-input-group.css +3 -0
  4. package/components/TextInputGroup/text-input-group.scss +4 -1
  5. package/components/_index.css +15 -1
  6. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  7. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  8. package/docs/components/TextInputGroup/examples/TextInputGroup.md +28 -0
  9. package/docs/demos/Card/examples/Card.md +8 -5
  10. package/docs/demos/Dashboard/examples/Dashboard.md +5 -2
  11. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  12. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  13. package/package.json +4 -4
  14. package/patternfly-no-globals.css +15 -1
  15. package/patternfly.css +15 -1
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/components/Table/table.css CHANGED
@@ -10,7 +10,8 @@
10
10
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
11
11
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
12
12
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
13
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
13
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
14
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
14
15
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
15
16
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
16
17
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -613,6 +614,12 @@
613
614
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
614
615
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
615
616
  }
617
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
618
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
619
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
620
+ line-height: 1lh;
621
+ }
622
+
616
623
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
617
624
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
618
625
  }
@@ -735,6 +742,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
735
742
  align-self: last baseline;
736
743
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
737
744
  }
745
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
746
+ line-height: 1lh;
747
+ }
738
748
 
739
749
  .pf-v6-c-table__sort {
740
750
  vertical-align: bottom;
@@ -845,6 +855,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
845
855
 
846
856
  .pf-v6-c-table__thead {
847
857
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
858
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
848
859
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
849
860
  vertical-align: bottom;
850
861
  }
package/components/Table/table.scss CHANGED
@@ -21,7 +21,8 @@
21
21
  --#{$table}__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
22
22
 
23
23
  // * Table thead toggle
24
- --#{$table}__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
24
+ --#{$table}__thead__toggle--PaddingBlockStart: var(--#{$table}--cell--Padding--base); // TODO - remove thead toggle custom padding in breaking change
25
+ --#{$table}__thead__toggle--PaddingBlockEnd: var(--#{$table}--cell--Padding--base); // TODO - remove thead toggle custom padding in breaking change
25
26
 
26
27
  // * Table body cell
27
28
  --#{$table}__tbody--cell--PaddingBlockStart: var(--#{$table}--cell--Padding--base);
@@ -835,13 +836,20 @@
835
836
  --#{$table}--cell--PaddingInlineStart: var(--#{$table}__toggle--PaddingInlineStart);
836
837
  --#{$table}--cell--PaddingInlineEnd: var(--#{$table}__toggle--PaddingInlineEnd);
837
838
 
839
+ @at-root .#{$table}__thead & {
840
+ .#{$button} {
841
+ margin-block-start: calc(var(--#{$button}--PaddingBlockStart) * -1);
842
+ margin-block-end: calc(var(--#{$button}--PaddingBlockEnd) * -1);
843
+ line-height: 1lh; // set line-height instead of --LineHeight to avoid breaking the min-width calc for plain buttons
844
+ }
845
+ }
846
+
838
847
  .#{$button} {
839
848
  &.pf-m-expanded .#{$table}__toggle-icon {
840
849
  transform: rotate(var(--#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate));
841
850
  }
842
851
  }
843
852
 
844
-
845
853
  .#{$table}__toggle-icon {
846
854
  @include pf-v6-mirror-inline-on-rtl;
847
855
 
@@ -997,6 +1005,10 @@
997
1005
  .#{$table}__column-help-action {
998
1006
  align-self: last baseline;
999
1007
  margin-inline-start: var(--#{$table}__column-help--MarginInlineStart);
1008
+
1009
+ .#{$button} {
1010
+ line-height: 1lh; // set line-height instead of --LineHeight to avoid breaking the min-width calc for plain buttons
1011
+ }
1000
1012
  }
1001
1013
 
1002
1014
  // - Table sort
@@ -1157,6 +1169,7 @@
1157
1169
  // - Table thead
1158
1170
  .#{$table}__thead {
1159
1171
  --#{$table}__tr--BorderBlockEndWidth: 0;
1172
+ --#{$table}__toggle--PaddingBlockStart: var(--#{$table}__thead__toggle--PaddingBlockStart);
1160
1173
  --#{$table}__toggle--PaddingBlockEnd: var(--#{$table}__thead__toggle--PaddingBlockEnd);
1161
1174
 
1162
1175
  vertical-align: bottom;
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
@@ -17276,7 +17276,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17276
17276
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
17277
17277
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
17278
17278
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
17279
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17279
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
17280
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
17280
17281
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
17281
17282
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
17282
17283
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -17879,6 +17880,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17879
17880
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
17880
17881
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
17881
17882
  }
17883
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
17884
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
17885
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
17886
+ line-height: 1lh;
17887
+ }
17888
+
17882
17889
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
17883
17890
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
17884
17891
  }
@@ -18001,6 +18008,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18001
18008
  align-self: last baseline;
18002
18009
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
18003
18010
  }
18011
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
18012
+ line-height: 1lh;
18013
+ }
18004
18014
 
18005
18015
  .pf-v6-c-table__sort {
18006
18016
  vertical-align: bottom;
@@ -18111,6 +18121,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18111
18121
 
18112
18122
  .pf-v6-c-table__thead {
18113
18123
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
18124
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
18114
18125
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
18115
18126
  vertical-align: bottom;
18116
18127
  }
@@ -20122,6 +20133,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20122
20133
  .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
20123
20134
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
20124
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
+ }
20125
20139
  .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
20126
20140
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
20127
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/CodeBlock/examples/CodeBlock.md CHANGED
@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-code-block
14
14
  <button
15
15
  class="pf-v6-c-button pf-m-plain"
16
16
  type="button"
17
- aria-label="Copy to clipboard"
17
+ aria-label="Copy to clipboard basic example code content"
18
18
  >
19
19
  <span class="pf-v6-c-button__icon">
20
20
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -25,7 +25,7 @@ cssPrefix: pf-v6-c-code-block
25
25
  <button
26
26
  class="pf-v6-c-button pf-m-plain"
27
27
  type="button"
28
- aria-label="Run in Web Terminal"
28
+ aria-label="Run basic example code in Web Terminal"
29
29
  >
30
30
  <span class="pf-v6-c-button__icon">
31
31
  <i class="fas fa-play" aria-hidden="true"></i>
@@ -58,7 +58,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
58
58
  <button
59
59
  class="pf-v6-c-button pf-m-plain"
60
60
  type="button"
61
- aria-label="Copy to clipboard"
61
+ aria-label="Copy to clipboard expandable example code content"
62
62
  >
63
63
  <span class="pf-v6-c-button__icon">
64
64
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -69,7 +69,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
69
69
  <button
70
70
  class="pf-v6-c-button pf-m-plain"
71
71
  type="button"
72
- aria-label="Run in Web Terminal"
72
+ aria-label="Run expandable example code in Web Terminal"
73
73
  >
74
74
  <span class="pf-v6-c-button__icon">
75
75
  <i class="fas fa-play" aria-hidden="true"></i>
@@ -128,7 +128,7 @@ name: azure-sample-repo<div
128
128
  <button
129
129
  class="pf-v6-c-button pf-m-plain"
130
130
  type="button"
131
- aria-label="Copy to clipboard"
131
+ aria-label="Copy to clipboard expandable expanded example code content"
132
132
  >
133
133
  <span class="pf-v6-c-button__icon">
134
134
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -139,7 +139,7 @@ name: azure-sample-repo<div
139
139
  <button
140
140
  class="pf-v6-c-button pf-m-plain"
141
141
  type="button"
142
- aria-label="Run in Web Terminal"
142
+ aria-label="Run expandable expanded example code in Web Terminal"
143
143
  >
144
144
  <span class="pf-v6-c-button__icon">
145
145
  <i class="fas fa-play" aria-hidden="true"></i>
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