@patternfly/patternfly 6.6.0-prerelease.9 → 6.6.0

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 (60) 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/base/patternfly-fonts.css +4 -4
  8. package/base/patternfly-fonts.scss +4 -4
  9. package/base/patternfly-variables.css +6 -6
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  12. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  13. package/base/tokens/tokens-charts.scss +1 -1
  14. package/base/tokens/tokens-dark.scss +1 -1
  15. package/base/tokens/tokens-default.scss +4 -4
  16. package/base/tokens/tokens-felt-dark.scss +1 -1
  17. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  18. package/base/tokens/tokens-felt-glass.scss +1 -1
  19. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  21. package/base/tokens/tokens-felt.scss +1 -1
  22. package/base/tokens/tokens-glass-dark.scss +1 -1
  23. package/base/tokens/tokens-glass.scss +1 -1
  24. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  25. package/base/tokens/tokens-highcontrast.scss +4 -4
  26. package/base/tokens/tokens-palette.scss +1 -1
  27. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  28. package/components/Alert/alert.css +1 -0
  29. package/components/Alert/alert.scss +1 -0
  30. package/components/Banner/banner.css +7 -0
  31. package/components/Banner/banner.scss +7 -0
  32. package/components/Button/button.css +15 -1
  33. package/components/Button/button.scss +17 -1
  34. package/components/DragDrop/drag-drop.css +4 -0
  35. package/components/DragDrop/drag-drop.scss +4 -0
  36. package/components/Page/page.css +7 -5
  37. package/components/Page/page.scss +9 -8
  38. package/components/Panel/panel.css +1 -1
  39. package/components/Panel/panel.scss +2 -2
  40. package/components/Table/table.css +26 -18
  41. package/components/Table/table.scss +37 -27
  42. package/components/_index.css +61 -25
  43. package/docs/components/DualListSelector/examples/DualListSelector.md +72 -72
  44. package/docs/components/Pagination/examples/Pagination.md +120 -120
  45. package/docs/components/Table/examples/Table.md +7 -0
  46. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  47. package/docs/demos/CardView/examples/CardView.md +12 -12
  48. package/docs/demos/Compass/examples/Compass.md +16 -16
  49. package/docs/demos/Dashboard/examples/Dashboard.md +27 -30
  50. package/docs/demos/DataList/examples/DataList.md +48 -48
  51. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  52. package/docs/demos/Table/examples/Table.md +160 -160
  53. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  54. package/package.json +2 -2
  55. package/patternfly-base-no-globals.css +10 -10
  56. package/patternfly-base.css +10 -10
  57. package/patternfly-no-globals.css +71 -35
  58. package/patternfly.css +71 -35
  59. package/patternfly.min.css +1 -1
  60. package/patternfly.min.css.map +1 -1
@@ -5,7 +5,7 @@
5
5
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6
6
  --pf-v6-c-panel--BoxShadow: none;
7
7
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
8
- --pf-v6-c-panel--before--BorderWidth: 0;
8
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9
9
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
10
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11
11
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -9,12 +9,12 @@
9
9
  --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--medium);
10
10
 
11
11
  // border
12
- --#{$panel}--before--BorderWidth: 0;
12
+ --#{$panel}--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13
13
  --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
14
14
 
15
15
  // secondary modifier
16
16
  --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
17
- --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17
+ --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); // TODO - remove in a breaking change
18
18
 
19
19
  // bordered
20
20
  --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
@@ -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 {
@@ -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
 
@@ -659,6 +659,7 @@
659
659
 
660
660
  .pf-v6-c-alert__icon {
661
661
  grid-area: icon;
662
+ align-self: baseline;
662
663
  margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
663
664
  font-size: var(--pf-v6-c-alert__icon--FontSize);
664
665
  color: var(--pf-v6-c-alert__icon--Color);
@@ -1456,7 +1457,9 @@ div.pf-v6-c-avatar {
1456
1457
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
1457
1458
  --pf-v6-c-banner--link--TextDecoration: underline;
1458
1459
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
1460
+ --pf-v6-c-banner--link--clicked--Color: var(--pf-v6-c-banner--Color);
1459
1461
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
1462
+ --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
1460
1463
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
1461
1464
  --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
1462
1465
  --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -1565,6 +1568,7 @@ div.pf-v6-c-avatar {
1565
1568
  .pf-v6-c-banner a {
1566
1569
  color: var(--pf-v6-c-banner--link--Color);
1567
1570
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1571
+ text-decoration-color: var(--pf-v6-c-banner--a--TextDecorationColor);
1568
1572
  }
1569
1573
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
1570
1574
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -1576,7 +1580,11 @@ div.pf-v6-c-avatar {
1576
1580
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
1577
1581
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
1578
1582
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1583
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-v6-c-banner--link--clicked--Color);
1579
1584
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
1585
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1586
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1587
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1580
1588
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1581
1589
  }
1582
1590
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
@@ -1893,6 +1901,10 @@ button.pf-v6-c-breadcrumb__link {
1893
1901
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1894
1902
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1895
1903
  --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1904
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1905
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1906
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1907
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1896
1908
  --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1897
1909
  --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1898
1910
  --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
@@ -1907,6 +1919,8 @@ button.pf-v6-c-breadcrumb__link {
1907
1919
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1908
1920
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1909
1921
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1922
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1923
+ --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1910
1924
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1911
1925
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1912
1926
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -2279,9 +2293,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2279
2293
  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2280
2294
  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2281
2295
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2282
- --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2296
+ --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine);
2297
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle);
2298
+ --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor);
2299
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
2283
2300
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2284
2301
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
2302
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color);
2303
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color);
2285
2304
  --pf-v6-c-button--BorderWidth: 0;
2286
2305
  --pf-v6-c-button--hover--BorderWidth: 0;
2287
2306
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
@@ -2294,6 +2313,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2294
2313
  .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2295
2314
  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2296
2315
  }
2316
+ .pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked {
2317
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
2318
+ }
2297
2319
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2298
2320
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2299
2321
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -5713,6 +5735,7 @@ ul) {
5713
5735
  --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
5714
5736
  --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
5715
5737
  --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
5738
+ --pf-v6-c-draggable--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
5716
5739
  --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
5717
5740
  --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
5718
5741
  --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -5727,6 +5750,7 @@ ul) {
5727
5750
  --pf-v6-c-draggable--Cursor: var(--pf-v6-c-draggable--m-dragging--Cursor);
5728
5751
  position: relative;
5729
5752
  background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
5753
+ border-radius: var(--pf-v6-c-draggable--m-dragging--BorderRadius);
5730
5754
  box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
5731
5755
  }
5732
5756
  .pf-v6-c-draggable.pf-m-dragging::after {
@@ -5746,6 +5770,7 @@ ul) {
5746
5770
 
5747
5771
  .pf-v6-c-droppable {
5748
5772
  --pf-v6-c-droppable--before--BackgroundColor: transparent;
5773
+ --pf-v6-c-droppable--before--BorderRadius: var(--pf-t--global--border--radius--small);
5749
5774
  --pf-v6-c-droppable--before--Opacity: 0;
5750
5775
  --pf-v6-c-droppable--after--BorderWidth: 0;
5751
5776
  --pf-v6-c-droppable--after--BorderColor: transparent;
@@ -5768,6 +5793,7 @@ ul) {
5768
5793
  }
5769
5794
  .pf-v6-c-droppable::before {
5770
5795
  background-color: var(--pf-v6-c-droppable--before--BackgroundColor);
5796
+ border-radius: var(--pf-v6-c-droppable--before--BorderRadius);
5771
5797
  opacity: var(--pf-v6-c-droppable--before--Opacity);
5772
5798
  }
5773
5799
  .pf-v6-c-droppable::after {
@@ -13861,11 +13887,12 @@ ul.pf-v6-c-list {
13861
13887
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
13862
13888
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
13863
13889
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
13864
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
13890
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
13865
13891
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
13866
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13892
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
13893
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
13867
13894
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
13868
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
13895
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
13869
13896
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
13870
13897
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
13871
13898
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -14261,8 +14288,6 @@ ul.pf-v6-c-list {
14261
14288
  }
14262
14289
  @media (min-width: 62rem) {
14263
14290
  .pf-v6-c-page__dock {
14264
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
14265
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
14266
14291
  position: revert;
14267
14292
  inset: revert;
14268
14293
  visibility: revert;
@@ -14290,6 +14315,9 @@ ul.pf-v6-c-list {
14290
14315
  }
14291
14316
  @media (min-width: 62rem) {
14292
14317
  .pf-v6-c-page__dock-main {
14318
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
14319
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
14320
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
14293
14321
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
14294
14322
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
14295
14323
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
@@ -15423,7 +15451,7 @@ ul.pf-v6-c-list {
15423
15451
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15424
15452
  --pf-v6-c-panel--BoxShadow: none;
15425
15453
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
15426
- --pf-v6-c-panel--before--BorderWidth: 0;
15454
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15427
15455
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
15428
15456
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15429
15457
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -19601,7 +19629,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19601
19629
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
19602
19630
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
19603
19631
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
19604
- --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;
19605
19633
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
19606
19634
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19607
19635
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -19644,16 +19672,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19644
19672
  .pf-v6-c-table.pf-m-fixed {
19645
19673
  table-layout: fixed;
19646
19674
  }
19647
- .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 {
19648
19676
  opacity: 0;
19649
19677
  transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
19650
19678
  transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
19651
19679
  transition-property: opacity;
19652
19680
  }
19653
- .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
19654
- --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
19655
- }
19656
- .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 {
19657
19682
  opacity: 1;
19658
19683
  }
19659
19684
  .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
@@ -19664,27 +19689,39 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19664
19689
  inset-block-start: 0;
19665
19690
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
19666
19691
  }
19667
- .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 {
19668
19693
  position: absolute;
19669
19694
  inset: 0;
19670
19695
  z-index: -1;
19671
19696
  pointer-events: none;
19672
19697
  content: "";
19673
- background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
19674
19698
  border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
19675
19699
  box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
19676
19700
  }
19677
- .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) {
19678
- z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
19679
- }
19680
- .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 {
19681
19702
  position: absolute;
19682
19703
  inset: 0;
19683
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
19704
+ z-index: -1;
19684
19705
  pointer-events: none;
19685
19706
  content: "";
19707
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
19686
19708
  border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
19687
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
+ }
19688
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) {
19689
19726
  border-block-end: 0;
19690
19727
  }
@@ -20395,14 +20432,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20395
20432
  vertical-align: bottom;
20396
20433
  }
20397
20434
  .pf-v6-c-table__thead.pf-m-nested-column-header {
20435
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
20398
20436
  position: relative;
20399
20437
  }
20400
- .pf-v6-c-table__thead.pf-m-nested-column-header::after {
20401
- position: absolute;
20402
- 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) {
20403
20439
  z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
20404
20440
  pointer-events: none;
20405
- content: "";
20406
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);
20407
20442
  }
20408
20443
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
@@ -20443,7 +20478,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20443
20478
  border-block-end: 0;
20444
20479
  }
20445
20480
  .pf-v6-c-table__tr.pf-m-border-row {
20446
- 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);
20447
20483
  }
20448
20484
 
20449
20485
  .pf-v6-c-table__tfoot {