@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60

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 (168) hide show
  1. package/README.md +22 -14
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +35 -4
  59. package/components/Menu/menu.scss +32 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +7 -1
  71. package/components/Panel/panel.scss +7 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1390 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2837 -437
  165. package/patternfly.css +2839 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
@@ -34,6 +34,7 @@
34
34
  --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
35
35
  --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
36
36
  --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
37
+ --pf-v6-c-table--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
37
38
  --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
38
39
  --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
39
40
  --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -97,6 +98,12 @@
97
98
  .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
98
99
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
99
100
  }
101
+ .pf-m-grid.pf-v6-c-table.pf-m-animate-expand {
102
+ --pf-v6-c-table__expandable-row--Display: block;
103
+ }
104
+ .pf-m-grid.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
105
+ content: none;
106
+ }
100
107
  .pf-m-grid.pf-v6-c-table.pf-m-expandable {
101
108
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
102
109
  }
@@ -153,12 +160,15 @@
153
160
  grid-template-columns: 1fr minmax(0, 1.5fr);
154
161
  align-items: start;
155
162
  }
163
+ .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
164
+ align-items: center;
165
+ }
156
166
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
157
167
  grid-column: 2;
158
168
  }
159
169
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
160
170
  position: revert;
161
- font-weight: bold;
171
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
162
172
  text-align: start;
163
173
  content: attr(data-label);
164
174
  }
@@ -397,6 +407,12 @@
397
407
  .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
398
408
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
399
409
  }
410
+ .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand {
411
+ --pf-v6-c-table__expandable-row--Display: block;
412
+ }
413
+ .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
414
+ content: none;
415
+ }
400
416
  .pf-m-grid-md.pf-v6-c-table.pf-m-expandable {
401
417
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
402
418
  }
@@ -453,12 +469,15 @@
453
469
  grid-template-columns: 1fr minmax(0, 1.5fr);
454
470
  align-items: start;
455
471
  }
472
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
473
+ align-items: center;
474
+ }
456
475
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
457
476
  grid-column: 2;
458
477
  }
459
478
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
460
479
  position: revert;
461
- font-weight: bold;
480
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
462
481
  text-align: start;
463
482
  content: attr(data-label);
464
483
  }
@@ -700,6 +719,12 @@
700
719
  .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
701
720
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
702
721
  }
722
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand {
723
+ --pf-v6-c-table__expandable-row--Display: block;
724
+ }
725
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
726
+ content: none;
727
+ }
703
728
  .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable {
704
729
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
705
730
  }
@@ -756,12 +781,15 @@
756
781
  grid-template-columns: 1fr minmax(0, 1.5fr);
757
782
  align-items: start;
758
783
  }
784
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
785
+ align-items: center;
786
+ }
759
787
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
760
788
  grid-column: 2;
761
789
  }
762
790
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
763
791
  position: revert;
764
- font-weight: bold;
792
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
765
793
  text-align: start;
766
794
  content: attr(data-label);
767
795
  }
@@ -1003,6 +1031,12 @@
1003
1031
  .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
1004
1032
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1005
1033
  }
1034
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand {
1035
+ --pf-v6-c-table__expandable-row--Display: block;
1036
+ }
1037
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
1038
+ content: none;
1039
+ }
1006
1040
  .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable {
1007
1041
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
1008
1042
  }
@@ -1059,12 +1093,15 @@
1059
1093
  grid-template-columns: 1fr minmax(0, 1.5fr);
1060
1094
  align-items: start;
1061
1095
  }
1096
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
1097
+ align-items: center;
1098
+ }
1062
1099
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
1063
1100
  grid-column: 2;
1064
1101
  }
1065
1102
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
1066
1103
  position: revert;
1067
- font-weight: bold;
1104
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
1068
1105
  text-align: start;
1069
1106
  content: attr(data-label);
1070
1107
  }
@@ -1306,6 +1343,12 @@
1306
1343
  .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
1307
1344
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1308
1345
  }
1346
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand {
1347
+ --pf-v6-c-table__expandable-row--Display: block;
1348
+ }
1349
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
1350
+ content: none;
1351
+ }
1309
1352
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable {
1310
1353
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
1311
1354
  }
@@ -1362,12 +1405,15 @@
1362
1405
  grid-template-columns: 1fr minmax(0, 1.5fr);
1363
1406
  align-items: start;
1364
1407
  }
1408
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
1409
+ align-items: center;
1410
+ }
1365
1411
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
1366
1412
  grid-column: 2;
1367
1413
  }
1368
1414
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
1369
1415
  position: revert;
1370
- font-weight: bold;
1416
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
1371
1417
  text-align: start;
1372
1418
  content: attr(data-label);
1373
1419
  }
@@ -94,6 +94,7 @@
94
94
  --#{$table}--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
95
95
  --#{$table}--cell--responsive--PaddingInlineEnd: 0;
96
96
  --#{$table}--cell--responsive--PaddingInlineStart: 0;
97
+ --#{$table}--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
97
98
 
98
99
  // * Table grid compact table
99
100
  --#{$table}--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -132,6 +133,8 @@
132
133
 
133
134
  // - Table mobile layout
134
135
  @include pf-mobile-layout {
136
+ $pf-mobile-parent: &;
137
+
135
138
  --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-grid--cell--PaddingBlockStart);
136
139
  --#{$table}--cell--PaddingInlineEnd: var(--#{$table}--m-grid--cell--PaddingInlineEnd);
137
140
  --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-grid--cell--PaddingBlockEnd);
@@ -182,6 +185,20 @@
182
185
  }
183
186
  }
184
187
 
188
+ &.pf-m-animate-expand {
189
+ --#{$table}__expandable-row--Display: block;
190
+
191
+ > .#{$table}__tbody > .#{$table}__expandable-row {
192
+ &:not(.pf-m-expanded) {
193
+ > :is(.#{$table}__td, .#{$table}__th) {
194
+ &[data-label]::before {
195
+ content: none; // hides column header for non-expanded rows
196
+ }
197
+ }
198
+ }
199
+ }
200
+ }
201
+
185
202
  // Remove border on tr inside non-expanded tbody in of expandable tables
186
203
  &.pf-m-expandable {
187
204
  --#{$table}__tr--BorderBlockEndWidth: 0; // nested table rows have no border
@@ -265,6 +282,10 @@
265
282
  grid-template-columns: 1fr minmax(0, 1.5fr);
266
283
  align-items: start;
267
284
 
285
+ &.pf-m-action {
286
+ align-items: center;
287
+ }
288
+
268
289
  // set contents of td to start at column two of td grid
269
290
  > * {
270
291
  grid-column: 2;
@@ -272,7 +293,7 @@
272
293
 
273
294
  &::before {
274
295
  position: revert;
275
- font-weight: bold;
296
+ font-weight: var(--#{$table}--cell--responsive--th--FontWeight);
276
297
  text-align: start;
277
298
  content: attr(data-label);
278
299
  }
@@ -10,7 +10,8 @@
10
10
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
11
11
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
12
12
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
13
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
13
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
14
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
14
15
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
15
16
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
16
17
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -60,6 +61,9 @@
60
61
  --pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular);
61
62
  --pf-v6-c-table__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
62
63
  --pf-v6-c-table__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
64
+ --pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
65
+ --pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
66
+ --pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
63
67
  --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
64
68
  --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
65
69
  --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -74,12 +78,23 @@
74
78
  --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
75
79
  --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
76
80
  --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
81
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
82
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
83
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
84
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
85
+ --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
86
+ --pf-v6-c-table__expandable-row--Opacity: 0;
87
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
88
+ --pf-v6-c-table__expandable-row--TranslateY: 0;
89
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
77
90
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
78
91
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
79
92
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
80
93
  --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
81
94
  --pf-v6-c-table__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
82
95
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
96
+ --pf-v6-c-table__expandable-row-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
97
+ --pf-v6-c-table__expandable-row-content--BorderWidth: 0;
83
98
  --pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
84
99
  --pf-v6-c-table__control-row--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
85
100
  --pf-v6-c-table__control-row__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default);
@@ -101,14 +116,20 @@
101
116
  --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
102
117
  --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
103
118
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
119
+ --pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
104
120
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
105
121
  --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
106
122
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
107
123
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
124
+ --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
108
125
  --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
109
126
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
110
127
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
111
128
  --pf-v6-c-table--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
129
+ --pf-v6-c-table__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
130
+ --pf-v6-c-table__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
131
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
132
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
112
133
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
113
134
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
114
135
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
@@ -134,6 +155,13 @@
134
155
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
135
156
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
136
157
  }
158
+ @media screen and (prefers-reduced-motion: no-preference) {
159
+ .pf-v6-c-table {
160
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
161
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
162
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
163
+ }
164
+ }
137
165
 
138
166
  .pf-v6-c-table {
139
167
  width: 100%;
@@ -330,6 +358,10 @@
330
358
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
331
359
  overflow-wrap: break-word;
332
360
  }
361
+ .pf-v6-c-table .pf-v6-c-table__td.pf-m-action {
362
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__td--m-action--PaddingBlockStart);
363
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__td--m-action--PaddingBlockEnd);
364
+ }
333
365
  .pf-v6-c-table .pf-v6-c-table__sort {
334
366
  min-width: var(--pf-v6-c-table__sort--MinWidth);
335
367
  }
@@ -398,6 +430,51 @@
398
430
  .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
399
431
  --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
400
432
  }
433
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody.pf-m-expanded > .pf-v6-c-table__control-row {
434
+ border-block-end: 0;
435
+ }
436
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row {
437
+ display: var(--pf-v6-c-table__expandable-row--Display, revert);
438
+ visibility: hidden;
439
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
440
+ transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
441
+ transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
442
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide), 0s, 0s;
443
+ transition-property: opacity, translate, visibility, background-color;
444
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
445
+ }
446
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
447
+ display: var(--pf-v6-c-table__expandable-row--Display, revert);
448
+ }
449
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
450
+ visibility: visible;
451
+ opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
452
+ transition-delay: 0s;
453
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
454
+ translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
455
+ }
456
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
457
+ max-height: 99999px;
458
+ }
459
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th),
460
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
461
+ padding: 0;
462
+ overflow: hidden;
463
+ transition-delay: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
464
+ transition-property: padding, max-height, overflow;
465
+ }
466
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
467
+ max-height: 0;
468
+ }
469
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
470
+ border-block-end: 0;
471
+ }
472
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row {
473
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s;
474
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
475
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: 0s;
476
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
477
+ }
401
478
 
402
479
  [class*=pf-v6-c-table].pf-m-truncate {
403
480
  --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
@@ -456,6 +533,7 @@
456
533
  }
457
534
 
458
535
  .pf-v6-c-table__button {
536
+ position: relative;
459
537
  width: auto;
460
538
  padding-block-start: var(--pf-v6-c-table__button--PaddingBlockStart);
461
539
  padding-block-end: var(--pf-v6-c-table__button--PaddingBlockEnd);
@@ -474,6 +552,14 @@
474
552
  border-radius: var(--pf-v6-c-table__button--BorderRadius);
475
553
  outline-offset: var(--pf-v6-c-table__button--OutlineOffset);
476
554
  }
555
+ .pf-v6-c-table__button::after {
556
+ position: absolute;
557
+ inset: 0;
558
+ pointer-events: none;
559
+ content: "";
560
+ border: var(--pf-v6-c-table__button--BorderWidth) solid var(--pf-v6-c-table__button--BorderColor);
561
+ border-radius: inherit;
562
+ }
477
563
  .pf-v6-c-table .pf-v6-c-table .pf-v6-c-table__button {
478
564
  margin-block-end: 0;
479
565
  }
@@ -544,6 +630,12 @@
544
630
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
545
631
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
546
632
  }
633
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
634
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
635
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
636
+ line-height: 1lh;
637
+ }
638
+
547
639
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
548
640
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
549
641
  }
@@ -643,6 +735,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
643
735
  content: "";
644
736
  border: 0;
645
737
  border-block-start: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth) solid var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor);
738
+ border-radius: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius);
646
739
  }
647
740
  .pf-v6-c-table__compound-expansion-toggle:hover, .pf-v6-c-table__compound-expansion-toggle:focus-within {
648
741
  --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor);
@@ -666,6 +759,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
666
759
  align-self: last baseline;
667
760
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
668
761
  }
762
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
763
+ line-height: 1lh;
764
+ }
669
765
 
670
766
  .pf-v6-c-table__sort {
671
767
  vertical-align: bottom;
@@ -674,6 +770,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
674
770
  --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort__button--hover__sort-indicator--Color);
675
771
  --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort__button--hover__text--Color);
676
772
  --pf-v6-c-table__button--BackgroundColor: var(--pf-v6-c-table__button--hover--BackgroundColor);
773
+ --pf-v6-c-table__button--BorderWidth: var(--pf-v6-c-table__button--hover--BorderWidth);
677
774
  }
678
775
  .pf-v6-c-table__sort .pf-v6-c-table__button .pf-v6-c-table__text {
679
776
  color: var(--pf-v6-c-table__sort__button__text--Color);
@@ -707,7 +804,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
707
804
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
708
805
  padding-block-start: 0;
709
806
  }
710
-
807
+ .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):not(.pf-m-no-padding) {
808
+ padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
809
+ }
711
810
  .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
712
811
  .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
713
812
  padding-block-start: 0;
@@ -718,15 +817,29 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
718
817
  .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
719
818
  .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
720
819
  padding: 0;
820
+ border-radius: 0;
721
821
  }
722
822
  .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
823
+ position: relative;
723
824
  padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingBlockStart);
724
825
  padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBlockEnd);
725
826
  padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingInlineStart);
726
827
  padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingInlineEnd);
727
828
  background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
829
+ border: 0;
728
830
  border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
729
831
  }
832
+ .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content.pf-m-no-background {
833
+ background-color: transparent;
834
+ }
835
+ .pf-v6-c-table__expandable-row .pf-v6-c-table__td:not(.pf-m-no-padding) > .pf-v6-c-table__expandable-row-content::after {
836
+ position: absolute;
837
+ inset: 0;
838
+ pointer-events: none;
839
+ content: "";
840
+ border: var(--pf-v6-c-table__expandable-row-content--BorderWidth) solid var(--pf-v6-c-table__expandable-row-content--BorderColor);
841
+ border-radius: inherit;
842
+ }
730
843
  .pf-v6-c-table__expandable-row.pf-m-expanded {
731
844
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
732
845
  border-block-end-width: var(--pf-v6-c-table--border-width--base);
@@ -758,6 +871,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
758
871
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__action--PaddingBlockStart);
759
872
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__action--PaddingBlockEnd);
760
873
  }
874
+ .pf-v6-c-table.pf-m-compact .pf-v6-c-table__td.pf-m-action {
875
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart);
876
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd);
877
+ }
761
878
  .pf-v6-c-table.pf-m-compact .pf-v6-c-table__icon {
762
879
  width: auto;
763
880
  min-width: 0;
@@ -766,6 +883,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
766
883
 
767
884
  .pf-v6-c-table__thead {
768
885
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
886
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
769
887
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
770
888
  vertical-align: bottom;
771
889
  }
@@ -779,6 +897,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
779
897
  vertical-align: top;
780
898
  }
781
899
  .pf-v6-c-table__tbody .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded {
900
+ --pf-v6-c-table__expandable-row-content--BorderWidth: var(--pf-v6-c-table--compound-expansion--m-expanded--BorderWidth);
782
901
  background-color: var(--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor);
783
902
  }
784
903
 
@@ -795,6 +914,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
795
914
  background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
796
915
  border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
797
916
  }
917
+ .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row.pf-m-expanded {
918
+ border-block-end: 0;
919
+ }
798
920
 
799
921
  .pf-v6-c-table__tr {
800
922
  border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor);