@patternfly/patternfly 6.6.0-prerelease.15 → 6.6.0-prerelease.16

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 (9) hide show
  1. package/components/Table/table.css +26 -18
  2. package/components/Table/table.scss +37 -27
  3. package/components/_index.css +26 -18
  4. package/docs/components/Table/examples/Table.md +7 -0
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +26 -18
  7. package/patternfly.css +26 -18
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Table/table.css CHANGED
@@ -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);
@@ -198,16 +198,13 @@
198
198
  .pf-v6-c-table.pf-m-fixed {
199
199
  table-layout: fixed;
200
200
  }
201
- .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 {
202
202
  opacity: 0;
203
203
  transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
204
204
  transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
205
205
  transition-property: opacity;
206
206
  }
207
- .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
208
- --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
209
- }
210
- .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 {
211
208
  opacity: 1;
212
209
  }
213
210
  .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
@@ -218,27 +215,39 @@
218
215
  inset-block-start: 0;
219
216
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
220
217
  }
221
- .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 {
222
219
  position: absolute;
223
220
  inset: 0;
224
221
  z-index: -1;
225
222
  pointer-events: none;
226
223
  content: "";
227
- background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
228
224
  border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
229
225
  box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
230
226
  }
231
- .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) {
232
- z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
233
- }
234
- .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 {
235
228
  position: absolute;
236
229
  inset: 0;
237
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
230
+ z-index: -1;
238
231
  pointer-events: none;
239
232
  content: "";
233
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
240
234
  border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
241
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
+ }
242
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) {
243
252
  border-block-end: 0;
244
253
  }
@@ -949,14 +958,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
949
958
  vertical-align: bottom;
950
959
  }
951
960
  .pf-v6-c-table__thead.pf-m-nested-column-header {
961
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
952
962
  position: relative;
953
963
  }
954
- .pf-v6-c-table__thead.pf-m-nested-column-header::after {
955
- position: absolute;
956
- 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) {
957
965
  z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
958
966
  pointer-events: none;
959
- content: "";
960
967
  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);
961
968
  }
962
969
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
@@ -997,7 +1004,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
997
1004
  border-block-end: 0;
998
1005
  }
999
1006
  .pf-v6-c-table__tr.pf-m-border-row {
1000
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
1007
+ height: var(--pf-v6-c-table--border-width--base);
1008
+ background-color: var(--pf-v6-c-table--BorderColor);
1001
1009
  }
1002
1010
 
1003
1011
  .pf-v6-c-table__tfoot {
package/components/Table/table.scss CHANGED
@@ -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);
@@ -301,8 +301,8 @@
301
301
  table-layout: fixed;
302
302
  }
303
303
 
304
- &.pf-m-sticky-header-base > .#{$table}__thead {
305
- &::before,
304
+ &.pf-m-sticky-header-base > .#{$table}__thead,
305
+ &.pf-m-sticky-header-base > .#{$table}__thead .#{$table}__th {
306
306
  &::after {
307
307
  opacity: 0;
308
308
  transition-timing-function: var(--#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor);
@@ -311,13 +311,8 @@
311
311
  }
312
312
  }
313
313
 
314
- &.pf-m-sticky-header,
315
- &.pf-m-sticky-header-stuck {
316
- --#{$table}__thead--m-nested-column-header--BorderBlockEndWidth: 0;
317
- }
318
-
319
- &.pf-m-sticky-header-stuck > .#{$table}__thead {
320
- &::before,
314
+ &.pf-m-sticky-header-stuck > .#{$table}__thead,
315
+ &.pf-m-sticky-header-stuck > .#{$table}__thead .#{$table}__th {
321
316
  &::after {
322
317
  opacity: 1;
323
318
  }
@@ -332,32 +327,47 @@
332
327
  inset-block-start: 0;
333
328
  z-index: var(--#{$table}--m-sticky-header--ZIndex);
334
329
 
335
- &::before {
330
+ &::after {
336
331
  position: absolute;
337
332
  inset: 0;
338
333
  z-index: -1;
339
334
  pointer-events: none;
340
335
  content: '';
341
- background-color: var(--#{$table}--m-sticky-header--BackgroundColor);
342
336
  border-radius: var(--#{$table}--m-sticky-header--BorderRadius);
343
337
  box-shadow: var(--#{$table}--m-sticky-header--BoxShadow);
344
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
+ }
345
360
 
346
361
  > :where(th, td) {
347
362
  z-index: var(--#{$table}--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
348
363
  }
349
364
  }
350
- }
351
365
 
352
- &.pf-m-sticky-header,
353
- &.pf-m-sticky-header-base {
354
- > .#{$table}__thead::after {
355
- position: absolute;
356
- inset: 0;
357
- z-index: var(--#{$table}--m-sticky-header--border--ZIndex);
358
- pointer-events: none;
359
- content: '';
360
- 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
+ }
361
371
  }
362
372
  }
363
373
 
@@ -1288,14 +1298,13 @@
1288
1298
 
1289
1299
  // - Table nested column header button
1290
1300
  &.pf-m-nested-column-header {
1301
+ --#{$table}--m-sticky-header--BorderBlockEndWidth: 0;
1302
+
1291
1303
  position: relative;
1292
1304
 
1293
- &::after {
1294
- position: absolute;
1295
- inset: 0;
1305
+ .#{$table}__tr:last-child:not(.pf-m-border-row) {
1296
1306
  z-index: var(--#{$table}__thead--m-nested-column-header--after--ZIndex);
1297
1307
  pointer-events: none;
1298
- content: '';
1299
1308
  border-block-end: var(--#{$table}__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--#{$table}__thead--m-nested-column-header--BorderBlockEndColor);
1300
1309
  }
1301
1310
 
@@ -1359,7 +1368,8 @@
1359
1368
  }
1360
1369
 
1361
1370
  &.pf-m-border-row {
1362
- border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
1371
+ height: var(--#{$table}--border-width--base);
1372
+ background-color: var(--#{$table}--BorderColor);
1363
1373
  }
1364
1374
  }
1365
1375
 
package/components/_index.css CHANGED
@@ -19629,7 +19629,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19629
19629
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
19630
19630
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
19631
19631
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
19632
- --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
19632
+ --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: initial;
19633
19633
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
19634
19634
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19635
19635
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -19672,16 +19672,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19672
19672
  .pf-v6-c-table.pf-m-fixed {
19673
19673
  table-layout: fixed;
19674
19674
  }
19675
- .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 {
19675
+ .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 {
19676
19676
  opacity: 0;
19677
19677
  transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
19678
19678
  transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
19679
19679
  transition-property: opacity;
19680
19680
  }
19681
- .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
19682
- --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
19683
- }
19684
- .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 {
19681
+ .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 {
19685
19682
  opacity: 1;
19686
19683
  }
19687
19684
  .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
@@ -19692,27 +19689,39 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19692
19689
  inset-block-start: 0;
19693
19690
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
19694
19691
  }
19695
- .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 {
19692
+ .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 {
19696
19693
  position: absolute;
19697
19694
  inset: 0;
19698
19695
  z-index: -1;
19699
19696
  pointer-events: none;
19700
19697
  content: "";
19701
- background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
19702
19698
  border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
19703
19699
  box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
19704
19700
  }
19705
- .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) {
19706
- z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
19707
- }
19708
- .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 {
19701
+ .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 {
19709
19702
  position: absolute;
19710
19703
  inset: 0;
19711
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
19704
+ z-index: -1;
19712
19705
  pointer-events: none;
19713
19706
  content: "";
19707
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
19714
19708
  border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
19715
19709
  }
19710
+ .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 {
19711
+ border-start-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
19712
+ border-end-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
19713
+ }
19714
+ .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 {
19715
+ border-start-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
19716
+ border-end-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
19717
+ }
19718
+ .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) {
19719
+ z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
19720
+ }
19721
+ :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 {
19722
+ --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
19723
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
19724
+ }
19716
19725
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
19717
19726
  border-block-end: 0;
19718
19727
  }
@@ -20423,14 +20432,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20423
20432
  vertical-align: bottom;
20424
20433
  }
20425
20434
  .pf-v6-c-table__thead.pf-m-nested-column-header {
20435
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
20426
20436
  position: relative;
20427
20437
  }
20428
- .pf-v6-c-table__thead.pf-m-nested-column-header::after {
20429
- position: absolute;
20430
- inset: 0;
20438
+ .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__tr:last-child:not(.pf-m-border-row) {
20431
20439
  z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
20432
20440
  pointer-events: none;
20433
- content: "";
20434
20441
  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);
20435
20442
  }
20436
20443
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
@@ -20471,7 +20478,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20471
20478
  border-block-end: 0;
20472
20479
  }
20473
20480
  .pf-v6-c-table__tr.pf-m-border-row {
20474
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
20481
+ height: var(--pf-v6-c-table--border-width--base);
20482
+ background-color: var(--pf-v6-c-table--BorderColor);
20475
20483
  }
20476
20484
 
20477
20485
  .pf-v6-c-table__tfoot {
package/docs/components/Table/examples/Table.md CHANGED
@@ -29085,6 +29085,13 @@ For sticky columns to function correctly, the parent table's width must be contr
29085
29085
  </button>
29086
29086
  </th>
29087
29087
  </tr>
29088
+ <tr
29089
+ class="pf-v6-c-table__tr pf-m-border-row"
29090
+ role="row"
29091
+ aria-hidden="true"
29092
+ >
29093
+ <td class="pf-v6-c-table__td" role="cell" colspan="6"></td>
29094
+ </tr>
29088
29095
  </thead>
29089
29096
 
29090
29097
  <tbody class="pf-v6-c-table__tbody" role="rowgroup">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly",
4
- "version": "6.6.0-prerelease.15",
4
+ "version": "6.6.0-prerelease.16",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -28885,7 +28885,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28885
28885
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
28886
28886
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
28887
28887
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
28888
- --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
28888
+ --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: initial;
28889
28889
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
28890
28890
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
28891
28891
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -28928,16 +28928,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28928
28928
  .pf-v6-c-table.pf-m-fixed {
28929
28929
  table-layout: fixed;
28930
28930
  }
28931
- .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 {
28931
+ .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 {
28932
28932
  opacity: 0;
28933
28933
  transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
28934
28934
  transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
28935
28935
  transition-property: opacity;
28936
28936
  }
28937
- .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
28938
- --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
28939
- }
28940
- .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 {
28937
+ .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 {
28941
28938
  opacity: 1;
28942
28939
  }
28943
28940
  .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
@@ -28948,27 +28945,39 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28948
28945
  inset-block-start: 0;
28949
28946
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
28950
28947
  }
28951
- .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 {
28948
+ .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 {
28952
28949
  position: absolute;
28953
28950
  inset: 0;
28954
28951
  z-index: -1;
28955
28952
  pointer-events: none;
28956
28953
  content: "";
28957
- background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
28958
28954
  border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
28959
28955
  box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
28960
28956
  }
28961
- .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) {
28962
- z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
28963
- }
28964
- .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 {
28957
+ .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 {
28965
28958
  position: absolute;
28966
28959
  inset: 0;
28967
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
28960
+ z-index: -1;
28968
28961
  pointer-events: none;
28969
28962
  content: "";
28963
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
28970
28964
  border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
28971
28965
  }
28966
+ .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 {
28967
+ border-start-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
28968
+ border-end-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
28969
+ }
28970
+ .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 {
28971
+ border-start-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
28972
+ border-end-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
28973
+ }
28974
+ .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) {
28975
+ z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
28976
+ }
28977
+ :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 {
28978
+ --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
28979
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
28980
+ }
28972
28981
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
28973
28982
  border-block-end: 0;
28974
28983
  }
@@ -29679,14 +29688,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29679
29688
  vertical-align: bottom;
29680
29689
  }
29681
29690
  .pf-v6-c-table__thead.pf-m-nested-column-header {
29691
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
29682
29692
  position: relative;
29683
29693
  }
29684
- .pf-v6-c-table__thead.pf-m-nested-column-header::after {
29685
- position: absolute;
29686
- inset: 0;
29694
+ .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__tr:last-child:not(.pf-m-border-row) {
29687
29695
  z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
29688
29696
  pointer-events: none;
29689
- content: "";
29690
29697
  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);
29691
29698
  }
29692
29699
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
@@ -29727,7 +29734,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29727
29734
  border-block-end: 0;
29728
29735
  }
29729
29736
  .pf-v6-c-table__tr.pf-m-border-row {
29730
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
29737
+ height: var(--pf-v6-c-table--border-width--base);
29738
+ background-color: var(--pf-v6-c-table--BorderColor);
29731
29739
  }
29732
29740
 
29733
29741
  .pf-v6-c-table__tfoot {
package/patternfly.css CHANGED
@@ -29040,7 +29040,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
29040
29040
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
29041
29041
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
29042
29042
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
29043
- --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
29043
+ --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: initial;
29044
29044
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
29045
29045
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
29046
29046
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -29083,16 +29083,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
29083
29083
  .pf-v6-c-table.pf-m-fixed {
29084
29084
  table-layout: fixed;
29085
29085
  }
29086
- .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 {
29086
+ .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 {
29087
29087
  opacity: 0;
29088
29088
  transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
29089
29089
  transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
29090
29090
  transition-property: opacity;
29091
29091
  }
29092
- .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
29093
- --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
29094
- }
29095
- .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 {
29092
+ .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 {
29096
29093
  opacity: 1;
29097
29094
  }
29098
29095
  .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
@@ -29103,27 +29100,39 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
29103
29100
  inset-block-start: 0;
29104
29101
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
29105
29102
  }
29106
- .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 {
29103
+ .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 {
29107
29104
  position: absolute;
29108
29105
  inset: 0;
29109
29106
  z-index: -1;
29110
29107
  pointer-events: none;
29111
29108
  content: "";
29112
- background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
29113
29109
  border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
29114
29110
  box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
29115
29111
  }
29116
- .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) {
29117
- z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
29118
- }
29119
- .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 {
29112
+ .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 {
29120
29113
  position: absolute;
29121
29114
  inset: 0;
29122
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
29115
+ z-index: -1;
29123
29116
  pointer-events: none;
29124
29117
  content: "";
29118
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
29125
29119
  border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
29126
29120
  }
29121
+ .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 {
29122
+ border-start-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
29123
+ border-end-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
29124
+ }
29125
+ .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 {
29126
+ border-start-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
29127
+ border-end-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
29128
+ }
29129
+ .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) {
29130
+ z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
29131
+ }
29132
+ :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 {
29133
+ --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
29134
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
29135
+ }
29127
29136
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
29128
29137
  border-block-end: 0;
29129
29138
  }
@@ -29834,14 +29843,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29834
29843
  vertical-align: bottom;
29835
29844
  }
29836
29845
  .pf-v6-c-table__thead.pf-m-nested-column-header {
29846
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
29837
29847
  position: relative;
29838
29848
  }
29839
- .pf-v6-c-table__thead.pf-m-nested-column-header::after {
29840
- position: absolute;
29841
- inset: 0;
29849
+ .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__tr:last-child:not(.pf-m-border-row) {
29842
29850
  z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
29843
29851
  pointer-events: none;
29844
- content: "";
29845
29852
  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);
29846
29853
  }
29847
29854
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
@@ -29882,7 +29889,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29882
29889
  border-block-end: 0;
29883
29890
  }
29884
29891
  .pf-v6-c-table__tr.pf-m-border-row {
29885
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
29892
+ height: var(--pf-v6-c-table--border-width--base);
29893
+ background-color: var(--pf-v6-c-table--BorderColor);
29886
29894
  }
29887
29895
 
29888
29896
  .pf-v6-c-table__tfoot {