@patternfly/react-styles 6.5.0-prerelease.15 → 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 (42) hide show
  1. package/CHANGELOG.md +12 -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/Button/button.css +2 -2
  8. package/css/components/ClipboardCopy/clipboard-copy.css +7 -1
  9. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -0
  10. package/css/components/ClipboardCopy/clipboard-copy.js +1 -0
  11. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -0
  12. package/css/components/DataList/data-list.css +1 -1
  13. package/css/components/DataList/data-list.d.ts +1 -1
  14. package/css/components/DataList/data-list.js +1 -1
  15. package/css/components/DataList/data-list.mjs +1 -1
  16. package/css/components/Drawer/drawer.css +3 -5
  17. package/css/components/Drawer/drawer.d.ts +1 -1
  18. package/css/components/Drawer/drawer.js +1 -1
  19. package/css/components/Drawer/drawer.mjs +1 -1
  20. package/css/components/Menu/menu.css +26 -19
  21. package/css/components/MenuToggle/menu-toggle.css +9 -5
  22. package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
  23. package/css/components/MenuToggle/menu-toggle.js +1 -0
  24. package/css/components/MenuToggle/menu-toggle.mjs +1 -0
  25. package/css/components/Page/page.css +94 -45
  26. package/css/components/Page/page.d.ts +1 -1
  27. package/css/components/Page/page.js +1 -1
  28. package/css/components/Page/page.mjs +1 -1
  29. package/css/components/Table/table.css +61 -23
  30. package/css/components/Table/table.d.ts +3 -1
  31. package/css/components/Table/table.js +3 -1
  32. package/css/components/Table/table.mjs +3 -1
  33. package/css/components/Wizard/wizard.css +2 -2
  34. package/css/components/Wizard/wizard.d.ts +1 -1
  35. package/css/components/Wizard/wizard.js +1 -1
  36. package/css/components/Wizard/wizard.mjs +1 -1
  37. package/css/components/_index.css +212 -107
  38. package/css/components/_index.d.ts +4 -1
  39. package/css/components/_index.js +4 -1
  40. package/css/components/_index.mjs +4 -1
  41. package/css/docs/components/Table/examples/Table.css +2 -1
  42. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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
+
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)
13
+
14
+ ### Features
15
+
16
+ - **Page:** added styles for glass ([#12293](https://github.com/patternfly/patternfly-react/issues/12293)) ([1f7485b](https://github.com/patternfly/patternfly-react/commit/1f7485b291b5da4bb80c596a5efcc19217cabc2c))
17
+
6
18
  # [6.5.0-prerelease.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.14...@patternfly/react-styles@6.5.0-prerelease.15) (2026-04-01)
7
19
 
8
20
  ### Bug Fixes
@@ -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;
@@ -194,13 +194,13 @@
194
194
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
195
195
  --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
196
196
  --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
197
- --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
197
+ --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
198
198
  --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
199
199
  --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
200
200
  --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
201
201
  --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
202
202
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
203
- --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
203
+ --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--control--default);
204
204
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
205
205
  --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
206
206
  --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -8,7 +8,7 @@
8
8
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9
9
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
10
10
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
11
- --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--default);
12
12
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
13
13
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
14
14
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
@@ -16,6 +16,8 @@
16
16
  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
17
17
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
18
18
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
19
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
20
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor: var(--pf-t--global--border--color--control--read-only);
19
21
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
20
22
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
21
23
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -44,6 +46,10 @@
44
46
  .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
45
47
  display: inline-flex;
46
48
  }
49
+ .pf-v6-c-clipboard-copy.pf-m-readonly {
50
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor);
51
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor);
52
+ }
47
53
 
48
54
  .pf-v6-c-clipboard-copy__group {
49
55
  display: flex;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  "inline": "pf-m-inline",
15
15
  "block": "pf-m-block",
16
16
  "truncate": "pf-m-truncate",
17
+ "readonly": "pf-m-readonly",
17
18
  "code": "pf-m-code",
18
19
  "plain": "pf-m-plain"
19
20
  }
@@ -16,6 +16,7 @@ exports.default = {
16
16
  "inline": "pf-m-inline",
17
17
  "block": "pf-m-block",
18
18
  "truncate": "pf-m-truncate",
19
+ "readonly": "pf-m-readonly",
19
20
  "code": "pf-m-code",
20
21
  "plain": "pf-m-plain"
21
22
  }
@@ -14,6 +14,7 @@ export default {
14
14
  "inline": "pf-m-inline",
15
15
  "block": "pf-m-block",
16
16
  "truncate": "pf-m-truncate",
17
+ "readonly": "pf-m-readonly",
17
18
  "code": "pf-m-code",
18
19
  "plain": "pf-m-plain"
19
20
  }
@@ -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",
@@ -1,15 +1,17 @@
1
1
  .pf-v6-c-menu {
2
- --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2
+ --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
3
3
  --pf-v6-c-menu--Width: auto;
4
4
  --pf-v6-c-menu--MinWidth: auto;
5
- --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5
+ --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--xs);
6
+ --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
7
+ --pf-v6-c-menu--PaddingInlineStart: var(--pf-t--global--spacer--xs);
8
+ --pf-v6-c-menu--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
7
9
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
8
10
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
9
11
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
10
12
  --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11
13
  --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
12
- --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
14
+ --pf-v6-c-menu--BorderRadius: calc(var(--pf-v6-c-menu__item--BorderRadius) + var(--pf-v6-c-menu--PaddingBlockStart));
13
15
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
14
16
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
15
17
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -50,12 +52,13 @@
50
52
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
51
53
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
52
54
  --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
53
- --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
54
- --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
55
+ --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--xs);
56
+ --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--xs);
57
+ --pf-v6-c-menu__item--BorderRadius: var(--pf-t--global--border--radius--small);
55
58
  --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
56
59
  --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
57
- --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
58
- --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
60
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
61
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
59
62
  --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
60
63
  --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
61
64
  --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -64,22 +67,23 @@
64
67
  --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
65
68
  --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
66
69
  --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
67
- --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
68
- --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
70
+ --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
71
+ --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
69
72
  --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
70
73
  --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
71
- --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
72
- --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
74
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--md);
75
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
73
76
  --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
74
77
  --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
75
- --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
76
- --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
78
+ --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--md);
79
+ --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--md);
77
80
  --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
78
81
  --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
79
- --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
80
- --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
82
+ --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
83
+ --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
81
84
  --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
82
- --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
85
+ --pf-v6-c-menu__group-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
86
+ --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--regular);
83
87
  --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
84
88
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
85
89
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
@@ -241,6 +245,8 @@
241
245
  min-width: var(--pf-v6-c-menu--MinWidth);
242
246
  padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
243
247
  padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
248
+ padding-inline-start: var(--pf-v6-c-menu--PaddingInlineStart);
249
+ padding-inline-end: var(--pf-v6-c-menu--PaddingInlineEnd);
244
250
  overflow: hidden;
245
251
  color: var(--pf-v6-c-menu--Color);
246
252
  background-color: var(--pf-v6-c-menu--BackgroundColor);
@@ -435,8 +441,8 @@
435
441
  inset: 0;
436
442
  content: "";
437
443
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
438
- border-block-start: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
439
- border-block-end: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
444
+ border: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
445
+ border-radius: var(--pf-v6-c-menu__item--BorderRadius);
440
446
  transition: inherit;
441
447
  }
442
448
  .pf-v6-c-menu__list-item.pf-m-load {
@@ -486,6 +492,7 @@
486
492
  text-decoration-line: none;
487
493
  background-color: var(--pf-v6-c-menu__item--BackgroundColor);
488
494
  border: 0;
495
+ border-radius: var(--pf-v6-c-menu__item--BorderRadius);
489
496
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
490
497
  --pf-v6-hidden-visible--visible--Display: flex;
491
498
  --pf-v6-hidden-visible--hidden--Display: none;
@@ -9,7 +9,7 @@
9
9
  --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
10
10
  --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
11
11
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
12
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
12
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default);
13
13
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
14
14
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
15
15
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
@@ -47,7 +47,7 @@
47
47
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
48
48
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
49
49
  --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
50
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
50
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
51
51
  --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
52
52
  --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
53
53
  --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -65,7 +65,7 @@
65
65
  --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
66
66
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
67
67
  --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
68
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
68
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
69
69
  --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
70
70
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
71
71
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -80,11 +80,12 @@
80
80
  --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
81
81
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
82
82
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
83
+ --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
83
84
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
84
85
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
85
86
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
86
87
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
87
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
88
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
88
89
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
89
90
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
90
91
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
@@ -114,7 +115,7 @@
114
115
  --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
115
116
  --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
116
117
  --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
117
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
118
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
118
119
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
119
120
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
120
121
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -234,6 +235,9 @@
234
235
  .pf-v6-c-menu-toggle.pf-m-full-width {
235
236
  width: 100%;
236
237
  }
238
+ .pf-v6-c-menu-toggle.pf-m-form {
239
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
240
+ }
237
241
  .pf-v6-c-menu-toggle.pf-m-plain {
238
242
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
239
243
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
@@ -17,6 +17,7 @@ declare const _default: {
17
17
  "secondary": "pf-m-secondary",
18
18
  "fullHeight": "pf-m-full-height",
19
19
  "fullWidth": "pf-m-full-width",
20
+ "form": "pf-m-form",
20
21
  "plain": "pf-m-plain",
21
22
  "circle": "pf-m-circle",
22
23
  "expanded": "pf-m-expanded",
@@ -19,6 +19,7 @@ exports.default = {
19
19
  "secondary": "pf-m-secondary",
20
20
  "fullHeight": "pf-m-full-height",
21
21
  "fullWidth": "pf-m-full-width",
22
+ "form": "pf-m-form",
22
23
  "plain": "pf-m-plain",
23
24
  "circle": "pf-m-circle",
24
25
  "expanded": "pf-m-expanded",
@@ -17,6 +17,7 @@ export default {
17
17
  "secondary": "pf-m-secondary",
18
18
  "fullHeight": "pf-m-full-height",
19
19
  "fullWidth": "pf-m-full-width",
20
+ "form": "pf-m-form",
20
21
  "plain": "pf-m-plain",
21
22
  "circle": "pf-m-circle",
22
23
  "expanded": "pf-m-expanded",