@patternfly/patternfly 6.0.0-alpha.100 → 6.0.0-alpha.101

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 (52) hide show
  1. package/components/Table/table-scrollable.css +12 -15
  2. package/components/Table/table-scrollable.scss +33 -30
  3. package/components/Table/table-tree-view.css +0 -2
  4. package/components/Table/table-tree-view.scss +9 -11
  5. package/components/Table/table.css +118 -55
  6. package/components/Table/table.scss +182 -100
  7. package/docs/components/Table/examples/Table.css +6 -8
  8. package/docs/components/Table/examples/Table.md +79 -92
  9. package/docs/demos/Table/examples/Table.md +28 -28
  10. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  11. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  12. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  13. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +24 -24
  14. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  15. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  16. package/docs/utilities/Display/examples/Display.css +8 -8
  17. package/docs/utilities/Display/examples/Display.md +7 -7
  18. package/docs/utilities/Flex/examples/Flex.css +5 -5
  19. package/docs/utilities/Flex/examples/Flex.md +82 -40
  20. package/docs/utilities/Float/examples/Float.css +2 -2
  21. package/docs/utilities/Float/examples/Float.md +6 -6
  22. package/docs/utilities/Sizing/examples/Sizing.css +4 -4
  23. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  24. package/docs/utilities/Spacing/examples/Spacing.css +1 -1
  25. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  26. package/docs/utilities/Text/examples/Text.md +53 -53
  27. package/package.json +1 -1
  28. package/patternfly-addons.css +91 -371
  29. package/patternfly-no-globals.css +130 -72
  30. package/patternfly-theme-dark-unversioned.css +130 -72
  31. package/patternfly.css +130 -72
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
  34. package/sass-utilities/mixins.scss +2 -2
  35. package/utilities/Alignment/alignment.css +24 -24
  36. package/utilities/Alignment/alignment.scss +4 -4
  37. package/utilities/BackgroundColor/BackgroundColor.css +0 -100
  38. package/utilities/BackgroundColor/BackgroundColor.scss +2 -8
  39. package/utilities/BoxShadow/box-shadow.css +15 -39
  40. package/utilities/BoxShadow/box-shadow.scss +17 -27
  41. package/utilities/Display/display.scss +2 -2
  42. package/utilities/Flex/flex.scss +18 -18
  43. package/utilities/Float/float.css +24 -24
  44. package/utilities/Float/float.scss +4 -4
  45. package/utilities/Sizing/sizing.css +28 -28
  46. package/utilities/Sizing/sizing.scss +17 -17
  47. package/utilities/Text/text.css +0 -155
  48. package/utilities/Text/text.scss +10 -16
  49. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  50. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  51. package/utilities/Text/themes/dark/text.css +0 -0
  52. package/utilities/Text/themes/dark/text.scss +0 -33
@@ -1,6 +1,6 @@
1
1
  :where(:root),
2
2
  :where(.pf-v6-c-table) {
3
- --pf-v6-c-table__sticky-cell--MinWidth--base: 12.5rem;
3
+ --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
4
4
  --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
5
5
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
6
6
  --pf-v6-c-table__sticky-cell--Right: auto;
@@ -14,36 +14,33 @@
14
14
  --pf-v6-c-table__sticky-cell--m-left--Left: 0;
15
15
  --pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v6-c-table__sticky-cell--ZIndex) + 1);
16
16
  }
17
- :where(:root) .pf-v6-c-table__sticky-cell,
18
- :where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell {
19
- --pf-v6-c-table--cell--Overflow: visible;
20
- --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
17
+
18
+ .pf-v6-c-table .pf-v6-c-table__sticky-cell {
21
19
  position: sticky;
22
20
  inset-inline-start: var(--pf-v6-c-table__sticky-cell--Left);
23
21
  inset-inline-end: var(--pf-v6-c-table__sticky-cell--Right);
24
22
  z-index: var(--pf-v6-c-table__sticky-cell--ZIndex);
25
23
  min-width: var(--pf-v6-c-table__sticky-cell--MinWidth);
24
+ }
25
+
26
+ .pf-v6-c-table__sticky-cell {
27
+ --pf-v6-c-table--cell--Overflow: visible;
28
+ --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
26
29
  background-color: var(--pf-v6-c-table__sticky-cell--BackgroundColor);
27
30
  background-clip: padding-box;
28
31
  }
29
- :where(:root) .pf-v6-c-table__sticky-cell.pf-m-border-right::before,
30
- :where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-border-right::before {
32
+ .pf-v6-c-table__sticky-cell.pf-m-border-right::before {
31
33
  --pf-v6-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
32
34
  --pf-v6-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderRightColor);
33
35
  }
34
- :where(:root) .pf-v6-c-table__sticky-cell.pf-m-border-left::before,
35
- :where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-border-left::before {
36
+ .pf-v6-c-table__sticky-cell.pf-m-border-left::before {
36
37
  --pf-v6-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
37
38
  --pf-v6-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
38
39
  }
39
- :where(:root) .pf-v6-c-table__sticky-cell.pf-m-right, :where(:root) .pf-v6-c-table__sticky-cell.pf-m-inline-end,
40
- :where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-right,
41
- :where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-inline-end {
40
+ .pf-v6-c-table__sticky-cell.pf-m-right, .pf-v6-c-table__sticky-cell.pf-m-inline-end {
42
41
  --pf-v6-c-table__sticky-cell--Right: var(--pf-v6-c-table__sticky-cell--m-right--Right);
43
42
  }
44
- :where(:root) .pf-v6-c-table__sticky-cell.pf-m-left, :where(:root) .pf-v6-c-table__sticky-cell.pf-m-inline-start,
45
- :where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-left,
46
- :where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-inline-start {
43
+ .pf-v6-c-table__sticky-cell.pf-m-left, .pf-v6-c-table__sticky-cell.pf-m-inline-start {
47
44
  --pf-v6-c-table__sticky-cell--Left: var(--pf-v6-c-table__sticky-cell--m-left--Left);
48
45
  }
49
46
 
@@ -1,7 +1,7 @@
1
1
  // * Table scrollable
2
2
  :where(:root),
3
3
  :where(.#{$table}) {
4
- --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(200px)};
4
+ --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(140px)};
5
5
  --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
6
6
  --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
7
7
  --#{$table}__sticky-cell--Right: auto;
@@ -14,44 +14,47 @@
14
14
  --#{$table}__sticky-cell--m-right--Right: 0;
15
15
  --#{$table}__sticky-cell--m-left--Left: 0;
16
16
  --#{$table}--m-sticky-header__sticky-cell--ZIndex: calc(var(--#{$table}__sticky-cell--ZIndex) + 1);
17
+ }
18
+
17
19
 
18
- // * Table sticky cell
19
- .#{$table}__sticky-cell {
20
- --#{$table}--cell--Overflow: visible;
21
- --#{$table}--m-sticky-header--cell--ZIndex: var(--#{$table}--m-sticky-header__sticky-cell--ZIndex);
20
+ // - Table sticky cell
21
+ .#{$table} .#{$table}__sticky-cell {
22
+ position: sticky;
23
+ inset-inline-start: var(--#{$table}__sticky-cell--Left);
24
+ inset-inline-end: var(--#{$table}__sticky-cell--Right);
25
+ z-index: var(--#{$table}__sticky-cell--ZIndex);
26
+ min-width: var(--#{$table}__sticky-cell--MinWidth);
27
+ }
22
28
 
23
- position: sticky;
24
- inset-inline-start: var(--#{$table}__sticky-cell--Left);
25
- inset-inline-end: var(--#{$table}__sticky-cell--Right);
26
- z-index: var(--#{$table}__sticky-cell--ZIndex);
27
- min-width: var(--#{$table}__sticky-cell--MinWidth);
28
- background-color: var(--#{$table}__sticky-cell--BackgroundColor);
29
- background-clip: padding-box;
29
+ .#{$table}__sticky-cell {
30
+ --#{$table}--cell--Overflow: visible;
31
+ --#{$table}--m-sticky-header--cell--ZIndex: var(--#{$table}--m-sticky-header__sticky-cell--ZIndex);
30
32
 
31
- &.pf-m-border-right::before {
32
- --#{$table}--cell--m-border-right--before--BorderRightWidth: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightWidth);
33
- --#{$table}--cell--m-border-right--before--BorderRightColor: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightColor);
34
- }
33
+ background-color: var(--#{$table}__sticky-cell--BackgroundColor);
34
+ background-clip: padding-box;
35
35
 
36
- &.pf-m-border-left::before {
37
- --#{$table}--cell--m-border-left--before--BorderLeftWidth: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftWidth);
38
- --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
39
- }
36
+ &.pf-m-border-right::before {
37
+ --#{$table}--cell--m-border-right--before--BorderRightWidth: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightWidth);
38
+ --#{$table}--cell--m-border-right--before--BorderRightColor: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightColor);
39
+ }
40
40
 
41
- &.pf-m-right,
42
- &.pf-m-inline-end {
43
- --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
44
- }
41
+ &.pf-m-border-left::before {
42
+ --#{$table}--cell--m-border-left--before--BorderLeftWidth: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftWidth);
43
+ --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
44
+ }
45
45
 
46
- &.pf-m-left,
47
- &.pf-m-inline-start {
48
- --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
49
- }
46
+ &.pf-m-right,
47
+ &.pf-m-inline-end {
48
+ --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
49
+ }
50
50
 
51
+ &.pf-m-left,
52
+ &.pf-m-inline-start {
53
+ --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
51
54
  }
52
55
  }
53
56
 
54
- // * Scroll outer wrapper
57
+ // - Scroll outer wrapper
55
58
  .#{$scroll-outer-wrapper} {
56
59
  --#{$scroll-outer-wrapper}--MinHeight: #{pf-size-prem(400px)};
57
60
  --#{$scroll-outer-wrapper}--MaxHeight: 100%;
@@ -64,7 +67,7 @@
64
67
  overflow: hidden;
65
68
  }
66
69
 
67
- // * Scroll inner wrapper
70
+ // - Scroll inner wrapper
68
71
  .#{$scroll-inner-wrapper} {
69
72
  display: flex;
70
73
  flex-direction: column;
@@ -6,7 +6,6 @@
6
6
  --pf-v6-c-table__tree-view-main--PaddingLeft: var(--pf-v6-c-table__tree-view-main--indent--base);
7
7
  --pf-v6-c-table__tree-view-main--MarginLeft: calc(var(--pf-v6-c-table--cell--PaddingLeft) * -1);
8
8
  --pf-v6-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-t--global--spacer--sm);
9
- --pf-v6-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
10
9
  --pf-v6-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-t--global--spacer--sm);
11
10
  --pf-v6-c-table__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md);
12
11
  --pf-v6-c-table__tree-view-icon--MarginRight: var(--pf-t--global--spacer--sm);
@@ -87,7 +86,6 @@
87
86
  margin-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--MarginRight);
88
87
  }
89
88
  .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check label {
90
- padding-inline-start: var(--pf-v6-c-table__tree-view-main--c-table__check--PaddingLeft);
91
89
  padding-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--PaddingRight);
92
90
  margin-block-start: 0;
93
91
  margin-block-end: 0;
@@ -1,4 +1,4 @@
1
- $pf-v5-c-tree-view--MaxDepth: 10;
1
+ $pf-v6-c-tree-view--MaxDepth: 10;
2
2
 
3
3
  // * Table tree view
4
4
  :where(:root),
@@ -9,28 +9,27 @@ $pf-v5-c-tree-view--MaxDepth: 10;
9
9
  // * Table tree view main button
10
10
  --#{$table}__tree-view-main--c-button--MarginRight: var(--pf-t--global--spacer--sm);
11
11
 
12
- // - Table tree view main
12
+ // * Table tree view main
13
13
  --#{$table}__tree-view-main--PaddingLeft: var(--#{$table}__tree-view-main--indent--base);
14
14
  --#{$table}__tree-view-main--MarginLeft: calc(var(--#{$table}--cell--PaddingLeft) * -1);
15
15
 
16
- // - Table tree view check
16
+ // * Table tree view check
17
17
  --#{$table}__tree-view-main--c-table__check--PaddingRight: var(--pf-t--global--spacer--sm);
18
- --#{$table}__tree-view-main--c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
19
18
  --#{$table}__tree-view-main--c-table__check--MarginRight: var(--pf-t--global--spacer--sm);
20
19
 
21
- // - Table tree view icon
20
+ // * Table tree view icon
22
21
  --#{$table}__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md);
23
22
  --#{$table}__tree-view-icon--MarginRight: var(--pf-t--global--spacer--sm);
24
23
 
25
- // - Table tree view toggle
24
+ // * Table tree view toggle
26
25
  --#{$table}--m-tree-view__toggle--Position: absolute;
27
26
  --#{$table}--m-tree-view__toggle--Left: var(--#{$table}__tree-view-main--PaddingLeft);
28
27
  --#{$table}--m-tree-view__toggle--TranslateX: -100%;
29
28
 
30
- // - Table tree view toggle toggle icon
29
+ // * Table tree view toggle toggle icon
31
30
  --#{$table}--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-t--global--spacer--md);
32
31
 
33
- // - Table tree view no inset tree view main
32
+ // * Table tree view no inset tree view main
34
33
  --#{$table}--m-no-inset__tree-view-main--PaddingLeft: 0;
35
34
  --#{$table}--m-no-inset__tree-view-main--MarginLeft: 0;
36
35
  }
@@ -51,7 +50,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
51
50
  --#{$table}__tree-view-main--MarginLeft: var(--#{$table}--m-no-inset__tree-view-main--MarginLeft);
52
51
  }
53
52
 
54
- @for $i from 2 through $pf-v5-c-tree-view--MaxDepth {
53
+ @for $i from 2 through $pf-v6-c-tree-view--MaxDepth {
55
54
  tr:where(.#{$table}__tr)[aria-level="#{$i}"] {
56
55
  --#{$table}__tree-view-main--PaddingLeft: calc(var(--#{$table}__tree-view-main--nested-indent--base) * #{$i - 1} + var(--#{$table}__tree-view-main--indent--base));
57
56
  }
@@ -95,7 +94,6 @@ $pf-v5-c-tree-view--MaxDepth: 10;
95
94
  }
96
95
 
97
96
  > .#{$table}__check label {
98
- padding-inline-start: var(--#{$table}__tree-view-main--c-table__check--PaddingLeft);
99
97
  padding-inline-end: var(--#{$table}__tree-view-main--c-table__check--PaddingRight);
100
98
  margin-block-start: 0;
101
99
  margin-block-end: 0;
@@ -313,7 +311,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
313
311
  margin-block-end: var(--#{$table}__tree-view-details-toggle--MarginBottom);
314
312
  }
315
313
 
316
- @for $i from 2 through $pf-v5-c-tree-view--MaxDepth {
314
+ @for $i from 2 through $pf-v6-c-tree-view--MaxDepth {
317
315
  tr:where(.#{$table}__tr)[aria-level="#{$i}"] {
318
316
  --#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--#{$table}__tree-view-main--nested-indent--base) * #{$i - 1} + var(--#{$table}__tree-view-main--indent--base)); // indent, plus indent level, plus
319
317
  }
@@ -60,18 +60,21 @@
60
60
  --pf-v6-c-table__caption--PaddingLeft: var(--pf-t--global--spacer--lg);
61
61
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
62
62
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
63
+ --pf-v6-c-table__thead__toggle--PaddingBottom: var(--pf-t--global--spacer--xs);
63
64
  --pf-v6-c-table__tbody--cell--PaddingTop: var(--pf-v6-c-table--cell--Padding--base);
64
65
  --pf-v6-c-table__tbody--cell--PaddingBottom: var(--pf-v6-c-table--cell--Padding--base);
65
66
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
67
+ --pf-v6-c-table__tr--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
68
+ --pf-v6-c-table__tr--BorderBottomColor: var(--pf-t--global--border--color--default);
66
69
  --pf-v6-c-table--cell--Padding--base: var(--pf-t--global--spacer--md);
67
- --pf-v6-c-table--cell--FontSize: var(--pf-t--global--font--size--body--default);
68
- --pf-v6-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body);
69
- --pf-v6-c-table--cell--LineHeight: var(--pf-t--global--font--line-height--body);
70
- --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
71
70
  --pf-v6-c-table--cell--PaddingTop: var(--pf-v6-c-table--cell--Padding--base);
72
71
  --pf-v6-c-table--cell--PaddingRight: var(--pf-v6-c-table--cell--Padding--base);
73
72
  --pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table--cell--Padding--base);
74
73
  --pf-v6-c-table--cell--PaddingLeft: var(--pf-v6-c-table--cell--Padding--base);
74
+ --pf-v6-c-table--cell--FontSize: var(--pf-t--global--font--size--body--default);
75
+ --pf-v6-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body);
76
+ --pf-v6-c-table--cell--LineHeight: var(--pf-t--global--font--line-height--body);
77
+ --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
75
78
  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--sm);
76
79
  --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-v6-c-table--cell--Padding--base);
77
80
  --pf-v6-c-table--cell--MinWidth: 0;
@@ -88,6 +91,7 @@
88
91
  --pf-v6-c-table--cell--m-help--MinWidth: 11ch;
89
92
  --pf-v6-c-table--m-truncate--cell--MaxWidth: 1px;
90
93
  --pf-v6-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v6-c-table--cell--PaddingRight) + var(--pf-v6-c-table--cell--PaddingLeft));
94
+ --pf-v6-c-table--m-truncate__text--MinWidth: 5ch;
91
95
  --pf-v6-c-table--cell--hidden-visible--Display: table-cell;
92
96
  --pf-v6-c-table__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
93
97
  --pf-v6-c-table__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -106,7 +110,6 @@
106
110
  --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
107
111
  --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
108
112
  --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
109
- --pf-v6-c-table__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
110
113
  --pf-v6-c-table--m-compact__toggle--PaddingTop: 0;
111
114
  --pf-v6-c-table--m-compact__toggle--PaddingBottom: 0;
112
115
  --pf-v6-c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
@@ -114,6 +117,7 @@
114
117
  --pf-v6-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
115
118
  --pf-v6-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
116
119
  --pf-v6-c-table__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked);
120
+ --pf-v6-c-table__favorite--m-favorited--c-button--hover--Color: var(--pf-t--global--color--favorite--clicked);
117
121
  --pf-v6-c-table__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
118
122
  --pf-v6-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
119
123
  --pf-v6-c-table__draggable--c-button--MarginTop: calc(var(--pf-v6-c-button--PaddingTop) * -1);
@@ -133,7 +137,11 @@
133
137
  --pf-v6-c-table__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--md);
134
138
  --pf-v6-c-table__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
135
139
  --pf-v6-c-table__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--md);
140
+ --pf-v6-c-table__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
136
141
  --pf-v6-c-table__expandable-row-content--Transition: var(--pf-v6-global--Transition);
142
+ --pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
143
+ --pf-v6-c-table__control-row--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
144
+ --pf-v6-c-table__control-row__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
137
145
  --pf-v6-c-table__icon-inline--MarginRight: var(--pf-t--global--spacer--sm);
138
146
  --pf-v6-c-table__sort--MinWidth: calc(6ch + var(--pf-v6-c-table--cell--PaddingRight) + var(--pf-v6-c-table--cell--PaddingLeft) + var(--pf-v6-c-table__sort-indicator--MarginLeft));
139
147
  --pf-v6-c-table__sort__button--PaddingTop: var(--pf-t--global--spacer--sm);
@@ -160,10 +168,16 @@
160
168
  --pf-v6-c-table__column-help--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
161
169
  --pf-v6-c-table__column-help--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
162
170
  --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
171
+ --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
163
172
  --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
173
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
174
+ --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
164
175
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
165
176
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
177
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--BorderColor: var(--pf-t--global--border--color--hover);
178
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
166
179
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
180
+ --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
167
181
  --pf-v6-c-table--m-compact__th--PaddingTop: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
168
182
  --pf-v6-c-table--m-compact__th--PaddingBottom: var(--pf-t--global--spacer--sm);
169
183
  --pf-v6-c-table--m-compact--cell--PaddingTop: var(--pf-t--global--spacer--sm);
@@ -172,26 +186,34 @@
172
186
  --pf-v6-c-table--m-compact--cell--PaddingLeft: var(--pf-t--global--spacer--sm);
173
187
  --pf-v6-c-table--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
174
188
  --pf-v6-c-table--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
189
+ --pf-v6-c-table--m-expandable__tbody--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
190
+ --pf-v6-c-table--m-expandable__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
175
191
  --pf-v6-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
176
192
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
177
193
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
178
194
  --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
179
- --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
195
+ --pf-v6-c-table__tr--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
196
+ --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
180
197
  --pf-v6-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
181
198
  --pf-v6-c-table__tbody--m-clickable--BackgroundColor: transparent;
182
199
  --pf-v6-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
183
- --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
200
+ --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
201
+ --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
184
202
  --pf-v6-c-table__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--clicked);
185
- --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--default);
203
+ --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
186
204
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
187
205
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
188
206
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingTop: var(--pf-t--global--spacer--xs);
189
- --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--xs);
207
+ --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--md);
190
208
  --pf-v6-c-table__subhead--PaddingLeft: var(--pf-t--global--spacer--sm);
191
209
  --pf-v6-c-table__subhead--PaddingRight: var(--pf-t--global--spacer--sm);
192
210
  --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
193
- --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--primary--default);
211
+ --pf-v6-c-table__nested-column-header__button--PaddingLeft: calc(var(--pf-v6-c-table__button--PaddingLeft) - var(--pf-t--global--spacer--sm));
212
+ --pf-v6-c-table__nested-column-header__button--PaddingRight: calc(var(--pf-v6-c-table__button--PaddingRight) - var(--pf-t--global--spacer--xs));
213
+ --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
194
214
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
215
+ --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 1);
216
+ --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 2);
195
217
  }
196
218
 
197
219
  .pf-v6-c-table {
@@ -201,39 +223,36 @@
201
223
  .pf-v6-c-table.pf-m-fixed {
202
224
  table-layout: fixed;
203
225
  }
204
- .pf-v6-c-table.pf-m-sticky-header {
205
- position: relative;
206
- }
207
- .pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
208
- z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
209
- }
210
- .pf-v6-c-table.pf-m-sticky-header > thead:where(.pf-v6-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
226
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
227
+ .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
211
228
  position: sticky;
212
229
  inset-block-start: 0;
230
+ z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
213
231
  background: var(--pf-v6-c-table--BackgroundColor);
214
232
  }
215
- .pf-v6-c-table.pf-m-sticky-header > thead:where(.pf-v6-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v6-c-table__tr) > :where(th, td)::after {
233
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
234
+ .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::before {
216
235
  position: absolute;
236
+ inset-block-start: 0;
217
237
  inset-block-end: 0;
218
238
  inset-inline-start: 0;
219
239
  inset-inline-end: 0;
240
+ z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
241
+ pointer-events: none;
220
242
  content: "";
221
243
  border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
222
244
  }
245
+ .pf-v6-c-table.pf-m-sticky-header {
246
+ position: relative;
247
+ }
248
+ .pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
249
+ z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
250
+ }
223
251
  .pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
224
252
  position: sticky;
225
253
  inset-block-start: 0;
226
- z-index: var(--pf-t--global--Zindex--xs);
227
254
  background: var(--pf-v6-c-table--BackgroundColor);
228
255
  }
229
- .pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header > .pf-m-border-row {
230
- height: var(--pf-v6-c-table--border-width--base);
231
- background-color: var(--pf-v6-c-table--BorderColor);
232
- }
233
- .pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:nth-last-child(2)) th:where(.pf-v6-c-table__th):not([rowspan]),
234
- .pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:nth-last-child(2)) td:where(.pf-v6-c-table__td):not([rowspan]) {
235
- --pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom);
236
- }
237
256
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
238
257
  border-block-end: 0;
239
258
  }
@@ -241,7 +260,7 @@
241
260
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
242
261
  --pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom);
243
262
  }
244
- .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row),
263
+ .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
245
264
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
246
265
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
247
266
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-striped {
@@ -280,7 +299,7 @@
280
299
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-center {
281
300
  text-align: center;
282
301
  }
283
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):empty {
302
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):is(:empty, .pf-v6-c-table__cell-empty) {
284
303
  width: auto;
285
304
  min-width: 0;
286
305
  padding: 0;
@@ -327,14 +346,9 @@
327
346
  --pf-v6-c-table--cell--PaddingTop: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingTop);
328
347
  }
329
348
  .pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__subhead {
330
- --pf-v6-c-table--cell--PaddingLeft: var(--pf-v6-c-table__subhead--PaddingLeft);
331
- --pf-v6-c-table--cell--PaddingRight: var(--pf-v6-c-table__subhead--PaddingRight);
332
349
  --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__subhead--Color);
333
350
  color: var(--pf-v6-c-table__subhead--Color);
334
351
  }
335
- .pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__subhead .pf-v6-c-table__button {
336
- margin-inline-start: 0;
337
- }
338
352
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
339
353
  --pf-v6-c-table--cell--PaddingTop: var(--pf-v6-c-table__tbody--cell--PaddingTop);
340
354
  --pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table__tbody--cell--PaddingBottom);
@@ -383,6 +397,12 @@
383
397
  --pf-v6-c-table--cell--WordBreak: break-word;
384
398
  --pf-v6-c-table--cell--WhiteSpace: normal;
385
399
  }
400
+ .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) {
401
+ --pf-v6-c-table__tr--BorderBottomWidth: 0;
402
+ --pf-v6-c-table__tbody--BorderBottomWidth: 0;
403
+ --pf-v6-c-table--m-expandable__tbody--BorderBottomWidth: 0;
404
+ --pf-v6-c-table__control-row--BorderBottomWidth: 0;
405
+ }
386
406
  .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) {
387
407
  border-block-end: 0;
388
408
  }
@@ -401,35 +421,38 @@
401
421
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: var(--pf-v6-c-table__tr--m-clickable--hover--BackgroundColor);
402
422
  }
403
423
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
404
- --pf-v6-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v6-c-table__tr--m-selected--after--BorderLeftWidth);
405
- --pf-v6-c-table__expandable-row--after--BorderColor: var(--pf-v6-c-table__tr--m-selected--after--BorderLeftColor);
406
424
  position: relative;
407
425
  background-color: var(--pf-v6-c-table__tr--m-selected--BackgroundColor);
408
426
  outline-offset: var(--pf-v6-c-table__tr--m-selected--OutlineOffset);
409
427
  }
410
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-first-cell-offset-reset {
411
- --pf-v6-c-table--cell--first-last-child--PaddingLeft: var(--pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingLeft);
428
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-first-cell-offset-reset > :first-child {
429
+ padding-inline-start: var(--pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingLeft);
412
430
  }
413
431
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable {
414
432
  cursor: pointer;
415
433
  background-color: var(--pf-v6-c-table__tbody--m-clickable--BackgroundColor);
416
434
  outline-offset: var(--pf-v6-c-table__tbody--m-clickable--OutlineOffset);
417
435
  }
418
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable.pf-m-expanded:not(.pf-m-selected) {
419
- --pf-v6-c-table__expandable-row--after--BorderColor: var(--pf-v6-c-table__tbody--m-clickable--m-expanded--BorderColor);
420
- }
421
436
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:is(:hover, :focus) {
422
437
  --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor);
423
438
  }
439
+ .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable.pf-m-expanded {
440
+ --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor);
441
+ }
424
442
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected {
425
- --pf-v6-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v6-c-table__tbody--m-selected--after--BorderLeftWidth);
426
- --pf-v6-c-table__expandable-row--after--BorderColor: var(--pf-v6-c-table__tbody--m-selected--after--BorderLeftColor);
427
443
  background-color: var(--pf-v6-c-table__tbody--m-selected--BackgroundColor);
428
444
  outline-offset: var(--pf-v6-c-table__tbody--m-selected--OutlineOffset);
429
445
  }
430
446
  .pf-v6-c-table.pf-m-drag-over {
431
447
  overflow-anchor: none;
432
448
  }
449
+ .pf-v6-c-table .pf-v6-c-table {
450
+ background-color: transparent;
451
+ }
452
+ .pf-v6-c-table .pf-v6-c-table,
453
+ .pf-v6-c-table .pf-v6-c-table :is(.pf-v6-c-table__tbody, .pf-v6-c-table__tr:last-child) {
454
+ border-block-end: 0;
455
+ }
433
456
 
434
457
  .pf-v6-c-table__text {
435
458
  --pf-v6-c-table--cell--MaxWidth: 100%;
@@ -446,6 +469,7 @@
446
469
  }
447
470
  .pf-v6-c-table__text.pf-m-truncate {
448
471
  --pf-v6-c-table--cell--MinWidth: 100%;
472
+ --pf-v6-c-table--text--MinWidth: var(--pf-v6-c-table--m-truncate__text--MinWidth);
449
473
  }
450
474
  .pf-v6-c-table__text.pf-m-truncate > :where(th, td) {
451
475
  overflow: var(--pf-v6-c-table--cell--Overflow);
@@ -453,10 +477,6 @@
453
477
  white-space: var(--pf-v6-c-table--cell--WhiteSpace);
454
478
  }
455
479
 
456
- .pf-v6-c-table__tr.pf-m-border-row {
457
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
458
- }
459
-
460
480
  .pf-v6-c-table__button {
461
481
  width: auto;
462
482
  padding-block-start: var(--pf-v6-c-table__button--PaddingTop);
@@ -474,6 +494,7 @@
474
494
  background-color: var(--pf-v6-c-table__button--BackgroundColor);
475
495
  border: 0;
476
496
  border-radius: var(--pf-v6-c-table__button--BorderRadius);
497
+ outline-offset: var(--pf-v6-c-table__button--OutlineOffset);
477
498
  }
478
499
  .pf-v6-c-table .pf-v6-c-table .pf-v6-c-table__button {
479
500
  margin-block-end: 0;
@@ -583,9 +604,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
583
604
  .pf-v6-c-table__favorite .pf-v6-c-button {
584
605
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
585
606
  }
586
- .pf-m-favorited.pf-v6-c-table__favorite .pf-v6-c-button {
607
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
587
608
  --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
588
609
  }
610
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
611
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
612
+ }
589
613
 
590
614
  .pf-v6-c-table__draggable .pf-v6-c-button {
591
615
  cursor: grab;
@@ -614,6 +638,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
614
638
  --pf-v6-c-table__button--hover--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--Color);
615
639
  position: relative;
616
640
  padding: 0;
641
+ background-color: var(--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor);
617
642
  }
618
643
  .pf-v6-c-table__compound-expansion-toggle.pf-m-truncate {
619
644
  overflow: visible;
@@ -635,7 +660,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
635
660
  border: 0;
636
661
  border-block-start: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth) solid var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor);
637
662
  }
638
- .pf-v6-c-table__compound-expansion-toggle:hover, .pf-v6-c-table__compound-expansion-toggle:focus-within, .pf-v6-c-table__compound-expansion-toggle.pf-m-expanded {
663
+ .pf-v6-c-table__compound-expansion-toggle:hover, .pf-v6-c-table__compound-expansion-toggle:focus-within {
664
+ --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor);
665
+ --pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderTopWidth);
666
+ }
667
+ .pf-v6-c-table__compound-expansion-toggle.pf-m-expanded {
668
+ --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor);
639
669
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth);
640
670
  }
641
671
  .pf-v6-c-table__compound-expansion-toggle:focus-within {
@@ -671,10 +701,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
671
701
  .pf-v6-c-table__sort.pf-m-help {
672
702
  --pf-v6-c-table__th--m-help--MinWidth: var(--pf-v6-c-table__sort--m-help--MinWidth);
673
703
  }
674
- .pf-v6-c-table__sort.pf-m-favorite {
675
- --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort--m-favorite__button__text--Color);
676
- --pf-v6-c-table__sort__button--hover__text--Color: var(--pf-v6-c-table__sort--m-favorite__button--hover__text--Color);
677
- --pf-v6-c-table__sort--m-selected__button__text--Color: currentcolor;
704
+ .pf-v6-c-table__sort.pf-m-favorite .pf-v6-c-table__text {
705
+ font-size: var(--pf-v6-c-table__favorite--c-button--FontSize);
678
706
  }
679
707
 
680
708
  .pf-v6-c-table__sort-indicator {
@@ -703,7 +731,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
703
731
  padding-block-start: 0;
704
732
  padding-inline-end: 0;
705
733
  padding-block-end: 0;
706
- padding-inline-start: var(--pf-v6-c-table__expandable-row--after--border-width--base);
734
+ padding-inline-start: 0;
707
735
  }
708
736
  .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
709
737
  .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
@@ -712,6 +740,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
712
740
  .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
713
741
  padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingTop);
714
742
  padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBottom);
743
+ padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingLeft);
744
+ padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingRight);
745
+ background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
746
+ border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
715
747
  }
716
748
  .pf-v6-c-table__expandable-row.pf-m-expanded {
717
749
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBottomColor);
@@ -751,13 +783,44 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
751
783
  }
752
784
 
753
785
  .pf-v6-c-table__thead {
786
+ --pf-v6-c-table__tr--BorderBottomWidth: 0;
787
+ --pf-v6-c-table__toggle--PaddingBottom: var(--pf-v6-c-table__thead__toggle--PaddingBottom);
754
788
  vertical-align: bottom;
755
789
  }
790
+ .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
791
+ --pf-v6-c-table__button--PaddingLeft: var(--pf-v6-c-table__nested-column-header__button--PaddingLeft);
792
+ --pf-v6-c-table__button--PaddingRight: var(--pf-v6-c-table__nested-column-header__button--PaddingRight);
793
+ margin-inline-end: calc(var(--pf-v6-c-table__button--PaddingLeft) * -1);
794
+ }
756
795
 
757
796
  .pf-v6-c-table__tbody {
758
797
  vertical-align: top;
759
798
  }
760
- .pf-v6-c-table__tbody .pf-v6-c-table__tr {
799
+ .pf-v6-c-table__tbody .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded {
800
+ background-color: var(--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor);
801
+ }
802
+
803
+ .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tr.pf-m-expanded {
804
+ border-block-end: 0;
805
+ }
806
+ .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody {
807
+ border-block-end: var(--pf-v6-c-table__tr--BorderBottomWidth) solid var(--pf-v6-c-table__tr--BorderBottomColor);
808
+ }
809
+ .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
810
+ border-block-end: var(--pf-v6-c-table__tr--BorderBottomWidth) solid var(--pf-v6-c-table__tr--BorderBottomColor);
811
+ }
812
+ .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
813
+ background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
814
+ border-block-end: var(--pf-v6-c-table__control-row--BorderBottomWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBottomColor);
815
+ }
816
+
817
+ .pf-v6-c-table__tr {
818
+ border-block-end: var(--pf-v6-c-table__tr--BorderBottomWidth) solid var(--pf-v6-c-table__tr--BorderBottomColor);
819
+ }
820
+ .pf-v6-c-table__thead .pf-v6-c-table__tr {
821
+ border-block-end: 0;
822
+ }
823
+ .pf-v6-c-table__tr.pf-m-border-row {
761
824
  border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
762
825
  }
763
826