@patternfly/patternfly 6.5.0-prerelease.61 → 6.5.0-prerelease.63

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 (56) hide show
  1. package/assets/images/glass-brand-dark.jpg +0 -0
  2. package/components/Button/button.css +2 -2
  3. package/components/Button/button.scss +3 -3
  4. package/components/CodeEditor/code-editor.css +1 -1
  5. package/components/CodeEditor/code-editor.scss +1 -1
  6. package/components/Menu/menu.css +26 -19
  7. package/components/Menu/menu.scss +26 -19
  8. package/components/MenuToggle/menu-toggle.css +9 -5
  9. package/components/MenuToggle/menu-toggle.scss +12 -5
  10. package/components/Page/page.css +3 -0
  11. package/components/Page/page.scss +4 -0
  12. package/components/_index.css +41 -27
  13. package/docs/components/Breadcrumb/examples/Breadcrumb.md +13 -1
  14. package/docs/components/CalendarMonth/examples/CalendarMonth.md +52 -4
  15. package/docs/components/Card/examples/Card.md +130 -10
  16. package/docs/components/DataList/examples/DataList.md +221 -17
  17. package/docs/components/DualListSelector/examples/DualListSelector.md +234 -18
  18. package/docs/components/Hint/examples/Hint.md +39 -3
  19. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -2
  20. package/docs/components/InputGroup/examples/InputGroup.md +13 -1
  21. package/docs/components/Login/examples/Login.md +13 -1
  22. package/docs/components/Menu/examples/Menu.md +195 -15
  23. package/docs/components/MenuToggle/examples/MenuToggle.md +1331 -100
  24. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +481 -37
  25. package/docs/components/OverflowMenu/examples/overflow-menu.md +65 -5
  26. package/docs/components/Pagination/examples/Pagination.md +169 -13
  27. package/docs/components/Table/examples/Table.md +3461 -269
  28. package/docs/components/Toolbar/examples/Toolbar.md +507 -39
  29. package/docs/demos/AboutModal/examples/AboutModal.md +26 -2
  30. package/docs/demos/Alert/examples/Alert.md +78 -6
  31. package/docs/demos/BackToTop/examples/BackToTop.md +26 -2
  32. package/docs/demos/Banner/examples/Banner.md +52 -4
  33. package/docs/demos/Card/examples/Card.md +78 -6
  34. package/docs/demos/CardView/examples/CardView.md +206 -20
  35. package/docs/demos/Compass/examples/Compass.md +431 -56
  36. package/docs/demos/Dashboard/examples/Dashboard.md +63 -9
  37. package/docs/demos/DataList/examples/DataList.md +369 -45
  38. package/docs/demos/DescriptionList/examples/DescriptionList.md +91 -7
  39. package/docs/demos/Drawer/examples/Drawer.md +143 -11
  40. package/docs/demos/JumpLinks/examples/JumpLinks.md +156 -12
  41. package/docs/demos/Masthead/examples/Masthead.md +156 -12
  42. package/docs/demos/Modal/examples/Modal.md +156 -12
  43. package/docs/demos/Nav/examples/Nav.md +104 -8
  44. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +975 -75
  45. package/docs/demos/Page/examples/Page.md +390 -30
  46. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +593 -83
  47. package/docs/demos/Skeleton/examples/Skeleton.md +26 -2
  48. package/docs/demos/Table/examples/Table.md +2518 -322
  49. package/docs/demos/Tabs/examples/Tabs.md +247 -19
  50. package/docs/demos/Toolbar/examples/Toolbar.md +659 -59
  51. package/docs/demos/Wizard/examples/Wizard.md +234 -18
  52. package/package.json +1 -1
  53. package/patternfly-no-globals.css +41 -27
  54. package/patternfly.css +41 -27
  55. package/patternfly.min.css +1 -1
  56. package/patternfly.min.css.map +1 -1
package/assets/images/glass-brand-dark.jpg CHANGED
Binary file
package/components/Button/button.css CHANGED
@@ -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);
package/components/Button/button.scss CHANGED
@@ -220,7 +220,7 @@
220
220
  --#{$button}--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
221
221
 
222
222
  // Stateful
223
- --#{$button}--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
223
+ --#{$button}--m-stateful--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
224
224
  --#{$button}--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
225
225
  --#{$button}--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
226
226
  --#{$button}--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
@@ -228,7 +228,7 @@
228
228
 
229
229
  // Read
230
230
  --#{$button}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
231
- --#{$button}--m-read--BorderColor: var(--pf-t--global--border--color--default);
231
+ --#{$button}--m-read--BorderColor: var(--pf-t--global--border--color--control--default);
232
232
  --#{$button}--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
233
233
  --#{$button}--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
234
234
  --#{$button}--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -681,7 +681,7 @@
681
681
  --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-stateful--m-small--PaddingInlineEnd);
682
682
  --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-stateful--m-small--PaddingInlineStart);
683
683
  }
684
-
684
+
685
685
  // Read
686
686
  &.pf-m-read {
687
687
  --#{$button}--BackgroundColor: var(--#{$button}--m-read--BackgroundColor);
package/components/CodeEditor/code-editor.css CHANGED
@@ -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);
package/components/CodeEditor/code-editor.scss CHANGED
@@ -15,7 +15,7 @@
15
15
 
16
16
  // header content
17
17
  --#{$code-editor}__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18
- --#{$code-editor}__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18
+ --#{$code-editor}__header-content--m-plain--BackgroundColor: transparent;
19
19
  --#{$code-editor}__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
20
20
  --#{$code-editor}__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
21
21
  --#{$code-editor}__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
package/components/Menu/menu.css CHANGED
@@ -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;
package/components/Menu/menu.scss CHANGED
@@ -2,17 +2,19 @@
2
2
 
3
3
  @include pf-root($menu) {
4
4
  // * Menu
5
- --#{$menu}--RowGap: var(--pf-t--global--spacer--sm);
5
+ --#{$menu}--RowGap: var(--pf-t--global--spacer--xs);
6
6
  --#{$menu}--Width: auto;
7
7
  --#{$menu}--MinWidth: auto;
8
- --#{$menu}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9
- --#{$menu}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
8
+ --#{$menu}--PaddingBlockStart: var(--pf-t--global--spacer--xs);
9
+ --#{$menu}--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10
+ --#{$menu}--PaddingInlineStart: var(--pf-t--global--spacer--xs);
11
+ --#{$menu}--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
10
12
  --#{$menu}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11
13
  --#{$menu}--BoxShadow: var(--pf-t--global--box-shadow--md);
12
14
  --#{$menu}--Color: var(--pf-t--global--text--color--regular);
13
15
  --#{$menu}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14
16
  --#{$menu}--BorderColor: var(--pf-t--global--border--color--high-contrast);
15
- --#{$menu}--BorderRadius: var(--pf-t--global--border--radius--small);
17
+ --#{$menu}--BorderRadius: calc(var(--#{$menu}__item--BorderRadius) + var(--#{$menu}--PaddingBlockStart));
16
18
  --#{$menu}--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
17
19
  --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm);
18
20
  --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -62,14 +64,15 @@
62
64
  --#{$menu}__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
63
65
 
64
66
  // * Menu li divider
65
- --#{$menu}__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
66
- --#{$menu}__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
67
+ --#{$menu}__list--divider--MarginBlockStart: var(--pf-t--global--spacer--xs);
68
+ --#{$menu}__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--xs);
67
69
 
68
70
  // * Menu item
71
+ --#{$menu}__item--BorderRadius: var(--pf-t--global--border--radius--small);
69
72
  --#{$menu}__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
70
73
  --#{$menu}__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
71
- --#{$menu}__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
72
- --#{$menu}__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
74
+ --#{$menu}__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
75
+ --#{$menu}__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
73
76
  --#{$menu}__item--FontSize: var(--pf-t--global--font--size--body--default);
74
77
  --#{$menu}__item--LineHeight: var(--pf-t--global--font--line-height--body);
75
78
  --#{$menu}__item--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -80,32 +83,33 @@
80
83
  // * Menu header
81
84
  --#{$menu}__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
82
85
  --#{$menu}__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
83
- --#{$menu}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
84
- --#{$menu}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
86
+ --#{$menu}__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
87
+ --#{$menu}__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
85
88
 
86
89
  // * Menu group title
87
90
  --#{$menu}__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
88
91
  --#{$menu}__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
89
- --#{$menu}__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
90
- --#{$menu}__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
92
+ --#{$menu}__group-title--PaddingInlineStart: var(--pf-t--global--spacer--md);
93
+ --#{$menu}__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
91
94
 
92
95
  // * Menu breadcrumb
93
96
  --#{$menu}__breadcrumb--PaddingBlockStart: 0;
94
97
  --#{$menu}__breadcrumb--PaddingBlockEnd: 0;
95
- --#{$menu}__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
96
- --#{$menu}__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
98
+ --#{$menu}__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--md);
99
+ --#{$menu}__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--md);
97
100
 
98
101
  // * Menu footer
99
102
  --#{$menu}__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
100
103
  --#{$menu}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
101
- --#{$menu}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
102
- --#{$menu}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
104
+ --#{$menu}__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
105
+ --#{$menu}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
103
106
 
104
107
  // * Menu item main
105
108
  --#{$menu}__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
106
109
 
107
110
  // * Menu group title
108
- --#{$menu}__group-title--Color: var(--pf-t--global--text--color--subtle);
111
+ --#{$menu}__group-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
112
+ --#{$menu}__group-title--Color: var(--pf-t--global--text--color--regular);
109
113
 
110
114
  // * Menu description
111
115
  --#{$menu}__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -235,6 +239,8 @@
235
239
  min-width: var(--#{$menu}--MinWidth);
236
240
  padding-block-start: var(--#{$menu}--PaddingBlockStart);
237
241
  padding-block-end: var(--#{$menu}--PaddingBlockEnd);
242
+ padding-inline-start: var(--#{$menu}--PaddingInlineStart);
243
+ padding-inline-end: var(--#{$menu}--PaddingInlineEnd);
238
244
  overflow: hidden;
239
245
  color: var(--#{$menu}--Color);
240
246
  background-color: var(--#{$menu}--BackgroundColor);
@@ -497,8 +503,8 @@
497
503
  inset: 0;
498
504
  content: "";
499
505
  background-color: var(--#{$menu}__list-item--BackgroundColor);
500
- border-block-start: var(--#{$menu}__list-item--BorderWidth) solid var(--#{$menu}__list-item--BorderColor);
501
- border-block-end: var(--#{$menu}__list-item--BorderWidth) solid var(--#{$menu}__list-item--BorderColor);
506
+ border: var(--#{$menu}__list-item--BorderWidth) solid var(--#{$menu}__list-item--BorderColor);
507
+ border-radius: var(--#{$menu}__item--BorderRadius);
502
508
  transition: inherit;
503
509
  }
504
510
 
@@ -562,6 +568,7 @@
562
568
  text-decoration-line: none;
563
569
  background-color: var(--#{$menu}__item--BackgroundColor);
564
570
  border: 0;
571
+ border-radius: var(--#{$menu}__item--BorderRadius);
565
572
  outline-offset: var(--#{$menu}--OutlineOffset);
566
573
 
567
574
  @include pf-v6-hidden-visible(flex);
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -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--control--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);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  --#{$menu-toggle}--Color: var(--pf-t--global--text--color--regular);
12
12
  --#{$menu-toggle}--LineHeight: var(--pf-t--global--font--line-height--body);
13
13
  --#{$menu-toggle}--BackgroundColor: var(--pf-t--global--background--color--control--default);
14
- --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--small);
14
+ --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--control--default);
15
15
  --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--control--default);
16
16
  --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--control--default);
17
17
  --#{$menu-toggle}--border--ZIndex: var(--pf-t--global--z-index--xs); // add z-index for toggle border to render above other borders
@@ -61,7 +61,7 @@
61
61
  --#{$menu-toggle}--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
62
62
  --#{$menu-toggle}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
63
63
  --#{$menu-toggle}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
64
- --#{$menu-toggle}--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
64
+ --#{$menu-toggle}--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
65
65
  --#{$menu-toggle}--m-primary--BorderColor: transparent;
66
66
  --#{$menu-toggle}--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
67
67
  --#{$menu-toggle}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -81,7 +81,7 @@
81
81
  --#{$menu-toggle}--m-secondary--BackgroundColor: transparent;
82
82
  --#{$menu-toggle}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
83
83
  --#{$menu-toggle}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
84
- --#{$menu-toggle}--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
84
+ --#{$menu-toggle}--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
85
85
  --#{$menu-toggle}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
86
86
  --#{$menu-toggle}--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
87
87
  --#{$menu-toggle}--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -99,12 +99,15 @@
99
99
  --#{$menu-toggle}--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
100
100
  --#{$menu-toggle}--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
101
101
 
102
+ // Form (for use in forms)
103
+ --#{$menu-toggle}--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
104
+
102
105
  // Split button, child
103
106
  --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
104
107
  --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
105
108
  --#{$menu-toggle}--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
106
109
  --#{$menu-toggle}--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
107
- --#{$menu-toggle}--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
110
+ --#{$menu-toggle}--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
108
111
  --#{$menu-toggle}--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
109
112
  --#{$menu-toggle}--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
110
113
  --#{$menu-toggle}--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
@@ -142,7 +145,7 @@
142
145
  --#{$menu-toggle}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
143
146
  --#{$menu-toggle}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
144
147
  --#{$menu-toggle}--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
145
- --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
148
+ --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
146
149
  --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
147
150
  --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
148
151
  --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -290,6 +293,10 @@
290
293
  width: 100%;
291
294
  }
292
295
 
296
+ &.pf-m-form {
297
+ --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-form--BorderRadius);
298
+ }
299
+
293
300
  &.pf-m-plain {
294
301
  --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-plain--PaddingInlineStart);
295
302
  --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-plain--PaddingInlineEnd);
package/components/Page/page.css CHANGED
@@ -189,6 +189,9 @@
189
189
  max-height: 100%;
190
190
  background-color: var(--pf-v6-c-page--BackgroundColor);
191
191
  }
192
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page {
193
+ background-color: transparent;
194
+ }
192
195
  @media (min-width: 75rem) {
193
196
  .pf-v6-c-page {
194
197
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
package/components/Page/page.scss CHANGED
@@ -229,6 +229,10 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
229
229
  max-height: 100%;
230
230
  background-color: var(--#{$page}--BackgroundColor);
231
231
 
232
+ :where(:root.pf-v6-theme-glass) & {
233
+ background-color: transparent;
234
+ }
235
+
232
236
  @media (min-width: $pf-v6-global--breakpoint--xl) {
233
237
  --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width); // TODO can remove at breaking change
234
238
 
package/components/_index.css CHANGED
@@ -1806,13 +1806,13 @@ button.pf-v6-c-breadcrumb__link {
1806
1806
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
1807
1807
  --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1808
1808
  --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1809
- --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
1809
+ --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1810
1810
  --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1811
1811
  --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1812
1812
  --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1813
1813
  --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1814
1814
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
1815
- --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
1815
+ --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--control--default);
1816
1816
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1817
1817
  --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
1818
1818
  --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -3449,7 +3449,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3449
3449
  --pf-v6-c-code-editor__header--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
3450
3450
  --pf-v6-c-code-editor__header--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
3451
3451
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3452
- --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3452
+ --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: transparent;
3453
3453
  --pf-v6-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
3454
3454
  --pf-v6-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
3455
3455
  --pf-v6-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -11151,17 +11151,19 @@ ul.pf-v6-c-list {
11151
11151
  }
11152
11152
 
11153
11153
  .pf-v6-c-menu {
11154
- --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
11154
+ --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
11155
11155
  --pf-v6-c-menu--Width: auto;
11156
11156
  --pf-v6-c-menu--MinWidth: auto;
11157
- --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11158
- --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11157
+ --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--xs);
11158
+ --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
11159
+ --pf-v6-c-menu--PaddingInlineStart: var(--pf-t--global--spacer--xs);
11160
+ --pf-v6-c-menu--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
11159
11161
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11160
11162
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
11161
11163
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
11162
11164
  --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11163
11165
  --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
11164
- --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
11166
+ --pf-v6-c-menu--BorderRadius: calc(var(--pf-v6-c-menu__item--BorderRadius) + var(--pf-v6-c-menu--PaddingBlockStart));
11165
11167
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
11166
11168
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
11167
11169
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -11202,12 +11204,13 @@ ul.pf-v6-c-list {
11202
11204
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
11203
11205
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
11204
11206
  --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11205
- --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
11206
- --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
11207
+ --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--xs);
11208
+ --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--xs);
11209
+ --pf-v6-c-menu__item--BorderRadius: var(--pf-t--global--border--radius--small);
11207
11210
  --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11208
11211
  --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11209
- --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11210
- --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11212
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
11213
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11211
11214
  --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
11212
11215
  --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
11213
11216
  --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -11216,22 +11219,23 @@ ul.pf-v6-c-list {
11216
11219
  --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
11217
11220
  --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11218
11221
  --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11219
- --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11220
- --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11222
+ --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
11223
+ --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11221
11224
  --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11222
11225
  --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11223
- --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11224
- --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11226
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--md);
11227
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11225
11228
  --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
11226
11229
  --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
11227
- --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11228
- --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11230
+ --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--md);
11231
+ --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11229
11232
  --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11230
11233
  --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11231
- --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11232
- --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11234
+ --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
11235
+ --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11233
11236
  --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
11234
- --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
11237
+ --pf-v6-c-menu__group-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
11238
+ --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--regular);
11235
11239
  --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
11236
11240
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
11237
11241
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
@@ -11393,6 +11397,8 @@ ul.pf-v6-c-list {
11393
11397
  min-width: var(--pf-v6-c-menu--MinWidth);
11394
11398
  padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
11395
11399
  padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
11400
+ padding-inline-start: var(--pf-v6-c-menu--PaddingInlineStart);
11401
+ padding-inline-end: var(--pf-v6-c-menu--PaddingInlineEnd);
11396
11402
  overflow: hidden;
11397
11403
  color: var(--pf-v6-c-menu--Color);
11398
11404
  background-color: var(--pf-v6-c-menu--BackgroundColor);
@@ -11587,8 +11593,8 @@ ul.pf-v6-c-list {
11587
11593
  inset: 0;
11588
11594
  content: "";
11589
11595
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
11590
- border-block-start: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
11591
- border-block-end: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
11596
+ border: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
11597
+ border-radius: var(--pf-v6-c-menu__item--BorderRadius);
11592
11598
  transition: inherit;
11593
11599
  }
11594
11600
  .pf-v6-c-menu__list-item.pf-m-load {
@@ -11638,6 +11644,7 @@ ul.pf-v6-c-list {
11638
11644
  text-decoration-line: none;
11639
11645
  background-color: var(--pf-v6-c-menu__item--BackgroundColor);
11640
11646
  border: 0;
11647
+ border-radius: var(--pf-v6-c-menu__item--BorderRadius);
11641
11648
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
11642
11649
  --pf-v6-hidden-visible--visible--Display: flex;
11643
11650
  --pf-v6-hidden-visible--hidden--Display: none;
@@ -11801,7 +11808,7 @@ ul.pf-v6-c-list {
11801
11808
  --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
11802
11809
  --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
11803
11810
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
11804
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
11811
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default);
11805
11812
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
11806
11813
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
11807
11814
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
@@ -11839,7 +11846,7 @@ ul.pf-v6-c-list {
11839
11846
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
11840
11847
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
11841
11848
  --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
11842
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
11849
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
11843
11850
  --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
11844
11851
  --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
11845
11852
  --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -11857,7 +11864,7 @@ ul.pf-v6-c-list {
11857
11864
  --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
11858
11865
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
11859
11866
  --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
11860
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
11867
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
11861
11868
  --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
11862
11869
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
11863
11870
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -11872,11 +11879,12 @@ ul.pf-v6-c-list {
11872
11879
  --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
11873
11880
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
11874
11881
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
11882
+ --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
11875
11883
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
11876
11884
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
11877
11885
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
11878
11886
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
11879
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
11887
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
11880
11888
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
11881
11889
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
11882
11890
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
@@ -11906,7 +11914,7 @@ ul.pf-v6-c-list {
11906
11914
  --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
11907
11915
  --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
11908
11916
  --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
11909
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
11917
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
11910
11918
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
11911
11919
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11912
11920
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -12026,6 +12034,9 @@ ul.pf-v6-c-list {
12026
12034
  .pf-v6-c-menu-toggle.pf-m-full-width {
12027
12035
  width: 100%;
12028
12036
  }
12037
+ .pf-v6-c-menu-toggle.pf-m-form {
12038
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
12039
+ }
12029
12040
  .pf-v6-c-menu-toggle.pf-m-plain {
12030
12041
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
12031
12042
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
@@ -13712,6 +13723,9 @@ ul.pf-v6-c-list {
13712
13723
  max-height: 100%;
13713
13724
  background-color: var(--pf-v6-c-page--BackgroundColor);
13714
13725
  }
13726
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page {
13727
+ background-color: transparent;
13728
+ }
13715
13729
  @media (min-width: 75rem) {
13716
13730
  .pf-v6-c-page {
13717
13731
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);