@patternfly/react-styles 5.0.0-alpha.12 → 5.0.0-alpha.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/assets/images/pf_logo.svg +11 -11
  3. package/css/components/Accordion/accordion.css +1 -1
  4. package/css/components/Alert/alert.css +7 -7
  5. package/css/components/AppLauncher/app-launcher.css +1 -0
  6. package/css/components/Badge/badge.css +1 -0
  7. package/css/components/Banner/banner.css +6 -8
  8. package/css/components/Banner/banner.d.ts +1 -5
  9. package/css/components/Banner/banner.js +1 -5
  10. package/css/components/Banner/banner.mjs +1 -5
  11. package/css/components/Button/button.css +4 -0
  12. package/css/components/CalendarMonth/calendar-month.css +3 -3
  13. package/css/components/Card/card.css +1 -1
  14. package/css/components/Content/content.css +1 -1
  15. package/css/components/DragDrop/drag-drop.css +23 -7
  16. package/css/components/DragDrop/drag-drop.d.ts +2 -1
  17. package/css/components/DragDrop/drag-drop.js +2 -1
  18. package/css/components/DragDrop/drag-drop.mjs +2 -1
  19. package/css/components/Dropdown/dropdown.css +2 -0
  20. package/css/components/DualListSelector/dual-list-selector.css +9 -3
  21. package/css/components/DualListSelector/dual-list-selector.d.ts +2 -1
  22. package/css/components/DualListSelector/dual-list-selector.js +2 -1
  23. package/css/components/DualListSelector/dual-list-selector.mjs +2 -1
  24. package/css/components/EmptyState/empty-state.css +1 -1
  25. package/css/components/FormControl/form-control.css +1 -1
  26. package/css/components/InputGroup/input-group.css +1 -1
  27. package/css/components/Label/label.css +6 -0
  28. package/css/components/Menu/menu.css +0 -1
  29. package/css/components/MenuToggle/menu-toggle.css +7 -5
  30. package/css/components/ModalBox/modal-box.css +1 -1
  31. package/css/components/Nav/nav.css +1 -1
  32. package/css/components/NotificationBadge/notification-badge.css +1 -0
  33. package/css/components/Panel/panel.css +6 -0
  34. package/css/components/Panel/panel.d.ts +2 -1
  35. package/css/components/Panel/panel.js +2 -1
  36. package/css/components/Panel/panel.mjs +2 -1
  37. package/css/components/Popover/popover.css +2 -2
  38. package/css/components/ProgressStepper/progress-stepper.css +1 -0
  39. package/css/components/Table/table-grid.css +380 -391
  40. package/css/components/Table/table-grid.d.ts +6 -1
  41. package/css/components/Table/table-grid.js +6 -1
  42. package/css/components/Table/table-grid.mjs +6 -1
  43. package/css/components/Table/table-tree-view.css +254 -254
  44. package/css/components/Table/table-tree-view.d.ts +5 -0
  45. package/css/components/Table/table-tree-view.js +5 -0
  46. package/css/components/Table/table-tree-view.mjs +5 -0
  47. package/css/components/Table/table.css +232 -232
  48. package/css/components/Table/table.d.ts +7 -0
  49. package/css/components/Table/table.js +7 -0
  50. package/css/components/Table/table.mjs +7 -0
  51. package/css/components/Tabs/tabs.css +1 -0
  52. package/css/components/TextInputGroup/text-input-group.css +8 -0
  53. package/css/components/TextInputGroup/text-input-group.d.ts +2 -1
  54. package/css/components/TextInputGroup/text-input-group.js +2 -1
  55. package/css/components/TextInputGroup/text-input-group.mjs +2 -1
  56. package/css/components/Title/title.css +1 -1
  57. package/css/components/ToggleGroup/toggle-group.css +3 -0
  58. package/css/components/Wizard/wizard.css +3 -5
  59. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  60. package/css/layouts/Flex/flex.css +60 -60
  61. package/css/layouts/Flex/flex.d.ts +18 -3
  62. package/css/layouts/Flex/flex.js +18 -3
  63. package/css/layouts/Flex/flex.mjs +18 -3
  64. package/css/layouts/Level/level.css +3 -3
  65. package/css/layouts/Split/split.css +3 -3
  66. package/css/layouts/Stack/stack.css +3 -3
  67. package/css/utilities/Text/text.css +10 -29
  68. package/css/utilities/Text/text.d.ts +5 -11
  69. package/css/utilities/Text/text.js +5 -11
  70. package/css/utilities/Text/text.mjs +5 -11
  71. package/package.json +3 -3
package/css/components/Table/table.css CHANGED
@@ -8,51 +8,51 @@
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
9
  }
10
10
 
11
- .pf-v5-c-table tr > * {
11
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > * {
12
12
  --pf-v5-hidden-visible--hidden--Display: none;
13
13
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
14
14
  display: var(--pf-v5-hidden-visible--Display);
15
15
  }
16
- .pf-v5-c-table tr > .pf-m-hidden {
16
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-hidden {
17
17
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
18
18
  }
19
19
  @media screen and (min-width: 576px) {
20
- .pf-v5-c-table tr > .pf-m-hidden-on-sm {
20
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-hidden-on-sm {
21
21
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
22
22
  }
23
- .pf-v5-c-table tr > .pf-m-visible-on-sm {
23
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-visible-on-sm {
24
24
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
25
25
  }
26
26
  }
27
27
  @media screen and (min-width: 768px) {
28
- .pf-v5-c-table tr > .pf-m-hidden-on-md {
28
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-hidden-on-md {
29
29
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
30
30
  }
31
- .pf-v5-c-table tr > .pf-m-visible-on-md {
31
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-visible-on-md {
32
32
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
33
33
  }
34
34
  }
35
35
  @media screen and (min-width: 992px) {
36
- .pf-v5-c-table tr > .pf-m-hidden-on-lg {
36
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-hidden-on-lg {
37
37
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
38
38
  }
39
- .pf-v5-c-table tr > .pf-m-visible-on-lg {
39
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-visible-on-lg {
40
40
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
41
41
  }
42
42
  }
43
43
  @media screen and (min-width: 1200px) {
44
- .pf-v5-c-table tr > .pf-m-hidden-on-xl {
44
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-hidden-on-xl {
45
45
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
46
46
  }
47
- .pf-v5-c-table tr > .pf-m-visible-on-xl {
47
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-visible-on-xl {
48
48
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
49
49
  }
50
50
  }
51
51
  @media screen and (min-width: 1450px) {
52
- .pf-v5-c-table tr > .pf-m-hidden-on-2xl {
52
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-hidden-on-2xl {
53
53
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
54
54
  }
55
- .pf-v5-c-table tr > .pf-m-visible-on-2xl {
55
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > .pf-m-visible-on-2xl {
56
56
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
57
57
  }
58
58
  }
@@ -61,19 +61,19 @@
61
61
  --pf-v5-c-table--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
62
62
  --pf-v5-c-table--BorderColor: var(--pf-v5-global--BorderColor--100);
63
63
  --pf-v5-c-table--border-width--base: var(--pf-v5-global--BorderWidth--sm);
64
- --pf-v5-c-table-caption--FontSize: var(--pf-v5-global--FontSize--sm);
65
- --pf-v5-c-table-caption--Color: var(--pf-v5-global--Color--200);
66
- --pf-v5-c-table-caption--PaddingTop: var(--pf-v5-global--spacer--md);
67
- --pf-v5-c-table-caption--PaddingRight: var(--pf-v5-global--spacer--lg);
68
- --pf-v5-c-table-caption--PaddingBottom: var(--pf-v5-global--spacer--md);
69
- --pf-v5-c-table-caption--PaddingLeft: var(--pf-v5-global--spacer--lg);
70
- --pf-v5-c-table-caption--xl--PaddingRight: var(--pf-v5-global--spacer--md);
71
- --pf-v5-c-table-caption--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
72
- --pf-v5-c-table--thead--cell--FontSize: var(--pf-v5-global--FontSize--sm);
73
- --pf-v5-c-table--thead--cell--FontWeight: var(--pf-v5-global--FontWeight--bold);
74
- --pf-v5-c-table--tbody--cell--PaddingTop: var(--pf-v5-global--spacer--lg);
75
- --pf-v5-c-table--tbody--cell--PaddingBottom: var(--pf-v5-global--spacer--lg);
76
- --pf-v5-c-table--tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
64
+ --pf-v5-c-table__caption--FontSize: var(--pf-v5-global--FontSize--sm);
65
+ --pf-v5-c-table__caption--Color: var(--pf-v5-global--Color--200);
66
+ --pf-v5-c-table__caption--PaddingTop: var(--pf-v5-global--spacer--md);
67
+ --pf-v5-c-table__caption--PaddingRight: var(--pf-v5-global--spacer--lg);
68
+ --pf-v5-c-table__caption--PaddingBottom: var(--pf-v5-global--spacer--md);
69
+ --pf-v5-c-table__caption--PaddingLeft: var(--pf-v5-global--spacer--lg);
70
+ --pf-v5-c-table__caption--xl--PaddingRight: var(--pf-v5-global--spacer--md);
71
+ --pf-v5-c-table__caption--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
72
+ --pf-v5-c-table__thead--cell--FontSize: var(--pf-v5-global--FontSize--sm);
73
+ --pf-v5-c-table__thead--cell--FontWeight: var(--pf-v5-global--FontWeight--bold);
74
+ --pf-v5-c-table__tbody--cell--PaddingTop: var(--pf-v5-global--spacer--lg);
75
+ --pf-v5-c-table__tbody--cell--PaddingBottom: var(--pf-v5-global--spacer--lg);
76
+ --pf-v5-c-table__tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
77
77
  --pf-v5-c-table--cell--Padding--base: var(--pf-v5-global--spacer--md);
78
78
  --pf-v5-c-table--cell--FontSize: var(--pf-v5-global--FontSize--md);
79
79
  --pf-v5-c-table--cell--FontWeight: var(--pf-v5-global--FontWeight--normal);
@@ -86,7 +86,7 @@
86
86
  --pf-v5-c-table--cell--first-last-child--PaddingRight: var(--pf-v5-global--spacer--md);
87
87
  --pf-v5-c-table--cell--first-last-child--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
88
88
  --pf-v5-c-table--cell--first-last-child--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
89
- --pf-v5-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-v5-c-table--cell--Padding--base);
89
+ --pf-v5-c-table__tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-v5-c-table--cell--Padding--base);
90
90
  --pf-v5-c-table--cell--MinWidth: 0;
91
91
  --pf-v5-c-table--cell--MaxWidth: none;
92
92
  --pf-v5-c-table--cell--Width: auto;
@@ -175,7 +175,7 @@
175
175
  --pf-v5-c-table__sort__button--hover__sort-indicator--Color: var(--pf-v5-global--Color--100);
176
176
  --pf-v5-c-table__sort__button--active__sort-indicator--Color: var(--pf-v5-global--Color--100);
177
177
  --pf-v5-c-table__sort__button--focus__sort-indicator--Color: var(--pf-v5-global--Color--100);
178
- --pf-v5-c-table--th--m-help--MinWidth: 11ch;
178
+ --pf-v5-c-table__th--m-help--MinWidth: 11ch;
179
179
  --pf-v5-c-table__column-help--MarginLeft: var(--pf-v5-global--spacer--xs);
180
180
  --pf-v5-c-table__column-help--TranslateY: 0.125rem;
181
181
  --pf-v5-c-table__column-help--c-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
@@ -197,8 +197,8 @@
197
197
  --pf-v5-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
198
198
  --pf-v5-c-table__compound-expansion-toggle__button--after--Top: calc(var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
199
199
  --pf-v5-c-table__compound-expansion-toggle__button--after--Left: calc(var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
200
- --pf-v5-c-table--m-compact-th--PaddingTop: calc(var(--pf-v5-global--spacer--sm) + var(--pf-v5-global--spacer--xs));
201
- --pf-v5-c-table--m-compact-th--PaddingBottom: var(--pf-v5-global--spacer--sm);
200
+ --pf-v5-c-table--m-compact__th--PaddingTop: calc(var(--pf-v5-global--spacer--sm) + var(--pf-v5-global--spacer--xs));
201
+ --pf-v5-c-table--m-compact__th--PaddingBottom: var(--pf-v5-global--spacer--sm);
202
202
  --pf-v5-c-table--m-compact--cell--PaddingTop: var(--pf-v5-global--spacer--sm);
203
203
  --pf-v5-c-table--m-compact--cell--PaddingRight: var(--pf-v5-global--spacer--sm);
204
204
  --pf-v5-c-table--m-compact--cell--PaddingBottom: var(--pf-v5-global--spacer--sm);
@@ -215,50 +215,50 @@
215
215
  --pf-v5-c-table--nested--first-last-child--PaddingRight: var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft);
216
216
  --pf-v5-c-table--nested--first-last-child--PaddingLeft: var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingRight);
217
217
  --pf-v5-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
218
- --pf-v5-c-table--tr--m-clickable--BoxShadow--top: var(--pf-v5-c-table--tr--BoxShadow--top--base);
219
- --pf-v5-c-table--tr--m-clickable--BackgroundColor: transparent;
220
- --pf-v5-c-table--tr--m-clickable--BoxShadow: none;
221
- --pf-v5-c-table--tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
222
- --pf-v5-c-table--tr--m-clickable--hover--BoxShadow: var(--pf-v5-c-table--tr--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
223
- --pf-v5-c-table--tr--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
224
- --pf-v5-c-table--tr--m-clickable--focus--BoxShadow: var(--pf-v5-c-table--tr--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
225
- --pf-v5-c-table--tr--m-clickable--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
226
- --pf-v5-c-table--tr--m-clickable--active--BoxShadow: var(--pf-v5-c-table--tr--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
227
- --pf-v5-c-table--tr--m-clickable--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
228
- --pf-v5-c-table--tr--m-clickable--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
229
- --pf-v5-c-table--tr--m-selected--BoxShadow--top: var(--pf-v5-c-table--tr--BoxShadow--top--base);
230
- --pf-v5-c-table--tr--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
231
- --pf-v5-c-table--tr--m-selected--BoxShadow: var(--pf-v5-c-table--tr--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
232
- --pf-v5-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
233
- --pf-v5-c-table--tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-v5-c-table__expandable-row--after--border-width--base));
234
- --pf-v5-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-v5-global--active-color--100);
235
- --pf-v5-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
236
- --pf-v5-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
237
- --pf-v5-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-v5-c-table--tr--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
238
- --pf-v5-c-table--tbody--m-clickable--BoxShadow--top: var(--pf-v5-c-table--tr--BoxShadow--top--base);
239
- --pf-v5-c-table--tbody--m-clickable--BoxShadow: none;
240
- --pf-v5-c-table--tbody--m-clickable--BackgroundColor: transparent;
241
- --pf-v5-c-table--tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
242
- --pf-v5-c-table--tbody--m-clickable--hover--BoxShadow: var(--pf-v5-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
243
- --pf-v5-c-table--tbody--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
244
- --pf-v5-c-table--tbody--m-clickable--focus--BoxShadow: var(--pf-v5-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
245
- --pf-v5-c-table--tbody--m-clickable--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
246
- --pf-v5-c-table--tbody--m-clickable--active--BoxShadow: var(--pf-v5-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
247
- --pf-v5-c-table--tbody--m-clickable--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
248
- --pf-v5-c-table--tbody--m-clickable--m-expanded--BorderColor: var(--pf-v5-global--active-color--400);
249
- --pf-v5-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
250
- --pf-v5-c-table--tbody--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
251
- --pf-v5-c-table--tbody--m-selected--BoxShadow--top: var(--pf-v5-c-table--tr--BoxShadow--top--base);
252
- --pf-v5-c-table--tbody--m-selected--BoxShadow: var(--pf-v5-c-table--tbody--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
253
- --pf-v5-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
254
- --pf-v5-c-table--tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-v5-c-table__expandable-row--after--border-width--base));
255
- --pf-v5-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-v5-global--active-color--100);
256
- --pf-v5-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
257
- --pf-v5-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
258
- --pf-v5-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow: var(--pf-v5-c-table--tr--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
259
- --pf-v5-c-table--thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
260
- --pf-v5-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-v5-global--spacer--xs);
261
- --pf-v5-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-v5-global--spacer--xs);
218
+ --pf-v5-c-table__tr--m-clickable--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
219
+ --pf-v5-c-table__tr--m-clickable--BackgroundColor: transparent;
220
+ --pf-v5-c-table__tr--m-clickable--BoxShadow: none;
221
+ --pf-v5-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
222
+ --pf-v5-c-table__tr--m-clickable--hover--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
223
+ --pf-v5-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
224
+ --pf-v5-c-table__tr--m-clickable--focus--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
225
+ --pf-v5-c-table__tr--m-clickable--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
226
+ --pf-v5-c-table__tr--m-clickable--active--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
227
+ --pf-v5-c-table__tr--m-clickable--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
228
+ --pf-v5-c-table__tr--m-clickable--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
229
+ --pf-v5-c-table__tr--m-selected--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
230
+ --pf-v5-c-table__tr--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
231
+ --pf-v5-c-table__tr--m-selected--BoxShadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
232
+ --pf-v5-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
233
+ --pf-v5-c-table__tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-v5-c-table__expandable-row--after--border-width--base));
234
+ --pf-v5-c-table__tr--m-selected--after--BorderLeftColor: var(--pf-v5-global--active-color--100);
235
+ --pf-v5-c-table__tr--m-selected--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
236
+ --pf-v5-c-table__tr--m-selected--hover__tr--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
237
+ --pf-v5-c-table__tr--m-selected__tr--m-selected--hover--BoxShadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
238
+ --pf-v5-c-table__tbody--m-clickable--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
239
+ --pf-v5-c-table__tbody--m-clickable--BoxShadow: none;
240
+ --pf-v5-c-table__tbody--m-clickable--BackgroundColor: transparent;
241
+ --pf-v5-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
242
+ --pf-v5-c-table__tbody--m-clickable--hover--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
243
+ --pf-v5-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
244
+ --pf-v5-c-table__tbody--m-clickable--focus--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
245
+ --pf-v5-c-table__tbody--m-clickable--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
246
+ --pf-v5-c-table__tbody--m-clickable--active--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
247
+ --pf-v5-c-table__tbody--m-clickable--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
248
+ --pf-v5-c-table__tbody--m-clickable--m-expanded--BorderColor: var(--pf-v5-global--active-color--400);
249
+ --pf-v5-c-table__tbody--m-clickable--m-selected--hover__tr--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
250
+ --pf-v5-c-table__tbody--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
251
+ --pf-v5-c-table__tbody--m-selected--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
252
+ --pf-v5-c-table__tbody--m-selected--BoxShadow: var(--pf-v5-c-table__tbody--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
253
+ --pf-v5-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
254
+ --pf-v5-c-table__tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-v5-c-table__expandable-row--after--border-width--base));
255
+ --pf-v5-c-table__tbody--m-selected--after--BorderLeftColor: var(--pf-v5-global--active-color--100);
256
+ --pf-v5-c-table__tbody--m-selected--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
257
+ --pf-v5-c-table__tbody--m-selected--hover__tbody--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
258
+ --pf-v5-c-table__tbody--m-selected__tbody--m-selected--hover--BoxShadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
259
+ --pf-v5-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
260
+ --pf-v5-c-table__thead--m-nested-column-header__tr--PaddingTop: var(--pf-v5-global--spacer--xs);
261
+ --pf-v5-c-table__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-v5-global--spacer--xs);
262
262
  --pf-v5-c-table__subhead--Color: var(--pf-v5-global--Color--200);
263
263
  --pf-v5-c-table--m-striped__tr--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
264
264
  --pf-v5-c-table--m-sticky-header--cell--ZIndex: var(--pf-v5-global--ZIndex--xs);
@@ -268,8 +268,8 @@
268
268
  }
269
269
  @media screen and (max-width: 1200px) {
270
270
  .pf-v5-c-table {
271
- --pf-v5-c-table-caption--PaddingRight: var(--pf-v5-c-table-caption--xl--PaddingRight);
272
- --pf-v5-c-table-caption--PaddingLeft: var(--pf-v5-c-table-caption--xl--PaddingLeft);
271
+ --pf-v5-c-table__caption--PaddingRight: var(--pf-v5-c-table__caption--xl--PaddingRight);
272
+ --pf-v5-c-table__caption--PaddingLeft: var(--pf-v5-c-table__caption--xl--PaddingLeft);
273
273
  }
274
274
  }
275
275
  @media screen and (min-width: 1200px) {
@@ -286,18 +286,18 @@
286
286
  .pf-v5-c-table.pf-m-sticky-header {
287
287
  position: relative;
288
288
  }
289
- .pf-v5-c-table.pf-m-sticky-header > thead > tr {
289
+ .pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) {
290
290
  border-bottom: 0;
291
291
  }
292
- .pf-v5-c-table.pf-m-sticky-header > thead > tr > * {
292
+ .pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) > * {
293
293
  z-index: var(--pf-v5-c-table--m-sticky-header--cell--ZIndex);
294
294
  }
295
- .pf-v5-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
295
+ .pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > * {
296
296
  position: sticky;
297
297
  top: 0;
298
298
  background: var(--pf-v5-c-table--BackgroundColor);
299
299
  }
300
- .pf-v5-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > *::after {
300
+ .pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > *::after {
301
301
  position: absolute;
302
302
  right: 0;
303
303
  bottom: 0;
@@ -315,32 +315,32 @@
315
315
  height: var(--pf-v5-c-table--border-width--base);
316
316
  background-color: var(--pf-v5-c-table--BorderColor);
317
317
  }
318
- .pf-v5-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) th:not([rowspan]),
319
- .pf-v5-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) td:not([rowspan]) {
320
- --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--thead--m-nested-column-header--tr--PaddingBottom);
318
+ .pf-v5-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:nth-last-child(2)) th:where(.pf-v5-c-table__th):not([rowspan]),
319
+ .pf-v5-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:nth-last-child(2)) td:where(.pf-v5-c-table__td):not([rowspan]) {
320
+ --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table__thead--m-nested-column-header__tr--PaddingBottom);
321
321
  }
322
- .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) {
322
+ .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) {
323
323
  border-bottom: 0;
324
324
  }
325
- .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
326
- .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
327
- --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--thead--m-nested-column-header--tr--PaddingBottom);
325
+ .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) th:where(.pf-v5-c-table__th):not([rowspan]),
326
+ .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) td:where(.pf-v5-c-table__td):not([rowspan]) {
327
+ --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table__thead--m-nested-column-header__tr--PaddingBottom);
328
328
  }
329
- .pf-v5-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-v5-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-v5-c-table__expandable-row),
329
+ .pf-v5-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr):nth-child(odd), .pf-v5-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v5-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row),
330
330
  .pf-v5-c-table > .pf-m-striped > tr:nth-child(odd),
331
331
  .pf-v5-c-table > .pf-m-striped-even > tr:nth-child(even),
332
- .pf-v5-c-table tr.pf-m-striped {
332
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-striped {
333
333
  --pf-v5-c-table__sticky-column--BackgroundColor: var(--pf-v5-c-table--m-striped__tr--BackgroundColor);
334
334
  background: var(--pf-v5-c-table--m-striped__tr--BackgroundColor);
335
335
  }
336
- .pf-v5-c-table tr:not(.pf-v5-c-table__expandable-row) {
336
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
337
337
  border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
338
338
  }
339
- .pf-v5-c-table tr:not(.pf-v5-c-table__expandable-row).pf-m-ghost-row {
339
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row).pf-m-ghost-row {
340
340
  background-color: var(--pf-v5-c-table__tr--m-ghost-row--BackgroundColor);
341
341
  opacity: var(--pf-v5-c-table__tr--m-ghost-row--Opacity);
342
342
  }
343
- .pf-v5-c-table tr > * {
343
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > * {
344
344
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-table--cell--hidden-visible--Display);
345
345
  position: relative;
346
346
  width: var(--pf-v5-c-table--cell--Width);
@@ -355,30 +355,30 @@
355
355
  word-break: var(--pf-v5-c-table--cell--WordBreak);
356
356
  white-space: var(--pf-v5-c-table--cell--WhiteSpace);
357
357
  }
358
- .pf-v5-c-table tr > *:first-child {
358
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
359
359
  --pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table--cell--first-last-child--PaddingLeft);
360
360
  }
361
- .pf-v5-c-table tr > *:last-child {
361
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:last-child {
362
362
  --pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table--cell--first-last-child--PaddingRight);
363
363
  }
364
- .pf-v5-c-table tr > *.pf-m-center {
364
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-center {
365
365
  text-align: center;
366
366
  }
367
- .pf-v5-c-table tr > *:empty {
367
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:empty {
368
368
  width: auto;
369
369
  min-width: 0;
370
370
  padding: 0;
371
371
  }
372
- .pf-v5-c-table tr > *.pf-m-help {
372
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-help {
373
373
  --pf-v5-c-table--cell--MinWidth: var(--pf-v5-c-table--cell--m-help--MinWidth);
374
374
  }
375
- .pf-v5-c-table tr > *.pf-m-favorite {
375
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-favorite {
376
376
  --pf-v5-c-table__button--Color: var(--pf-v5-c-table--cell--m-favorite--Color);
377
377
  --pf-v5-c-table__sort--MinWidth: fit-content;
378
378
  --pf-v5-c-table--cell--MaxWidth: fit-content;
379
379
  --pf-v5-c-table--cell--Overflow: visible;
380
380
  }
381
- .pf-v5-c-table tr > *.pf-m-border-right::before, .pf-v5-c-table tr > *.pf-m-border-left::before {
381
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before, .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
382
382
  position: absolute;
383
383
  top: 0;
384
384
  right: 0;
@@ -387,55 +387,55 @@
387
387
  pointer-events: none;
388
388
  content: "";
389
389
  }
390
- .pf-v5-c-table tr > *.pf-m-border-right::before {
390
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before {
391
391
  border-right: var(--pf-v5-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-v5-c-table--cell--m-border-right--before--BorderRightColor);
392
392
  }
393
- .pf-v5-c-table tr > *.pf-m-border-left::before {
393
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
394
394
  border-left: var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftColor);
395
395
  }
396
- .pf-v5-c-table caption {
397
- padding-top: var(--pf-v5-c-table-caption--PaddingTop);
398
- padding-bottom: var(--pf-v5-c-table-caption--PaddingBottom);
399
- padding-left: var(--pf-v5-c-table-caption--PaddingLeft);
400
- font-size: var(--pf-v5-c-table-caption--FontSize);
401
- color: var(--pf-v5-c-table-caption--Color);
396
+ .pf-v5-c-table caption:where(.pf-v5-c-table__caption) {
397
+ padding-top: var(--pf-v5-c-table__caption--PaddingTop);
398
+ padding-bottom: var(--pf-v5-c-table__caption--PaddingBottom);
399
+ padding-left: var(--pf-v5-c-table__caption--PaddingLeft);
400
+ font-size: var(--pf-v5-c-table__caption--FontSize);
401
+ color: var(--pf-v5-c-table__caption--Color);
402
402
  text-align: left;
403
403
  background-color: var(--pf-v5-c-table--BackgroundColor);
404
404
  }
405
- .pf-v5-c-table thead {
406
- --pf-v5-c-table--cell--FontSize: var(--pf-v5-c-table--thead--cell--FontSize);
407
- --pf-v5-c-table--cell--FontWeight: var(--pf-v5-c-table--thead--cell--FontWeight);
405
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead) {
406
+ --pf-v5-c-table--cell--FontSize: var(--pf-v5-c-table__thead--cell--FontSize);
407
+ --pf-v5-c-table--cell--FontWeight: var(--pf-v5-c-table__thead--cell--FontWeight);
408
408
  vertical-align: bottom;
409
409
  }
410
- .pf-v5-c-table thead.pf-m-nested-column-header button {
411
- outline-offset: var(--pf-v5-c-table--thead--m-nested-column-header--button--OutlineOffset);
410
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-nested-column-header button:where(.pf-v5-c-button) {
411
+ outline-offset: var(--pf-v5-c-table__thead--m-nested-column-header--button--OutlineOffset);
412
412
  }
413
- .pf-v5-c-table thead.pf-m-nested-column-header th,
414
- .pf-v5-c-table thead.pf-m-nested-column-header td,
415
- .pf-v5-c-table thead.pf-m-nested-column-header input {
413
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-nested-column-header th:where(.pf-v5-c-table__th),
414
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-nested-column-header td:where(.pf-v5-c-table__td),
415
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-nested-column-header input:where(.pf-v5-c-check__input) {
416
416
  vertical-align: middle;
417
417
  }
418
- .pf-v5-c-table thead.pf-m-nested-column-header .pf-v5-c-table__check label {
418
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-nested-column-header .pf-v5-c-table__check label {
419
419
  display: flex;
420
420
  align-items: center;
421
421
  }
422
- .pf-v5-c-table thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan]),
423
- .pf-v5-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
424
- --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--thead--m-nested-column-header--tr--PaddingTop);
422
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:first-child) th:where(.pf-v5-c-table__th):not([rowspan]),
423
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:first-child) td:where(.pf-v5-c-table__td):not([rowspan]) {
424
+ --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table__thead--m-nested-column-header__tr--PaddingTop);
425
425
  }
426
- .pf-v5-c-table thead .pf-v5-c-table__subhead {
426
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead) .pf-v5-c-table__subhead {
427
427
  --pf-v5-c-table__sort__button__text--Color: var(--pf-v5-c-table__subhead--Color);
428
428
  color: var(--pf-v5-c-table__subhead--Color);
429
429
  }
430
- .pf-v5-c-table tbody {
431
- --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--tbody--cell--PaddingTop);
432
- --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--tbody--cell--PaddingBottom);
430
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) {
431
+ --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table__tbody--cell--PaddingTop);
432
+ --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table__tbody--cell--PaddingBottom);
433
433
  }
434
- .pf-v5-c-table tbody > tr > * {
434
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > * {
435
435
  overflow-wrap: break-word;
436
436
  vertical-align: baseline;
437
437
  }
438
- .pf-v5-c-table tbody > tr > :first-child::after {
438
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
439
439
  position: absolute;
440
440
  top: var(--pf-v5-c-table__expandable-row--after--Top);
441
441
  bottom: var(--pf-v5-c-table__expandable-row--after--Bottom);
@@ -444,11 +444,11 @@
444
444
  background-color: transparent;
445
445
  border-left: var(--pf-v5-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-v5-c-table__expandable-row--after--BorderColor);
446
446
  }
447
- .pf-v5-c-table tbody .pf-v5-c-table__check input {
447
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__check input:where(.pf-v5-c-check__input) {
448
448
  margin-top: var(--pf-v5-c-table__check--input--MarginTop);
449
449
  vertical-align: top;
450
450
  }
451
- .pf-v5-c-table tbody.pf-m-expanded > :first-child:not(.pf-v5-c-table__control-row) {
451
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > :first-child:not(.pf-v5-c-table__control-row) {
452
452
  border-bottom-width: 0;
453
453
  }
454
454
  .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:first-child, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:last-child {
@@ -457,33 +457,32 @@
457
457
  .pf-v5-c-table .pf-v5-c-table__sort {
458
458
  min-width: var(--pf-v5-c-table__sort--MinWidth);
459
459
  }
460
- .pf-v5-c-table .pf-m-help {
461
- min-width: var(--pf-v5-c-table--th--m-help--MinWidth);
460
+ .pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td).pf-m-help {
461
+ min-width: var(--pf-v5-c-table__th--m-help--MinWidth);
462
462
  }
463
- .pf-v5-c-table thead,
464
- .pf-v5-c-table .pf-m-truncate {
463
+ .pf-v5-c-table > thead, .pf-v5-c-table :where([class*=pf-v5-c-table]).pf-m-truncate, :where(.pf-v5-c-table) > :is(thead, tbody).pf-m-truncate {
465
464
  --pf-v5-c-table--cell--MinWidth: var(--pf-v5-c-table--m-truncate--cell--MinWidth);
466
465
  --pf-v5-c-table--cell--MaxWidth: var(--pf-v5-c-table--m-truncate--cell--MaxWidth);
467
466
  --pf-v5-c-table--cell--Overflow: hidden;
468
467
  --pf-v5-c-table--cell--TextOverflow: ellipsis;
469
468
  --pf-v5-c-table--cell--WhiteSpace: nowrap;
470
469
  }
471
- .pf-v5-c-table .pf-m-wrap {
470
+
471
+ .pf-v5-c-table :where([class*=pf-v5-c-table]).pf-m-wrap, :where(.pf-v5-c-table) > :is(thead, tbody).pf-m-wrap {
472
472
  --pf-v5-c-table--cell--MinWidth: 0;
473
473
  --pf-v5-c-table--cell--MaxWidth: none;
474
474
  --pf-v5-c-table--cell--Overflow: visible;
475
475
  --pf-v5-c-table--cell--TextOverflow: clip;
476
476
  --pf-v5-c-table--cell--WhiteSpace: normal;
477
477
  }
478
- .pf-v5-c-table .pf-m-nowrap {
478
+ .pf-v5-c-table :where([class*=pf-v5-c-table]).pf-m-nowrap, :where(.pf-v5-c-table) > :is(thead, tbody).pf-m-nowrap {
479
479
  --pf-v5-c-table--cell--MinWidth: 0;
480
480
  --pf-v5-c-table--cell--MaxWidth: none;
481
481
  --pf-v5-c-table--cell--Overflow: visible;
482
482
  --pf-v5-c-table--cell--TextOverflow: clip;
483
483
  --pf-v5-c-table--cell--WhiteSpace: nowrap;
484
484
  }
485
- .pf-v5-c-table .pf-v5-c-table__icon,
486
- .pf-v5-c-table .pf-m-fit-content {
485
+ .pf-v5-c-table :where([class*=pf-v5-c-table]) .pf-v5-c-table__icon, .pf-v5-c-table :where([class*=pf-v5-c-table]).pf-m-fit-content, :where(.pf-v5-c-table) > :is(thead, tbody) .pf-v5-c-table__icon, :where(.pf-v5-c-table) > :is(thead, tbody).pf-m-fit-content {
487
486
  --pf-v5-c-table--cell--MinWidth: fit-content;
488
487
  --pf-v5-c-table--cell--MaxWidth: none;
489
488
  --pf-v5-c-table--cell--Width: 1%;
@@ -491,105 +490,105 @@
491
490
  --pf-v5-c-table--cell--TextOverflow: clip;
492
491
  --pf-v5-c-table--cell--WhiteSpace: nowrap;
493
492
  }
494
- .pf-v5-c-table .pf-m-break-word {
493
+ .pf-v5-c-table :where([class*=pf-v5-c-table]).pf-m-break-word, :where(.pf-v5-c-table) > :is(thead, tbody).pf-m-break-word {
495
494
  --pf-v5-c-table--cell--WordBreak: break-word;
496
495
  --pf-v5-c-table--cell--WhiteSpace: normal;
497
496
  }
498
- .pf-v5-c-table.pf-m-no-border-rows > tbody > tr {
497
+ .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) {
499
498
  border-bottom: 0;
500
499
  }
501
- .pf-v5-c-table.pf-m-no-border-rows > tbody > tr > :first-child::after {
500
+ .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
502
501
  border-left: 0;
503
502
  }
504
- .pf-v5-c-table.pf-m-no-border-rows > tbody:not(.pf-m-expanded) .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
503
+ .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody):not(.pf-m-expanded) .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
505
504
  display: none;
506
505
  }
507
- .pf-v5-c-table.pf-m-no-border-rows > tbody.pf-m-expanded > .pf-v5-c-table__control-row {
506
+ .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > .pf-v5-c-table__control-row {
508
507
  border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
509
508
  }
510
- .pf-v5-c-table.pf-m-no-border-rows > tbody .pf-v5-c-table__control-row > .pf-v5-c-table__compound-expansion-toggle:first-child > ::before {
509
+ .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__control-row > .pf-v5-c-table__compound-expansion-toggle:first-child > ::before {
511
510
  border-left-width: 0;
512
511
  }
513
- .pf-v5-c-table tr.pf-m-clickable {
512
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable {
514
513
  cursor: pointer;
515
- background-color: var(--pf-v5-c-table--tr--m-clickable--BackgroundColor);
516
- outline-offset: var(--pf-v5-c-table--tr--m-clickable--OutlineOffset);
517
- box-shadow: var(--pf-v5-c-table--tr--m-clickable--BoxShadow);
514
+ background-color: var(--pf-v5-c-table__tr--m-clickable--BackgroundColor);
515
+ outline-offset: var(--pf-v5-c-table__tr--m-clickable--OutlineOffset);
516
+ box-shadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow);
518
517
  }
519
- .pf-v5-c-table tr.pf-m-clickable:hover:not(.pf-m-selected) + tr.pf-m-selected, .pf-v5-c-table tr.pf-m-clickable:focus:not(.pf-m-selected) + tr.pf-m-selected, .pf-v5-c-table tr.pf-m-clickable:active:not(.pf-m-selected) + tr.pf-m-selected {
520
- box-shadow: var(--pf-v5-c-table--tr--m-clickable--m-selected--BoxShadow);
518
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:hover:not(.pf-m-selected) + tr:where(.pf-v5-c-table__tr).pf-m-selected, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:focus:not(.pf-m-selected) + tr:where(.pf-v5-c-table__tr).pf-m-selected, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:active:not(.pf-m-selected) + tr:where(.pf-v5-c-table__tr).pf-m-selected {
519
+ box-shadow: var(--pf-v5-c-table__tr--m-clickable--m-selected--BoxShadow);
521
520
  }
522
- .pf-v5-c-table tr.pf-m-clickable:hover {
523
- --pf-v5-c-table--tr--m-clickable--BoxShadow: var(--pf-v5-c-table--tr--m-clickable--hover--BoxShadow);
524
- --pf-v5-c-table--tr--m-clickable--BackgroundColor: var(--pf-v5-c-table--tr--m-clickable--hover--BackgroundColor);
521
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:hover {
522
+ --pf-v5-c-table__tr--m-clickable--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--hover--BoxShadow);
523
+ --pf-v5-c-table__tr--m-clickable--BackgroundColor: var(--pf-v5-c-table__tr--m-clickable--hover--BackgroundColor);
525
524
  }
526
- .pf-v5-c-table tr.pf-m-clickable:focus {
527
- --pf-v5-c-table--tr--m-clickable--BoxShadow: var(--pf-v5-c-table--tr--m-clickable--focus--BoxShadow);
528
- --pf-v5-c-table--tr--m-clickable--BackgroundColor: var(--pf-v5-c-table--tr--m-clickable--focus--BackgroundColor);
525
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:focus {
526
+ --pf-v5-c-table__tr--m-clickable--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--focus--BoxShadow);
527
+ --pf-v5-c-table__tr--m-clickable--BackgroundColor: var(--pf-v5-c-table__tr--m-clickable--focus--BackgroundColor);
529
528
  }
530
- .pf-v5-c-table tr.pf-m-clickable:active {
531
- --pf-v5-c-table--tr--m-clickable--BoxShadow: var(--pf-v5-c-table--tr--m-clickable--active--BoxShadow);
532
- --pf-v5-c-table--tr--m-clickable--BackgroundColor: var(--pf-v5-c-table--tr--m-clickable--active--BackgroundColor);
529
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:active {
530
+ --pf-v5-c-table__tr--m-clickable--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--active--BoxShadow);
531
+ --pf-v5-c-table__tr--m-clickable--BackgroundColor: var(--pf-v5-c-table__tr--m-clickable--active--BackgroundColor);
533
532
  }
534
- .pf-v5-c-table tr.pf-m-selected {
535
- --pf-v5-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v5-c-table--tr--m-selected--after--BorderLeftWidth);
536
- --pf-v5-c-table__expandable-row--after--BorderColor: var(--pf-v5-c-table--tr--m-selected--after--BorderLeftColor);
533
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
534
+ --pf-v5-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
535
+ --pf-v5-c-table__expandable-row--after--BorderColor: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
537
536
  position: relative;
538
- background-color: var(--pf-v5-c-table--tr--m-selected--BackgroundColor);
539
- outline-offset: var(--pf-v5-c-table--tr--m-selected--OutlineOffset);
540
- box-shadow: var(--pf-v5-c-table--tr--m-selected--BoxShadow);
537
+ background-color: var(--pf-v5-c-table__tr--m-selected--BackgroundColor);
538
+ outline-offset: var(--pf-v5-c-table__tr--m-selected--OutlineOffset);
539
+ box-shadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow);
541
540
  }
542
- .pf-v5-c-table tr.pf-m-selected + tr.pf-m-selected {
543
- box-shadow: var(--pf-v5-c-table--tr--m-selected--m-selected--BoxShadow);
541
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected + tr:where(.pf-v5-c-table__tr).pf-m-selected {
542
+ box-shadow: var(--pf-v5-c-table__tr--m-selected--m-selected--BoxShadow);
544
543
  }
545
- .pf-v5-c-table tr.pf-m-selected + tr.pf-m-selected:hover {
546
- box-shadow: var(--pf-v5-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow);
544
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected + tr:where(.pf-v5-c-table__tr).pf-m-selected:hover {
545
+ box-shadow: var(--pf-v5-c-table__tr--m-selected__tr--m-selected--hover--BoxShadow);
547
546
  }
548
- .pf-v5-c-table tr.pf-m-selected:hover + tr.pf-m-selected {
549
- box-shadow: var(--pf-v5-c-table--tr--m-selected--hover--m-selected--BoxShadow);
547
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected:hover + tr:where(.pf-v5-c-table__tr).pf-m-selected {
548
+ box-shadow: var(--pf-v5-c-table__tr--m-selected--hover__tr--m-selected--BoxShadow);
550
549
  }
551
- .pf-v5-c-table tr.pf-m-first-cell-offset-reset {
552
- --pf-v5-c-table--cell--first-last-child--PaddingLeft: var(--pf-v5-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
550
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-first-cell-offset-reset {
551
+ --pf-v5-c-table--cell--first-last-child--PaddingLeft: var(--pf-v5-c-table__tr--m-first-cell-offset-reset--cell--PaddingLeft);
553
552
  }
554
- .pf-v5-c-table tbody.pf-m-clickable {
553
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-clickable {
555
554
  cursor: pointer;
556
- background-color: var(--pf-v5-c-table--tbody--m-clickable--BackgroundColor);
557
- outline-offset: var(--pf-v5-c-table--tbody--m-clickable--OutlineOffset);
558
- box-shadow: var(--pf-v5-c-table--tbody--m-clickable--BoxShadow);
555
+ background-color: var(--pf-v5-c-table__tbody--m-clickable--BackgroundColor);
556
+ outline-offset: var(--pf-v5-c-table__tbody--m-clickable--OutlineOffset);
557
+ box-shadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow);
559
558
  }
560
- .pf-v5-c-table tbody.pf-m-clickable.pf-m-expanded:not(.pf-m-selected) {
561
- --pf-v5-c-table__expandable-row--after--BorderColor: var(--pf-v5-c-table--tbody--m-clickable--m-expanded--BorderColor);
559
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-clickable.pf-m-expanded:not(.pf-m-selected) {
560
+ --pf-v5-c-table__expandable-row--after--BorderColor: var(--pf-v5-c-table__tbody--m-clickable--m-expanded--BorderColor);
562
561
  }
563
- .pf-v5-c-table tbody.pf-m-clickable:hover:not(.pf-m-selected) + tbody.pf-m-selected, .pf-v5-c-table tbody.pf-m-clickable:focus:not(.pf-m-selected) + tbody.pf-m-selected, .pf-v5-c-table tbody.pf-m-clickable:active:not(.pf-m-selected) + tbody.pf-m-selected {
564
- box-shadow: var(--pf-v5-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow);
562
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-clickable:hover:not(.pf-m-selected) + tbody:where(.pf-v5-c-table__tbody).pf-m-selected, .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-clickable:focus:not(.pf-m-selected) + tbody:where(.pf-v5-c-table__tbody).pf-m-selected, .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-clickable:active:not(.pf-m-selected) + tbody:where(.pf-v5-c-table__tbody).pf-m-selected {
563
+ box-shadow: var(--pf-v5-c-table__tbody--m-clickable--m-selected--hover__tr--BoxShadow);
565
564
  }
566
- .pf-v5-c-table tbody.pf-m-clickable:hover {
567
- --pf-v5-c-table--tbody--m-clickable--BoxShadow: var(--pf-v5-c-table--tbody--m-clickable--hover--BoxShadow);
568
- --pf-v5-c-table--tbody--m-clickable--BackgroundColor: var(--pf-v5-c-table--tbody--m-clickable--hover--BackgroundColor);
565
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-clickable:hover {
566
+ --pf-v5-c-table__tbody--m-clickable--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--hover--BoxShadow);
567
+ --pf-v5-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v5-c-table__tbody--m-clickable--hover--BackgroundColor);
569
568
  }
570
- .pf-v5-c-table tbody.pf-m-clickable:focus {
571
- --pf-v5-c-table--tbody--m-clickable--BoxShadow: var(--pf-v5-c-table--tbody--m-clickable--focus--BoxShadow);
572
- --pf-v5-c-table--tbody--m-clickable--BackgroundColor: var(--pf-v5-c-table--tbody--m-clickable--focus--BackgroundColor);
569
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-clickable:focus {
570
+ --pf-v5-c-table__tbody--m-clickable--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--focus--BoxShadow);
571
+ --pf-v5-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v5-c-table__tbody--m-clickable--focus--BackgroundColor);
573
572
  }
574
- .pf-v5-c-table tbody.pf-m-clickable:active {
575
- --pf-v5-c-table--tbody--m-clickable--BoxShadow: var(--pf-v5-c-table--tbody--m-clickable--active--BoxShadow);
576
- --pf-v5-c-table--tbody--m-clickable--BackgroundColor: var(--pf-v5-c-table--tbody--m-clickable--active--BackgroundColor);
573
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-clickable:active {
574
+ --pf-v5-c-table__tbody--m-clickable--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--active--BoxShadow);
575
+ --pf-v5-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v5-c-table__tbody--m-clickable--active--BackgroundColor);
577
576
  }
578
- .pf-v5-c-table tbody.pf-m-selected {
579
- --pf-v5-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v5-c-table--tbody--m-selected--after--BorderLeftWidth);
580
- --pf-v5-c-table__expandable-row--after--BorderColor: var(--pf-v5-c-table--tbody--m-selected--after--BorderLeftColor);
581
- background-color: var(--pf-v5-c-table--tbody--m-selected--BackgroundColor);
582
- outline-offset: var(--pf-v5-c-table--tbody--m-selected--OutlineOffset);
583
- box-shadow: var(--pf-v5-c-table--tbody--m-selected--BoxShadow);
577
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-selected {
578
+ --pf-v5-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--m-selected--after--BorderLeftWidth);
579
+ --pf-v5-c-table__expandable-row--after--BorderColor: var(--pf-v5-c-table__tbody--m-selected--after--BorderLeftColor);
580
+ background-color: var(--pf-v5-c-table__tbody--m-selected--BackgroundColor);
581
+ outline-offset: var(--pf-v5-c-table__tbody--m-selected--OutlineOffset);
582
+ box-shadow: var(--pf-v5-c-table__tbody--m-selected--BoxShadow);
584
583
  }
585
- .pf-v5-c-table tbody.pf-m-selected + tbody.pf-m-selected {
586
- --pf-v5-c-table--tbody--m-selected--BoxShadow: var(--pf-v5-c-table--tbody--m-selected--m-selected--BoxShadow);
584
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-selected + tbody:where(.pf-v5-c-table__tbody).pf-m-selected {
585
+ --pf-v5-c-table__tbody--m-selected--BoxShadow: var(--pf-v5-c-table__tbody--m-selected--m-selected--BoxShadow);
587
586
  }
588
- .pf-v5-c-table tbody.pf-m-selected + tbody.pf-m-selected:hover {
589
- box-shadow: var(--pf-v5-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow);
587
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-selected + tbody:where(.pf-v5-c-table__tbody).pf-m-selected:hover {
588
+ box-shadow: var(--pf-v5-c-table__tbody--m-selected__tbody--m-selected--hover--BoxShadow);
590
589
  }
591
- .pf-v5-c-table tbody.pf-m-selected:hover + tbody.pf-m-selected {
592
- box-shadow: var(--pf-v5-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow);
590
+ .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-selected:hover + tbody:where(.pf-v5-c-table__tbody).pf-m-selected {
591
+ box-shadow: var(--pf-v5-c-table__tbody--m-selected--hover__tbody--m-selected--BoxShadow);
593
592
  }
594
593
  .pf-v5-c-table.pf-m-drag-over {
595
594
  overflow-anchor: none;
@@ -672,25 +671,25 @@
672
671
  .pf-v5-c-table__column-help .pf-v5-c-table__text {
673
672
  min-width: auto;
674
673
  }
675
- .pf-v5-c-table thead.pf-m-nowrap .pf-v5-c-table__button-content, .pf-v5-c-table tr.pf-m-nowrap .pf-v5-c-table__button-content, .pf-v5-c-table th.pf-m-nowrap .pf-v5-c-table__button-content,
676
- .pf-v5-c-table thead.pf-m-nowrap .pf-v5-c-table__column-help,
677
- .pf-v5-c-table tr.pf-m-nowrap .pf-v5-c-table__column-help,
678
- .pf-v5-c-table th.pf-m-nowrap .pf-v5-c-table__column-help {
674
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-nowrap .pf-v5-c-table__button-content, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-nowrap .pf-v5-c-table__button-content, .pf-v5-c-table th:where(.pf-v5-c-table__th).pf-m-nowrap .pf-v5-c-table__button-content,
675
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-nowrap .pf-v5-c-table__column-help,
676
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-nowrap .pf-v5-c-table__column-help,
677
+ .pf-v5-c-table th:where(.pf-v5-c-table__th).pf-m-nowrap .pf-v5-c-table__column-help {
679
678
  grid-template-columns: min-content max-content;
680
679
  }
681
- .pf-v5-c-table thead.pf-m-fit-content .pf-v5-c-table__button-content, .pf-v5-c-table tr.pf-m-fit-content .pf-v5-c-table__button-content, .pf-v5-c-table th.pf-m-fit-content .pf-v5-c-table__button-content,
682
- .pf-v5-c-table thead.pf-m-fit-content .pf-v5-c-table__column-help,
683
- .pf-v5-c-table tr.pf-m-fit-content .pf-v5-c-table__column-help,
684
- .pf-v5-c-table th.pf-m-fit-content .pf-v5-c-table__column-help {
680
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-fit-content .pf-v5-c-table__button-content, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-fit-content .pf-v5-c-table__button-content, .pf-v5-c-table th:where(.pf-v5-c-table__th).pf-m-fit-content .pf-v5-c-table__button-content,
681
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-fit-content .pf-v5-c-table__column-help,
682
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-fit-content .pf-v5-c-table__column-help,
683
+ .pf-v5-c-table th:where(.pf-v5-c-table__th).pf-m-fit-content .pf-v5-c-table__column-help {
685
684
  grid-template-columns: fit-content max-content;
686
685
  }
687
- .pf-v5-c-table thead.pf-m-wrap .pf-v5-c-table__button-content, .pf-v5-c-table tr.pf-m-wrap .pf-v5-c-table__button-content, .pf-v5-c-table th.pf-m-wrap .pf-v5-c-table__button-content, .pf-v5-c-table thead.pf-m-truncate .pf-v5-c-table__button-content, .pf-v5-c-table tr.pf-m-truncate .pf-v5-c-table__button-content, .pf-v5-c-table th.pf-m-truncate .pf-v5-c-table__button-content,
688
- .pf-v5-c-table thead.pf-m-wrap .pf-v5-c-table__column-help,
689
- .pf-v5-c-table tr.pf-m-wrap .pf-v5-c-table__column-help,
690
- .pf-v5-c-table th.pf-m-wrap .pf-v5-c-table__column-help,
691
- .pf-v5-c-table thead.pf-m-truncate .pf-v5-c-table__column-help,
692
- .pf-v5-c-table tr.pf-m-truncate .pf-v5-c-table__column-help,
693
- .pf-v5-c-table th.pf-m-truncate .pf-v5-c-table__column-help {
686
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-wrap .pf-v5-c-table__button-content, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-wrap .pf-v5-c-table__button-content, .pf-v5-c-table th:where(.pf-v5-c-table__th).pf-m-wrap .pf-v5-c-table__button-content, .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-truncate .pf-v5-c-table__button-content, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-truncate .pf-v5-c-table__button-content, .pf-v5-c-table th:where(.pf-v5-c-table__th).pf-m-truncate .pf-v5-c-table__button-content,
687
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-wrap .pf-v5-c-table__column-help,
688
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-wrap .pf-v5-c-table__column-help,
689
+ .pf-v5-c-table th:where(.pf-v5-c-table__th).pf-m-wrap .pf-v5-c-table__column-help,
690
+ .pf-v5-c-table thead:where(.pf-v5-c-table__thead).pf-m-truncate .pf-v5-c-table__column-help,
691
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-truncate .pf-v5-c-table__column-help,
692
+ .pf-v5-c-table th:where(.pf-v5-c-table__th).pf-m-truncate .pf-v5-c-table__column-help {
694
693
  grid-template-columns: auto max-content;
695
694
  }
696
695
 
@@ -704,7 +703,7 @@
704
703
  .pf-v5-c-table .pf-v5-c-table__toggle,
705
704
  .pf-v5-c-table .pf-v5-c-table__action,
706
705
  .pf-v5-c-table .pf-v5-c-table__favorite,
707
- .pf-v5-c-table th.pf-m-favorite,
706
+ .pf-v5-c-table th:where(.pf-v5-c-table__th).pf-m-favorite,
708
707
  .pf-v5-c-table .pf-v5-c-table__inline-edit-action,
709
708
  .pf-v5-c-table .pf-v5-c-table__draggable {
710
709
  --pf-v5-c-table--cell--MinWidth: 0;
@@ -892,7 +891,7 @@
892
891
  color: var(--pf-v5-c-table__sort--m-selected__button--Color);
893
892
  }
894
893
  .pf-v5-c-table__sort.pf-m-help {
895
- --pf-v5-c-table--th--m-help--MinWidth: var(--pf-v5-c-table__sort--m-help--MinWidth);
894
+ --pf-v5-c-table__th--m-help--MinWidth: var(--pf-v5-c-table__sort--m-help--MinWidth);
896
895
  }
897
896
  .pf-v5-c-table__sort.pf-m-favorite {
898
897
  --pf-v5-c-table__sort__button__text--Color: var(--pf-v5-c-table__sort--m-favorite__button__text--Color);
@@ -917,15 +916,15 @@
917
916
  box-shadow: 0 0 0 0 transparent;
918
917
  }
919
918
  .pf-v5-c-table__expandable-row,
920
- .pf-v5-c-table__expandable-row td:first-child::after {
919
+ .pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td):first-child::after {
921
920
  transition: var(--pf-v5-c-table__expandable-row--Transition);
922
921
  }
923
- .pf-v5-c-table__expandable-row td.pf-m-no-padding,
924
- .pf-v5-c-table__expandable-row th.pf-m-no-padding {
922
+ .pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding,
923
+ .pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding {
925
924
  padding: 0 0 0 var(--pf-v5-c-table__expandable-row--after--border-width--base);
926
925
  }
927
- .pf-v5-c-table__expandable-row td.pf-m-no-padding .pf-v5-c-table__expandable-row-content,
928
- .pf-v5-c-table__expandable-row th.pf-m-no-padding .pf-v5-c-table__expandable-row-content {
926
+ .pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding .pf-v5-c-table__expandable-row-content,
927
+ .pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding .pf-v5-c-table__expandable-row-content {
929
928
  padding: 0;
930
929
  }
931
930
  .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
@@ -941,10 +940,10 @@
941
940
  display: none;
942
941
  }
943
942
 
944
- .pf-v5-c-table .pf-v5-c-table tr > *:first-child {
943
+ .pf-v5-c-table .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
945
944
  --pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table--nested--first-last-child--PaddingLeft);
946
945
  }
947
- .pf-v5-c-table .pf-v5-c-table tr > *:last-child {
946
+ .pf-v5-c-table .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:last-child {
948
947
  --pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table--nested--first-last-child--PaddingRight);
949
948
  }
950
949
 
@@ -954,25 +953,26 @@
954
953
  --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-compact--cell--PaddingBottom);
955
954
  --pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table--m-compact--cell--PaddingLeft);
956
955
  }
957
- .pf-v5-c-table.pf-m-compact tr {
956
+ .pf-v5-c-table.pf-m-compact tr:where(.pf-v5-c-table__tr) {
958
957
  --pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table--m-compact--cell--PaddingLeft);
959
958
  --pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table--m-compact--cell--PaddingRight);
960
959
  }
961
- .pf-v5-c-table.pf-m-compact tr:not(.pf-v5-c-table__expandable-row) {
960
+ .pf-v5-c-table.pf-m-compact tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
962
961
  --pf-v5-c-table--cell--FontSize: var(--pf-v5-c-table--m-compact--FontSize);
963
962
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-compact--cell--PaddingTop);
964
963
  --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-compact--cell--PaddingBottom);
965
964
  }
966
- .pf-v5-c-table.pf-m-compact tr:not(.pf-v5-c-table__expandable-row) > *:first-child {
965
+ .pf-v5-c-table.pf-m-compact tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
967
966
  --pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft);
968
967
  }
969
- .pf-v5-c-table.pf-m-compact tr:not(.pf-v5-c-table__expandable-row) > *:last-child {
968
+ .pf-v5-c-table.pf-m-compact tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:last-child {
970
969
  --pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingRight);
971
970
  }
972
- .pf-v5-c-table.pf-m-compact thead th,
973
- .pf-v5-c-table.pf-m-compact thead .pf-v5-c-table__toggle {
974
- --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-compact-th--PaddingTop);
975
- --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-compact-th--PaddingBottom);
971
+ .pf-v5-c-table.pf-m-compact thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th),
972
+ .pf-v5-c-table.pf-m-compact thead:where(.pf-v5-c-table__thead) td:where(.pf-v5-c-table__td),
973
+ .pf-v5-c-table.pf-m-compact thead:where(.pf-v5-c-table__thead) .pf-v5-c-table__toggle {
974
+ --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-compact__th--PaddingTop);
975
+ --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-compact__th--PaddingBottom);
976
976
  }
977
977
  .pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
978
978
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table__action--PaddingTop);
@@ -988,10 +988,10 @@
988
988
  min-width: 0;
989
989
  text-align: center;
990
990
  }
991
- .pf-v5-c-table .pf-v5-c-table.pf-m-compact tr > *:first-child {
991
+ .pf-v5-c-table .pf-v5-c-table.pf-m-compact tr:where(.pf-v5-c-table__tr) > *:first-child {
992
992
  --pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table--nested--first-last-child--PaddingLeft);
993
993
  }
994
- .pf-v5-c-table .pf-v5-c-table.pf-m-compact tr > *:last-child {
994
+ .pf-v5-c-table .pf-v5-c-table.pf-m-compact tr:where(.pf-v5-c-table__tr) > *:last-child {
995
995
  --pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table--nested--first-last-child--PaddingRight);
996
996
  }
997
997
  .pf-v5-c-table.pf-m-compact .pf-v5-c-table__expandable-row-content {