@patternfly/react-styles 6.0.0-alpha.15 → 6.0.0-alpha.17

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/css/components/ActionList/action-list.css +1 -0
  3. package/css/components/Card/card.css +1 -0
  4. package/css/components/Check/check.css +10 -3
  5. package/css/components/DescriptionList/description-list.css +6 -6
  6. package/css/components/DragDrop/drag-drop.css +1 -0
  7. package/css/components/FormControl/form-control.css +2 -1
  8. package/css/components/Masthead/masthead.css +17 -9
  9. package/css/components/Masthead/masthead.d.ts +2 -0
  10. package/css/components/Masthead/masthead.js +2 -0
  11. package/css/components/Masthead/masthead.mjs +2 -0
  12. package/css/components/Menu/menu.css +31 -126
  13. package/css/components/Menu/menu.d.ts +1 -0
  14. package/css/components/Menu/menu.js +1 -0
  15. package/css/components/Menu/menu.mjs +1 -0
  16. package/css/components/MenuToggle/menu-toggle.css +20 -6
  17. package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
  18. package/css/components/MenuToggle/menu-toggle.js +1 -0
  19. package/css/components/MenuToggle/menu-toggle.mjs +1 -0
  20. package/css/components/ModalBox/modal-box.css +11 -7
  21. package/css/components/Nav/nav.css +64 -110
  22. package/css/components/Nav/nav.d.ts +3 -3
  23. package/css/components/Nav/nav.js +3 -3
  24. package/css/components/Nav/nav.mjs +3 -3
  25. package/css/components/Page/page.css +9 -17
  26. package/css/components/Radio/radio.css +12 -5
  27. package/css/components/Table/table-grid.css +30 -35
  28. package/css/components/Table/table-scrollable.css +14 -6
  29. package/css/components/Table/table-tree-view.css +5 -5
  30. package/css/components/Table/table.css +90 -254
  31. package/css/components/Table/table.d.ts +3 -4
  32. package/css/components/Table/table.js +3 -4
  33. package/css/components/Table/table.mjs +3 -4
  34. package/css/components/TextInputGroup/text-input-group.css +42 -42
  35. package/css/components/Toolbar/toolbar.css +66 -2
  36. package/css/components/Toolbar/toolbar.d.ts +1 -1
  37. package/css/components/Toolbar/toolbar.js +1 -1
  38. package/css/components/Toolbar/toolbar.mjs +1 -1
  39. package/css/docs/components/Brand/examples/Brand.css +3 -3
  40. package/css/docs/components/Brand/examples/Brand.d.ts +1 -1
  41. package/css/docs/components/Brand/examples/Brand.js +1 -1
  42. package/css/docs/components/Brand/examples/Brand.mjs +1 -1
  43. package/css/docs/components/Button/examples/Button.css +2 -2
  44. package/css/docs/components/Button/examples/Button.d.ts +1 -1
  45. package/css/docs/components/Button/examples/Button.js +1 -1
  46. package/css/docs/components/Button/examples/Button.mjs +1 -1
  47. package/css/docs/components/DragDrop/examples/DragDrop.css +3 -3
  48. package/css/docs/components/DragDrop/examples/DragDrop.d.ts +2 -2
  49. package/css/docs/components/DragDrop/examples/DragDrop.js +2 -2
  50. package/css/docs/components/DragDrop/examples/DragDrop.mjs +2 -2
  51. package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  52. package/css/docs/components/Dropdown/deprecated/Dropdown.d.ts +1 -1
  53. package/css/docs/components/Dropdown/deprecated/Dropdown.js +1 -1
  54. package/css/docs/components/Dropdown/deprecated/Dropdown.mjs +1 -1
  55. package/css/docs/components/Label/examples/Label.css +4 -4
  56. package/css/docs/components/Label/examples/Label.d.ts +1 -1
  57. package/css/docs/components/Label/examples/Label.js +1 -1
  58. package/css/docs/components/Label/examples/Label.mjs +1 -1
  59. package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
  60. package/css/docs/components/LogViewer/examples/LogViewer.d.ts +1 -1
  61. package/css/docs/components/LogViewer/examples/LogViewer.js +1 -1
  62. package/css/docs/components/LogViewer/examples/LogViewer.mjs +1 -1
  63. package/css/docs/components/Menu/examples/Menu.css +2 -2
  64. package/css/docs/components/Menu/examples/Menu.d.ts +3 -3
  65. package/css/docs/components/Menu/examples/Menu.js +3 -3
  66. package/css/docs/components/Menu/examples/Menu.mjs +3 -3
  67. package/css/docs/components/Nav/examples/Navigation.css +20 -3
  68. package/css/docs/components/Nav/examples/Navigation.d.ts +3 -2
  69. package/css/docs/components/Nav/examples/Navigation.js +3 -2
  70. package/css/docs/components/Nav/examples/Navigation.mjs +3 -2
  71. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -3
  72. package/css/docs/components/TextInputGroup/examples/TextInputGroup.d.ts +2 -2
  73. package/css/docs/components/TextInputGroup/examples/TextInputGroup.js +2 -2
  74. package/css/docs/components/TextInputGroup/examples/TextInputGroup.mjs +2 -2
  75. package/package.json +3 -3
@@ -1,60 +1,48 @@
1
- .pf-v6-c-table {
2
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
3
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
4
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
5
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
6
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
7
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
8
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
9
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
10
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > * {
1
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
14
2
  --pf-v5-hidden-visible--hidden--Display: none;
15
3
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
16
4
  display: var(--pf-v5-hidden-visible--Display);
17
5
  }
18
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden {
6
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden:where(th, td) {
19
7
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
20
8
  }
21
9
  @media screen and (min-width: 576px) {
22
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-sm {
10
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-sm:where(th, td) {
23
11
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
24
12
  }
25
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-sm {
13
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-sm:where(th, td) {
26
14
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
27
15
  }
28
16
  }
29
17
  @media screen and (min-width: 768px) {
30
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-md {
18
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-md:where(th, td) {
31
19
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
32
20
  }
33
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-md {
21
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-md:where(th, td) {
34
22
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
35
23
  }
36
24
  }
37
25
  @media screen and (min-width: 992px) {
38
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-lg {
26
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-lg:where(th, td) {
39
27
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
40
28
  }
41
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-lg {
29
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-lg:where(th, td) {
42
30
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
43
31
  }
44
32
  }
45
33
  @media screen and (min-width: 1200px) {
46
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-xl {
34
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-xl:where(th, td) {
47
35
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
48
36
  }
49
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-xl {
37
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-xl:where(th, td) {
50
38
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
51
39
  }
52
40
  }
53
41
  @media screen and (min-width: 1450px) {
54
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-2xl {
42
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-2xl:where(th, td) {
55
43
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
56
44
  }
57
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-2xl {
45
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-2xl:where(th, td) {
58
46
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
59
47
  }
60
48
  }
@@ -75,7 +63,6 @@
75
63
  --pf-v6-c-table__tbody--cell--PaddingTop: var(--pf-v6-c-table--cell--Padding--base);
76
64
  --pf-v6-c-table__tbody--cell--PaddingBottom: var(--pf-v6-c-table--cell--Padding--base);
77
65
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
78
- --pf-v6-c-table__tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
79
66
  --pf-v6-c-table--cell--Padding--base: var(--pf-t--global--spacer--md);
80
67
  --pf-v6-c-table--cell--FontSize: var(--pf-t--global--font--size--body--default);
81
68
  --pf-v6-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body);
@@ -109,31 +96,26 @@
109
96
  --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
110
97
  --pf-v6-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
111
98
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
112
- --pf-v6-c-table__button--PaddingTop: var(--pf-t--global--spacer--xs);
113
- --pf-v6-c-table__button--PaddingBottom: var(--pf-t--global--spacer--xs);
114
- --pf-v6-c-table__button--PaddingLeft: var(--pf-t--global--spacer--sm);
115
- --pf-v6-c-table__button--PaddingRight: var(--pf-t--global--spacer--sm);
99
+ --pf-v6-c-table__button--PaddingTop: var(--pf-t--global--spacer--sm);
100
+ --pf-v6-c-table__button--PaddingBottom: var(--pf-t--global--spacer--sm);
101
+ --pf-v6-c-table__button--PaddingLeft: var(--pf-t--global--spacer--md);
102
+ --pf-v6-c-table__button--PaddingRight: var(--pf-t--global--spacer--md);
116
103
  --pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular);
117
- --pf-v6-c-table__button--BackgroundColor: transparent;
104
+ --pf-v6-c-table__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
118
105
  --pf-v6-c-table__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
119
106
  --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
120
107
  --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
121
- --pf-v6-c-table__button--focus--Color: var(--pf-t--global--text--color--regular);
122
- --pf-v6-c-table__button--active--Color: var(--pf-t--global--text--color--regular);
108
+ --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
123
109
  --pf-v6-c-table__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
124
110
  --pf-v6-c-table--m-compact__toggle--PaddingTop: 0;
125
111
  --pf-v6-c-table--m-compact__toggle--PaddingBottom: 0;
126
112
  --pf-v6-c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
127
113
  --pf-v6-c-table__check--PaddingRight: var(--pf-t--global--spacer--sm);
128
- --pf-v6-c-table__favorite--PaddingLeft: var(--pf-t--global--spacer--sm);
129
- --pf-v6-c-table__favorite--PaddingRight: var(--pf-t--global--spacer--sm);
130
114
  --pf-v6-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
131
115
  --pf-v6-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
132
116
  --pf-v6-c-table__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked);
133
117
  --pf-v6-c-table__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
134
118
  --pf-v6-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
135
- --pf-v6-c-table__sort--m-favorite__button--focus__text--Color: var(--pf-t--global--text--color--regular);
136
- --pf-v6-c-table__sort--m-favorite__button--active__text--Color: var(--pf-t--global--text--color--regular);
137
119
  --pf-v6-c-table__draggable--c-button--MarginTop: calc(var(--pf-v6-c-button--PaddingTop) * -1);
138
120
  --pf-v6-c-table__draggable--c-button--MarginRight: calc(var(--pf-v6-c-button--PaddingRight) * -1);
139
121
  --pf-v6-c-table__draggable--c-button--MarginBottom: calc(var(--pf-v6-c-button--PaddingBottom) * -1);
@@ -142,6 +124,8 @@
142
124
  --pf-v6-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
143
125
  --pf-v6-c-table__action--PaddingTop: var(--pf-t--global--spacer--sm);
144
126
  --pf-v6-c-table__action--PaddingBottom: var(--pf-t--global--spacer--sm);
127
+ --pf-v6-c-table__action--PaddingLeft: var(--pf-t--global--spacer--sm);
128
+ --pf-v6-c-table__action--PaddingRight: var(--pf-t--global--spacer--sm);
145
129
  --pf-v6-c-table__inline-edit-action--PaddingTop: var(--pf-t--global--spacer--sm);
146
130
  --pf-v6-c-table__inline-edit-action--PaddingBottom: var(--pf-t--global--spacer--sm);
147
131
  --pf-v6-c-table__expandable-row--Transition: var(--pf-v6-global--Transition);
@@ -150,35 +134,25 @@
150
134
  --pf-v6-c-table__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
151
135
  --pf-v6-c-table__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--md);
152
136
  --pf-v6-c-table__expandable-row-content--Transition: var(--pf-v6-global--Transition);
153
- --pf-v6-c-table__expandable-row--after--Top: calc(var(--pf-v6-c-table--border-width--base) * -1);
154
- --pf-v6-c-table__expandable-row--after--Bottom: calc(var(--pf-v6-c-table--border-width--base) * -1);
155
- --pf-v6-c-table__expandable-row--after--border-width--base: var(--pf-t--global--border--width--strong);
156
- --pf-v6-c-table__expandable-row--after--BorderLeftWidth: 0;
157
- --pf-v6-c-table__expandable-row--after--BorderColor: var(--pf-t--global--border--color--clicked);
158
137
  --pf-v6-c-table__icon-inline--MarginRight: var(--pf-t--global--spacer--sm);
159
138
  --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));
160
- --pf-v6-c-table__sort__button--PaddingTop: var(--pf-t--global--spacer--control--vertical);
161
- --pf-v6-c-table__sort__button--PaddingRight: var(--pf-t--global--spacer--sm);
162
- --pf-v6-c-table__sort__button--PaddingBottom: var(--pf-t--global--spacer--control--vertical);
163
- --pf-v6-c-table__sort__button--PaddingLeft: var(--pf-t--global--spacer--sm);
164
- --pf-v6-c-table__sort__button--MarginTop: calc(var(--pf-v6-c-table__sort__button--PaddingTop) * -1);
139
+ --pf-v6-c-table__sort__button--PaddingTop: var(--pf-t--global--spacer--sm);
140
+ --pf-v6-c-table__sort__button--PaddingBottom: var(--pf-t--global--spacer--sm);
141
+ --pf-v6-c-table__sort__button--PaddingLeft: var(--pf-t--global--spacer--md);
142
+ --pf-v6-c-table__sort__button--PaddingRight: var(--pf-t--global--spacer--md);
165
143
  --pf-v6-c-table__sort__button--MarginBottom: calc(var(--pf-v6-c-table__sort__button--PaddingBottom) * -1);
166
144
  --pf-v6-c-table__sort__button--MarginLeft: calc(var(--pf-v6-c-table__sort__button--PaddingLeft) * -1);
167
145
  --pf-v6-c-table__sort__button--Color: var(--pf-t--global--text--color--regular);
168
- --pf-v6-c-table__sort--m-selected__button--Color: var(--pf-t--global--border--color--clicked);
146
+ --pf-v6-c-table__sort--m-selected__button--Color: var(--pf-t--global--color--brand--clicked);
169
147
  --pf-v6-c-table__sort--m-help--MinWidth: 15ch;
170
148
  --pf-v6-c-table__sort__button__text--Color: currentcolor;
171
149
  --pf-v6-c-table__sort__button--hover__text--Color: currentcolor;
172
- --pf-v6-c-table__sort__button--focus__text--Color: currentcolor;
173
- --pf-v6-c-table__sort__button--active__text--Color: currentcolor;
174
150
  --pf-v6-c-table__sort--cell--PaddingLeft: var(--pf-t--global--spacer--xs);
175
151
  --pf-v6-c-table__sort--cell--PaddingRight: var(--pf-t--global--spacer--sm);
176
152
  --pf-v6-c-table__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
177
153
  --pf-v6-c-table__sort-indicator--MarginLeft: var(--pf-t--global--spacer--md);
178
- --pf-v6-c-table__sort--m-selected__sort-indicator--Color: var(--pf-t--global--border--color--clicked);
154
+ --pf-v6-c-table__sort--m-selected__sort-indicator--Color: var(--pf-t--global--color--brand--clicked);
179
155
  --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--pf-t--global--text--color--regular);
180
- --pf-v6-c-table__sort__button--active__sort-indicator--Color: var(--pf-t--global--text--color--regular);
181
- --pf-v6-c-table__sort__button--focus__sort-indicator--Color: var(--pf-t--global--text--color--regular);
182
156
  --pf-v6-c-table__th--m-help--MinWidth: 11ch;
183
157
  --pf-v6-c-table__column-help--MarginLeft: var(--pf-t--global--spacer--sm);
184
158
  --pf-v6-c-table__column-help--c-button--MarginTop: calc(var(--pf-v6-c-button--PaddingTop) * -1);
@@ -187,19 +161,9 @@
187
161
  --pf-v6-c-table__column-help--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
188
162
  --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
189
163
  --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
190
- --pf-v6-c-table__compound-expansion-toggle__button--focus--Color: var(--pf-t--global--icon--color--brand--hover);
191
- --pf-v6-c-table__compound-expansion-toggle__button--active--Color: var(--pf-t--global--icon--color--brand--clicked);
192
- --pf-v6-c-table__compound-expansion-toggle__button--before--border-width--base: var(--pf-t--global--border--width--button--default);
193
- --pf-v6-c-table__compound-expansion-toggle__button--before--BorderColor: var(--pf-t--global--border--color--default);
194
- --pf-v6-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
195
- --pf-v6-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
196
- --pf-v6-c-table__compound-expansion-toggle__button--before--Bottom: calc(var(--pf-v6-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
197
- --pf-v6-c-table__compound-expansion-toggle__button--before--Left: calc(var(--pf-v6-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
198
- --pf-v6-c-table__compound-expansion-toggle__button--after--border-width--base: var(--pf-t--global--border--width--strong);
199
164
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
200
165
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
201
- --pf-v6-c-table__compound-expansion-toggle__button--after--Top: calc(var(--pf-v6-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
202
- --pf-v6-c-table__compound-expansion-toggle__button--after--Left: calc(var(--pf-v6-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
166
+ --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
203
167
  --pf-v6-c-table--m-compact__th--PaddingTop: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
204
168
  --pf-v6-c-table--m-compact__th--PaddingBottom: var(--pf-t--global--spacer--sm);
205
169
  --pf-v6-c-table--m-compact--cell--PaddingTop: var(--pf-t--global--spacer--sm);
@@ -209,47 +173,17 @@
209
173
  --pf-v6-c-table--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
210
174
  --pf-v6-c-table--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
211
175
  --pf-v6-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
212
- --pf-v6-c-table__tr--m-clickable--BoxShadow--top: var(--pf-v6-c-table__tr--BoxShadow--top--base);
213
176
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
214
- --pf-v6-c-table__tr--m-clickable--BoxShadow: none;
215
177
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
216
- --pf-v6-c-table__tr--m-clickable--hover--BoxShadow: var(--pf-v6-c-table__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
217
178
  --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
218
- --pf-v6-c-table__tr--m-clickable--focus--BoxShadow: var(--pf-v6-c-table__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
219
- --pf-v6-c-table__tr--m-clickable--focus--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
220
- --pf-v6-c-table__tr--m-clickable--active--BoxShadow: var(--pf-v6-c-table__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
221
- --pf-v6-c-table__tr--m-clickable--active--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
222
- --pf-v6-c-table__tr--m-clickable--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
223
- --pf-v6-c-table__tr--m-selected--BoxShadow--top: var(--pf-v6-c-table__tr--BoxShadow--top--base);
224
179
  --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
225
- --pf-v6-c-table__tr--m-selected--BoxShadow: var(--pf-v6-c-table__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
226
180
  --pf-v6-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
227
- --pf-v6-c-table__tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-v6-c-table__expandable-row--after--border-width--base));
228
- --pf-v6-c-table__tr--m-selected--after--BorderLeftColor: var(--pf-t--global--color--brand--default);
229
- --pf-v6-c-table__tr--m-selected--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
230
- --pf-v6-c-table__tr--m-selected--hover__tr--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
231
- --pf-v6-c-table__tr--m-selected__tr--m-selected--hover--BoxShadow: var(--pf-v6-c-table__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
232
- --pf-v6-c-table__tbody--m-clickable--BoxShadow--top: var(--pf-v6-c-table__tr--BoxShadow--top--base);
233
- --pf-v6-c-table__tbody--m-clickable--BoxShadow: none;
234
181
  --pf-v6-c-table__tbody--m-clickable--BackgroundColor: transparent;
235
182
  --pf-v6-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
236
- --pf-v6-c-table__tbody--m-clickable--hover--BoxShadow: var(--pf-v6-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
237
183
  --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
238
- --pf-v6-c-table__tbody--m-clickable--focus--BoxShadow: var(--pf-v6-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
239
- --pf-v6-c-table__tbody--m-clickable--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
240
- --pf-v6-c-table__tbody--m-clickable--active--BoxShadow: var(--pf-v6-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
241
- --pf-v6-c-table__tbody--m-clickable--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
242
184
  --pf-v6-c-table__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--clicked);
243
- --pf-v6-c-table__tbody--m-clickable--m-selected--hover__tr--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
244
185
  --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--default);
245
- --pf-v6-c-table__tbody--m-selected--BoxShadow--top: var(--pf-v6-c-table__tr--BoxShadow--top--base);
246
- --pf-v6-c-table__tbody--m-selected--BoxShadow: var(--pf-v6-c-table__tbody--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
247
186
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
248
- --pf-v6-c-table__tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-v6-c-table__expandable-row--after--border-width--base));
249
- --pf-v6-c-table__tbody--m-selected--after--BorderLeftColor: var(--pf-t--global--border--color--clicked);
250
- --pf-v6-c-table__tbody--m-selected--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
251
- --pf-v6-c-table__tbody--m-selected--hover__tbody--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
252
- --pf-v6-c-table__tbody--m-selected__tbody--m-selected--hover--BoxShadow: var(--pf-v6-c-table__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
253
187
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
254
188
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingTop: var(--pf-t--global--spacer--xs);
255
189
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--xs);
@@ -261,7 +195,6 @@
261
195
  }
262
196
 
263
197
  .pf-v6-c-table {
264
- color: var(--pf-v6-global--Color--100);
265
198
  width: 100%;
266
199
  background-color: var(--pf-v6-c-table--BackgroundColor);
267
200
  }
@@ -271,18 +204,15 @@
271
204
  .pf-v6-c-table.pf-m-sticky-header {
272
205
  position: relative;
273
206
  }
274
- .pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) {
275
- border-block-end: 0;
276
- }
277
- .pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > * {
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) {
278
208
  z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
279
209
  }
280
- .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) > * {
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) {
281
211
  position: sticky;
282
212
  inset-block-start: 0;
283
213
  background: var(--pf-v6-c-table--BackgroundColor);
284
214
  }
285
- .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) > *::after {
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 {
286
216
  position: absolute;
287
217
  inset-block-end: 0;
288
218
  inset-inline-start: 0;
@@ -318,14 +248,11 @@
318
248
  --pf-v6-c-table__sticky-column--BackgroundColor: var(--pf-v6-c-table--m-striped__tr--BackgroundColor);
319
249
  background: var(--pf-v6-c-table--m-striped__tr--BackgroundColor);
320
250
  }
321
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
322
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
323
- }
324
251
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row).pf-m-ghost-row {
325
252
  background-color: var(--pf-v6-c-table__tr--m-ghost-row--BackgroundColor);
326
253
  opacity: var(--pf-v6-c-table__tr--m-ghost-row--Opacity);
327
254
  }
328
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > * {
255
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
329
256
  --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-table--cell--hidden-visible--Display);
330
257
  position: relative;
331
258
  width: var(--pf-v6-c-table--cell--Width);
@@ -344,39 +271,39 @@
344
271
  word-break: var(--pf-v6-c-table--cell--WordBreak);
345
272
  white-space: var(--pf-v6-c-table--cell--WhiteSpace);
346
273
  }
347
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:first-child {
274
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
348
275
  padding-inline-start: calc(var(--pf-v6-c-table--cell--first-last-child--PaddingInline) + var(--pf-v6-c-table--cell--PaddingLeft));
349
276
  }
350
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:last-child {
277
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
351
278
  padding-inline-end: calc(var(--pf-v6-c-table--cell--first-last-child--PaddingInline) + var(--pf-v6-c-table--cell--PaddingRight));
352
279
  }
353
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *.pf-m-center {
280
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-center {
354
281
  text-align: center;
355
282
  }
356
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *:empty {
283
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):empty {
357
284
  width: auto;
358
285
  min-width: 0;
359
286
  padding: 0;
360
287
  }
361
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *.pf-m-help {
288
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-help {
362
289
  --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--cell--m-help--MinWidth);
363
290
  }
364
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *.pf-m-favorite {
291
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-favorite {
365
292
  --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--m-favorite--Color);
366
293
  --pf-v6-c-table__sort--MinWidth: fit-content;
367
294
  --pf-v6-c-table--cell--MaxWidth: fit-content;
368
295
  --pf-v6-c-table--cell--Overflow: visible;
369
296
  }
370
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *.pf-m-border-right::before, .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *.pf-m-border-left::before {
297
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-right::before, .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-left::before {
371
298
  position: absolute;
372
299
  inset: 0;
373
300
  pointer-events: none;
374
301
  content: "";
375
302
  }
376
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *.pf-m-border-right::before {
303
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-right::before {
377
304
  border-inline-end: var(--pf-v6-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-v6-c-table--cell--m-border-right--before--BorderRightColor);
378
305
  }
379
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > *.pf-m-border-left::before {
306
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-left::before {
380
307
  border-inline-start: var(--pf-v6-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-v6-c-table--cell--m-border-left--before--BorderLeftColor);
381
308
  }
382
309
  .pf-v6-c-table caption:where(.pf-v6-c-table__caption) {
@@ -391,7 +318,6 @@
391
318
  .pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
392
319
  --pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__thead--cell--FontSize);
393
320
  --pf-v6-c-table--cell--FontWeight: var(--pf-v6-c-table__thead--cell--FontWeight);
394
- vertical-align: baseline;
395
321
  }
396
322
  .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
397
323
  outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
@@ -412,24 +338,11 @@
412
338
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
413
339
  --pf-v6-c-table--cell--PaddingTop: var(--pf-v6-c-table__tbody--cell--PaddingTop);
414
340
  --pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table__tbody--cell--PaddingBottom);
415
- vertical-align: top;
416
341
  --pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__tbody--cell--FontSize);
417
342
  }
418
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > * {
343
+ .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
419
344
  overflow-wrap: break-word;
420
345
  }
421
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child::after {
422
- position: absolute;
423
- inset-block-start: var(--pf-v6-c-table__expandable-row--after--Top);
424
- inset-block-end: var(--pf-v6-c-table__expandable-row--after--Bottom);
425
- inset-inline-start: 0;
426
- content: "";
427
- background-color: transparent;
428
- border-inline-start: var(--pf-v6-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-v6-c-table__expandable-row--after--BorderColor);
429
- }
430
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded > :first-child:not(.pf-v6-c-table__control-row) {
431
- border-block-end-width: 0;
432
- }
433
346
  .pf-v6-c-table .pf-v6-c-table__sort {
434
347
  min-width: var(--pf-v6-c-table__sort--MinWidth);
435
348
  }
@@ -473,18 +386,9 @@
473
386
  .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) {
474
387
  border-block-end: 0;
475
388
  }
476
- .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child::after {
477
- border-inline-start: 0;
478
- }
479
389
  .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody):not(.pf-m-expanded) .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button::before {
480
390
  display: none;
481
391
  }
482
- .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody).pf-m-expanded > .pf-v6-c-table__control-row {
483
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
484
- }
485
- .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) .pf-v6-c-table__control-row > .pf-v6-c-table__compound-expansion-toggle:first-child > ::before {
486
- border-inline-start-width: 0;
487
- }
488
392
  .pf-v6-c-table tr.pf-m-clickable:last-child {
489
393
  border-block-end-color: transparent;
490
394
  }
@@ -492,9 +396,8 @@
492
396
  cursor: pointer;
493
397
  background-color: var(--pf-v6-c-table__tr--m-clickable--BackgroundColor);
494
398
  outline-offset: var(--pf-v6-c-table__tr--m-clickable--OutlineOffset);
495
- box-shadow: var(--pf-v6-c-table__tr--m-clickable--BoxShadow);
496
399
  }
497
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable:hover, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable:focus, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable:active {
400
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable:is(:hover, :focus) {
498
401
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: var(--pf-v6-c-table__tr--m-clickable--hover--BackgroundColor);
499
402
  }
500
403
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
@@ -503,16 +406,6 @@
503
406
  position: relative;
504
407
  background-color: var(--pf-v6-c-table__tr--m-selected--BackgroundColor);
505
408
  outline-offset: var(--pf-v6-c-table__tr--m-selected--OutlineOffset);
506
- box-shadow: var(--pf-v6-c-table__tr--m-selected--BoxShadow);
507
- }
508
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected + tr:where(.pf-v6-c-table__tr).pf-m-selected {
509
- box-shadow: var(--pf-v6-c-table__tr--m-selected--m-selected--BoxShadow);
510
- }
511
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected + tr:where(.pf-v6-c-table__tr).pf-m-selected:hover {
512
- box-shadow: var(--pf-v6-c-table__tr--m-selected__tr--m-selected--hover--BoxShadow);
513
- }
514
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected:hover + tr:where(.pf-v6-c-table__tr).pf-m-selected {
515
- box-shadow: var(--pf-v6-c-table__tr--m-selected--hover__tr--m-selected--BoxShadow);
516
409
  }
517
410
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-first-cell-offset-reset {
518
411
  --pf-v6-c-table--cell--first-last-child--PaddingLeft: var(--pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingLeft);
@@ -521,41 +414,18 @@
521
414
  cursor: pointer;
522
415
  background-color: var(--pf-v6-c-table__tbody--m-clickable--BackgroundColor);
523
416
  outline-offset: var(--pf-v6-c-table__tbody--m-clickable--OutlineOffset);
524
- box-shadow: var(--pf-v6-c-table__tbody--m-clickable--BoxShadow);
525
417
  }
526
418
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable.pf-m-expanded:not(.pf-m-selected) {
527
419
  --pf-v6-c-table__expandable-row--after--BorderColor: var(--pf-v6-c-table__tbody--m-clickable--m-expanded--BorderColor);
528
420
  }
529
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:hover:not(.pf-m-selected) + tbody:where(.pf-v6-c-table__tbody).pf-m-selected, .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:focus:not(.pf-m-selected) + tbody:where(.pf-v6-c-table__tbody).pf-m-selected, .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:active:not(.pf-m-selected) + tbody:where(.pf-v6-c-table__tbody).pf-m-selected {
530
- box-shadow: var(--pf-v6-c-table__tbody--m-clickable--m-selected--hover__tr--BoxShadow);
531
- }
532
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:hover {
533
- --pf-v6-c-table__tbody--m-clickable--BoxShadow: var(--pf-v6-c-table__tbody--m-clickable--hover--BoxShadow);
421
+ .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:is(:hover, :focus) {
534
422
  --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor);
535
423
  }
536
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:focus {
537
- --pf-v6-c-table__tbody--m-clickable--BoxShadow: var(--pf-v6-c-table__tbody--m-clickable--focus--BoxShadow);
538
- --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--focus--BackgroundColor);
539
- }
540
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:active {
541
- --pf-v6-c-table__tbody--m-clickable--BoxShadow: var(--pf-v6-c-table__tbody--m-clickable--active--BoxShadow);
542
- --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--active--BackgroundColor);
543
- }
544
424
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected {
545
425
  --pf-v6-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v6-c-table__tbody--m-selected--after--BorderLeftWidth);
546
426
  --pf-v6-c-table__expandable-row--after--BorderColor: var(--pf-v6-c-table__tbody--m-selected--after--BorderLeftColor);
547
427
  background-color: var(--pf-v6-c-table__tbody--m-selected--BackgroundColor);
548
428
  outline-offset: var(--pf-v6-c-table__tbody--m-selected--OutlineOffset);
549
- box-shadow: var(--pf-v6-c-table__tbody--m-selected--BoxShadow);
550
- }
551
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected + tbody:where(.pf-v6-c-table__tbody).pf-m-selected {
552
- --pf-v6-c-table__tbody--m-selected--BoxShadow: var(--pf-v6-c-table__tbody--m-selected--m-selected--BoxShadow);
553
- }
554
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected + tbody:where(.pf-v6-c-table__tbody).pf-m-selected:hover {
555
- box-shadow: var(--pf-v6-c-table__tbody--m-selected__tbody--m-selected--hover--BoxShadow);
556
- }
557
- .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected:hover + tbody:where(.pf-v6-c-table__tbody).pf-m-selected {
558
- box-shadow: var(--pf-v6-c-table__tbody--m-selected--hover__tbody--m-selected--BoxShadow);
559
429
  }
560
430
  .pf-v6-c-table.pf-m-drag-over {
561
431
  overflow-anchor: none;
@@ -577,19 +447,23 @@
577
447
  .pf-v6-c-table__text.pf-m-truncate {
578
448
  --pf-v6-c-table--cell--MinWidth: 100%;
579
449
  }
580
- .pf-v6-c-table__text.pf-m-truncate > * {
450
+ .pf-v6-c-table__text.pf-m-truncate > :where(th, td) {
581
451
  overflow: var(--pf-v6-c-table--cell--Overflow);
582
452
  text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
583
453
  white-space: var(--pf-v6-c-table--cell--WhiteSpace);
584
454
  }
585
455
 
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
+
586
460
  .pf-v6-c-table__button {
587
- position: static;
588
461
  width: auto;
589
462
  padding-block-start: var(--pf-v6-c-table__button--PaddingTop);
590
463
  padding-block-end: var(--pf-v6-c-table__button--PaddingBottom);
591
464
  padding-inline-start: var(--pf-v6-c-table__button--PaddingLeft);
592
465
  padding-inline-end: var(--pf-v6-c-table__button--PaddingRight);
466
+ margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBottom) * -1);
593
467
  margin-inline-start: calc(var(--pf-v6-c-table__button--PaddingLeft) * -1);
594
468
  font-size: inherit;
595
469
  font-weight: inherit;
@@ -604,24 +478,9 @@
604
478
  .pf-v6-c-table .pf-v6-c-table .pf-v6-c-table__button {
605
479
  margin-block-end: 0;
606
480
  }
607
- .pf-v6-c-table__button::before {
608
- position: absolute;
609
- inset-block-start: 0;
610
- inset-block-end: 0;
611
- inset-inline-start: 0;
612
- inset-inline-end: 0;
613
- cursor: pointer;
614
- content: "";
615
- }
616
- .pf-v6-c-table__button:hover {
481
+ .pf-v6-c-table__button:is(:hover, :focus) {
617
482
  color: var(--pf-v6-c-table__button--hover--Color);
618
483
  }
619
- .pf-v6-c-table__button:focus {
620
- color: var(--pf-v6-c-table__button--focus--Color);
621
- }
622
- .pf-v6-c-table__button:active {
623
- color: var(--pf-v6-c-table__button--active--Color);
624
- }
625
484
 
626
485
  .pf-v6-c-table__sort .pf-v6-c-table__text,
627
486
  .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__text {
@@ -700,24 +559,27 @@
700
559
  .pf-v6-c-table__check {
701
560
  --pf-v6-c-table--cell--PaddingLeft: var(--pf-v6-c-table__check--PaddingLeft);
702
561
  --pf-v6-c-table--cell--PaddingRight: var(--pf-v6-c-table__check--PaddingRight);
562
+ vertical-align: top;
703
563
  }
704
- .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
705
- display: inline-flex;
564
+ .pf-v6-c-table__check .pf-v6-c-check {
565
+ --pf-v6-c-check__label--FontSize: var(--pf-v6-c-table--cell--FontSize);
566
+ --pf-v6-c-check__label--LineHeight: var(--pf-v6-c-table--cell--LineHeight);
706
567
  }
707
- thead .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
708
- vertical-align: bottom;
568
+ .pf-v6-c-table__check .pf-v6-c-radio {
569
+ --pf-v6-c-radio__label--FontSize: var(--pf-v6-c-table--cell--FontSize);
570
+ --pf-v6-c-radio__label--LineHeight: var(--pf-v6-c-table--cell--LineHeight);
709
571
  }
710
- tbody .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
711
- vertical-align: top;
572
+ thead .pf-v6-c-table__check {
573
+ vertical-align: bottom;
712
574
  }
713
- .pf-v6-c-table__check label {
714
- display: contents;
575
+ thead .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone,
576
+ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
577
+ display: table-cell;
578
+ height: auto;
579
+ line-height: 1;
580
+ vertical-align: baseline;
715
581
  }
716
582
 
717
- .pf-v6-c-table__favorite {
718
- --pf-v6-c-table--cell--PaddingLeft: var(--pf-v6-c-table__favorite--PaddingLeft);
719
- --pf-v6-c-table--cell--PaddingRight: var(--pf-v6-c-table__favorite--PaddingRight);
720
- }
721
583
  .pf-v6-c-table__favorite .pf-v6-c-button {
722
584
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
723
585
  }
@@ -733,10 +595,13 @@ tbody .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
733
595
  }
734
596
 
735
597
  .pf-v6-c-table__action,
598
+ .pf-v6-c-table__favorite,
736
599
  .pf-v6-c-table__inline-edit-action,
737
600
  .pf-v6-c-table__draggable {
738
601
  --pf-v6-c-table--cell--PaddingTop: var(--pf-v6-c-table__action--PaddingTop);
739
602
  --pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table__action--PaddingBottom);
603
+ --pf-v6-c-table--cell--PaddingLeft: var(--pf-v6-c-table__action--PaddingLeft);
604
+ --pf-v6-c-table--cell--PaddingRight: var(--pf-v6-c-table__action--PaddingRight);
740
605
  }
741
606
 
742
607
  .pf-v6-c-table__action:last-child,
@@ -747,8 +612,6 @@ tbody .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
747
612
  .pf-v6-c-table__compound-expansion-toggle {
748
613
  --pf-v6-c-table__button--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--Color);
749
614
  --pf-v6-c-table__button--hover--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--Color);
750
- --pf-v6-c-table__button--focus--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--focus--Color);
751
- --pf-v6-c-table__button--active--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--active--Color);
752
615
  position: relative;
753
616
  padding: 0;
754
617
  }
@@ -762,42 +625,18 @@ tbody .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
762
625
  margin: 0;
763
626
  overflow: hidden;
764
627
  }
765
- .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button:hover, .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button:focus, .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button:active {
628
+ .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button:is(:hover, :focus) {
766
629
  outline: 0;
767
630
  }
768
- .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button::before,
769
631
  .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button::after {
770
632
  position: absolute;
771
633
  inset: 0;
772
634
  content: "";
773
- border-style: solid;
774
- border-width: 0;
775
- }
776
- .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button::before {
777
- inset-block-start: 0;
778
- inset-block-end: var(--pf-v6-c-table__compound-expansion-toggle__button--before--Bottom);
779
- inset-inline-start: var(--pf-v6-c-table__compound-expansion-toggle__button--before--Left);
780
- border-color: var(--pf-v6-c-table__compound-expansion-toggle__button--before--BorderColor);
781
- border-inline-start-width: var(--pf-v6-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
782
- border-inline-end-width: var(--pf-v6-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
783
- }
784
- .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button::after {
785
- inset-block-start: var(--pf-v6-c-table__compound-expansion-toggle__button--after--Top);
786
- inset-inline-start: var(--pf-v6-c-table__compound-expansion-toggle__button--after--Left);
787
- pointer-events: none;
788
- border-color: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor);
789
- border-block-start-width: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
635
+ border: 0;
636
+ 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);
790
637
  }
791
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 {
792
- --pf-v6-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-v6-c-table__compound-expansion-toggle__button--before--border-width--base);
793
- --pf-v6-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: var(--pf-v6-c-table__compound-expansion-toggle__button--before--border-width--base);
794
- --pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-v6-c-table__compound-expansion-toggle__button--after--border-width--base);
795
- }
796
- .pf-v6-c-table__compound-expansion-toggle.pf-m-expanded .pf-v6-c-table__button::before {
797
- border-block-end: var(--pf-v6-c-table--BackgroundColor) solid var(--pf-v6-c-table__compound-expansion-toggle__button--before--border-width--base);
798
- }
799
- .pf-v6-c-table__compound-expansion-toggle.pf-m-expanded:first-child {
800
- --pf-v6-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
639
+ --pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth);
801
640
  }
802
641
  .pf-v6-c-table__compound-expansion-toggle:focus-within {
803
642
  outline-offset: var(--pf-v6-c-table__button--OutlineOffset);
@@ -813,17 +652,13 @@ tbody .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
813
652
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginLeft);
814
653
  }
815
654
 
816
- .pf-v6-c-table__sort .pf-v6-c-table__button:hover {
655
+ .pf-v6-c-table__sort {
656
+ vertical-align: bottom;
657
+ }
658
+ .pf-v6-c-table__sort .pf-v6-c-table__button:is(:hover, :focus) {
817
659
  --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort__button--hover__sort-indicator--Color);
818
660
  --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort__button--hover__text--Color);
819
- }
820
- .pf-v6-c-table__sort .pf-v6-c-table__button:focus {
821
- --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort__button--focus__sort-indicator--Color);
822
- --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort__button--focus__text--Color);
823
- }
824
- .pf-v6-c-table__sort .pf-v6-c-table__button:active {
825
- --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort__button--active__sort-indicator--Color);
826
- --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort__button--active__text--Color);
661
+ --pf-v6-c-table__button--BackgroundColor: var(--pf-v6-c-table__button--hover--BackgroundColor);
827
662
  }
828
663
  .pf-v6-c-table__sort .pf-v6-c-table__button .pf-v6-c-table__text {
829
664
  color: var(--pf-v6-c-table__sort__button__text--Color);
@@ -839,23 +674,21 @@ tbody .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
839
674
  .pf-v6-c-table__sort.pf-m-favorite {
840
675
  --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort--m-favorite__button__text--Color);
841
676
  --pf-v6-c-table__sort__button--hover__text--Color: var(--pf-v6-c-table__sort--m-favorite__button--hover__text--Color);
842
- --pf-v6-c-table__sort__button--focus__text--Color: var(--pf-v6-c-table__sort--m-favorite__button--focus__text--Color);
843
- --pf-v6-c-table__sort__button--active__text--Color: var(--pf-v6-c-table__sort--m-favorite__button--active__text--Color);
844
677
  --pf-v6-c-table__sort--m-selected__button__text--Color: currentcolor;
845
678
  }
846
679
 
847
680
  .pf-v6-c-table__sort-indicator {
848
681
  grid-column: 2;
682
+ align-self: end;
849
683
  margin-inline-start: var(--pf-v6-c-table__sort-indicator--MarginLeft);
684
+ font-size: var(--pf-v6-c-table__sort-indicator--FontSize);
850
685
  color: var(--pf-v6-c-table__sort-indicator--Color);
851
- color: var(--pf-v6-c-table__sort-indicator--FontSize);
852
686
  pointer-events: none;
853
687
  }
854
688
 
855
689
  .pf-v6-c-table__expandable-row {
856
690
  position: relative;
857
691
  border-block-end: 0 solid transparent;
858
- box-shadow: 0 0 0 0 transparent;
859
692
  }
860
693
  .pf-v6-c-table__expandable-row,
861
694
  .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td):first-child::after {
@@ -883,7 +716,6 @@ tbody .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
883
716
  .pf-v6-c-table__expandable-row.pf-m-expanded {
884
717
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBottomColor);
885
718
  border-block-end-width: var(--pf-v6-c-table--border-width--base);
886
- box-shadow: var(--pf-v6-c-table__expandable-row--m-expanded--BoxShadow);
887
719
  }
888
720
  .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
889
721
  display: none;
@@ -918,6 +750,17 @@ tbody .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
918
750
  text-align: center;
919
751
  }
920
752
 
753
+ .pf-v6-c-table__thead {
754
+ vertical-align: bottom;
755
+ }
756
+
757
+ .pf-v6-c-table__tbody {
758
+ vertical-align: top;
759
+ }
760
+ .pf-v6-c-table__tbody .pf-v6-c-table__tr {
761
+ border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
762
+ }
763
+
921
764
  .pf-v6-c-table__icon-inline {
922
765
  display: flex;
923
766
  align-items: center;
@@ -980,11 +823,4 @@ tbody .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone {
980
823
 
981
824
  .pf-v6-c-table .pf-m-width-100 {
982
825
  --pf-v6-c-table--cell--Width: 100%;
983
- }
984
-
985
- :where(.pf-v6-theme-dark) .pf-v6-c-table {
986
- --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-v6-global--BackgroundColor--150);
987
- }
988
- :where(.pf-v6-theme-dark) .pf-v6-c-table__favorite .pf-v6-c-button:hover, :where(.pf-v6-theme-dark) .pf-v6-c-table__favorite .pf-v6-c-button:focus {
989
- --pf-v6-c-button--m-plain--Color: var(--pf-v6-global--palette--gold-100);
990
826
  }