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

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 (56) hide show
  1. package/components/Nav/nav.css +3 -1
  2. package/components/Nav/nav.scss +4 -2
  3. package/components/Table/table-scrollable.css +12 -15
  4. package/components/Table/table-scrollable.scss +33 -30
  5. package/components/Table/table-tree-view.css +0 -2
  6. package/components/Table/table-tree-view.scss +9 -11
  7. package/components/Table/table.css +118 -55
  8. package/components/Table/table.scss +182 -100
  9. package/docs/components/Nav/examples/Navigation.css +2 -2
  10. package/docs/components/Nav/examples/Navigation.md +57 -55
  11. package/docs/components/Table/examples/Table.css +6 -8
  12. package/docs/components/Table/examples/Table.md +79 -92
  13. package/docs/demos/Table/examples/Table.md +28 -28
  14. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  15. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  16. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  17. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +24 -24
  18. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  19. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  20. package/docs/utilities/Display/examples/Display.css +8 -8
  21. package/docs/utilities/Display/examples/Display.md +7 -7
  22. package/docs/utilities/Flex/examples/Flex.css +5 -5
  23. package/docs/utilities/Flex/examples/Flex.md +82 -40
  24. package/docs/utilities/Float/examples/Float.css +2 -2
  25. package/docs/utilities/Float/examples/Float.md +6 -6
  26. package/docs/utilities/Sizing/examples/Sizing.css +4 -4
  27. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  28. package/docs/utilities/Spacing/examples/Spacing.css +1 -1
  29. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  30. package/docs/utilities/Text/examples/Text.md +53 -53
  31. package/package.json +1 -1
  32. package/patternfly-addons.css +91 -371
  33. package/patternfly-no-globals.css +133 -73
  34. package/patternfly-theme-dark-unversioned.css +133 -73
  35. package/patternfly.css +133 -73
  36. package/patternfly.min.css +1 -1
  37. package/patternfly.min.css.map +1 -1
  38. package/sass-utilities/mixins.scss +2 -2
  39. package/utilities/Alignment/alignment.css +24 -24
  40. package/utilities/Alignment/alignment.scss +4 -4
  41. package/utilities/BackgroundColor/BackgroundColor.css +0 -100
  42. package/utilities/BackgroundColor/BackgroundColor.scss +2 -8
  43. package/utilities/BoxShadow/box-shadow.css +15 -39
  44. package/utilities/BoxShadow/box-shadow.scss +17 -27
  45. package/utilities/Display/display.scss +2 -2
  46. package/utilities/Flex/flex.scss +18 -18
  47. package/utilities/Float/float.css +24 -24
  48. package/utilities/Float/float.scss +4 -4
  49. package/utilities/Sizing/sizing.css +28 -28
  50. package/utilities/Sizing/sizing.scss +17 -17
  51. package/utilities/Text/text.css +0 -155
  52. package/utilities/Text/text.scss +10 -16
  53. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  54. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  55. package/utilities/Text/themes/dark/text.css +0 -0
  56. package/utilities/Text/themes/dark/text.scss +0 -33
package/components/Table/table.css CHANGED
@@ -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