@patternfly/react-styles 6.5.0-prerelease.16 → 6.5.0-prerelease.17

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 (33) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Accordion/accordion.css +1 -2
  3. package/css/components/Accordion/accordion.d.ts +1 -1
  4. package/css/components/Accordion/accordion.js +1 -1
  5. package/css/components/Accordion/accordion.mjs +1 -1
  6. package/css/components/Breadcrumb/breadcrumb.css +6 -2
  7. package/css/components/DataList/data-list.css +1 -1
  8. package/css/components/DataList/data-list.d.ts +1 -1
  9. package/css/components/DataList/data-list.js +1 -1
  10. package/css/components/DataList/data-list.mjs +1 -1
  11. package/css/components/Drawer/drawer.css +3 -5
  12. package/css/components/Drawer/drawer.d.ts +1 -1
  13. package/css/components/Drawer/drawer.js +1 -1
  14. package/css/components/Drawer/drawer.mjs +1 -1
  15. package/css/components/MenuToggle/menu-toggle.css +1 -1
  16. package/css/components/Page/page.css +11 -11
  17. package/css/components/Page/page.d.ts +1 -1
  18. package/css/components/Page/page.js +1 -1
  19. package/css/components/Page/page.mjs +1 -1
  20. package/css/components/Table/table.css +59 -21
  21. package/css/components/Table/table.d.ts +3 -1
  22. package/css/components/Table/table.js +3 -1
  23. package/css/components/Table/table.mjs +3 -1
  24. package/css/components/Wizard/wizard.css +2 -2
  25. package/css/components/Wizard/wizard.d.ts +1 -1
  26. package/css/components/Wizard/wizard.js +1 -1
  27. package/css/components/Wizard/wizard.mjs +1 -1
  28. package/css/components/_index.css +84 -45
  29. package/css/components/_index.d.ts +2 -0
  30. package/css/components/_index.js +2 -0
  31. package/css/components/_index.mjs +2 -0
  32. package/css/docs/components/Table/examples/Table.css +2 -1
  33. 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.5.0-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.16...@patternfly/react-styles@6.5.0-prerelease.17) (2026-04-13)
7
+
8
+ ### Features
9
+
10
+ - **Accordion:** Added isPlain and isNoPlainOnGlass prop to Accordion ([#12288](https://github.com/patternfly/patternfly-react/issues/12288)) ([55ffb51](https://github.com/patternfly/patternfly-react/commit/55ffb51760542045f9b7dac0af584cee4a3eff4e))
11
+
6
12
  # [6.5.0-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.15...@patternfly/react-styles@6.5.0-prerelease.16) (2026-04-06)
7
13
 
8
14
  ### Features
@@ -104,13 +104,12 @@
104
104
  row-gap: var(--pf-v6-c-accordion--RowGap);
105
105
  background-color: var(--pf-v6-c-accordion--BackgroundColor);
106
106
  }
107
- :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass), .pf-v6-c-accordion.pf-m-plain {
107
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-accordion.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass) {
108
108
  --pf-v6-c-accordion--BackgroundColor: transparent;
109
109
  --pf-v6-c-accordion__expandable-content--BackgroundColor: transparent;
110
110
  --pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent;
111
111
  --pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor: var(--pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor);
112
112
  }
113
-
114
113
  .pf-v6-c-accordion.pf-m-toggle-start {
115
114
  --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap);
116
115
  }
@@ -9,8 +9,8 @@ declare const _default: {
9
9
  "accordionToggleText": "pf-v6-c-accordion__toggle-text",
10
10
  "dirRtl": "pf-v6-m-dir-rtl",
11
11
  "modifiers": {
12
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
13
12
  "plain": "pf-m-plain",
13
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
14
14
  "toggleStart": "pf-m-toggle-start",
15
15
  "displayLg": "pf-m-display-lg",
16
16
  "bordered": "pf-m-bordered",
@@ -11,8 +11,8 @@ exports.default = {
11
11
  "accordionToggleText": "pf-v6-c-accordion__toggle-text",
12
12
  "dirRtl": "pf-v6-m-dir-rtl",
13
13
  "modifiers": {
14
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
15
14
  "plain": "pf-m-plain",
15
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
16
16
  "toggleStart": "pf-m-toggle-start",
17
17
  "displayLg": "pf-m-display-lg",
18
18
  "bordered": "pf-m-bordered",
@@ -9,8 +9,8 @@ export default {
9
9
  "accordionToggleText": "pf-v6-c-accordion__toggle-text",
10
10
  "dirRtl": "pf-v6-m-dir-rtl",
11
11
  "modifiers": {
12
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
13
12
  "plain": "pf-m-plain",
13
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
14
14
  "toggleStart": "pf-m-toggle-start",
15
15
  "displayLg": "pf-m-display-lg",
16
16
  "bordered": "pf-m-bordered",
@@ -1,5 +1,5 @@
1
1
  .pf-v6-c-breadcrumb {
2
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3
3
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
4
4
  --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
5
5
  --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
@@ -10,12 +10,14 @@
10
10
  --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
11
11
  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
12
12
  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
13
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
13
14
  --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
14
15
  --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
15
16
  --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
17
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
16
18
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
17
19
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
18
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
20
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
19
21
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
20
22
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
21
23
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -68,6 +70,7 @@
68
70
  color: var(--pf-v6-c-breadcrumb__link--Color);
69
71
  text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
70
72
  text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
73
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
71
74
  word-break: break-word;
72
75
  background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
73
76
  }
@@ -75,6 +78,7 @@
75
78
  --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
76
79
  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
77
80
  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
81
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
78
82
  }
79
83
  .pf-v6-c-breadcrumb__link.pf-m-current {
80
84
  cursor: default;
@@ -572,7 +572,7 @@
572
572
  .pf-v6-c-data-list.pf-m-drag-over {
573
573
  overflow-anchor: none;
574
574
  }
575
- :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass), .pf-v6-c-data-list.pf-m-plain {
575
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-data-list.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass) {
576
576
  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
577
577
  }
578
578
 
@@ -32,8 +32,8 @@ declare const _default: {
32
32
  "grid_2xl": "pf-m-grid-2xl",
33
33
  "compact": "pf-m-compact",
34
34
  "dragOver": "pf-m-drag-over",
35
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
36
35
  "plain": "pf-m-plain",
36
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
37
37
  "truncate": "pf-m-truncate",
38
38
  "breakWord": "pf-m-break-word",
39
39
  "nowrap": "pf-m-nowrap",
@@ -34,8 +34,8 @@ exports.default = {
34
34
  "grid_2xl": "pf-m-grid-2xl",
35
35
  "compact": "pf-m-compact",
36
36
  "dragOver": "pf-m-drag-over",
37
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
38
37
  "plain": "pf-m-plain",
38
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
39
39
  "truncate": "pf-m-truncate",
40
40
  "breakWord": "pf-m-break-word",
41
41
  "nowrap": "pf-m-nowrap",
@@ -32,8 +32,8 @@ export default {
32
32
  "grid_2xl": "pf-m-grid-2xl",
33
33
  "compact": "pf-m-compact",
34
34
  "dragOver": "pf-m-drag-over",
35
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
36
35
  "plain": "pf-m-plain",
36
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
37
37
  "truncate": "pf-m-truncate",
38
38
  "breakWord": "pf-m-break-word",
39
39
  "nowrap": "pf-m-nowrap",
@@ -226,11 +226,9 @@
226
226
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
227
227
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
228
228
  }
229
- .pf-v6-c-drawer.pf-m-inline.pf-m-glass, .pf-v6-c-drawer.pf-m-static.pf-m-glass {
229
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
230
230
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
231
231
  --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
232
- }
233
- .pf-v6-c-drawer.pf-m-inline.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
234
232
  backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
235
233
  }
236
234
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -563,8 +561,8 @@
563
561
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
564
562
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
565
563
  }
566
- :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
567
- background: transparent;
564
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
565
+ --pf-v6-c-drawer__panel--BackgroundColor: transparent;
568
566
  }
569
567
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
570
568
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
@@ -31,8 +31,8 @@ declare const _default: {
31
31
  "noPadding": "pf-m-no-padding",
32
32
  "padding": "pf-m-padding",
33
33
  "vertical": "pf-m-vertical",
34
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
35
34
  "plain": "pf-m-plain",
35
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
36
36
  "width_25": "pf-m-width-25",
37
37
  "width_33": "pf-m-width-33",
38
38
  "width_50": "pf-m-width-50",
@@ -33,8 +33,8 @@ exports.default = {
33
33
  "noPadding": "pf-m-no-padding",
34
34
  "padding": "pf-m-padding",
35
35
  "vertical": "pf-m-vertical",
36
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
37
36
  "plain": "pf-m-plain",
37
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
38
38
  "width_25": "pf-m-width-25",
39
39
  "width_33": "pf-m-width-33",
40
40
  "width_50": "pf-m-width-50",
@@ -31,8 +31,8 @@ export default {
31
31
  "noPadding": "pf-m-no-padding",
32
32
  "padding": "pf-m-padding",
33
33
  "vertical": "pf-m-vertical",
34
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
35
34
  "plain": "pf-m-plain",
35
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
36
36
  "width_25": "pf-m-width-25",
37
37
  "width_33": "pf-m-width-33",
38
38
  "width_50": "pf-m-width-50",
@@ -115,7 +115,7 @@
115
115
  --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
116
116
  --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
117
117
  --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
118
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
118
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
119
119
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
120
120
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
121
121
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -773,17 +773,17 @@
773
773
  outline: 0;
774
774
  }
775
775
 
776
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass), .pf-v6-c-page__main-subnav.pf-m-plain,
777
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
778
- .pf-v6-c-page__main-breadcrumb.pf-m-plain,
779
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
780
- .pf-v6-c-page__main-tabs.pf-m-plain,
781
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
782
- .pf-v6-c-page__main-section.pf-m-plain,
783
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
784
- .pf-v6-c-page__main-wizard.pf-m-plain,
785
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass),
786
- .pf-v6-c-page__main-group.pf-m-plain {
776
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-subnav.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass),
777
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-breadcrumb.pf-m-plain,
778
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
779
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-tabs.pf-m-plain,
780
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
781
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-section.pf-m-plain,
782
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
783
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-wizard.pf-m-plain,
784
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
785
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-group.pf-m-plain,
786
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass) {
787
787
  --pf-v6-c-page__main-section--BackgroundColor: transparent;
788
788
  --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
789
789
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: transparent;
@@ -37,8 +37,8 @@ declare const _default: {
37
37
  "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
38
38
  "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
39
39
  "noSidebar": "pf-m-no-sidebar",
40
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
41
40
  "plain": "pf-m-plain",
41
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
42
42
  "secondary": "pf-m-secondary",
43
43
  "padding": "pf-m-padding",
44
44
  "noPadding": "pf-m-no-padding",
@@ -39,8 +39,8 @@ exports.default = {
39
39
  "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
40
40
  "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
41
41
  "noSidebar": "pf-m-no-sidebar",
42
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
43
42
  "plain": "pf-m-plain",
43
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
44
44
  "secondary": "pf-m-secondary",
45
45
  "padding": "pf-m-padding",
46
46
  "noPadding": "pf-m-no-padding",
@@ -37,8 +37,8 @@ export default {
37
37
  "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
38
38
  "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
39
39
  "noSidebar": "pf-m-no-sidebar",
40
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
41
40
  "plain": "pf-m-plain",
41
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
42
42
  "secondary": "pf-m-secondary",
43
43
  "padding": "pf-m-padding",
44
44
  "noPadding": "pf-m-no-padding",
@@ -153,6 +153,9 @@
153
153
  --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
154
154
  --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
155
155
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
156
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
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);
156
159
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
157
160
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
158
161
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -160,55 +163,79 @@
160
163
  --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
161
164
  --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
162
165
  --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
166
+ --pf-v6-c-table--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
163
167
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
164
168
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
165
169
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
170
+ --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
171
+ --pf-v6-c-table--m-sticky-header--BoxShadow: 0;
172
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
173
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
174
+ --pf-v6-c-table--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
175
+ --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
176
+ --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
177
+ --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
178
+ }
179
+ :where(.pf-v6-theme-glass) .pf-v6-c-table {
180
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
181
+ --pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass);
182
+ --pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass);
166
183
  }
167
184
 
168
185
  .pf-v6-c-table {
169
186
  width: 100%;
170
187
  background-color: var(--pf-v6-c-table--BackgroundColor);
171
188
  }
172
- :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
189
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-table.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass) {
173
190
  --pf-v6-c-table--BackgroundColor: transparent;
174
191
  --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
175
192
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
176
193
  --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0;
177
194
  --pf-v6-c-table__control-row--BackgroundColor: transparent;
178
195
  }
179
-
180
196
  .pf-v6-c-table.pf-m-fixed {
181
197
  table-layout: fixed;
182
198
  }
183
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
184
- .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
199
+ .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 {
200
+ opacity: 0;
201
+ transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
202
+ transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
203
+ transition-property: opacity;
204
+ }
205
+ .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
206
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
207
+ }
208
+ .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 {
209
+ opacity: 1;
210
+ }
211
+ .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
212
+ position: relative;
213
+ }
214
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead {
185
215
  position: sticky;
186
216
  inset-block-start: 0;
187
217
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
188
- background: var(--pf-v6-c-table--BackgroundColor);
189
218
  }
190
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
191
- .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::before {
219
+ .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 {
192
220
  position: absolute;
193
- inset-block-start: 0;
194
- inset-block-end: 0;
195
- inset-inline-start: 0;
196
- inset-inline-end: 0;
197
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
221
+ inset: 0;
222
+ z-index: -1;
198
223
  pointer-events: none;
199
224
  content: "";
200
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
225
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
226
+ border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
227
+ box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
201
228
  }
202
- .pf-v6-c-table.pf-m-sticky-header {
203
- position: relative;
204
- }
205
- .pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
229
+ .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) {
206
230
  z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
207
231
  }
208
- .pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
209
- position: sticky;
210
- inset-block-start: 0;
211
- background: var(--pf-v6-c-table--BackgroundColor);
232
+ .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 {
233
+ position: absolute;
234
+ inset: 0;
235
+ z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
236
+ pointer-events: none;
237
+ content: "";
238
+ border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
212
239
  }
213
240
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
214
241
  border-block-end: 0;
@@ -899,6 +926,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
899
926
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
900
927
  vertical-align: bottom;
901
928
  }
929
+ .pf-v6-c-table__thead.pf-m-nested-column-header {
930
+ position: relative;
931
+ }
932
+ .pf-v6-c-table__thead.pf-m-nested-column-header::after {
933
+ position: absolute;
934
+ inset: 0;
935
+ z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
936
+ pointer-events: none;
937
+ content: "";
938
+ 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);
939
+ }
902
940
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
903
941
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineStart);
904
942
  --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineEnd);
@@ -4,10 +4,12 @@ declare const _default: {
4
4
  "check": "pf-v6-c-check",
5
5
  "dirRtl": "pf-v6-m-dir-rtl",
6
6
  "modifiers": {
7
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
8
7
  "plain": "pf-m-plain",
8
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
9
9
  "fixed": "pf-m-fixed",
10
+ "stickyHeaderBase": "pf-m-sticky-header-base",
10
11
  "stickyHeader": "pf-m-sticky-header",
12
+ "stickyHeaderStuck": "pf-m-sticky-header-stuck",
11
13
  "nestedColumnHeader": "pf-m-nested-column-header",
12
14
  "striped": "pf-m-striped",
13
15
  "expandable": "pf-m-expandable",
@@ -6,10 +6,12 @@ exports.default = {
6
6
  "check": "pf-v6-c-check",
7
7
  "dirRtl": "pf-v6-m-dir-rtl",
8
8
  "modifiers": {
9
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
10
9
  "plain": "pf-m-plain",
10
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
11
11
  "fixed": "pf-m-fixed",
12
+ "stickyHeaderBase": "pf-m-sticky-header-base",
12
13
  "stickyHeader": "pf-m-sticky-header",
14
+ "stickyHeaderStuck": "pf-m-sticky-header-stuck",
13
15
  "nestedColumnHeader": "pf-m-nested-column-header",
14
16
  "striped": "pf-m-striped",
15
17
  "expandable": "pf-m-expandable",
@@ -4,10 +4,12 @@ export default {
4
4
  "check": "pf-v6-c-check",
5
5
  "dirRtl": "pf-v6-m-dir-rtl",
6
6
  "modifiers": {
7
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
8
7
  "plain": "pf-m-plain",
8
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
9
9
  "fixed": "pf-m-fixed",
10
+ "stickyHeaderBase": "pf-m-sticky-header-base",
10
11
  "stickyHeader": "pf-m-sticky-header",
12
+ "stickyHeaderStuck": "pf-m-sticky-header-stuck",
11
13
  "nestedColumnHeader": "pf-m-nested-column-header",
12
14
  "striped": "pf-m-striped",
13
15
  "expandable": "pf-m-expandable",
@@ -163,14 +163,14 @@
163
163
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
164
164
  display: none;
165
165
  }
166
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
166
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass) {
167
167
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
168
168
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
169
169
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
170
170
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
171
171
  }
172
172
  @media screen and (min-width: 62rem) {
173
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
173
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass) {
174
174
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
175
175
  }
176
176
  }
@@ -5,8 +5,8 @@ declare const _default: {
5
5
  "modalBox": "pf-v6-c-modal-box",
6
6
  "modifiers": {
7
7
  "finished": "pf-m-finished",
8
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
9
8
  "plain": "pf-m-plain",
9
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
10
10
  "expanded": "pf-m-expanded",
11
11
  "danger": "pf-m-danger",
12
12
  "warning": "pf-m-warning",
@@ -7,8 +7,8 @@ exports.default = {
7
7
  "modalBox": "pf-v6-c-modal-box",
8
8
  "modifiers": {
9
9
  "finished": "pf-m-finished",
10
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
11
10
  "plain": "pf-m-plain",
11
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
12
12
  "expanded": "pf-m-expanded",
13
13
  "danger": "pf-m-danger",
14
14
  "warning": "pf-m-warning",
@@ -5,8 +5,8 @@ export default {
5
5
  "modalBox": "pf-v6-c-modal-box",
6
6
  "modifiers": {
7
7
  "finished": "pf-m-finished",
8
- "noPlainOnGlass": "pf-m-no-plain-on-glass",
9
8
  "plain": "pf-m-plain",
9
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
10
10
  "expanded": "pf-m-expanded",
11
11
  "danger": "pf-m-danger",
12
12
  "warning": "pf-m-warning",
@@ -306,13 +306,12 @@
306
306
  row-gap: var(--pf-v6-c-accordion--RowGap);
307
307
  background-color: var(--pf-v6-c-accordion--BackgroundColor);
308
308
  }
309
- :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass), .pf-v6-c-accordion.pf-m-plain {
309
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-accordion.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass) {
310
310
  --pf-v6-c-accordion--BackgroundColor: transparent;
311
311
  --pf-v6-c-accordion__expandable-content--BackgroundColor: transparent;
312
312
  --pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent;
313
313
  --pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor: var(--pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor);
314
314
  }
315
-
316
315
  .pf-v6-c-accordion.pf-m-toggle-start {
317
316
  --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap);
318
317
  }
@@ -1501,7 +1500,7 @@
1501
1500
  }
1502
1501
 
1503
1502
  .pf-v6-c-breadcrumb {
1504
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
1503
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
1505
1504
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
1506
1505
  --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
1507
1506
  --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
@@ -1512,12 +1511,14 @@
1512
1511
  --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
1513
1512
  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1514
1513
  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1514
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1515
1515
  --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
1516
1516
  --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1517
1517
  --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1518
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1518
1519
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
1519
1520
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
1520
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
1521
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
1521
1522
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1522
1523
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
1523
1524
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -1570,6 +1571,7 @@
1570
1571
  color: var(--pf-v6-c-breadcrumb__link--Color);
1571
1572
  text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
1572
1573
  text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
1574
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
1573
1575
  word-break: break-word;
1574
1576
  background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
1575
1577
  }
@@ -1577,6 +1579,7 @@
1577
1579
  --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
1578
1580
  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
1579
1581
  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
1582
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
1580
1583
  }
1581
1584
  .pf-v6-c-breadcrumb__link.pf-m-current {
1582
1585
  cursor: default;
@@ -4834,7 +4837,7 @@ ul) {
4834
4837
  .pf-v6-c-data-list.pf-m-drag-over {
4835
4838
  overflow-anchor: none;
4836
4839
  }
4837
- :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass), .pf-v6-c-data-list.pf-m-plain {
4840
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-data-list.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass) {
4838
4841
  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
4839
4842
  }
4840
4843
 
@@ -6484,11 +6487,9 @@ ul) {
6484
6487
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6485
6488
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
6486
6489
  }
6487
- .pf-v6-c-drawer.pf-m-inline.pf-m-glass, .pf-v6-c-drawer.pf-m-static.pf-m-glass {
6490
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
6488
6491
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6489
6492
  --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6490
- }
6491
- .pf-v6-c-drawer.pf-m-inline.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6492
6493
  backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6493
6494
  }
6494
6495
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -6821,8 +6822,8 @@ ul) {
6821
6822
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
6822
6823
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
6823
6824
  }
6824
- :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6825
- background: transparent;
6825
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
6826
+ --pf-v6-c-drawer__panel--BackgroundColor: transparent;
6826
6827
  }
6827
6828
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6828
6829
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
@@ -11920,7 +11921,7 @@ ul.pf-v6-c-list {
11920
11921
  --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
11921
11922
  --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
11922
11923
  --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
11923
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
11924
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
11924
11925
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
11925
11926
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11926
11927
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -14313,17 +14314,17 @@ ul.pf-v6-c-list {
14313
14314
  outline: 0;
14314
14315
  }
14315
14316
 
14316
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass), .pf-v6-c-page__main-subnav.pf-m-plain,
14317
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
14318
- .pf-v6-c-page__main-breadcrumb.pf-m-plain,
14319
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
14320
- .pf-v6-c-page__main-tabs.pf-m-plain,
14321
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
14322
- .pf-v6-c-page__main-section.pf-m-plain,
14323
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
14324
- .pf-v6-c-page__main-wizard.pf-m-plain,
14325
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass),
14326
- .pf-v6-c-page__main-group.pf-m-plain {
14317
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-subnav.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass),
14318
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-breadcrumb.pf-m-plain,
14319
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
14320
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-tabs.pf-m-plain,
14321
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
14322
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-section.pf-m-plain,
14323
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
14324
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-wizard.pf-m-plain,
14325
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
14326
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-group.pf-m-plain,
14327
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass) {
14327
14328
  --pf-v6-c-page__main-section--BackgroundColor: transparent;
14328
14329
  --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
14329
14330
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: transparent;
@@ -19058,6 +19059,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19058
19059
  --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19059
19060
  --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19060
19061
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
19062
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
19063
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
19064
+ --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
19061
19065
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
19062
19066
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19063
19067
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -19065,55 +19069,79 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19065
19069
  --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
19066
19070
  --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
19067
19071
  --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
19072
+ --pf-v6-c-table--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
19068
19073
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
19069
19074
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
19070
19075
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
19076
+ --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
19077
+ --pf-v6-c-table--m-sticky-header--BoxShadow: 0;
19078
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
19079
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
19080
+ --pf-v6-c-table--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
19081
+ --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
19082
+ --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
19083
+ --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
19084
+ }
19085
+ :where(.pf-v6-theme-glass) .pf-v6-c-table {
19086
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
19087
+ --pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass);
19088
+ --pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass);
19071
19089
  }
19072
19090
 
19073
19091
  .pf-v6-c-table {
19074
19092
  width: 100%;
19075
19093
  background-color: var(--pf-v6-c-table--BackgroundColor);
19076
19094
  }
19077
- :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
19095
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-table.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass) {
19078
19096
  --pf-v6-c-table--BackgroundColor: transparent;
19079
19097
  --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
19080
19098
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
19081
19099
  --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0;
19082
19100
  --pf-v6-c-table__control-row--BackgroundColor: transparent;
19083
19101
  }
19084
-
19085
19102
  .pf-v6-c-table.pf-m-fixed {
19086
19103
  table-layout: fixed;
19087
19104
  }
19088
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
19089
- .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
19105
+ .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 {
19106
+ opacity: 0;
19107
+ transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
19108
+ transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
19109
+ transition-property: opacity;
19110
+ }
19111
+ .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
19112
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
19113
+ }
19114
+ .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 {
19115
+ opacity: 1;
19116
+ }
19117
+ .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
19118
+ position: relative;
19119
+ }
19120
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead {
19090
19121
  position: sticky;
19091
19122
  inset-block-start: 0;
19092
19123
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
19093
- background: var(--pf-v6-c-table--BackgroundColor);
19094
19124
  }
19095
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
19096
- .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::before {
19125
+ .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 {
19097
19126
  position: absolute;
19098
- inset-block-start: 0;
19099
- inset-block-end: 0;
19100
- inset-inline-start: 0;
19101
- inset-inline-end: 0;
19102
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
19127
+ inset: 0;
19128
+ z-index: -1;
19103
19129
  pointer-events: none;
19104
19130
  content: "";
19105
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
19131
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
19132
+ border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
19133
+ box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
19106
19134
  }
19107
- .pf-v6-c-table.pf-m-sticky-header {
19108
- position: relative;
19109
- }
19110
- .pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
19135
+ .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) {
19111
19136
  z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
19112
19137
  }
19113
- .pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
19114
- position: sticky;
19115
- inset-block-start: 0;
19116
- background: var(--pf-v6-c-table--BackgroundColor);
19138
+ .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 {
19139
+ position: absolute;
19140
+ inset: 0;
19141
+ z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
19142
+ pointer-events: none;
19143
+ content: "";
19144
+ border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
19117
19145
  }
19118
19146
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
19119
19147
  border-block-end: 0;
@@ -19804,6 +19832,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19804
19832
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
19805
19833
  vertical-align: bottom;
19806
19834
  }
19835
+ .pf-v6-c-table__thead.pf-m-nested-column-header {
19836
+ position: relative;
19837
+ }
19838
+ .pf-v6-c-table__thead.pf-m-nested-column-header::after {
19839
+ position: absolute;
19840
+ inset: 0;
19841
+ z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
19842
+ pointer-events: none;
19843
+ content: "";
19844
+ 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);
19845
+ }
19807
19846
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
19808
19847
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineStart);
19809
19848
  --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineEnd);
@@ -25200,14 +25239,14 @@ label.pf-v6-c-tree-view__node-text {
25200
25239
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
25201
25240
  display: none;
25202
25241
  }
25203
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
25242
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass) {
25204
25243
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
25205
25244
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
25206
25245
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
25207
25246
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
25208
25247
  }
25209
25248
  @media screen and (min-width: 62rem) {
25210
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
25249
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass) {
25211
25250
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
25212
25251
  }
25213
25252
  }
@@ -826,7 +826,9 @@ declare const _default: {
826
826
  "reverse": "pf-m-reverse",
827
827
  "grid": "pf-m-grid",
828
828
  "fitContent": "pf-m-fit-content",
829
+ "stickyHeaderBase": "pf-m-sticky-header-base",
829
830
  "stickyHeader": "pf-m-sticky-header",
831
+ "stickyHeaderStuck": "pf-m-sticky-header-stuck",
830
832
  "nestedColumnHeader": "pf-m-nested-column-header",
831
833
  "striped": "pf-m-striped",
832
834
  "stripedEven": "pf-m-striped-even",
@@ -828,7 +828,9 @@ exports.default = {
828
828
  "reverse": "pf-m-reverse",
829
829
  "grid": "pf-m-grid",
830
830
  "fitContent": "pf-m-fit-content",
831
+ "stickyHeaderBase": "pf-m-sticky-header-base",
831
832
  "stickyHeader": "pf-m-sticky-header",
833
+ "stickyHeaderStuck": "pf-m-sticky-header-stuck",
832
834
  "nestedColumnHeader": "pf-m-nested-column-header",
833
835
  "striped": "pf-m-striped",
834
836
  "stripedEven": "pf-m-striped-even",
@@ -826,7 +826,9 @@ export default {
826
826
  "reverse": "pf-m-reverse",
827
827
  "grid": "pf-m-grid",
828
828
  "fitContent": "pf-m-fit-content",
829
+ "stickyHeaderBase": "pf-m-sticky-header-base",
829
830
  "stickyHeader": "pf-m-sticky-header",
831
+ "stickyHeaderStuck": "pf-m-sticky-header-stuck",
830
832
  "nestedColumnHeader": "pf-m-nested-column-header",
831
833
  "striped": "pf-m-striped",
832
834
  "stripedEven": "pf-m-striped-even",
@@ -11,7 +11,8 @@
11
11
 
12
12
  #ws-core-c-table-sticky-columns-and-header .ws-preview-html,
13
13
  #ws-core-c-table-nested-column-headers-sticky-header .ws-preview-html,
14
- #ws-core-c-table-sticky-header .ws-preview-html {
14
+ #ws-core-c-table-sticky-header .ws-preview-html,
15
+ #ws-core-c-table-sticky-header-with-base-and-stuck .ws-preview-html {
15
16
  height: 400px;
16
17
  }
17
18
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.5.0-prerelease.16",
3
+ "version": "6.5.0-prerelease.17",
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.5.0-prerelease.65",
22
+ "@patternfly/patternfly": "6.5.0-prerelease.67",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.3"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "911223aa1a6b9309d90d31245bc29f3e1a9c675c"
27
+ "gitHead": "32dcebeb1b2ed7a6d21ebd9f6ca46ff0f1ebef07"
28
28
  }