@patternfly/patternfly 6.6.0-prerelease.33 → 6.6.0-prerelease.35

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/components/DataList/data-list.css +11 -9
  2. package/components/DataList/data-list.scss +7 -5
  3. package/components/Table/table-grid.css +6 -6
  4. package/components/Table/table-grid.scss +2 -2
  5. package/components/_index.css +17 -15
  6. package/docs/components/DataList/examples/DataList.md +129 -126
  7. package/docs/components/Table/examples/Table.md +416 -416
  8. package/docs/demos/Card/examples/Card.md +16 -16
  9. package/docs/demos/DataList/examples/DataList.md +58 -58
  10. package/docs/demos/DescriptionList/examples/DescriptionList.md +8 -8
  11. package/docs/demos/Table/examples/Table.md +204 -188
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +17 -15
  14. package/patternfly.css +17 -15
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
package/components/DataList/data-list.css CHANGED
@@ -470,7 +470,7 @@
470
470
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
471
471
  --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--lg) * -1);
472
472
  --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--lg) * -1);
473
- --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--lg);
473
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list__cell--PaddingBlockStart);
474
474
  --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
475
475
  --pf-v6-c-data-list__item-draggable-button--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
476
476
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -485,7 +485,7 @@
485
485
  --pf-v6-c-data-list__item-control--md--MarginInlineEnd: var(--pf-t--global--spacer--xl);
486
486
  --pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md);
487
487
  --pf-v6-c-data-list__check--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
488
- --pf-v6-c-data-list__check--MarginBlockStart: -0.0625rem;
488
+ --pf-v6-c-data-list__check--MarginBlockStart: 0;
489
489
  --pf-v6-c-data-list__item-action--Display: flex;
490
490
  --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);
491
491
  --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -528,7 +528,7 @@
528
528
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
529
529
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
530
530
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
531
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
531
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart);
532
532
  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
533
533
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
534
534
  }
@@ -658,9 +658,10 @@
658
658
  cursor: pointer;
659
659
  }
660
660
 
661
- .pf-v6-c-data-list__item-draggable-button {
661
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain {
662
662
  display: flex;
663
663
  flex-direction: column;
664
+ justify-content: start;
664
665
  padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart);
665
666
  padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd);
666
667
  padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart);
@@ -668,24 +669,25 @@
668
669
  margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockStart);
669
670
  margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd);
670
671
  margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginInlineStart);
672
+ line-height: 1lh;
671
673
  background-color: var(--pf-v6-c-data-list__item-draggable-button--BackgroundColor);
672
674
  border: 0;
673
675
  }
674
- .pf-v6-c-data-list__item-draggable-button:hover {
676
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:hover {
675
677
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color);
676
678
  cursor: grab;
677
679
  }
678
- .pf-v6-c-data-list__item-draggable-button:focus {
680
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:focus {
679
681
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color);
680
682
  }
681
- .pf-v6-c-data-list__item-draggable-button:active {
683
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:active {
682
684
  cursor: grabbing;
683
685
  }
684
- .pf-v6-c-data-list__item-draggable-button.pf-m-disabled {
686
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:is(:disabled, .pf-m-disabled) {
685
687
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
686
688
  pointer-events: none;
687
689
  }
688
- .pf-v6-c-data-list__item-draggable-button .pf-v6-c-data-list__item-draggable-icon {
690
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain .pf-v6-c-data-list__item-draggable-icon {
689
691
  color: var(--pf-v6-c-data-list__item-draggable-button-icon--Color);
690
692
  }
691
693
 
package/components/DataList/data-list.scss CHANGED
@@ -73,7 +73,7 @@
73
73
  --#{$data-list}__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
74
74
  --#{$data-list}__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--lg) * -1);
75
75
  --#{$data-list}__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--lg) * -1);
76
- --#{$data-list}__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--lg);
76
+ --#{$data-list}__item-draggable-button--PaddingBlockStart: var(--#{$data-list}__cell--PaddingBlockStart);
77
77
  --#{$data-list}__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
78
78
  --#{$data-list}__item-draggable-button--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
79
79
  --#{$data-list}__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -92,7 +92,7 @@
92
92
 
93
93
  // check
94
94
  --#{$data-list}__check--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
95
- --#{$data-list}__check--MarginBlockStart: #{pf-size-prem(-1px)}; // slightly offset input
95
+ --#{$data-list}__check--MarginBlockStart: 0;
96
96
 
97
97
  // actions
98
98
  --#{$data-list}__item-action--Display: flex;
@@ -141,7 +141,7 @@
141
141
  --#{$data-list}--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
142
142
  --#{$data-list}--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
143
143
  --#{$data-list}--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
144
- --#{$data-list}--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
144
+ --#{$data-list}--m-compact__item-draggable-button--PaddingBlockStart: var(--#{$data-list}--m-compact__cell--PaddingBlockStart);
145
145
  --#{$data-list}--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
146
146
  --#{$data-list}--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
147
147
  }
@@ -288,9 +288,10 @@
288
288
  }
289
289
  }
290
290
 
291
- .#{$data-list}__item-draggable-button {
291
+ .#{$data-list}__item-draggable-button.#{$button}.pf-m-plain {
292
292
  display: flex;
293
293
  flex-direction: column; // fixes safari alignment
294
+ justify-content: start;
294
295
  padding-block-start: var(--#{$data-list}__item-draggable-button--PaddingBlockStart);
295
296
  padding-block-end: var(--#{$data-list}__item-draggable-button--PaddingBlockEnd);
296
297
  padding-inline-start: var(--#{$data-list}__item-draggable-button--PaddingInlineStart);
@@ -298,6 +299,7 @@
298
299
  margin-block-start: var(--#{$data-list}__item-draggable-button--MarginBlockStart);
299
300
  margin-block-end: var(--#{$data-list}__item-draggable-button--MarginBlockEnd);
300
301
  margin-inline-start: var(--#{$data-list}__item-draggable-button--MarginInlineStart);
302
+ line-height: 1lh; // inherit line height from parent, fixes compact alignment
301
303
  background-color: var(--#{$data-list}__item-draggable-button--BackgroundColor);
302
304
  border: 0;
303
305
 
@@ -315,7 +317,7 @@
315
317
  cursor: grabbing;
316
318
  }
317
319
 
318
- &.pf-m-disabled {
320
+ &:is(:disabled, .pf-m-disabled) {
319
321
  --#{$data-list}__item-draggable-button-icon--Color: var(--#{$data-list}__item-draggable-button--m-disabled__draggable-icon--Color);
320
322
 
321
323
  pointer-events: none;
package/components/Table/table-grid.css CHANGED
@@ -49,7 +49,7 @@
49
49
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
50
50
  --pf-v6-c-table__check--responsive--MarginInlineStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
51
51
  --pf-v6-c-table__check--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + 0.25rem);
52
- --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0.5rem;
52
+ --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0;
53
53
  --pf-v6-c-table--m-grid__check--favorite--MarginInlineStart: var(--pf-t--global--spacer--xl);
54
54
  --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
55
55
  --pf-v6-c-table__action--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + var(--pf-t--global--spacer--control--vertical--plain) * -1);
@@ -134,7 +134,7 @@
134
134
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
135
135
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
136
136
  }
137
- .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
137
+ .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
138
138
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
139
139
  }
140
140
  .pf-m-grid.pf-v6-c-table.pf-m-compact {
@@ -445,7 +445,7 @@
445
445
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
446
446
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
447
447
  }
448
- .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
448
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
449
449
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
450
450
  }
451
451
  .pf-m-grid-md.pf-v6-c-table.pf-m-compact {
@@ -757,7 +757,7 @@
757
757
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
758
758
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
759
759
  }
760
- .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
760
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
761
761
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
762
762
  }
763
763
  .pf-m-grid-lg.pf-v6-c-table.pf-m-compact {
@@ -1069,7 +1069,7 @@
1069
1069
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
1070
1070
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
1071
1071
  }
1072
- .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
1072
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
1073
1073
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
1074
1074
  }
1075
1075
  .pf-m-grid-xl.pf-v6-c-table.pf-m-compact {
@@ -1381,7 +1381,7 @@
1381
1381
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
1382
1382
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
1383
1383
  }
1384
- .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
1384
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
1385
1385
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
1386
1386
  }
1387
1387
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact {
package/components/Table/table-grid.scss CHANGED
@@ -117,7 +117,7 @@
117
117
  --#{$table}__check--responsive--MarginBlockStart: calc(var(--#{$table}--cell--first-child--responsive--PaddingBlockStart) + #{pf-size-prem(4px)}); // cell padding plus an offset for the check/radio to align with text
118
118
 
119
119
  // * Table grid favorite
120
- --#{$table}--m-grid__favorite--MarginBlockStart: #{pf-size-prem(8px)};
120
+ --#{$table}--m-grid__favorite--MarginBlockStart: 0;
121
121
  --#{$table}--m-grid__check--favorite--MarginInlineStart: var(--pf-t--global--spacer--xl);
122
122
 
123
123
  // * Table grid action
@@ -244,7 +244,7 @@
244
244
 
245
245
  // remove padding from first child to align with kebab
246
246
  &:first-child,
247
- &:is(.#{$table}__toggle, .#{$table}__check) + :where(th, td) {
247
+ &:is(.#{$table}__toggle, .#{$table}__check, .#{$table}__favorite) + :where(th, td) {
248
248
  --#{$table}--cell--responsive--PaddingBlockStart: var(--#{$table}--cell--first-child--responsive--PaddingBlockStart);
249
249
  }
250
250
  }
package/components/_index.css CHANGED
@@ -5051,7 +5051,7 @@ ul) {
5051
5051
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
5052
5052
  --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--lg) * -1);
5053
5053
  --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--lg) * -1);
5054
- --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--lg);
5054
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list__cell--PaddingBlockStart);
5055
5055
  --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
5056
5056
  --pf-v6-c-data-list__item-draggable-button--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
5057
5057
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -5066,7 +5066,7 @@ ul) {
5066
5066
  --pf-v6-c-data-list__item-control--md--MarginInlineEnd: var(--pf-t--global--spacer--xl);
5067
5067
  --pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md);
5068
5068
  --pf-v6-c-data-list__check--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
5069
- --pf-v6-c-data-list__check--MarginBlockStart: -0.0625rem;
5069
+ --pf-v6-c-data-list__check--MarginBlockStart: 0;
5070
5070
  --pf-v6-c-data-list__item-action--Display: flex;
5071
5071
  --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);
5072
5072
  --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -5109,7 +5109,7 @@ ul) {
5109
5109
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5110
5110
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
5111
5111
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
5112
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
5112
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart);
5113
5113
  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
5114
5114
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5115
5115
  }
@@ -5239,9 +5239,10 @@ ul) {
5239
5239
  cursor: pointer;
5240
5240
  }
5241
5241
 
5242
- .pf-v6-c-data-list__item-draggable-button {
5242
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain {
5243
5243
  display: flex;
5244
5244
  flex-direction: column;
5245
+ justify-content: start;
5245
5246
  padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart);
5246
5247
  padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd);
5247
5248
  padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart);
@@ -5249,24 +5250,25 @@ ul) {
5249
5250
  margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockStart);
5250
5251
  margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd);
5251
5252
  margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginInlineStart);
5253
+ line-height: 1lh;
5252
5254
  background-color: var(--pf-v6-c-data-list__item-draggable-button--BackgroundColor);
5253
5255
  border: 0;
5254
5256
  }
5255
- .pf-v6-c-data-list__item-draggable-button:hover {
5257
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:hover {
5256
5258
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5257
5259
  cursor: grab;
5258
5260
  }
5259
- .pf-v6-c-data-list__item-draggable-button:focus {
5261
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:focus {
5260
5262
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5261
5263
  }
5262
- .pf-v6-c-data-list__item-draggable-button:active {
5264
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:active {
5263
5265
  cursor: grabbing;
5264
5266
  }
5265
- .pf-v6-c-data-list__item-draggable-button.pf-m-disabled {
5267
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:is(:disabled, .pf-m-disabled) {
5266
5268
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5267
5269
  pointer-events: none;
5268
5270
  }
5269
- .pf-v6-c-data-list__item-draggable-button .pf-v6-c-data-list__item-draggable-icon {
5271
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain .pf-v6-c-data-list__item-draggable-icon {
5270
5272
  color: var(--pf-v6-c-data-list__item-draggable-button-icon--Color);
5271
5273
  }
5272
5274
 
@@ -17947,7 +17949,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17947
17949
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
17948
17950
  --pf-v6-c-table__check--responsive--MarginInlineStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
17949
17951
  --pf-v6-c-table__check--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + 0.25rem);
17950
- --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0.5rem;
17952
+ --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0;
17951
17953
  --pf-v6-c-table--m-grid__check--favorite--MarginInlineStart: var(--pf-t--global--spacer--xl);
17952
17954
  --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
17953
17955
  --pf-v6-c-table__action--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + var(--pf-t--global--spacer--control--vertical--plain) * -1);
@@ -18032,7 +18034,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18032
18034
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
18033
18035
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
18034
18036
  }
18035
- .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
18037
+ .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
18036
18038
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
18037
18039
  }
18038
18040
  .pf-m-grid.pf-v6-c-table.pf-m-compact {
@@ -18343,7 +18345,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18343
18345
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
18344
18346
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
18345
18347
  }
18346
- .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
18348
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
18347
18349
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
18348
18350
  }
18349
18351
  .pf-m-grid-md.pf-v6-c-table.pf-m-compact {
@@ -18655,7 +18657,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18655
18657
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
18656
18658
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
18657
18659
  }
18658
- .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
18660
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
18659
18661
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
18660
18662
  }
18661
18663
  .pf-m-grid-lg.pf-v6-c-table.pf-m-compact {
@@ -18967,7 +18969,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18967
18969
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
18968
18970
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
18969
18971
  }
18970
- .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
18972
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
18971
18973
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
18972
18974
  }
18973
18975
  .pf-m-grid-xl.pf-v6-c-table.pf-m-compact {
@@ -19279,7 +19281,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19279
19281
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
19280
19282
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
19281
19283
  }
19282
- .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
19284
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
19283
19285
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
19284
19286
  }
19285
19287
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact {