@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.30

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 (158) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/assets/images/img_avatar-rhds.svg +22 -0
  8. package/assets/images/pf-logo-avatar.jpg +0 -0
  9. package/base/patternfly-fonts.css +4 -4
  10. package/base/patternfly-fonts.scss +4 -4
  11. package/base/patternfly-variables.css +8 -6
  12. package/base/tokens/tokens-charts-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  14. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  15. package/base/tokens/tokens-charts.scss +1 -1
  16. package/base/tokens/tokens-dark.scss +1 -1
  17. package/base/tokens/tokens-default.scss +4 -4
  18. package/base/tokens/tokens-felt-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-glass.scss +3 -2
  21. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  22. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  23. package/base/tokens/tokens-felt.scss +1 -1
  24. package/base/tokens/tokens-glass-dark.scss +1 -1
  25. package/base/tokens/tokens-glass.scss +3 -2
  26. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  27. package/base/tokens/tokens-highcontrast.scss +4 -4
  28. package/base/tokens/tokens-palette.scss +1 -1
  29. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  30. package/components/AboutModalBox/about-modal-box.css +1 -1
  31. package/components/AboutModalBox/about-modal-box.scss +1 -1
  32. package/components/Accordion/accordion.css +3 -3
  33. package/components/Accordion/accordion.scss +3 -3
  34. package/components/Alert/alert.css +8 -7
  35. package/components/Alert/alert.scss +8 -7
  36. package/components/Avatar/avatar.css +144 -0
  37. package/components/Avatar/avatar.scss +161 -0
  38. package/components/Banner/banner.css +7 -0
  39. package/components/Banner/banner.scss +7 -0
  40. package/components/Breadcrumb/breadcrumb.css +3 -3
  41. package/components/Breadcrumb/breadcrumb.scss +3 -3
  42. package/components/Button/button.css +20 -4
  43. package/components/Button/button.scss +24 -5
  44. package/components/Card/card.css +4 -4
  45. package/components/Card/card.scss +4 -4
  46. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  47. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  48. package/components/DataList/data-list.css +5 -5
  49. package/components/DataList/data-list.scss +5 -5
  50. package/components/DragDrop/drag-drop.css +4 -0
  51. package/components/DragDrop/drag-drop.scss +4 -0
  52. package/components/DualListSelector/dual-list-selector.css +1 -1
  53. package/components/DualListSelector/dual-list-selector.scss +1 -1
  54. package/components/Form/form.scss +1 -0
  55. package/components/FormControl/form-control.css +12 -2
  56. package/components/FormControl/form-control.scss +14 -2
  57. package/components/Hint/hint.css +2 -2
  58. package/components/Hint/hint.scss +2 -2
  59. package/components/Label/label.css +9 -3
  60. package/components/Label/label.scss +9 -3
  61. package/components/Masthead/masthead.css +1 -1
  62. package/components/Masthead/masthead.scss +1 -1
  63. package/components/Menu/menu.css +2 -2
  64. package/components/Menu/menu.scss +3 -3
  65. package/components/MenuToggle/menu-toggle.css +3 -0
  66. package/components/MenuToggle/menu-toggle.scss +4 -1
  67. package/components/ModalBox/modal-box.css +4 -4
  68. package/components/ModalBox/modal-box.scss +5 -5
  69. package/components/Nav/nav.css +2 -2
  70. package/components/Nav/nav.scss +2 -2
  71. package/components/NotificationDrawer/notification-drawer.css +3 -3
  72. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  73. package/components/Page/page.css +25 -22
  74. package/components/Page/page.scss +28 -28
  75. package/components/Pagination/pagination.css +12 -7
  76. package/components/Pagination/pagination.scss +15 -12
  77. package/components/Panel/panel.css +1 -1
  78. package/components/Panel/panel.scss +2 -2
  79. package/components/Popover/popover.css +1 -1
  80. package/components/Popover/popover.scss +1 -1
  81. package/components/Progress/progress.css +2 -2
  82. package/components/Progress/progress.scss +2 -2
  83. package/components/Sidebar/sidebar.css +4 -7
  84. package/components/Sidebar/sidebar.scss +9 -9
  85. package/components/Table/table-grid.css +25 -13
  86. package/components/Table/table-grid.scss +10 -5
  87. package/components/Table/table-tree-view.css +3 -0
  88. package/components/Table/table-tree-view.scss +2 -0
  89. package/components/Table/table.css +55 -21
  90. package/components/Table/table.scss +82 -34
  91. package/components/Tabs/tabs.css +19 -5
  92. package/components/Tabs/tabs.scss +22 -5
  93. package/components/Title/title.css +1 -1
  94. package/components/Title/title.scss +1 -1
  95. package/components/Tooltip/tooltip.css +1 -1
  96. package/components/Tooltip/tooltip.scss +1 -1
  97. package/components/TreeView/tree-view.css +7 -7
  98. package/components/TreeView/tree-view.scss +7 -7
  99. package/components/Wizard/wizard.css +4 -4
  100. package/components/Wizard/wizard.scss +4 -4
  101. package/components/_index.css +399 -140
  102. package/docs/components/Avatar/examples/Avatar.css +6 -0
  103. package/docs/components/Avatar/examples/Avatar.md +414 -40
  104. package/docs/components/Button/examples/Button.md +2 -2
  105. package/docs/components/CodeEditor/examples/CodeEditor.md +131 -47
  106. package/docs/components/DataList/examples/DataList.md +143 -11
  107. package/docs/components/DatePicker/examples/DatePicker.md +26 -2
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +115 -55
  109. package/docs/components/Drawer/examples/Drawer.md +1 -1
  110. package/docs/components/DualListSelector/examples/DualListSelector.md +355 -139
  111. package/docs/components/EmptyState/examples/EmptyState.md +12 -12
  112. package/docs/components/FileUpload/examples/FileUpload.md +26 -2
  113. package/docs/components/Form/examples/Form.md +140 -16
  114. package/docs/components/FormControl/examples/FormControl.md +260 -20
  115. package/docs/components/HelperText/examples/HelperText.md +139 -11
  116. package/docs/components/Icon/examples/Icon.md +403 -31
  117. package/docs/components/InlineEdit/examples/InlineEdit.md +13 -1
  118. package/docs/components/InputGroup/examples/InputGroup.md +20 -8
  119. package/docs/components/Label/examples/Label.md +4029 -765
  120. package/docs/components/List/examples/List.md +78 -6
  121. package/docs/components/Login/examples/Login.md +104 -8
  122. package/docs/components/Menu/examples/Menu.md +221 -17
  123. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  124. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +247 -19
  125. package/docs/components/NumberInput/examples/NumberInput.md +301 -25
  126. package/docs/components/Pagination/examples/Pagination.md +111 -273
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +169 -13
  128. package/docs/components/Sidebar/examples/Sidebar.md +3 -1
  129. package/docs/components/Switch/examples/Switch.md +52 -4
  130. package/docs/components/Table/examples/Table.css +6 -0
  131. package/docs/components/Table/examples/Table.md +1322 -171
  132. package/docs/components/Tabs/examples/Tabs.md +18 -998
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +355 -115
  134. package/docs/components/Toolbar/examples/Toolbar.md +133 -25
  135. package/docs/components/TreeView/examples/TreeView.md +286 -118
  136. package/docs/components/Wizard/examples/Wizard.md +325 -25
  137. package/docs/demos/Alert/examples/Alert.md +181 -40
  138. package/docs/demos/Button/examples/Button.md +57 -45
  139. package/docs/demos/Card/examples/Card.md +280 -34
  140. package/docs/demos/CardView/examples/CardView.md +12 -12
  141. package/docs/demos/Compass/examples/Compass.md +91 -439
  142. package/docs/demos/Dashboard/examples/Dashboard.md +92 -41
  143. package/docs/demos/DataList/examples/DataList.md +74 -50
  144. package/docs/demos/Form/examples/BasicForms.md +112 -36
  145. package/docs/demos/HelperText/examples/HelperText.md +104 -8
  146. package/docs/demos/Masthead/examples/Masthead.md +52 -4
  147. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +176 -14
  148. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2570 -4968
  149. package/docs/demos/Table/examples/Table.md +407 -179
  150. package/docs/demos/Toolbar/examples/Toolbar.md +139 -46
  151. package/docs/demos/Wizard/examples/Wizard.md +117 -9
  152. package/package.json +7 -7
  153. package/patternfly-base-no-globals.css +12 -10
  154. package/patternfly-base.css +12 -10
  155. package/patternfly-no-globals.css +411 -150
  156. package/patternfly.css +411 -150
  157. package/patternfly.min.css +1 -1
  158. package/patternfly.min.css.map +1 -1
@@ -35,22 +35,24 @@
35
35
  --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
36
36
  --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
37
37
  --pf-v6-c-table--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
38
+ --pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
38
39
  --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
39
40
  --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
40
41
  --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
41
42
  --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
42
- --pf-v6-c-table--m-compact__check--responsive--MarginBlockStart: 0.4375rem;
43
- --pf-v6-c-table--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-t--global--spacer--xs) * -1);
43
+ --pf-v6-c-table--m-compact__check--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + 0.25rem);
44
+ --pf-v6-c-table--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + var(--pf-t--global--spacer--control--vertical--compact) * -1);
44
45
  --pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
45
46
  --pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
46
47
  --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
47
48
  --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
48
49
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
49
50
  --pf-v6-c-table__check--responsive--MarginInlineStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
50
- --pf-v6-c-table__check--responsive--MarginBlockStart: 0.875rem;
51
+ --pf-v6-c-table__check--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + 0.25rem);
51
52
  --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0.5rem;
52
53
  --pf-v6-c-table--m-grid__check--favorite--MarginInlineStart: var(--pf-t--global--spacer--xl);
53
54
  --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
55
+ --pf-v6-c-table__action--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + var(--pf-t--global--spacer--control--vertical--plain) * -1);
54
56
  --pf-v6-c-table--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
55
57
  --pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart: calc(var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart) + var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart));
56
58
  --pf-v6-c-table__toggle__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -132,10 +134,11 @@
132
134
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
133
135
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
134
136
  }
135
- .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
137
+ .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
136
138
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
137
139
  }
138
140
  .pf-m-grid.pf-v6-c-table.pf-m-compact {
141
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
139
142
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
140
143
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
141
144
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -145,7 +148,7 @@
145
148
  }
146
149
  .pf-m-grid.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
147
150
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
148
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
151
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
149
152
  }
150
153
  .pf-m-grid.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
151
154
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -335,6 +338,7 @@
335
338
  }
336
339
  .pf-m-grid.pf-v6-c-table .pf-v6-c-table__action {
337
340
  text-align: end;
341
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
338
342
  }
339
343
  @media screen and (max-width: 36rem) {
340
344
  .pf-m-grid.pf-v6-c-table .pf-v6-c-table__action {
@@ -441,10 +445,11 @@
441
445
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
442
446
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
443
447
  }
444
- .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
448
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
445
449
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
446
450
  }
447
451
  .pf-m-grid-md.pf-v6-c-table.pf-m-compact {
452
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
448
453
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
449
454
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
450
455
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -454,7 +459,7 @@
454
459
  }
455
460
  .pf-m-grid-md.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
456
461
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
457
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
462
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
458
463
  }
459
464
  .pf-m-grid-md.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
460
465
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -644,6 +649,7 @@
644
649
  }
645
650
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
646
651
  text-align: end;
652
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
647
653
  }
648
654
  @media screen and (max-width: 36rem) {
649
655
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
@@ -751,10 +757,11 @@
751
757
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
752
758
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
753
759
  }
754
- .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
760
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
755
761
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
756
762
  }
757
763
  .pf-m-grid-lg.pf-v6-c-table.pf-m-compact {
764
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
758
765
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
759
766
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
760
767
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -764,7 +771,7 @@
764
771
  }
765
772
  .pf-m-grid-lg.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
766
773
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
767
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
774
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
768
775
  }
769
776
  .pf-m-grid-lg.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
770
777
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -954,6 +961,7 @@
954
961
  }
955
962
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
956
963
  text-align: end;
964
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
957
965
  }
958
966
  @media screen and (max-width: 36rem) {
959
967
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
@@ -1061,10 +1069,11 @@
1061
1069
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
1062
1070
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
1063
1071
  }
1064
- .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
1072
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
1065
1073
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
1066
1074
  }
1067
1075
  .pf-m-grid-xl.pf-v6-c-table.pf-m-compact {
1076
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
1068
1077
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
1069
1078
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
1070
1079
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -1074,7 +1083,7 @@
1074
1083
  }
1075
1084
  .pf-m-grid-xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
1076
1085
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
1077
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
1086
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
1078
1087
  }
1079
1088
  .pf-m-grid-xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
1080
1089
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -1264,6 +1273,7 @@
1264
1273
  }
1265
1274
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
1266
1275
  text-align: end;
1276
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
1267
1277
  }
1268
1278
  @media screen and (max-width: 36rem) {
1269
1279
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
@@ -1371,10 +1381,11 @@
1371
1381
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
1372
1382
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
1373
1383
  }
1374
- .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
1384
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check) + :where(th, td) {
1375
1385
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
1376
1386
  }
1377
1387
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact {
1388
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
1378
1389
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
1379
1390
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
1380
1391
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -1384,7 +1395,7 @@
1384
1395
  }
1385
1396
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
1386
1397
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
1387
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
1398
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
1388
1399
  }
1389
1400
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
1390
1401
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -1574,6 +1585,7 @@
1574
1585
  }
1575
1586
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
1576
1587
  text-align: end;
1588
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
1577
1589
  }
1578
1590
  @media screen and (max-width: 36rem) {
1579
1591
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
@@ -97,12 +97,13 @@
97
97
  --#{$table}--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
98
98
 
99
99
  // * Table grid compact table
100
+ --#{$table}--m-compact--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
100
101
  --#{$table}--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
101
102
  --#{$table}--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
102
103
  --#{$table}--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
103
104
  --#{$table}--m-compact__tr__td--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
104
- --#{$table}--m-compact__check--responsive--MarginBlockStart: #{pf-size-prem(7px)};
105
- --#{$table}--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-t--global--spacer--xs) * -1);
105
+ --#{$table}--m-compact__check--responsive--MarginBlockStart: calc(var(--#{$table}--cell--first-child--responsive--PaddingBlockStart) + #{pf-size-prem(4px)}); // cell padding plus an offset for the check/radio to align with text
106
+ --#{$table}--m-compact__action--responsive--MarginBlockStart: calc(var(--#{$table}--cell--first-child--responsive--PaddingBlockStart) + var(--pf-t--global--spacer--control--vertical--compact) * -1);
106
107
  --#{$table}--m-compact__action--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
107
108
  --#{$table}--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
108
109
 
@@ -113,7 +114,7 @@
113
114
 
114
115
  // * Table check
115
116
  --#{$table}__check--responsive--MarginInlineStart: var(--#{$table}__tbody--responsive--border-width--base);
116
- --#{$table}__check--responsive--MarginBlockStart: #{pf-size-prem(14px)};
117
+ --#{$table}__check--responsive--MarginBlockStart: calc(var(--#{$table}--cell--first-child--responsive--PaddingBlockStart) + #{pf-size-prem(4px)}); // cell padding plus an offset for the check/radio to align with text
117
118
 
118
119
  // * Table grid favorite
119
120
  --#{$table}--m-grid__favorite--MarginBlockStart: #{pf-size-prem(8px)};
@@ -121,6 +122,7 @@
121
122
 
122
123
  // * Table grid action
123
124
  --#{$table}__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
125
+ --#{$table}__action--responsive--MarginBlockStart: calc(var(--#{$table}--cell--first-child--responsive--PaddingBlockStart) + var(--pf-t--global--spacer--control--vertical--plain) * -1);
124
126
  --#{$table}--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
125
127
  --#{$table}--m-grid__check--favorite--action--MarginInlineStart: calc(var(--#{$table}--m-grid__check--favorite--MarginInlineStart) + var(--#{$table}--m-grid__favorite--action--MarginInlineStart));
126
128
 
@@ -241,7 +243,8 @@
241
243
  padding-inline-start: var(--#{$table}--cell--responsive--PaddingInlineStart);
242
244
 
243
245
  // remove padding from first child to align with kebab
244
- &:first-child {
246
+ &:first-child,
247
+ &:is(.#{$table}__toggle, .#{$table}__check) + :where(th, td) {
245
248
  --#{$table}--cell--responsive--PaddingBlockStart: var(--#{$table}--cell--first-child--responsive--PaddingBlockStart);
246
249
  }
247
250
  }
@@ -249,6 +252,7 @@
249
252
 
250
253
  // - Table grid compact
251
254
  &.pf-m-compact {
255
+ --#{$table}--cell--first-child--responsive--PaddingBlockStart: var(--#{$table}--m-compact--cell--first-child--responsive--PaddingBlockStart);
252
256
  --#{$table}__tr--responsive--PaddingBlockStart: var(--#{$table}--m-compact__tr--responsive--PaddingBlockStart);
253
257
  --#{$table}__tr--responsive--PaddingBlockEnd: var(--#{$table}--m-compact__tr--responsive--PaddingBlockEnd);
254
258
  --#{$table}--cell--responsive--PaddingBlockStart: var(--#{$table}--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -258,7 +262,7 @@
258
262
 
259
263
  .#{$table}__action {
260
264
  margin-block-start: var(--#{$table}--m-compact__action--responsive--MarginBlockStart);
261
- margin-block-end: var(--#{$table}--m-compact__action--responsive--MarginBlockStart);
265
+ margin-block-end: var(--#{$table}--m-compact__action--responsive--MarginBlockEnd);
262
266
  }
263
267
 
264
268
  .#{$table}__toggle .#{$button} {
@@ -529,6 +533,7 @@
529
533
  // - Table grid action
530
534
  .#{$table}__action {
531
535
  text-align: end;
536
+ margin-block-start: var(--#{$table}__action--responsive--MarginBlockStart);
532
537
 
533
538
  // @smallest breakpoint
534
539
  @media screen and (max-width: $pf-v6-global--breakpoint--sm) {
@@ -16,6 +16,9 @@
16
16
  --pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart: 0;
17
17
  }
18
18
 
19
+ .pf-v6-c-table.pf-m-tree-view {
20
+ --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 90deg;
21
+ }
19
22
  .pf-v6-c-table.pf-m-tree-view > tbody > tr {
20
23
  --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart);
21
24
  }
@@ -37,6 +37,8 @@ $pf-v6-c-tree-view--MaxDepth: 10;
37
37
 
38
38
  // - Table tree view
39
39
  .#{$table}.pf-m-tree-view {
40
+ --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: 90deg;
41
+
40
42
  > tbody > tr {
41
43
  --#{$table}--m-tree-view__toggle--InsetInlineStart: var(--#{$table}__tree-view-main--PaddingInlineStart);
42
44
 
@@ -54,8 +54,8 @@
54
54
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
55
55
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
56
56
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
57
- --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
58
- --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
57
+ --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
58
+ --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
59
59
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
60
60
  --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
61
61
  --pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular);
@@ -155,7 +155,7 @@
155
155
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
156
156
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
157
157
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
158
- --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
158
+ --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: initial;
159
159
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
160
160
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
161
161
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -175,6 +175,8 @@
175
175
  --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
176
176
  --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
177
177
  --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
178
+ --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
179
+ --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
178
180
  }
179
181
  :where(.pf-v6-theme-glass) .pf-v6-c-table {
180
182
  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
@@ -196,16 +198,13 @@
196
198
  .pf-v6-c-table.pf-m-fixed {
197
199
  table-layout: fixed;
198
200
  }
199
- .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
201
+ .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th::after {
200
202
  opacity: 0;
201
203
  transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
202
204
  transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
203
205
  transition-property: opacity;
204
206
  }
205
- .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
206
- --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
207
- }
208
- .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after {
207
+ .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead .pf-v6-c-table__th::after {
209
208
  opacity: 1;
210
209
  }
211
210
  .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
@@ -216,27 +215,39 @@
216
215
  inset-block-start: 0;
217
216
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
218
217
  }
219
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before {
218
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
220
219
  position: absolute;
221
220
  inset: 0;
222
221
  z-index: -1;
223
222
  pointer-events: none;
224
223
  content: "";
225
- background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
226
224
  border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
227
225
  box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
228
226
  }
229
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) {
230
- z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
231
- }
232
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
227
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th::after {
233
228
  position: absolute;
234
229
  inset: 0;
235
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
230
+ z-index: -1;
236
231
  pointer-events: none;
237
232
  content: "";
233
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
238
234
  border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
239
235
  }
236
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th:first-child::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th:first-child::after {
237
+ border-start-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
238
+ border-end-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
239
+ }
240
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th:last-child::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th:last-child::after {
241
+ border-start-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
242
+ border-end-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
243
+ }
244
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) {
245
+ z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
246
+ }
247
+ :where(.pf-v6-theme-glass) .pf-v6-c-table.pf-m-sticky-header .pf-m-nested-column-header, :where(.pf-v6-theme-glass) .pf-v6-c-table.pf-m-sticky-header-base .pf-m-nested-column-header {
248
+ --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
249
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
250
+ }
240
251
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
241
252
  border-block-end: 0;
242
253
  }
@@ -244,6 +255,26 @@
244
255
  .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]) {
245
256
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
246
257
  }
258
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
259
+ position: sticky;
260
+ inset-block-end: 0;
261
+ z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
262
+ background: var(--pf-v6-c-table--BackgroundColor);
263
+ }
264
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
265
+ position: absolute;
266
+ inset: 0;
267
+ z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
268
+ pointer-events: none;
269
+ content: "";
270
+ border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
271
+ }
272
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
273
+ border-block-end: 0;
274
+ }
275
+ .pf-v6-c-table.pf-m-plain {
276
+ --pf-v6-c-table--BackgroundColor: transparent;
277
+ }
247
278
  .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),
248
279
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
249
280
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -927,14 +958,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
927
958
  vertical-align: bottom;
928
959
  }
929
960
  .pf-v6-c-table__thead.pf-m-nested-column-header {
961
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
930
962
  position: relative;
931
963
  }
932
- .pf-v6-c-table__thead.pf-m-nested-column-header::after {
933
- position: absolute;
934
- inset: 0;
964
+ .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__tr:last-child:not(.pf-m-border-row) {
935
965
  z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
936
- pointer-events: none;
937
- content: "";
938
966
  border-block-end: var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor);
939
967
  }
940
968
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
@@ -975,7 +1003,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
975
1003
  border-block-end: 0;
976
1004
  }
977
1005
  .pf-v6-c-table__tr.pf-m-border-row {
978
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
1006
+ height: var(--pf-v6-c-table--border-width--base);
1007
+ background-color: var(--pf-v6-c-table--BorderColor);
1008
+ }
1009
+
1010
+ .pf-v6-c-table__tfoot {
1011
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
1012
+ vertical-align: top;
979
1013
  }
980
1014
 
981
1015
  .pf-v6-c-table__icon-inline {
@@ -89,8 +89,8 @@
89
89
  --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
90
90
 
91
91
  // * Table button
92
- --#{$table}__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
93
- --#{$table}__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
92
+ --#{$table}__button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
93
+ --#{$table}__button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
94
94
  --#{$table}__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
95
95
  --#{$table}__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
96
96
  --#{$table}__button--Color: var(--pf-t--global--text--color--regular);
@@ -241,7 +241,7 @@
241
241
  // * Table nested column header
242
242
  --#{$table}__thead--m-nested-column-header--BorderBlockEndWidth: var(--#{$table}--border-width--base);
243
243
  --#{$table}__thead--m-nested-column-header--BorderBlockEndColor: var(--#{$table}--BorderColor);
244
- --#{$table}__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
244
+ --#{$table}__thead--m-nested-column-header--after--ZIndex: initial;
245
245
  --#{$table}__thead--m-nested-column-header--button--OutlineOffset: #{pf-size-prem(-3px)};
246
246
  --#{$table}__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
247
247
  --#{$table}__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -269,6 +269,10 @@
269
269
  --#{$table}--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
270
270
  --#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
271
271
  --#{$table}--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
272
+
273
+ // * Table sticky footer
274
+ --#{$table}--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
275
+ --#{$table}--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
272
276
 
273
277
  :where(.pf-v6-theme-glass) & {
274
278
  --#{$table}--m-sticky-header--BorderBlockEndWidth: 0;
@@ -297,8 +301,8 @@
297
301
  table-layout: fixed;
298
302
  }
299
303
 
300
- &.pf-m-sticky-header-base > .#{$table}__thead {
301
- &::before,
304
+ &.pf-m-sticky-header-base > .#{$table}__thead,
305
+ &.pf-m-sticky-header-base > .#{$table}__thead .#{$table}__th {
302
306
  &::after {
303
307
  opacity: 0;
304
308
  transition-timing-function: var(--#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor);
@@ -307,13 +311,8 @@
307
311
  }
308
312
  }
309
313
 
310
- &.pf-m-sticky-header,
311
- &.pf-m-sticky-header-stuck {
312
- --#{$table}__thead--m-nested-column-header--BorderBlockEndWidth: 0;
313
- }
314
-
315
- &.pf-m-sticky-header-stuck > .#{$table}__thead {
316
- &::before,
314
+ &.pf-m-sticky-header-stuck > .#{$table}__thead,
315
+ &.pf-m-sticky-header-stuck > .#{$table}__thead .#{$table}__th {
317
316
  &::after {
318
317
  opacity: 1;
319
318
  }
@@ -328,32 +327,47 @@
328
327
  inset-block-start: 0;
329
328
  z-index: var(--#{$table}--m-sticky-header--ZIndex);
330
329
 
331
- &::before {
330
+ &::after {
332
331
  position: absolute;
333
332
  inset: 0;
334
333
  z-index: -1;
335
334
  pointer-events: none;
336
335
  content: '';
337
- background-color: var(--#{$table}--m-sticky-header--BackgroundColor);
338
336
  border-radius: var(--#{$table}--m-sticky-header--BorderRadius);
339
337
  box-shadow: var(--#{$table}--m-sticky-header--BoxShadow);
340
338
  }
339
+
340
+
341
+ .#{$table}__th::after {
342
+ position: absolute;
343
+ inset: 0;
344
+ z-index: -1;
345
+ pointer-events: none;
346
+ content: '';
347
+ background-color: var(--#{$table}--m-sticky-header--BackgroundColor);
348
+ border-block-end: var(--#{$table}--m-sticky-header--BorderBlockEndWidth) solid var(--#{$table}--m-sticky-header--BorderBlockEndColor);
349
+ }
350
+
351
+ .#{$table}__th:first-child::after {
352
+ border-start-start-radius: var(--#{$table}--m-sticky-header--BorderRadius);
353
+ border-end-start-radius: var(--#{$table}--m-sticky-header--BorderRadius);
354
+ }
355
+
356
+ .#{$table}__th:last-child::after {
357
+ border-start-end-radius: var(--#{$table}--m-sticky-header--BorderRadius);
358
+ border-end-end-radius: var(--#{$table}--m-sticky-header--BorderRadius);
359
+ }
341
360
 
342
361
  > :where(th, td) {
343
362
  z-index: var(--#{$table}--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
344
363
  }
345
364
  }
346
- }
347
365
 
348
- &.pf-m-sticky-header,
349
- &.pf-m-sticky-header-base {
350
- > .#{$table}__thead::after {
351
- position: absolute;
352
- inset: 0;
353
- z-index: var(--#{$table}--m-sticky-header--border--ZIndex);
354
- pointer-events: none;
355
- content: '';
356
- border-block-end: var(--#{$table}--m-sticky-header--BorderBlockEndWidth) solid var(--#{$table}--m-sticky-header--BorderBlockEndColor);
366
+ :where(.pf-v6-theme-glass) & {
367
+ .pf-m-nested-column-header {
368
+ --#{$table}--m-sticky-header--BorderRadius: 0;
369
+ --#{$table}__thead--m-nested-column-header--BorderBlockEndWidth: 0;
370
+ }
357
371
  }
358
372
  }
359
373
 
@@ -373,6 +387,34 @@
373
387
  }
374
388
  }
375
389
 
390
+ // - Table sticky footer
391
+ &.pf-m-sticky-footer {
392
+ > .#{$table}__tfoot {
393
+ position: sticky;
394
+ inset-block-end: 0;
395
+ z-index: var(--#{$table}--m-sticky-footer--ZIndex);
396
+ background: var(--#{$table}--BackgroundColor);
397
+
398
+ &::before {
399
+ position: absolute;
400
+ inset: 0;
401
+ z-index: var(--#{$table}--m-sticky-footer--border--ZIndex);
402
+ pointer-events: none;
403
+ content: "";
404
+ border-block-start: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
405
+ }
406
+ }
407
+
408
+ > .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {
409
+ border-block-end: 0;
410
+ }
411
+ }
412
+
413
+ // - Table plain
414
+ &.pf-m-plain {
415
+ --#{$table}--BackgroundColor: transparent;
416
+ }
417
+
376
418
  // - Table striped
377
419
  // stylelint-disable
378
420
  &.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
@@ -544,8 +586,8 @@
544
586
  // }
545
587
 
546
588
  .#{$table}__td.pf-m-action {
547
- --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
548
- --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
589
+ --#{$table}--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
590
+ --#{$table}--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
549
591
  }
550
592
 
551
593
  // - Table sort
@@ -1235,8 +1277,8 @@
1235
1277
  }
1236
1278
 
1237
1279
  .#{$table}__td.pf-m-action {
1238
- --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
1239
- --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
1280
+ --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
1281
+ --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
1240
1282
  }
1241
1283
 
1242
1284
  .#{$table}__icon {
@@ -1256,14 +1298,12 @@
1256
1298
 
1257
1299
  // - Table nested column header button
1258
1300
  &.pf-m-nested-column-header {
1301
+ --#{$table}--m-sticky-header--BorderBlockEndWidth: 0;
1302
+
1259
1303
  position: relative;
1260
1304
 
1261
- &::after {
1262
- position: absolute;
1263
- inset: 0;
1305
+ .#{$table}__tr:last-child:not(.pf-m-border-row) {
1264
1306
  z-index: var(--#{$table}__thead--m-nested-column-header--after--ZIndex);
1265
- pointer-events: none;
1266
- content: '';
1267
1307
  border-block-end: var(--#{$table}__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--#{$table}__thead--m-nested-column-header--BorderBlockEndColor);
1268
1308
  }
1269
1309
 
@@ -1327,10 +1367,18 @@
1327
1367
  }
1328
1368
 
1329
1369
  &.pf-m-border-row {
1330
- border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
1370
+ height: var(--#{$table}--border-width--base);
1371
+ background-color: var(--#{$table}--BorderColor);
1331
1372
  }
1332
1373
  }
1333
1374
 
1375
+ // - Table tfoot
1376
+ .#{$table}__tfoot {
1377
+ --#{$table}__tr--BorderBlockEndWidth: 0;
1378
+
1379
+ vertical-align: top;
1380
+ }
1381
+
1334
1382
  // - Table icon inline
1335
1383
  .#{$table}__icon-inline {
1336
1384
  display: flex;