@patternfly/react-styles 6.6.1-prerelease.3 → 6.6.1-prerelease.4

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 (23) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Backdrop/backdrop.css +34 -0
  3. package/css/components/Backdrop/backdrop.d.ts +5 -1
  4. package/css/components/Backdrop/backdrop.js +5 -1
  5. package/css/components/Backdrop/backdrop.mjs +5 -1
  6. package/css/components/Check/check.css +14 -0
  7. package/css/components/Drawer/drawer.css +1 -0
  8. package/css/components/ModalBox/modal-box.css +42 -0
  9. package/css/components/ModalBox/modal-box.d.ts +2 -0
  10. package/css/components/ModalBox/modal-box.js +2 -0
  11. package/css/components/ModalBox/modal-box.mjs +2 -0
  12. package/css/components/Nav/nav.css +1 -1
  13. package/css/components/Radio/radio.css +14 -0
  14. package/css/components/Table/table.css +63 -17
  15. package/css/components/Table/table.d.ts +2 -0
  16. package/css/components/Table/table.js +2 -0
  17. package/css/components/Table/table.mjs +2 -0
  18. package/css/components/_index.css +169 -18
  19. package/css/components/_index.d.ts +5 -1
  20. package/css/components/_index.js +5 -1
  21. package/css/components/_index.mjs +5 -1
  22. package/css/docs/components/Table/examples/Table.css +2 -6
  23. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.6.1-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.3...@patternfly/react-styles@6.6.1-prerelease.4) (2026-09-24)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **deps:** prerelease bump ([#12659](https://github.com/patternfly/patternfly-react/issues/12659)) ([eb08cef](https://github.com/patternfly/patternfly-react/commit/eb08cef1479219a9a11ae441fafc3f73a938ed30))
11
+
6
12
  ## [6.6.1-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.2...@patternfly/react-styles@6.6.1-prerelease.3) (2026-09-15)
7
13
 
8
14
  ### Features
package/css/components/Backdrop/backdrop.css CHANGED
@@ -2,6 +2,13 @@
2
2
  --pf-v6-c-backdrop--Position: fixed;
3
3
  --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
4
4
  --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
5
+ --pf-v6-c-backdrop--m-animate--Opacity: 0;
6
+ --pf-v6-c-backdrop--m-animate--TransitionProperty: opacity, visibility;
7
+ --pf-v6-c-backdrop--m-animate--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
8
+ --pf-v6-c-backdrop--m-animate--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
9
+ --pf-v6-c-backdrop--m-animate--m-show--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), 0s;
10
+ --pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
11
+ --pf-v6-c-backdrop--m-animate--m-show--Opacity: 1;
5
12
  }
6
13
 
7
14
  .pf-v6-c-backdrop {
@@ -13,6 +20,33 @@
13
20
  height: 100%;
14
21
  background-color: var(--pf-v6-c-backdrop--BackgroundColor);
15
22
  }
23
+ .pf-v6-c-backdrop.pf-m-animate {
24
+ visibility: hidden;
25
+ background-color: transparent;
26
+ }
27
+ .pf-v6-c-backdrop.pf-m-animate::before {
28
+ position: absolute;
29
+ inset: 0;
30
+ content: "";
31
+ background-color: var(--pf-v6-c-backdrop--BackgroundColor);
32
+ opacity: var(--pf-v6-c-backdrop--m-animate--Opacity);
33
+ transition-timing-function: var(--pf-v6-c-backdrop--m-animate--TransitionTimingFunction);
34
+ transition-duration: var(--pf-v6-c-backdrop--m-animate--TransitionDuration);
35
+ transition-property: var(--pf-v6-c-backdrop--m-animate--TransitionProperty, none);
36
+ }
37
+ .pf-v6-c-backdrop.pf-m-show {
38
+ --pf-v6-c-backdrop--m-animate--TransitionDuration: var(--pf-v6-c-backdrop--m-animate--m-show--TransitionDuration);
39
+ --pf-v6-c-backdrop--m-animate--TransitionTimingFunction: var(--pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction);
40
+ visibility: visible;
41
+ }
42
+ .pf-v6-c-backdrop.pf-m-show::before {
43
+ opacity: var(--pf-v6-c-backdrop--m-animate--m-show--Opacity);
44
+ }
45
+ @starting-style {
46
+ .pf-v6-c-backdrop.pf-m-show::before {
47
+ opacity: 0;
48
+ }
49
+ }
16
50
 
17
51
  .pf-v6-c-backdrop__open {
18
52
  overflow: hidden;
package/css/components/Backdrop/backdrop.d.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  import './backdrop.css';
2
2
  declare const _default: {
3
3
  "backdrop": "pf-v6-c-backdrop",
4
- "backdropOpen": "pf-v6-c-backdrop__open"
4
+ "backdropOpen": "pf-v6-c-backdrop__open",
5
+ "modifiers": {
6
+ "animate": "pf-m-animate",
7
+ "show": "pf-m-show"
8
+ }
5
9
  };
6
10
  export default _default;
package/css/components/Backdrop/backdrop.js CHANGED
@@ -3,5 +3,9 @@ exports.__esModule = true;
3
3
  require('./backdrop.css');
4
4
  exports.default = {
5
5
  "backdrop": "pf-v6-c-backdrop",
6
- "backdropOpen": "pf-v6-c-backdrop__open"
6
+ "backdropOpen": "pf-v6-c-backdrop__open",
7
+ "modifiers": {
8
+ "animate": "pf-m-animate",
9
+ "show": "pf-m-show"
10
+ }
7
11
  };
package/css/components/Backdrop/backdrop.mjs CHANGED
@@ -1,5 +1,9 @@
1
1
  import './backdrop.css';
2
2
  export default {
3
3
  "backdrop": "pf-v6-c-backdrop",
4
- "backdropOpen": "pf-v6-c-backdrop__open"
4
+ "backdropOpen": "pf-v6-c-backdrop__open",
5
+ "modifiers": {
6
+ "animate": "pf-m-animate",
7
+ "show": "pf-m-show"
8
+ }
5
9
  };
package/css/components/Check/check.css CHANGED
@@ -2,6 +2,7 @@
2
2
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
3
3
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
4
4
  --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
5
+ --pf-v6-c-check--m-standalone--before--Inset: calc(var(--pf-t--global--spacer--sm) * -1);
5
6
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
6
7
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
7
8
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -26,6 +27,19 @@
26
27
  grid-template-columns: auto;
27
28
  min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
28
29
  }
30
+ label.pf-v6-c-check.pf-m-standalone {
31
+ position: relative;
32
+ isolation: isolate;
33
+ }
34
+ label.pf-v6-c-check.pf-m-standalone::before {
35
+ position: absolute;
36
+ inset: var(--pf-v6-c-check--m-standalone--before--Inset);
37
+ z-index: -1;
38
+ pointer-events: auto;
39
+ cursor: inherit;
40
+ content: "";
41
+ }
42
+
29
43
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
30
44
  align-self: center;
31
45
  transform: none;
package/css/components/Drawer/drawer.css CHANGED
@@ -250,6 +250,7 @@
250
250
  pointer-events: none;
251
251
  }
252
252
  .pf-v6-c-drawer.pf-m-viewport > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
253
+ overscroll-behavior: none;
253
254
  pointer-events: auto;
254
255
  }
255
256
  .pf-v6-c-drawer.pf-m-expanded {
package/css/components/ModalBox/modal-box.css CHANGED
@@ -58,6 +58,17 @@
58
58
  --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
59
59
  --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
60
60
  --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
61
+ --pf-v6-c-modal-box--m-animate--TransitionProperty: opacity, visibility;
62
+ --pf-v6-c-modal-box--m-animate--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
63
+ --pf-v6-c-modal-box--m-animate--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
64
+ --pf-v6-c-modal-box--m-animate--m-open--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
65
+ --pf-v6-c-modal-box--m-animate--m-open--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), 0s;
66
+ }
67
+ @media screen and (prefers-reduced-motion: no-preference) {
68
+ .pf-v6-c-modal-box {
69
+ --pf-v6-c-modal-box--m-animate--TransitionProperty: opacity, translate, visibility;
70
+ --pf-v6-c-modal-box--m-animate--m-open--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--fade--default), 0s;
71
+ }
61
72
  }
62
73
 
63
74
  .pf-v6-c-modal-box {
@@ -89,6 +100,37 @@
89
100
  max-width: var(--pf-v6-c-modal-box--m-align-top--MaxWidth);
90
101
  max-height: var(--pf-v6-c-modal-box--m-align-top--MaxHeight);
91
102
  }
103
+ @media screen and (prefers-reduced-motion: no-preference) {
104
+ .pf-v6-c-modal-box.pf-m-animate {
105
+ translate: 0 1.5rem;
106
+ }
107
+ }
108
+ .pf-v6-c-modal-box.pf-m-animate {
109
+ visibility: hidden;
110
+ pointer-events: none;
111
+ opacity: 0;
112
+ transition-timing-function: var(--pf-v6-c-modal-box--m-animate--TransitionTimingFunction);
113
+ transition-duration: var(--pf-v6-c-modal-box--m-animate--TransitionDuration);
114
+ transition-property: var(--pf-v6-c-modal-box--m-animate--TransitionProperty, none);
115
+ }
116
+ .pf-v6-c-modal-box.pf-m-open {
117
+ --pf-v6-c-modal-box--m-animate--TransitionDuration: var(--pf-v6-c-modal-box--m-animate--m-open--TransitionDuration);
118
+ --pf-v6-c-modal-box--m-animate--TransitionTimingFunction: var(--pf-v6-c-modal-box--m-animate--m-open--TransitionTimingFunction);
119
+ visibility: visible;
120
+ pointer-events: revert;
121
+ opacity: 1;
122
+ translate: 0;
123
+ }
124
+ @starting-style {
125
+ @media screen and (prefers-reduced-motion: no-preference) {
126
+ .pf-v6-c-modal-box.pf-m-open {
127
+ translate: 0 1.5rem;
128
+ }
129
+ }
130
+ .pf-v6-c-modal-box.pf-m-open {
131
+ opacity: 0;
132
+ }
133
+ }
92
134
  .pf-v6-c-modal-box__title.pf-m-danger, .pf-v6-c-modal-box.pf-m-danger {
93
135
  --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-danger__title-icon--Color);
94
136
  }
package/css/components/ModalBox/modal-box.d.ts CHANGED
@@ -16,6 +16,8 @@ declare const _default: {
16
16
  "md": "pf-m-md",
17
17
  "lg": "pf-m-lg",
18
18
  "alignTop": "pf-m-align-top",
19
+ "animate": "pf-m-animate",
20
+ "open": "pf-m-open",
19
21
  "danger": "pf-m-danger",
20
22
  "warning": "pf-m-warning",
21
23
  "success": "pf-m-success",
package/css/components/ModalBox/modal-box.js CHANGED
@@ -18,6 +18,8 @@ exports.default = {
18
18
  "md": "pf-m-md",
19
19
  "lg": "pf-m-lg",
20
20
  "alignTop": "pf-m-align-top",
21
+ "animate": "pf-m-animate",
22
+ "open": "pf-m-open",
21
23
  "danger": "pf-m-danger",
22
24
  "warning": "pf-m-warning",
23
25
  "success": "pf-m-success",
package/css/components/ModalBox/modal-box.mjs CHANGED
@@ -16,6 +16,8 @@ export default {
16
16
  "md": "pf-m-md",
17
17
  "lg": "pf-m-lg",
18
18
  "alignTop": "pf-m-align-top",
19
+ "animate": "pf-m-animate",
20
+ "open": "pf-m-open",
19
21
  "danger": "pf-m-danger",
20
22
  "warning": "pf-m-warning",
21
23
  "success": "pf-m-success",
package/css/components/Nav/nav.css CHANGED
@@ -330,7 +330,7 @@
330
330
  border: var(--pf-v6-c-nav__link--BorderWidth) solid var(--pf-v6-c-nav__link--BorderColor);
331
331
  border-radius: inherit;
332
332
  }
333
- .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
333
+ .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus-visible {
334
334
  --pf-v6-c-nav__link--BorderWidth: var(--pf-v6-c-nav__link--hover--BorderWidth);
335
335
  --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link-icon--hover--Color);
336
336
  color: var(--pf-v6-c-nav__link--hover--Color);
package/css/components/Radio/radio.css CHANGED
@@ -2,6 +2,7 @@
2
2
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
3
3
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
4
4
  --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
5
+ --pf-v6-c-radio--m-standalone--before--Inset: calc(var(--pf-t--global--spacer--sm) * -1);
5
6
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
6
7
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
7
8
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -27,6 +28,19 @@
27
28
  grid-template-columns: auto;
28
29
  min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
29
30
  }
31
+ label.pf-v6-c-radio.pf-m-standalone {
32
+ position: relative;
33
+ isolation: isolate;
34
+ }
35
+ label.pf-v6-c-radio.pf-m-standalone::before {
36
+ position: absolute;
37
+ inset: var(--pf-v6-c-radio--m-standalone--before--Inset);
38
+ z-index: -1;
39
+ pointer-events: auto;
40
+ cursor: inherit;
41
+ content: "";
42
+ }
43
+
30
44
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
31
45
  align-self: center;
32
46
  transform: none;
package/css/components/Table/table.css CHANGED
@@ -104,7 +104,7 @@
104
104
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
105
105
  --pf-v6-c-table__expandable-row-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
106
106
  --pf-v6-c-table__expandable-row-content--BorderWidth: 0;
107
- --pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
107
+ --pf-v6-c-table__control-row--BackgroundColor: var(--pf-v6-c-table--BackgroundColor);
108
108
  --pf-v6-c-table__control-row--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
109
109
  --pf-v6-c-table__control-row__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default);
110
110
  --pf-v6-c-table__icon-inline--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -122,14 +122,14 @@
122
122
  --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
123
123
  --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent;
124
124
  --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
125
- --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
126
- --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
125
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
126
+ --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
127
127
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
128
128
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
129
129
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
130
130
  --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
131
131
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
132
- --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
132
+ --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
133
133
  --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
134
134
  --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
135
135
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -146,14 +146,14 @@
146
146
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
147
147
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
148
148
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
149
- --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
150
- --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
149
+ --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
150
+ --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
151
151
  --pf-v6-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
152
152
  --pf-v6-c-table__tbody--m-clickable--BackgroundColor: transparent;
153
153
  --pf-v6-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
154
- --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
155
- --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
156
- --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
154
+ --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
155
+ --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
156
+ --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
157
157
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
158
158
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
159
159
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
@@ -177,13 +177,25 @@
177
177
  --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
178
178
  --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
179
179
  --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
180
+ --pf-v6-c-table--m-sticky-footer--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
181
+ --pf-v6-c-table--m-sticky-footer--cell--ZIndex: var(--pf-t--global--z-index--xs);
182
+ --pf-v6-c-table--m-sticky-footer--BoxShadow: 0;
183
+ --pf-v6-c-table--m-sticky-footer--BorderRadius: 0;
184
+ --pf-v6-c-table--m-sticky-footer--BorderBlockStartWidth: var(--pf-v6-c-table--border-width--base);
185
+ --pf-v6-c-table--m-sticky-footer--BorderBlockStartColor: var(--pf-v6-c-table--BorderColor);
186
+ --pf-v6-c-table--m-sticky-footer--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
187
+ --pf-v6-c-table--m-sticky-footer--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--short);
188
+ --pf-v6-c-table--m-sticky-footer--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
189
+ --pf-v6-c-table--m-sticky-footer--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
180
190
  --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
181
- --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
182
191
  }
183
192
  :where(.pf-v6-theme-glass) .pf-v6-c-table {
184
193
  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
185
194
  --pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass);
186
195
  --pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass);
196
+ --pf-v6-c-table--m-sticky-footer--BorderBlockStartWidth: 0;
197
+ --pf-v6-c-table--m-sticky-footer--BoxShadow: var(--pf-v6-c-table--m-sticky-footer--BoxShadow--glass);
198
+ --pf-v6-c-table--m-sticky-footer--BorderRadius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius--glass);
187
199
  }
188
200
 
189
201
  .pf-v6-c-table {
@@ -257,22 +269,56 @@
257
269
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
258
270
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
259
271
  }
260
- .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
272
+ .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot :is(.pf-v6-c-table__th, .pf-v6-c-table__td)::after {
273
+ opacity: 0;
274
+ transition-timing-function: var(--pf-v6-c-table--m-sticky-footer--TransitionTimingFunction--BackgroundColor);
275
+ transition-duration: var(--pf-v6-c-table--m-sticky-footer--TransitionDuration--BackgroundColor);
276
+ transition-property: opacity;
277
+ }
278
+ .pf-v6-c-table.pf-m-sticky-footer-stuck > .pf-v6-c-table__tfoot::after, .pf-v6-c-table.pf-m-sticky-footer-stuck > .pf-v6-c-table__tfoot :is(.pf-v6-c-table__th, .pf-v6-c-table__td)::after {
279
+ opacity: 1;
280
+ }
281
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type, .pf-v6-c-table.pf-m-sticky-footer-stuck > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
282
+ border-block-end-color: transparent;
283
+ }
284
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot {
261
285
  position: sticky;
262
286
  inset-block-end: 0;
263
287
  z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
264
- background: var(--pf-v6-c-table--BackgroundColor);
288
+ background: transparent;
265
289
  }
266
- .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
290
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot::after {
267
291
  position: absolute;
268
292
  inset: 0;
269
- z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
293
+ z-index: -1;
270
294
  pointer-events: none;
271
295
  content: "";
272
- border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
296
+ border-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
297
+ box-shadow: var(--pf-v6-c-table--m-sticky-footer--BoxShadow);
273
298
  }
274
- .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
275
- border-block-end: 0;
299
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr > :is(th, td), .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr > :is(th, td) {
300
+ z-index: var(--pf-v6-c-table--m-sticky-footer--cell--ZIndex);
301
+ }
302
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot :is(.pf-v6-c-table__th, .pf-v6-c-table__td)::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot :is(.pf-v6-c-table__th, .pf-v6-c-table__td)::after {
303
+ position: absolute;
304
+ inset: 0;
305
+ z-index: -1;
306
+ pointer-events: none;
307
+ content: "";
308
+ background: var(--pf-v6-c-table--m-sticky-footer--BackgroundColor);
309
+ border-block-start: var(--pf-v6-c-table--m-sticky-footer--BorderBlockStartWidth) solid var(--pf-v6-c-table--m-sticky-footer--BorderBlockStartColor);
310
+ }
311
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:first-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):first-child::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:first-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):first-child::after {
312
+ border-start-start-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
313
+ }
314
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:last-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):first-child::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:last-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):first-child::after {
315
+ border-end-start-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
316
+ }
317
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:first-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):last-child::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:first-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):last-child::after {
318
+ border-start-end-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
319
+ }
320
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:last-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):last-child::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:last-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):last-child::after {
321
+ border-end-end-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
276
322
  }
277
323
  .pf-v6-c-table.pf-m-plain {
278
324
  --pf-v6-c-table--BackgroundColor: transparent;
package/css/components/Table/table.d.ts CHANGED
@@ -11,6 +11,8 @@ declare const _default: {
11
11
  "stickyHeaderStuck": "pf-m-sticky-header-stuck",
12
12
  "stickyHeader": "pf-m-sticky-header",
13
13
  "nestedColumnHeader": "pf-m-nested-column-header",
14
+ "stickyFooterBase": "pf-m-sticky-footer-base",
15
+ "stickyFooterStuck": "pf-m-sticky-footer-stuck",
14
16
  "stickyFooter": "pf-m-sticky-footer",
15
17
  "striped": "pf-m-striped",
16
18
  "expandable": "pf-m-expandable",
package/css/components/Table/table.js CHANGED
@@ -13,6 +13,8 @@ exports.default = {
13
13
  "stickyHeaderStuck": "pf-m-sticky-header-stuck",
14
14
  "stickyHeader": "pf-m-sticky-header",
15
15
  "nestedColumnHeader": "pf-m-nested-column-header",
16
+ "stickyFooterBase": "pf-m-sticky-footer-base",
17
+ "stickyFooterStuck": "pf-m-sticky-footer-stuck",
16
18
  "stickyFooter": "pf-m-sticky-footer",
17
19
  "striped": "pf-m-striped",
18
20
  "expandable": "pf-m-expandable",
package/css/components/Table/table.mjs CHANGED
@@ -11,6 +11,8 @@ export default {
11
11
  "stickyHeaderStuck": "pf-m-sticky-header-stuck",
12
12
  "stickyHeader": "pf-m-sticky-header",
13
13
  "nestedColumnHeader": "pf-m-nested-column-header",
14
+ "stickyFooterBase": "pf-m-sticky-footer-base",
15
+ "stickyFooterStuck": "pf-m-sticky-footer-stuck",
14
16
  "stickyFooter": "pf-m-sticky-footer",
15
17
  "striped": "pf-m-striped",
16
18
  "expandable": "pf-m-expandable",
package/css/components/_index.css CHANGED
@@ -1284,6 +1284,13 @@ div.pf-v6-c-avatar {
1284
1284
  --pf-v6-c-backdrop--Position: fixed;
1285
1285
  --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
1286
1286
  --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
1287
+ --pf-v6-c-backdrop--m-animate--Opacity: 0;
1288
+ --pf-v6-c-backdrop--m-animate--TransitionProperty: opacity, visibility;
1289
+ --pf-v6-c-backdrop--m-animate--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1290
+ --pf-v6-c-backdrop--m-animate--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1291
+ --pf-v6-c-backdrop--m-animate--m-show--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), 0s;
1292
+ --pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1293
+ --pf-v6-c-backdrop--m-animate--m-show--Opacity: 1;
1287
1294
  }
1288
1295
 
1289
1296
  .pf-v6-c-backdrop {
@@ -1295,6 +1302,33 @@ div.pf-v6-c-avatar {
1295
1302
  height: 100%;
1296
1303
  background-color: var(--pf-v6-c-backdrop--BackgroundColor);
1297
1304
  }
1305
+ .pf-v6-c-backdrop.pf-m-animate {
1306
+ visibility: hidden;
1307
+ background-color: transparent;
1308
+ }
1309
+ .pf-v6-c-backdrop.pf-m-animate::before {
1310
+ position: absolute;
1311
+ inset: 0;
1312
+ content: "";
1313
+ background-color: var(--pf-v6-c-backdrop--BackgroundColor);
1314
+ opacity: var(--pf-v6-c-backdrop--m-animate--Opacity);
1315
+ transition-timing-function: var(--pf-v6-c-backdrop--m-animate--TransitionTimingFunction);
1316
+ transition-duration: var(--pf-v6-c-backdrop--m-animate--TransitionDuration);
1317
+ transition-property: var(--pf-v6-c-backdrop--m-animate--TransitionProperty, none);
1318
+ }
1319
+ .pf-v6-c-backdrop.pf-m-show {
1320
+ --pf-v6-c-backdrop--m-animate--TransitionDuration: var(--pf-v6-c-backdrop--m-animate--m-show--TransitionDuration);
1321
+ --pf-v6-c-backdrop--m-animate--TransitionTimingFunction: var(--pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction);
1322
+ visibility: visible;
1323
+ }
1324
+ .pf-v6-c-backdrop.pf-m-show::before {
1325
+ opacity: var(--pf-v6-c-backdrop--m-animate--m-show--Opacity);
1326
+ }
1327
+ @starting-style {
1328
+ .pf-v6-c-backdrop.pf-m-show::before {
1329
+ opacity: 0;
1330
+ }
1331
+ }
1298
1332
 
1299
1333
  .pf-v6-c-backdrop__open {
1300
1334
  overflow: hidden;
@@ -3413,6 +3447,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3413
3447
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
3414
3448
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
3415
3449
  --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
3450
+ --pf-v6-c-check--m-standalone--before--Inset: calc(var(--pf-t--global--spacer--sm) * -1);
3416
3451
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
3417
3452
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
3418
3453
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -3437,6 +3472,19 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3437
3472
  grid-template-columns: auto;
3438
3473
  min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
3439
3474
  }
3475
+ label.pf-v6-c-check.pf-m-standalone {
3476
+ position: relative;
3477
+ isolation: isolate;
3478
+ }
3479
+ label.pf-v6-c-check.pf-m-standalone::before {
3480
+ position: absolute;
3481
+ inset: var(--pf-v6-c-check--m-standalone--before--Inset);
3482
+ z-index: -1;
3483
+ pointer-events: auto;
3484
+ cursor: inherit;
3485
+ content: "";
3486
+ }
3487
+
3440
3488
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
3441
3489
  align-self: center;
3442
3490
  transform: none;
@@ -6829,6 +6877,7 @@ ul) {
6829
6877
  pointer-events: none;
6830
6878
  }
6831
6879
  .pf-v6-c-drawer.pf-m-viewport > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6880
+ overscroll-behavior: none;
6832
6881
  pointer-events: auto;
6833
6882
  }
6834
6883
  .pf-v6-c-drawer.pf-m-expanded {
@@ -12767,6 +12816,17 @@ ul.pf-v6-c-list {
12767
12816
  --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12768
12817
  --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
12769
12818
  --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
12819
+ --pf-v6-c-modal-box--m-animate--TransitionProperty: opacity, visibility;
12820
+ --pf-v6-c-modal-box--m-animate--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
12821
+ --pf-v6-c-modal-box--m-animate--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
12822
+ --pf-v6-c-modal-box--m-animate--m-open--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12823
+ --pf-v6-c-modal-box--m-animate--m-open--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), 0s;
12824
+ }
12825
+ @media screen and (prefers-reduced-motion: no-preference) {
12826
+ .pf-v6-c-modal-box {
12827
+ --pf-v6-c-modal-box--m-animate--TransitionProperty: opacity, translate, visibility;
12828
+ --pf-v6-c-modal-box--m-animate--m-open--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--fade--default), 0s;
12829
+ }
12770
12830
  }
12771
12831
 
12772
12832
  .pf-v6-c-modal-box {
@@ -12798,6 +12858,37 @@ ul.pf-v6-c-list {
12798
12858
  max-width: var(--pf-v6-c-modal-box--m-align-top--MaxWidth);
12799
12859
  max-height: var(--pf-v6-c-modal-box--m-align-top--MaxHeight);
12800
12860
  }
12861
+ @media screen and (prefers-reduced-motion: no-preference) {
12862
+ .pf-v6-c-modal-box.pf-m-animate {
12863
+ translate: 0 1.5rem;
12864
+ }
12865
+ }
12866
+ .pf-v6-c-modal-box.pf-m-animate {
12867
+ visibility: hidden;
12868
+ pointer-events: none;
12869
+ opacity: 0;
12870
+ transition-timing-function: var(--pf-v6-c-modal-box--m-animate--TransitionTimingFunction);
12871
+ transition-duration: var(--pf-v6-c-modal-box--m-animate--TransitionDuration);
12872
+ transition-property: var(--pf-v6-c-modal-box--m-animate--TransitionProperty, none);
12873
+ }
12874
+ .pf-v6-c-modal-box.pf-m-open {
12875
+ --pf-v6-c-modal-box--m-animate--TransitionDuration: var(--pf-v6-c-modal-box--m-animate--m-open--TransitionDuration);
12876
+ --pf-v6-c-modal-box--m-animate--TransitionTimingFunction: var(--pf-v6-c-modal-box--m-animate--m-open--TransitionTimingFunction);
12877
+ visibility: visible;
12878
+ pointer-events: revert;
12879
+ opacity: 1;
12880
+ translate: 0;
12881
+ }
12882
+ @starting-style {
12883
+ @media screen and (prefers-reduced-motion: no-preference) {
12884
+ .pf-v6-c-modal-box.pf-m-open {
12885
+ translate: 0 1.5rem;
12886
+ }
12887
+ }
12888
+ .pf-v6-c-modal-box.pf-m-open {
12889
+ opacity: 0;
12890
+ }
12891
+ }
12801
12892
  .pf-v6-c-modal-box__title.pf-m-danger, .pf-v6-c-modal-box.pf-m-danger {
12802
12893
  --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-danger__title-icon--Color);
12803
12894
  }
@@ -13459,7 +13550,7 @@ ul.pf-v6-c-list {
13459
13550
  border: var(--pf-v6-c-nav__link--BorderWidth) solid var(--pf-v6-c-nav__link--BorderColor);
13460
13551
  border-radius: inherit;
13461
13552
  }
13462
- .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
13553
+ .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus-visible {
13463
13554
  --pf-v6-c-nav__link--BorderWidth: var(--pf-v6-c-nav__link--hover--BorderWidth);
13464
13555
  --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link-icon--hover--Color);
13465
13556
  color: var(--pf-v6-c-nav__link--hover--Color);
@@ -16730,6 +16821,7 @@ ul.pf-v6-c-list {
16730
16821
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
16731
16822
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
16732
16823
  --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
16824
+ --pf-v6-c-radio--m-standalone--before--Inset: calc(var(--pf-t--global--spacer--sm) * -1);
16733
16825
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
16734
16826
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
16735
16827
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -16755,6 +16847,19 @@ ul.pf-v6-c-list {
16755
16847
  grid-template-columns: auto;
16756
16848
  min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
16757
16849
  }
16850
+ label.pf-v6-c-radio.pf-m-standalone {
16851
+ position: relative;
16852
+ isolation: isolate;
16853
+ }
16854
+ label.pf-v6-c-radio.pf-m-standalone::before {
16855
+ position: absolute;
16856
+ inset: var(--pf-v6-c-radio--m-standalone--before--Inset);
16857
+ z-index: -1;
16858
+ pointer-events: auto;
16859
+ cursor: inherit;
16860
+ content: "";
16861
+ }
16862
+
16758
16863
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
16759
16864
  align-self: center;
16760
16865
  transform: none;
@@ -19701,7 +19806,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19701
19806
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19702
19807
  --pf-v6-c-table__expandable-row-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
19703
19808
  --pf-v6-c-table__expandable-row-content--BorderWidth: 0;
19704
- --pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19809
+ --pf-v6-c-table__control-row--BackgroundColor: var(--pf-v6-c-table--BackgroundColor);
19705
19810
  --pf-v6-c-table__control-row--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
19706
19811
  --pf-v6-c-table__control-row__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default);
19707
19812
  --pf-v6-c-table__icon-inline--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -19719,14 +19824,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19719
19824
  --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
19720
19825
  --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent;
19721
19826
  --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
19722
- --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
19723
- --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19827
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
19828
+ --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
19724
19829
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
19725
19830
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
19726
19831
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
19727
19832
  --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
19728
19833
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
19729
- --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19834
+ --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
19730
19835
  --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
19731
19836
  --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
19732
19837
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -19743,14 +19848,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19743
19848
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
19744
19849
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
19745
19850
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
19746
- --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
19747
- --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19851
+ --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
19852
+ --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
19748
19853
  --pf-v6-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
19749
19854
  --pf-v6-c-table__tbody--m-clickable--BackgroundColor: transparent;
19750
19855
  --pf-v6-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
19751
- --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
19752
- --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19753
- --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19856
+ --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
19857
+ --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
19858
+ --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
19754
19859
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
19755
19860
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
19756
19861
  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
@@ -19774,13 +19879,25 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19774
19879
  --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
19775
19880
  --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
19776
19881
  --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
19882
+ --pf-v6-c-table--m-sticky-footer--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
19883
+ --pf-v6-c-table--m-sticky-footer--cell--ZIndex: var(--pf-t--global--z-index--xs);
19884
+ --pf-v6-c-table--m-sticky-footer--BoxShadow: 0;
19885
+ --pf-v6-c-table--m-sticky-footer--BorderRadius: 0;
19886
+ --pf-v6-c-table--m-sticky-footer--BorderBlockStartWidth: var(--pf-v6-c-table--border-width--base);
19887
+ --pf-v6-c-table--m-sticky-footer--BorderBlockStartColor: var(--pf-v6-c-table--BorderColor);
19888
+ --pf-v6-c-table--m-sticky-footer--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
19889
+ --pf-v6-c-table--m-sticky-footer--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--short);
19890
+ --pf-v6-c-table--m-sticky-footer--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
19891
+ --pf-v6-c-table--m-sticky-footer--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
19777
19892
  --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
19778
- --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
19779
19893
  }
19780
19894
  :where(.pf-v6-theme-glass) .pf-v6-c-table {
19781
19895
  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
19782
19896
  --pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass);
19783
19897
  --pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass);
19898
+ --pf-v6-c-table--m-sticky-footer--BorderBlockStartWidth: 0;
19899
+ --pf-v6-c-table--m-sticky-footer--BoxShadow: var(--pf-v6-c-table--m-sticky-footer--BoxShadow--glass);
19900
+ --pf-v6-c-table--m-sticky-footer--BorderRadius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius--glass);
19784
19901
  }
19785
19902
 
19786
19903
  .pf-v6-c-table {
@@ -19854,22 +19971,56 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19854
19971
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
19855
19972
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
19856
19973
  }
19857
- .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
19974
+ .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot :is(.pf-v6-c-table__th, .pf-v6-c-table__td)::after {
19975
+ opacity: 0;
19976
+ transition-timing-function: var(--pf-v6-c-table--m-sticky-footer--TransitionTimingFunction--BackgroundColor);
19977
+ transition-duration: var(--pf-v6-c-table--m-sticky-footer--TransitionDuration--BackgroundColor);
19978
+ transition-property: opacity;
19979
+ }
19980
+ .pf-v6-c-table.pf-m-sticky-footer-stuck > .pf-v6-c-table__tfoot::after, .pf-v6-c-table.pf-m-sticky-footer-stuck > .pf-v6-c-table__tfoot :is(.pf-v6-c-table__th, .pf-v6-c-table__td)::after {
19981
+ opacity: 1;
19982
+ }
19983
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type, .pf-v6-c-table.pf-m-sticky-footer-stuck > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
19984
+ border-block-end-color: transparent;
19985
+ }
19986
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot {
19858
19987
  position: sticky;
19859
19988
  inset-block-end: 0;
19860
19989
  z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
19861
- background: var(--pf-v6-c-table--BackgroundColor);
19990
+ background: transparent;
19862
19991
  }
19863
- .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
19992
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot::after {
19864
19993
  position: absolute;
19865
19994
  inset: 0;
19866
- z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
19995
+ z-index: -1;
19867
19996
  pointer-events: none;
19868
19997
  content: "";
19869
- border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
19998
+ border-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
19999
+ box-shadow: var(--pf-v6-c-table--m-sticky-footer--BoxShadow);
19870
20000
  }
19871
- .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
19872
- border-block-end: 0;
20001
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr > :is(th, td), .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr > :is(th, td) {
20002
+ z-index: var(--pf-v6-c-table--m-sticky-footer--cell--ZIndex);
20003
+ }
20004
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot :is(.pf-v6-c-table__th, .pf-v6-c-table__td)::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot :is(.pf-v6-c-table__th, .pf-v6-c-table__td)::after {
20005
+ position: absolute;
20006
+ inset: 0;
20007
+ z-index: -1;
20008
+ pointer-events: none;
20009
+ content: "";
20010
+ background: var(--pf-v6-c-table--m-sticky-footer--BackgroundColor);
20011
+ border-block-start: var(--pf-v6-c-table--m-sticky-footer--BorderBlockStartWidth) solid var(--pf-v6-c-table--m-sticky-footer--BorderBlockStartColor);
20012
+ }
20013
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:first-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):first-child::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:first-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):first-child::after {
20014
+ border-start-start-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
20015
+ }
20016
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:last-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):first-child::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:last-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):first-child::after {
20017
+ border-end-start-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
20018
+ }
20019
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:first-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):last-child::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:first-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):last-child::after {
20020
+ border-start-end-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
20021
+ }
20022
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:last-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):last-child::after, .pf-v6-c-table.pf-m-sticky-footer-base > .pf-v6-c-table__tfoot > .pf-v6-c-table__tr:last-child > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):last-child::after {
20023
+ border-end-end-radius: var(--pf-v6-c-table--m-sticky-footer--BorderRadius);
19873
20024
  }
19874
20025
  .pf-v6-c-table.pf-m-plain {
19875
20026
  --pf-v6-c-table--BackgroundColor: transparent;
package/css/components/_index.d.ts CHANGED
@@ -406,6 +406,8 @@ declare const _default: {
406
406
  "blue": "pf-m-blue",
407
407
  "purple": "pf-m-purple",
408
408
  "gray": "pf-m-gray",
409
+ "animate": "pf-m-animate",
410
+ "show": "pf-m-show",
409
411
  "hidden": "pf-m-hidden",
410
412
  "read": "pf-m-read",
411
413
  "unread": "pf-m-unread",
@@ -715,6 +717,7 @@ declare const _default: {
715
717
  "text": "pf-m-text",
716
718
  "avatar": "pf-m-avatar",
717
719
  "alignTop": "pf-m-align-top",
720
+ "open": "pf-m-open",
718
721
  "help": "pf-m-help",
719
722
  "overflowHidden": "pf-m-overflow-hidden",
720
723
  "inset": "pf-m-inset",
@@ -841,6 +844,8 @@ declare const _default: {
841
844
  "stickyHeaderStuck": "pf-m-sticky-header-stuck",
842
845
  "stickyHeader": "pf-m-sticky-header",
843
846
  "nestedColumnHeader": "pf-m-nested-column-header",
847
+ "stickyFooterBase": "pf-m-sticky-footer-base",
848
+ "stickyFooterStuck": "pf-m-sticky-footer-stuck",
844
849
  "stickyFooter": "pf-m-sticky-footer",
845
850
  "striped": "pf-m-striped",
846
851
  "stripedEven": "pf-m-striped-even",
@@ -945,7 +950,6 @@ declare const _default: {
945
950
  "columnGap_4xl": "pf-m-column-gap-4xl",
946
951
  "rowGap_4xl": "pf-m-row-gap-4xl",
947
952
  "toggleGroup": "pf-m-toggle-group",
948
- "show": "pf-m-show",
949
953
  "hide": "pf-m-hide",
950
954
  "alignStartOnSm": "pf-m-align-start-on-sm",
951
955
  "alignCenterOnSm": "pf-m-align-center-on-sm",
package/css/components/_index.js CHANGED
@@ -408,6 +408,8 @@ exports.default = {
408
408
  "blue": "pf-m-blue",
409
409
  "purple": "pf-m-purple",
410
410
  "gray": "pf-m-gray",
411
+ "animate": "pf-m-animate",
412
+ "show": "pf-m-show",
411
413
  "hidden": "pf-m-hidden",
412
414
  "read": "pf-m-read",
413
415
  "unread": "pf-m-unread",
@@ -717,6 +719,7 @@ exports.default = {
717
719
  "text": "pf-m-text",
718
720
  "avatar": "pf-m-avatar",
719
721
  "alignTop": "pf-m-align-top",
722
+ "open": "pf-m-open",
720
723
  "help": "pf-m-help",
721
724
  "overflowHidden": "pf-m-overflow-hidden",
722
725
  "inset": "pf-m-inset",
@@ -843,6 +846,8 @@ exports.default = {
843
846
  "stickyHeaderStuck": "pf-m-sticky-header-stuck",
844
847
  "stickyHeader": "pf-m-sticky-header",
845
848
  "nestedColumnHeader": "pf-m-nested-column-header",
849
+ "stickyFooterBase": "pf-m-sticky-footer-base",
850
+ "stickyFooterStuck": "pf-m-sticky-footer-stuck",
846
851
  "stickyFooter": "pf-m-sticky-footer",
847
852
  "striped": "pf-m-striped",
848
853
  "stripedEven": "pf-m-striped-even",
@@ -947,7 +952,6 @@ exports.default = {
947
952
  "columnGap_4xl": "pf-m-column-gap-4xl",
948
953
  "rowGap_4xl": "pf-m-row-gap-4xl",
949
954
  "toggleGroup": "pf-m-toggle-group",
950
- "show": "pf-m-show",
951
955
  "hide": "pf-m-hide",
952
956
  "alignStartOnSm": "pf-m-align-start-on-sm",
953
957
  "alignCenterOnSm": "pf-m-align-center-on-sm",
package/css/components/_index.mjs CHANGED
@@ -406,6 +406,8 @@ export default {
406
406
  "blue": "pf-m-blue",
407
407
  "purple": "pf-m-purple",
408
408
  "gray": "pf-m-gray",
409
+ "animate": "pf-m-animate",
410
+ "show": "pf-m-show",
409
411
  "hidden": "pf-m-hidden",
410
412
  "read": "pf-m-read",
411
413
  "unread": "pf-m-unread",
@@ -715,6 +717,7 @@ export default {
715
717
  "text": "pf-m-text",
716
718
  "avatar": "pf-m-avatar",
717
719
  "alignTop": "pf-m-align-top",
720
+ "open": "pf-m-open",
718
721
  "help": "pf-m-help",
719
722
  "overflowHidden": "pf-m-overflow-hidden",
720
723
  "inset": "pf-m-inset",
@@ -841,6 +844,8 @@ export default {
841
844
  "stickyHeaderStuck": "pf-m-sticky-header-stuck",
842
845
  "stickyHeader": "pf-m-sticky-header",
843
846
  "nestedColumnHeader": "pf-m-nested-column-header",
847
+ "stickyFooterBase": "pf-m-sticky-footer-base",
848
+ "stickyFooterStuck": "pf-m-sticky-footer-stuck",
844
849
  "stickyFooter": "pf-m-sticky-footer",
845
850
  "striped": "pf-m-striped",
846
851
  "stripedEven": "pf-m-striped-even",
@@ -945,7 +950,6 @@ export default {
945
950
  "columnGap_4xl": "pf-m-column-gap-4xl",
946
951
  "rowGap_4xl": "pf-m-row-gap-4xl",
947
952
  "toggleGroup": "pf-m-toggle-group",
948
- "show": "pf-m-show",
949
953
  "hide": "pf-m-hide",
950
954
  "alignStartOnSm": "pf-m-align-start-on-sm",
951
955
  "alignCenterOnSm": "pf-m-align-center-on-sm",
package/css/docs/components/Table/examples/Table.css CHANGED
@@ -13,15 +13,11 @@
13
13
  #ws-core-c-table-nested-column-headers-sticky-header .ws-preview-html,
14
14
  #ws-core-c-table-sticky-header .ws-preview-html,
15
15
  #ws-core-c-table-sticky-footer .ws-preview-html,
16
- #ws-core-c-table-sticky-header-with-base-and-stuck .ws-preview-html {
16
+ #ws-core-c-table-sticky-header-with-base-and-stuck .ws-preview-html,
17
+ #ws-core-c-table-sticky-footer-with-base-and-stuck .ws-preview-html {
17
18
  height: 400px;
18
19
  }
19
20
 
20
- #ws-core-c-table-sticky-header .ws-preview-html,
21
- #ws-core-c-table-sticky-footer .ws-preview-html {
22
- overflow: auto;
23
- }
24
-
25
21
  .pf-v6-c-overflow-menu .pf-v6-c-menu {
26
22
  position: absolute;
27
23
  inset-inline-end: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.6.1-prerelease.3",
3
+ "version": "6.6.1-prerelease.4",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.6.0-prerelease.41",
22
+ "@patternfly/patternfly": "6.6.0-prerelease.49",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.3"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "103c595fefeee9e6cf6209cc94154b0551702f18"
27
+ "gitHead": "d05c304675ccc19b82df36c0701986120e353329"
28
28
  }