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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/assets/images/glass-brand-dark.jpg +0 -0
  3. package/css/components/Accordion/accordion.css +1 -1
  4. package/css/components/Accordion/accordion.d.ts +1 -1
  5. package/css/components/Accordion/accordion.js +1 -1
  6. package/css/components/Accordion/accordion.mjs +1 -1
  7. package/css/components/Button/button.css +4 -4
  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/CodeEditor/code-editor.css +1 -1
  13. package/css/components/DataList/data-list.css +1 -1
  14. package/css/components/DataList/data-list.d.ts +1 -1
  15. package/css/components/DataList/data-list.js +1 -1
  16. package/css/components/DataList/data-list.mjs +1 -1
  17. package/css/components/Drawer/drawer.css +108 -18
  18. package/css/components/Drawer/drawer.d.ts +1 -1
  19. package/css/components/Drawer/drawer.js +1 -1
  20. package/css/components/Drawer/drawer.mjs +1 -1
  21. package/css/components/JumpLinks/jump-links.css +11 -1
  22. package/css/components/Menu/menu.css +26 -19
  23. package/css/components/MenuToggle/menu-toggle.css +10 -7
  24. package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
  25. package/css/components/MenuToggle/menu-toggle.js +1 -0
  26. package/css/components/MenuToggle/menu-toggle.mjs +1 -0
  27. package/css/components/Page/page.css +89 -37
  28. package/css/components/Page/page.d.ts +1 -1
  29. package/css/components/Page/page.js +1 -1
  30. package/css/components/Page/page.mjs +1 -1
  31. package/css/components/Progress/progress.css +3 -1
  32. package/css/components/Table/table.css +3 -3
  33. package/css/components/Table/table.d.ts +1 -1
  34. package/css/components/Table/table.js +1 -1
  35. package/css/components/Table/table.mjs +1 -1
  36. package/css/components/Tabs/tabs.css +18 -17
  37. package/css/components/Tabs/tabs.d.ts +0 -1
  38. package/css/components/Tabs/tabs.js +0 -1
  39. package/css/components/Tabs/tabs.mjs +0 -1
  40. package/css/components/Wizard/wizard.css +2 -2
  41. package/css/components/Wizard/wizard.d.ts +1 -1
  42. package/css/components/Wizard/wizard.js +1 -1
  43. package/css/components/Wizard/wizard.mjs +1 -1
  44. package/css/components/_index.css +284 -113
  45. package/css/components/_index.d.ts +3 -3
  46. package/css/components/_index.js +3 -3
  47. package/css/components/_index.mjs +3 -3
  48. 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.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
+
8
+ ### Features
9
+
10
+ - **Page:** added styles for glass ([#12293](https://github.com/patternfly/patternfly-react/issues/12293)) ([1f7485b](https://github.com/patternfly/patternfly-react/commit/1f7485b291b5da4bb80c596a5efcc19217cabc2c))
11
+
12
+ # [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)
13
+
14
+ ### Bug Fixes
15
+
16
+ - **deps:** update dependency @patternfly/patternfly to v6.5.0-prerelease.62 ([#12301](https://github.com/patternfly/patternfly-react/issues/12301)) ([34b99cc](https://github.com/patternfly/patternfly-react/commit/34b99cc84c56def47cb3ec00ee99472ae72b0bd3))
17
+
6
18
  # [6.5.0-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.13...@patternfly/react-styles@6.5.0-prerelease.14) (2026-03-19)
7
19
 
8
20
  ### Bug Fixes
@@ -104,7 +104,7 @@
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), .pf-v6-c-accordion.pf-m-plain {
107
+ :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass), .pf-v6-c-accordion.pf-m-plain {
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;
@@ -9,7 +9,7 @@ declare const _default: {
9
9
  "accordionToggleText": "pf-v6-c-accordion__toggle-text",
10
10
  "dirRtl": "pf-v6-m-dir-rtl",
11
11
  "modifiers": {
12
- "noPlain": "pf-m-no-plain",
12
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
13
13
  "plain": "pf-m-plain",
14
14
  "toggleStart": "pf-m-toggle-start",
15
15
  "displayLg": "pf-m-display-lg",
@@ -11,7 +11,7 @@ exports.default = {
11
11
  "accordionToggleText": "pf-v6-c-accordion__toggle-text",
12
12
  "dirRtl": "pf-v6-m-dir-rtl",
13
13
  "modifiers": {
14
- "noPlain": "pf-m-no-plain",
14
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
15
15
  "plain": "pf-m-plain",
16
16
  "toggleStart": "pf-m-toggle-start",
17
17
  "displayLg": "pf-m-display-lg",
@@ -9,7 +9,7 @@ export default {
9
9
  "accordionToggleText": "pf-v6-c-accordion__toggle-text",
10
10
  "dirRtl": "pf-v6-m-dir-rtl",
11
11
  "modifiers": {
12
- "noPlain": "pf-m-no-plain",
12
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
13
13
  "plain": "pf-m-plain",
14
14
  "toggleStart": "pf-m-toggle-start",
15
15
  "displayLg": "pf-m-display-lg",
@@ -3,7 +3,7 @@
3
3
  --pf-v6-c-button--AlignItems: baseline;
4
4
  --pf-v6-c-button--JustifyContent: center;
5
5
  --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
6
- --pf-v6-c-button--MinWidth: initial;
6
+ --pf-v6-c-button--MinWidth: calc(1lh + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
7
7
  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
8
8
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
9
9
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--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);
@@ -765,6 +765,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
765
765
  }
766
766
  .pf-v6-c-button.pf-m-circle {
767
767
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
768
+ padding-inline: 0;
768
769
  }
769
770
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
770
771
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
@@ -865,7 +866,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
865
866
  }
866
867
 
867
868
  .pf-v6-c-button__icon {
868
- min-width: 1lh;
869
869
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
870
870
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
871
871
  color: var(--pf-v6-c-button__icon--Color);
@@ -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
  }
@@ -8,7 +8,7 @@
8
8
  --pf-v6-c-code-editor__header--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
9
9
  --pf-v6-c-code-editor__header--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
10
10
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11
- --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11
+ --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: transparent;
12
12
  --pf-v6-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
13
13
  --pf-v6-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
14
14
  --pf-v6-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -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), .pf-v6-c-data-list.pf-m-plain {
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 {
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,7 +32,7 @@ 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
- "noPlain": "pf-m-no-plain",
35
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
36
36
  "plain": "pf-m-plain",
37
37
  "truncate": "pf-m-truncate",
38
38
  "breakWord": "pf-m-break-word",
@@ -34,7 +34,7 @@ exports.default = {
34
34
  "grid_2xl": "pf-m-grid-2xl",
35
35
  "compact": "pf-m-compact",
36
36
  "dragOver": "pf-m-drag-over",
37
- "noPlain": "pf-m-no-plain",
37
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
38
38
  "plain": "pf-m-plain",
39
39
  "truncate": "pf-m-truncate",
40
40
  "breakWord": "pf-m-break-word",
@@ -32,7 +32,7 @@ export default {
32
32
  "grid_2xl": "pf-m-grid-2xl",
33
33
  "compact": "pf-m-compact",
34
34
  "dragOver": "pf-m-drag-over",
35
- "noPlain": "pf-m-no-plain",
35
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
36
36
  "plain": "pf-m-plain",
37
37
  "truncate": "pf-m-truncate",
38
38
  "breakWord": "pf-m-break-word",
@@ -92,45 +92,85 @@
92
92
  --pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
93
93
  --pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
94
94
  --pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
95
- --pf-v6-c-drawer__splitter--Height: 0.5625rem;
95
+ --pf-v6-c-drawer__splitter--Height: 0.75rem;
96
96
  --pf-v6-c-drawer__splitter--Width: 100%;
97
- --pf-v6-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
97
+ --pf-v6-c-drawer__splitter--BackgroundColor: transparent;
98
98
  --pf-v6-c-drawer__splitter--Cursor: row-resize;
99
99
  --pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
100
- --pf-v6-c-drawer__splitter--m-vertical--Width: 0.5625rem;
100
+ --pf-v6-c-drawer__splitter--m-vertical--Width: 0.75rem;
101
101
  --pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
102
+ --pf-v6-c-drawer__splitter--focus--OutlineOffset: -0.0625rem;
102
103
  --pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
103
104
  --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
105
+ --pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--default);
106
+ --pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--default);
107
+ --pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-t--global--border--color--default);
104
108
  --pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
105
109
  --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
106
110
  --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
107
111
  --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
108
112
  --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
113
+ --pf-v6-c-drawer__splitter--after--InsetBlockStart: 0;
114
+ --pf-v6-c-drawer__splitter--after--InsetBlockEnd: 0;
115
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: 0;
116
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: 0;
117
+ --pf-v6-c-drawer__splitter--after--Width: auto;
118
+ --pf-v6-c-drawer__splitter--after--Height: auto;
109
119
  --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
110
120
  --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
111
- --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
121
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--Width: 0.625rem;
122
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--Height: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
123
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
124
+ --pf-v6-c-drawer--m-pill__splitter--after--BorderColor: transparent;
125
+ --pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth: 0;
126
+ --pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
127
+ --pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
128
+ --pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor: var(--pf-t--global--border--color--clicked);
129
+ --pf-v6-c-drawer--m-pill__splitter--after--Width: 0.0625rem;
130
+ --pf-v6-c-drawer--m-pill__splitter--after--Height: auto;
131
+ --pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart: 50%;
132
+ --pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd: auto;
133
+ --pf-v6-c-drawer--m-pill__splitter--after--TranslateX: -50%;
134
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height: 0.5rem;
135
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
136
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
137
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width: auto;
138
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height: 0.0625rem;
139
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
140
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth: 0;
141
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart: 50%;
142
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd: auto;
143
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart: 0;
144
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd: 0;
145
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY: -50%;
146
+ --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.75rem;
112
147
  --pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
113
- --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
148
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.75rem;
114
149
  --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
115
150
  --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
116
151
  --pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
117
- --pf-v6-c-drawer__splitter-handle--InsetInlineStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
152
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: 50%;
118
153
  --pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
119
- --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
120
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
154
+ --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
155
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-t--global--border--color--control--default);
156
+ --pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor: var(--pf-t--global--border--color--hover);
157
+ --pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
158
+ --pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
159
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
121
160
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
122
161
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
123
162
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
124
163
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
125
- --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
164
+ --pf-v6-c-drawer__splitter-handle--after--BorderRadius: var(--pf-t--global--border--radius--pill);
165
+ --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--color--brand--hover);
126
166
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
127
167
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
128
168
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
129
169
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
130
- --pf-v6-c-drawer__splitter-handle--after--Width: 0.75rem;
170
+ --pf-v6-c-drawer__splitter-handle--after--Width: 2.1875rem;
131
171
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
132
172
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
133
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
173
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 2.1875rem;
134
174
  }
135
175
  @media screen and (min-width: 75rem) {
136
176
  .pf-v6-c-drawer {
@@ -242,6 +282,19 @@
242
282
  --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
243
283
  --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
244
284
  --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
285
+ --pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Width);
286
+ --pf-v6-c-drawer__splitter--m-vertical--Height: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Height);
287
+ --pf-v6-c-drawer__splitter--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart);
288
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderColor);
289
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth);
290
+ --pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor);
291
+ --pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor);
292
+ --pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor);
293
+ --pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill__splitter--after--Width);
294
+ --pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill__splitter--after--Height);
295
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart);
296
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd);
297
+ --pf-v6-c-drawer__splitter--after--TranslateX: var(--pf-v6-c-drawer--m-pill__splitter--after--TranslateX);
245
298
  }
246
299
  .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
247
300
  border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
@@ -250,6 +303,25 @@
250
303
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
251
304
  }
252
305
  }
306
+ @media screen and (min-width: 48rem) {
307
+ .pf-v6-c-drawer.pf-m-pill.pf-m-panel-bottom {
308
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height);
309
+ --pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width);
310
+ --pf-v6-c-drawer__splitter--MarginBlockStart: 0;
311
+ --pf-v6-c-drawer__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart);
312
+ --pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width);
313
+ --pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height);
314
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth);
315
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
316
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
317
+ --pf-v6-c-drawer__splitter--after--InsetBlockStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart);
318
+ --pf-v6-c-drawer__splitter--after--InsetBlockEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd);
319
+ --pf-v6-c-drawer__splitter--after--TranslateX: initial;
320
+ --pf-v6-c-drawer__splitter--after--TranslateY: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY);
321
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart);
322
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd);
323
+ }
324
+ }
253
325
 
254
326
  .pf-v6-c-drawer__section {
255
327
  flex-grow: 0;
@@ -414,8 +486,11 @@
414
486
  display: none;
415
487
  width: var(--pf-v6-c-drawer__splitter--Width);
416
488
  height: var(--pf-v6-c-drawer__splitter--Height);
489
+ margin-block-start: var(--pf-v6-c-drawer__splitter--MarginBlockStart, 0);
490
+ margin-inline-start: var(--pf-v6-c-drawer__splitter--MarginInlineStart, 0);
417
491
  cursor: var(--pf-v6-c-drawer__splitter--Cursor);
418
492
  background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
493
+ outline-offset: var(--pf-v6-c-drawer__splitter--focus--OutlineOffset);
419
494
  }
420
495
  .pf-v6-c-drawer__splitter.pf-m-vertical {
421
496
  --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
@@ -428,21 +503,34 @@
428
503
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
429
504
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
430
505
  }
431
- .pf-v6-c-drawer__splitter:hover, .pf-v6-c-drawer__splitter:focus {
432
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
506
+ .pf-v6-c-drawer__splitter:hover {
507
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor);
508
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover--after--BorderColor);
509
+ }
510
+ .pf-v6-c-drawer__splitter:focus {
511
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor);
512
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--focus--after--BorderColor);
513
+ }
514
+ .pf-v6-c-drawer__splitter:active {
515
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor);
516
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--active--after--BorderColor);
433
517
  }
434
518
  .pf-v6-c-drawer__splitter::after {
435
519
  position: absolute;
436
- inset-block-start: 0;
437
- inset-block-end: 0;
438
- inset-inline-start: 0;
439
- inset-inline-end: 0;
520
+ inset-block-start: var(--pf-v6-c-drawer__splitter--after--InsetBlockStart);
521
+ inset-block-end: var(--pf-v6-c-drawer__splitter--after--InsetBlockEnd);
522
+ inset-inline-start: var(--pf-v6-c-drawer__splitter--after--InsetInlineStart);
523
+ inset-inline-end: var(--pf-v6-c-drawer__splitter--after--InsetInlineEnd);
524
+ z-index: -1;
525
+ width: var(--pf-v6-c-drawer__splitter--after--Width);
526
+ height: var(--pf-v6-c-drawer__splitter--after--Height);
440
527
  content: "";
441
528
  border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
442
529
  border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
443
530
  border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
444
531
  border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
445
532
  border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
533
+ translate: var(--pf-v6-c-drawer__splitter--after--TranslateX, 0) var(--pf-v6-c-drawer__splitter--after--TranslateY, 0);
446
534
  }
447
535
 
448
536
  .pf-v6-c-drawer__splitter-handle {
@@ -460,12 +548,14 @@
460
548
  width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
461
549
  height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
462
550
  content: "";
551
+ background-color: var(--pf-v6-c-drawer__splitter-handle--after--BackgroundColor);
463
552
  border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
464
553
  border-style: solid;
465
554
  border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
466
555
  border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
467
556
  border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
468
557
  border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
558
+ border-radius: var(--pf-v6-c-drawer__splitter-handle--after--BorderRadius);
469
559
  }
470
560
 
471
561
  @media screen and (min-width: 48rem) {
@@ -473,7 +563,7 @@
473
563
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
474
564
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
475
565
  }
476
- :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain) > .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) > .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 {
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 {
477
567
  background: transparent;
478
568
  }
479
569
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -31,7 +31,7 @@ declare const _default: {
31
31
  "noPadding": "pf-m-no-padding",
32
32
  "padding": "pf-m-padding",
33
33
  "vertical": "pf-m-vertical",
34
- "noPlain": "pf-m-no-plain",
34
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
35
35
  "plain": "pf-m-plain",
36
36
  "width_25": "pf-m-width-25",
37
37
  "width_33": "pf-m-width-33",
@@ -33,7 +33,7 @@ exports.default = {
33
33
  "noPadding": "pf-m-no-padding",
34
34
  "padding": "pf-m-padding",
35
35
  "vertical": "pf-m-vertical",
36
- "noPlain": "pf-m-no-plain",
36
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
37
37
  "plain": "pf-m-plain",
38
38
  "width_25": "pf-m-width-25",
39
39
  "width_33": "pf-m-width-33",
@@ -31,7 +31,7 @@ export default {
31
31
  "noPadding": "pf-m-no-padding",
32
32
  "padding": "pf-m-padding",
33
33
  "vertical": "pf-m-vertical",
34
- "noPlain": "pf-m-no-plain",
34
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
35
35
  "plain": "pf-m-plain",
36
36
  "width_25": "pf-m-width-25",
37
37
  "width_33": "pf-m-width-33",
@@ -26,14 +26,19 @@
26
26
  --pf-v6-c-jump-links__list__list__link--PaddingInlineStart: var(--pf-t--global--spacer--lg);
27
27
  --pf-v6-c-jump-links__list__list__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
28
28
  --pf-v6-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
29
+ --pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth);
30
+ --pf-v6-c-jump-links__link--before--Width: auto;
29
31
  --pf-v6-c-jump-links__link--before--BorderBlockStartWidth: 0;
30
32
  --pf-v6-c-jump-links__link--before--BorderInlineEndWidth: 0;
31
33
  --pf-v6-c-jump-links__link--before--BorderBlockEndWidth: 0;
32
34
  --pf-v6-c-jump-links__link--before--BorderInlineStartWidth: 0;
33
35
  --pf-v6-c-jump-links__link--before--BorderColor: transparent;
36
+ --pf-v6-c-jump-links__link--before--BorderRadius: var(--pf-t--global--border--radius--pill);
34
37
  --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong);
35
38
  --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: 0;
36
- --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
39
+ --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--color--brand--accent--default);
40
+ --pf-v6-c-jump-links--m-vertical__link--before--Height: auto;
41
+ --pf-v6-c-jump-links--m-vertical__link--before--Width: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth);
37
42
  --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0;
38
43
  --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong);
39
44
  --pf-v6-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle);
@@ -65,6 +70,8 @@
65
70
  --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd);
66
71
  --pf-v6-c-jump-links__list--PaddingBlockEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd);
67
72
  --pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart);
73
+ --pf-v6-c-jump-links__link--before--Width: var(--pf-v6-c-jump-links--m-vertical__link--before--Width);
74
+ --pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links--m-vertical__link--before--Height);
68
75
  --pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth);
69
76
  --pf-v6-c-jump-links__list--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth);
70
77
  --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth);
@@ -195,6 +202,8 @@
195
202
  .pf-v6-c-jump-links__link::before {
196
203
  position: absolute;
197
204
  inset: 0;
205
+ width: var(--pf-v6-c-jump-links__link--before--Width);
206
+ height: var(--pf-v6-c-jump-links__link--before--Height);
198
207
  pointer-events: none;
199
208
  content: "";
200
209
  border-color: var(--pf-v6-c-jump-links__link--before--BorderColor);
@@ -203,6 +212,7 @@
203
212
  border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBlockEndWidth);
204
213
  border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderInlineStartWidth);
205
214
  border-inline-end-width: var(--pf-v6-c-jump-links__link--before--BorderInlineEndWidth);
215
+ border-radius: var(--pf-v6-c-jump-links__link--before--BorderRadius);
206
216
  }
207
217
 
208
218
  .pf-v6-c-jump-links__item {
@@ -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;