@patternfly/patternfly 6.6.0-prerelease.14 → 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 (22) hide show
  1. package/components/Banner/banner.css +3 -0
  2. package/components/Banner/banner.scss +4 -1
  3. package/components/Button/button.css +15 -1
  4. package/components/Button/button.scss +17 -1
  5. package/components/Table/table.css +26 -18
  6. package/components/Table/table.scss +37 -27
  7. package/components/_index.css +44 -19
  8. package/docs/components/DualListSelector/examples/DualListSelector.md +72 -72
  9. package/docs/components/Pagination/examples/Pagination.md +120 -120
  10. package/docs/components/Table/examples/Table.md +7 -0
  11. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  12. package/docs/demos/CardView/examples/CardView.md +12 -12
  13. package/docs/demos/Compass/examples/Compass.md +16 -16
  14. package/docs/demos/DataList/examples/DataList.md +48 -48
  15. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  16. package/docs/demos/Table/examples/Table.md +160 -160
  17. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  18. package/package.json +1 -1
  19. package/patternfly-no-globals.css +44 -19
  20. package/patternfly.css +44 -19
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -10868,6 +10868,7 @@ div.pf-v6-c-avatar {
10868
10868
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
10869
10869
  --pf-v6-c-banner--link--TextDecoration: underline;
10870
10870
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
10871
+ --pf-v6-c-banner--link--clicked--Color: var(--pf-v6-c-banner--Color);
10871
10872
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
10872
10873
  --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
10873
10874
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
@@ -10990,9 +10991,11 @@ div.pf-v6-c-avatar {
10990
10991
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
10991
10992
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
10992
10993
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
10994
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-v6-c-banner--link--clicked--Color);
10993
10995
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
10994
10996
  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
10995
10997
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
10998
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
10996
10999
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
10997
11000
  }
10998
11001
  .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 {
@@ -11309,6 +11312,10 @@ button.pf-v6-c-breadcrumb__link {
11309
11312
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
11310
11313
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
11311
11314
  --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
11315
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
11316
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
11317
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
11318
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
11312
11319
  --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
11313
11320
  --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
11314
11321
  --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);
@@ -11323,6 +11330,8 @@ button.pf-v6-c-breadcrumb__link {
11323
11330
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
11324
11331
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
11325
11332
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
11333
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
11334
+ --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
11326
11335
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
11327
11336
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
11328
11337
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -11695,9 +11704,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11695
11704
  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
11696
11705
  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
11697
11706
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
11698
- --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
11707
+ --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine);
11708
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle);
11709
+ --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor);
11710
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
11699
11711
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
11700
11712
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
11713
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color);
11714
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color);
11701
11715
  --pf-v6-c-button--BorderWidth: 0;
11702
11716
  --pf-v6-c-button--hover--BorderWidth: 0;
11703
11717
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
@@ -11710,6 +11724,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11710
11724
  .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
11711
11725
  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
11712
11726
  }
11727
+ .pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked {
11728
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
11729
+ }
11713
11730
  .pf-v6-c-button.pf-m-link.pf-m-danger {
11714
11731
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
11715
11732
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -29023,7 +29040,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
29023
29040
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
29024
29041
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
29025
29042
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
29026
- --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;
29027
29044
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
29028
29045
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
29029
29046
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -29066,16 +29083,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
29066
29083
  .pf-v6-c-table.pf-m-fixed {
29067
29084
  table-layout: fixed;
29068
29085
  }
29069
- .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 {
29070
29087
  opacity: 0;
29071
29088
  transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
29072
29089
  transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
29073
29090
  transition-property: opacity;
29074
29091
  }
29075
- .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
29076
- --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
29077
- }
29078
- .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 {
29079
29093
  opacity: 1;
29080
29094
  }
29081
29095
  .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
@@ -29086,27 +29100,39 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
29086
29100
  inset-block-start: 0;
29087
29101
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
29088
29102
  }
29089
- .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 {
29090
29104
  position: absolute;
29091
29105
  inset: 0;
29092
29106
  z-index: -1;
29093
29107
  pointer-events: none;
29094
29108
  content: "";
29095
- background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
29096
29109
  border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
29097
29110
  box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
29098
29111
  }
29099
- .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) {
29100
- z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
29101
- }
29102
- .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 {
29103
29113
  position: absolute;
29104
29114
  inset: 0;
29105
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
29115
+ z-index: -1;
29106
29116
  pointer-events: none;
29107
29117
  content: "";
29118
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
29108
29119
  border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
29109
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
+ }
29110
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) {
29111
29137
  border-block-end: 0;
29112
29138
  }
@@ -29817,14 +29843,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29817
29843
  vertical-align: bottom;
29818
29844
  }
29819
29845
  .pf-v6-c-table__thead.pf-m-nested-column-header {
29846
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
29820
29847
  position: relative;
29821
29848
  }
29822
- .pf-v6-c-table__thead.pf-m-nested-column-header::after {
29823
- position: absolute;
29824
- 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) {
29825
29850
  z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
29826
29851
  pointer-events: none;
29827
- content: "";
29828
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);
29829
29853
  }
29830
29854
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
@@ -29865,7 +29889,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29865
29889
  border-block-end: 0;
29866
29890
  }
29867
29891
  .pf-v6-c-table__tr.pf-m-border-row {
29868
- 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);
29869
29894
  }
29870
29895
 
29871
29896
  .pf-v6-c-table__tfoot {