@patternfly/react-styles 6.0.0-alpha.14 → 6.0.0-alpha.16

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/css/components/ActionList/action-list.css +1 -0
  3. package/css/components/Card/card.css +1 -0
  4. package/css/components/Check/check.css +10 -3
  5. package/css/components/DescriptionList/description-list.css +6 -6
  6. package/css/components/DragDrop/drag-drop.css +1 -0
  7. package/css/components/Masthead/masthead.css +17 -9
  8. package/css/components/Masthead/masthead.d.ts +2 -0
  9. package/css/components/Masthead/masthead.js +2 -0
  10. package/css/components/Masthead/masthead.mjs +2 -0
  11. package/css/components/Menu/menu.css +31 -126
  12. package/css/components/Menu/menu.d.ts +1 -0
  13. package/css/components/Menu/menu.js +1 -0
  14. package/css/components/Menu/menu.mjs +1 -0
  15. package/css/components/MenuToggle/menu-toggle.css +20 -6
  16. package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
  17. package/css/components/MenuToggle/menu-toggle.js +1 -0
  18. package/css/components/MenuToggle/menu-toggle.mjs +1 -0
  19. package/css/components/ModalBox/modal-box.css +11 -7
  20. package/css/components/Nav/nav.css +64 -110
  21. package/css/components/Nav/nav.d.ts +3 -3
  22. package/css/components/Nav/nav.js +3 -3
  23. package/css/components/Nav/nav.mjs +3 -3
  24. package/css/components/Page/page.css +9 -17
  25. package/css/components/Radio/radio.css +12 -5
  26. package/css/components/Table/table-grid.css +30 -35
  27. package/css/components/Table/table-scrollable.css +14 -6
  28. package/css/components/Table/table-tree-view.css +5 -5
  29. package/css/components/Table/table.css +90 -254
  30. package/css/components/Table/table.d.ts +3 -4
  31. package/css/components/Table/table.js +3 -4
  32. package/css/components/Table/table.mjs +3 -4
  33. package/css/components/Toolbar/toolbar.css +66 -2
  34. package/css/components/Toolbar/toolbar.d.ts +1 -1
  35. package/css/components/Toolbar/toolbar.js +1 -1
  36. package/css/components/Toolbar/toolbar.mjs +1 -1
  37. package/css/docs/components/Brand/examples/Brand.css +3 -3
  38. package/css/docs/components/Brand/examples/Brand.d.ts +1 -1
  39. package/css/docs/components/Brand/examples/Brand.js +1 -1
  40. package/css/docs/components/Brand/examples/Brand.mjs +1 -1
  41. package/css/docs/components/Button/examples/Button.css +2 -2
  42. package/css/docs/components/Button/examples/Button.d.ts +1 -1
  43. package/css/docs/components/Button/examples/Button.js +1 -1
  44. package/css/docs/components/Button/examples/Button.mjs +1 -1
  45. package/css/docs/components/DragDrop/examples/DragDrop.css +3 -3
  46. package/css/docs/components/DragDrop/examples/DragDrop.d.ts +2 -2
  47. package/css/docs/components/DragDrop/examples/DragDrop.js +2 -2
  48. package/css/docs/components/DragDrop/examples/DragDrop.mjs +2 -2
  49. package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  50. package/css/docs/components/Dropdown/deprecated/Dropdown.d.ts +1 -1
  51. package/css/docs/components/Dropdown/deprecated/Dropdown.js +1 -1
  52. package/css/docs/components/Dropdown/deprecated/Dropdown.mjs +1 -1
  53. package/css/docs/components/Label/examples/Label.css +4 -4
  54. package/css/docs/components/Label/examples/Label.d.ts +1 -1
  55. package/css/docs/components/Label/examples/Label.js +1 -1
  56. package/css/docs/components/Label/examples/Label.mjs +1 -1
  57. package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
  58. package/css/docs/components/LogViewer/examples/LogViewer.d.ts +1 -1
  59. package/css/docs/components/LogViewer/examples/LogViewer.js +1 -1
  60. package/css/docs/components/LogViewer/examples/LogViewer.mjs +1 -1
  61. package/css/docs/components/Menu/examples/Menu.css +2 -2
  62. package/css/docs/components/Menu/examples/Menu.d.ts +3 -3
  63. package/css/docs/components/Menu/examples/Menu.js +3 -3
  64. package/css/docs/components/Menu/examples/Menu.mjs +3 -3
  65. package/css/docs/components/Nav/examples/Navigation.css +20 -3
  66. package/css/docs/components/Nav/examples/Navigation.d.ts +3 -2
  67. package/css/docs/components/Nav/examples/Navigation.js +3 -2
  68. package/css/docs/components/Nav/examples/Navigation.mjs +3 -2
  69. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.0.0-alpha.16 (2024-03-18)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+ # 6.0.0-alpha.15 (2024-03-08)
11
+
12
+ **Note:** Version bump only for package @patternfly/react-styles
13
+
6
14
  # [6.0.0-alpha.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.13...@patternfly/react-styles@6.0.0-alpha.14) (2024-02-21)
7
15
 
8
16
  **Note:** Version bump only for package @patternfly/react-styles
@@ -105,6 +113,34 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
105
113
 
106
114
  **Note:** Version bump only for package @patternfly/react-styles
107
115
 
116
+ # 5.3.0-prerelease.1 (2024-02-28)
117
+
118
+ ### Bug Fixes
119
+
120
+ - **deps:** bump to latest core ([#10116](https://github.com/patternfly/patternfly-react/issues/10116)) ([dc1aceb](https://github.com/patternfly/patternfly-react/commit/dc1aceb0ee880631320b85bfb068be13d7852a37))
121
+
122
+ # 5.3.0-prerelease.0 (2024-02-02)
123
+
124
+ # 5.2.0 (2024-02-02)
125
+
126
+ **Note:** Version bump only for package @patternfly/react-styles
127
+
128
+ # 5.2.0 (2024-02-02)
129
+
130
+ **Note:** Version bump only for package @patternfly/react-styles
131
+
132
+ # 5.2.0-prerelease.6 (2023-12-11)
133
+
134
+ **Note:** Version bump only for package @patternfly/react-styles
135
+
136
+ # 5.2.0-prerelease.5 (2023-11-10)
137
+
138
+ **Note:** Version bump only for package @patternfly/react-styles
139
+
140
+ # 5.2.0-prerelease.4 (2023-11-03)
141
+
142
+ **Note:** Version bump only for package @patternfly/react-styles
143
+
108
144
  # 5.2.0-prerelease.3 (2023-10-26)
109
145
 
110
146
  **Note:** Version bump only for package @patternfly/react-styles
@@ -16,6 +16,7 @@
16
16
  column-gap: var(--pf-v6-c-action-list--ColumnGap);
17
17
  }
18
18
  .pf-v6-c-action-list.pf-m-icons {
19
+ --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
19
20
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
20
21
  }
21
22
 
@@ -227,6 +227,7 @@
227
227
  .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
228
228
  position: absolute;
229
229
  inset: 0;
230
+ justify-self: auto;
230
231
  cursor: pointer;
231
232
  }
232
233
  .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
@@ -2,17 +2,18 @@
2
2
  .pf-v6-c-check {
3
3
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
4
4
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
5
+ --pf-v6-c-check--Height: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
5
6
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
6
7
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
7
8
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
8
9
  --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
9
10
  --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
10
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
11
11
  --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
12
12
  --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
13
13
  --pf-v6-c-check__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
14
14
  --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
15
15
  --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
16
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
16
17
  }
17
18
 
18
19
  .pf-v6-c-check {
@@ -22,13 +23,19 @@
22
23
  accent-color: var(--pf-v6-c-check--AccentColor);
23
24
  }
24
25
  .pf-v6-c-check.pf-m-standalone {
25
- --pf-v6-c-check--GridGap: 0;
26
- --pf-v6-c-check__input--TranslateY: none;
27
26
  display: inline-grid;
27
+ grid-template-columns: auto;
28
+ height: var(--pf-v6-c-check--Height);
29
+ }
30
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
31
+ align-self: center;
32
+ transform: none;
28
33
  }
29
34
 
30
35
  .pf-v6-c-check__input {
31
36
  align-self: start;
37
+ font-size: var(--pf-v6-c-check__label--FontSize);
38
+ line-height: var(--pf-v6-c-check__label--LineHeight);
32
39
  transform: translateY(var(--pf-v6-c-check__input--TranslateY));
33
40
  }
34
41
 
@@ -42,7 +42,7 @@
42
42
  --pf-v6-c-description-list--m-horizontal__term--width-on-lg: inherit;
43
43
  --pf-v6-c-description-list--m-horizontal__term--width-on-xl: inherit;
44
44
  --pf-v6-c-description-list--m-horizontal__term--width-on-2xl: inherit;
45
- --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
45
+ --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
46
46
  }
47
47
  @media screen and (min-width: 576px) {
48
48
  :where(:root), :where(.pf-v6-c-description-list) {
@@ -51,27 +51,27 @@
51
51
  }
52
52
  @media (min-width: 576px) {
53
53
  :where(:root), :where(.pf-v6-c-description-list) {
54
- --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width));
54
+ --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width));
55
55
  }
56
56
  }
57
57
  @media (min-width: 768px) {
58
58
  :where(:root), :where(.pf-v6-c-description-list) {
59
- --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)));
59
+ --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)));
60
60
  }
61
61
  }
62
62
  @media (min-width: 992px) {
63
63
  :where(:root), :where(.pf-v6-c-description-list) {
64
- --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))));
64
+ --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))));
65
65
  }
66
66
  }
67
67
  @media (min-width: 1200px) {
68
68
  :where(:root), :where(.pf-v6-c-description-list) {
69
- --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)))));
69
+ --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)))));
70
70
  }
71
71
  }
72
72
  @media (min-width: 1450px) {
73
73
  :where(:root), :where(.pf-v6-c-description-list) {
74
- --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))))));
74
+ --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))))));
75
75
  }
76
76
  }
77
77
 
@@ -2,6 +2,7 @@
2
2
  --pf-v6-c-draggable--Cursor: auto;
3
3
  --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
4
4
  --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
5
+ --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
5
6
  --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
6
7
  --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
7
8
  --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -1,11 +1,12 @@
1
- :root,
2
- [data-theme=pf-v6-c-masthead] {
1
+ :where(:root),
2
+ :where(.pf-v6-c-masthead) {
3
3
  --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
4
4
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
5
5
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
6
6
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
7
7
  --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
8
8
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
9
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
10
  --pf-v6-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
10
11
  --pf-v6-c-masthead__brand--MaxHeight: 2.375rem;
11
12
  --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
@@ -25,15 +26,12 @@
25
26
  --pf-v6-c-masthead--m-display-inline__content--Order: 0;
26
27
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
27
28
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
28
- --pf-v6-c-masthead--pf-v6-c-toolbar--Width: 100%;
29
- --pf-v6-c-masthead--pf-v6-c-toolbar--PaddingBlock: 0;
30
- --pf-v6-c-masthead--pf-v6-c-toolbar--PaddingInline: 0;
29
+ --pf-v6-c-masthead--c-toolbar--Width: 100%;
30
+ --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
31
+ --pf-v6-c-masthead--c-toolbar--PaddingInline: 0;
31
32
  }
32
33
 
33
34
  .pf-v6-c-masthead {
34
- --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--pf-v6-c-toolbar--Width);
35
- --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-v6-c-masthead--pf-v6-c-toolbar--PaddingBlock);
36
- --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--pf-v6-c-toolbar--PaddingInline);
37
35
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
38
36
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
39
37
  --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
@@ -51,7 +49,13 @@
51
49
  padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
52
50
  padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
53
51
  padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
54
- background-color: var(--pf-v6-c-masthead--BackgroundColor, var(--pf-t--global--background--color--secondary--default));
52
+ background-color: var(--pf-v6-c-masthead--BackgroundColor);
53
+ }
54
+ .pf-v6-c-masthead .pf-v6-c-toolbar {
55
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
56
+ --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-v6-c-masthead--c-toolbar--PaddingBlock);
57
+ --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
58
+ --pf-v6-c-toolbar__content--MinWidth: 0;
55
59
  }
56
60
  @media screen and (min-width: 768px) {
57
61
  :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
@@ -64,6 +68,10 @@
64
68
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
65
69
  }
66
70
  }
71
+ .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
72
+ flex-wrap: nowrap;
73
+ min-width: 0;
74
+ }
67
75
  .pf-v6-c-masthead .pf-v6-c-toolbar__expandable-content {
68
76
  inset-block-start: 100%;
69
77
  border-block-start: var(--pf-v6-c-masthead__expandable-content--BorderBlockStart);
@@ -28,6 +28,8 @@ declare const _default: {
28
28
  "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
29
29
  "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
30
30
  },
31
+ "toolbar": "pf-v6-c-toolbar",
32
+ "toolbarContentSection": "pf-v6-c-toolbar__content-section",
31
33
  "toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
32
34
  };
33
35
  export default _default;
@@ -30,5 +30,7 @@ exports.default = {
30
30
  "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
31
31
  "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
32
32
  },
33
+ "toolbar": "pf-v6-c-toolbar",
34
+ "toolbarContentSection": "pf-v6-c-toolbar__content-section",
33
35
  "toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
34
36
  };
@@ -28,5 +28,7 @@ export default {
28
28
  "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
29
29
  "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
30
30
  },
31
+ "toolbar": "pf-v6-c-toolbar",
32
+ "toolbarContentSection": "pf-v6-c-toolbar__content-section",
31
33
  "toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
32
34
  };
@@ -1,155 +1,59 @@
1
- .pf-v6-c-menu__content,
2
- .pf-v6-c-menu__list-item,
3
- .pf-v6-c-menu__item,
4
- .pf-v6-c-menu__item-main,
5
- .pf-v6-c-menu__breadcrumb,
6
- .pf-v6-c-menu__item-check,
7
- .pf-v6-c-menu__item-action,
8
- .pf-v6-c-menu__item-action-icon, .pf-v6-c-menu,
9
- .pf-v6-c-menu__list,
1
+ .pf-v6-c-menu__item, .pf-v6-c-menu__list,
10
2
  .pf-v6-c-menu__group {
11
3
  --pf-v5-hidden-visible--hidden--Display: none;
12
4
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
13
5
  display: var(--pf-v5-hidden-visible--Display);
14
6
  }
15
- .pf-m-hidden.pf-v6-c-menu__content,
16
- .pf-m-hidden.pf-v6-c-menu__list-item,
17
- .pf-m-hidden.pf-v6-c-menu__item,
18
- .pf-m-hidden.pf-v6-c-menu__item-main,
19
- .pf-m-hidden.pf-v6-c-menu__breadcrumb,
20
- .pf-m-hidden.pf-v6-c-menu__item-check,
21
- .pf-m-hidden.pf-v6-c-menu__item-action,
22
- .pf-m-hidden.pf-v6-c-menu__item-action-icon, .pf-m-hidden.pf-v6-c-menu,
23
- .pf-m-hidden.pf-v6-c-menu__list,
7
+ .pf-m-hidden.pf-v6-c-menu__item, .pf-m-hidden.pf-v6-c-menu__list,
24
8
  .pf-m-hidden.pf-v6-c-menu__group {
25
9
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
26
10
  }
27
11
  @media screen and (min-width: 576px) {
28
- .pf-m-hidden-on-sm.pf-v6-c-menu__content,
29
- .pf-m-hidden-on-sm.pf-v6-c-menu__list-item,
30
- .pf-m-hidden-on-sm.pf-v6-c-menu__item,
31
- .pf-m-hidden-on-sm.pf-v6-c-menu__item-main,
32
- .pf-m-hidden-on-sm.pf-v6-c-menu__breadcrumb,
33
- .pf-m-hidden-on-sm.pf-v6-c-menu__item-check,
34
- .pf-m-hidden-on-sm.pf-v6-c-menu__item-action,
35
- .pf-m-hidden-on-sm.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-sm.pf-v6-c-menu,
36
- .pf-m-hidden-on-sm.pf-v6-c-menu__list,
12
+ .pf-m-hidden-on-sm.pf-v6-c-menu__item, .pf-m-hidden-on-sm.pf-v6-c-menu__list,
37
13
  .pf-m-hidden-on-sm.pf-v6-c-menu__group {
38
14
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
39
15
  }
40
- .pf-m-visible-on-sm.pf-v6-c-menu__content,
41
- .pf-m-visible-on-sm.pf-v6-c-menu__list-item,
42
- .pf-m-visible-on-sm.pf-v6-c-menu__item,
43
- .pf-m-visible-on-sm.pf-v6-c-menu__item-main,
44
- .pf-m-visible-on-sm.pf-v6-c-menu__breadcrumb,
45
- .pf-m-visible-on-sm.pf-v6-c-menu__item-check,
46
- .pf-m-visible-on-sm.pf-v6-c-menu__item-action,
47
- .pf-m-visible-on-sm.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-sm.pf-v6-c-menu,
48
- .pf-m-visible-on-sm.pf-v6-c-menu__list,
16
+ .pf-m-visible-on-sm.pf-v6-c-menu__item, .pf-m-visible-on-sm.pf-v6-c-menu__list,
49
17
  .pf-m-visible-on-sm.pf-v6-c-menu__group {
50
18
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
51
19
  }
52
20
  }
53
21
  @media screen and (min-width: 768px) {
54
- .pf-m-hidden-on-md.pf-v6-c-menu__content,
55
- .pf-m-hidden-on-md.pf-v6-c-menu__list-item,
56
- .pf-m-hidden-on-md.pf-v6-c-menu__item,
57
- .pf-m-hidden-on-md.pf-v6-c-menu__item-main,
58
- .pf-m-hidden-on-md.pf-v6-c-menu__breadcrumb,
59
- .pf-m-hidden-on-md.pf-v6-c-menu__item-check,
60
- .pf-m-hidden-on-md.pf-v6-c-menu__item-action,
61
- .pf-m-hidden-on-md.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-md.pf-v6-c-menu,
62
- .pf-m-hidden-on-md.pf-v6-c-menu__list,
22
+ .pf-m-hidden-on-md.pf-v6-c-menu__item, .pf-m-hidden-on-md.pf-v6-c-menu__list,
63
23
  .pf-m-hidden-on-md.pf-v6-c-menu__group {
64
24
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
65
25
  }
66
- .pf-m-visible-on-md.pf-v6-c-menu__content,
67
- .pf-m-visible-on-md.pf-v6-c-menu__list-item,
68
- .pf-m-visible-on-md.pf-v6-c-menu__item,
69
- .pf-m-visible-on-md.pf-v6-c-menu__item-main,
70
- .pf-m-visible-on-md.pf-v6-c-menu__breadcrumb,
71
- .pf-m-visible-on-md.pf-v6-c-menu__item-check,
72
- .pf-m-visible-on-md.pf-v6-c-menu__item-action,
73
- .pf-m-visible-on-md.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-md.pf-v6-c-menu,
74
- .pf-m-visible-on-md.pf-v6-c-menu__list,
26
+ .pf-m-visible-on-md.pf-v6-c-menu__item, .pf-m-visible-on-md.pf-v6-c-menu__list,
75
27
  .pf-m-visible-on-md.pf-v6-c-menu__group {
76
28
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
77
29
  }
78
30
  }
79
31
  @media screen and (min-width: 992px) {
80
- .pf-m-hidden-on-lg.pf-v6-c-menu__content,
81
- .pf-m-hidden-on-lg.pf-v6-c-menu__list-item,
82
- .pf-m-hidden-on-lg.pf-v6-c-menu__item,
83
- .pf-m-hidden-on-lg.pf-v6-c-menu__item-main,
84
- .pf-m-hidden-on-lg.pf-v6-c-menu__breadcrumb,
85
- .pf-m-hidden-on-lg.pf-v6-c-menu__item-check,
86
- .pf-m-hidden-on-lg.pf-v6-c-menu__item-action,
87
- .pf-m-hidden-on-lg.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-lg.pf-v6-c-menu,
88
- .pf-m-hidden-on-lg.pf-v6-c-menu__list,
32
+ .pf-m-hidden-on-lg.pf-v6-c-menu__item, .pf-m-hidden-on-lg.pf-v6-c-menu__list,
89
33
  .pf-m-hidden-on-lg.pf-v6-c-menu__group {
90
34
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
91
35
  }
92
- .pf-m-visible-on-lg.pf-v6-c-menu__content,
93
- .pf-m-visible-on-lg.pf-v6-c-menu__list-item,
94
- .pf-m-visible-on-lg.pf-v6-c-menu__item,
95
- .pf-m-visible-on-lg.pf-v6-c-menu__item-main,
96
- .pf-m-visible-on-lg.pf-v6-c-menu__breadcrumb,
97
- .pf-m-visible-on-lg.pf-v6-c-menu__item-check,
98
- .pf-m-visible-on-lg.pf-v6-c-menu__item-action,
99
- .pf-m-visible-on-lg.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-lg.pf-v6-c-menu,
100
- .pf-m-visible-on-lg.pf-v6-c-menu__list,
36
+ .pf-m-visible-on-lg.pf-v6-c-menu__item, .pf-m-visible-on-lg.pf-v6-c-menu__list,
101
37
  .pf-m-visible-on-lg.pf-v6-c-menu__group {
102
38
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
103
39
  }
104
40
  }
105
41
  @media screen and (min-width: 1200px) {
106
- .pf-m-hidden-on-xl.pf-v6-c-menu__content,
107
- .pf-m-hidden-on-xl.pf-v6-c-menu__list-item,
108
- .pf-m-hidden-on-xl.pf-v6-c-menu__item,
109
- .pf-m-hidden-on-xl.pf-v6-c-menu__item-main,
110
- .pf-m-hidden-on-xl.pf-v6-c-menu__breadcrumb,
111
- .pf-m-hidden-on-xl.pf-v6-c-menu__item-check,
112
- .pf-m-hidden-on-xl.pf-v6-c-menu__item-action,
113
- .pf-m-hidden-on-xl.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-xl.pf-v6-c-menu,
114
- .pf-m-hidden-on-xl.pf-v6-c-menu__list,
42
+ .pf-m-hidden-on-xl.pf-v6-c-menu__item, .pf-m-hidden-on-xl.pf-v6-c-menu__list,
115
43
  .pf-m-hidden-on-xl.pf-v6-c-menu__group {
116
44
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
117
45
  }
118
- .pf-m-visible-on-xl.pf-v6-c-menu__content,
119
- .pf-m-visible-on-xl.pf-v6-c-menu__list-item,
120
- .pf-m-visible-on-xl.pf-v6-c-menu__item,
121
- .pf-m-visible-on-xl.pf-v6-c-menu__item-main,
122
- .pf-m-visible-on-xl.pf-v6-c-menu__breadcrumb,
123
- .pf-m-visible-on-xl.pf-v6-c-menu__item-check,
124
- .pf-m-visible-on-xl.pf-v6-c-menu__item-action,
125
- .pf-m-visible-on-xl.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-xl.pf-v6-c-menu,
126
- .pf-m-visible-on-xl.pf-v6-c-menu__list,
46
+ .pf-m-visible-on-xl.pf-v6-c-menu__item, .pf-m-visible-on-xl.pf-v6-c-menu__list,
127
47
  .pf-m-visible-on-xl.pf-v6-c-menu__group {
128
48
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
129
49
  }
130
50
  }
131
51
  @media screen and (min-width: 1450px) {
132
- .pf-m-hidden-on-2xl.pf-v6-c-menu__content,
133
- .pf-m-hidden-on-2xl.pf-v6-c-menu__list-item,
134
- .pf-m-hidden-on-2xl.pf-v6-c-menu__item,
135
- .pf-m-hidden-on-2xl.pf-v6-c-menu__item-main,
136
- .pf-m-hidden-on-2xl.pf-v6-c-menu__breadcrumb,
137
- .pf-m-hidden-on-2xl.pf-v6-c-menu__item-check,
138
- .pf-m-hidden-on-2xl.pf-v6-c-menu__item-action,
139
- .pf-m-hidden-on-2xl.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-2xl.pf-v6-c-menu,
140
- .pf-m-hidden-on-2xl.pf-v6-c-menu__list,
52
+ .pf-m-hidden-on-2xl.pf-v6-c-menu__item, .pf-m-hidden-on-2xl.pf-v6-c-menu__list,
141
53
  .pf-m-hidden-on-2xl.pf-v6-c-menu__group {
142
54
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
143
55
  }
144
- .pf-m-visible-on-2xl.pf-v6-c-menu__content,
145
- .pf-m-visible-on-2xl.pf-v6-c-menu__list-item,
146
- .pf-m-visible-on-2xl.pf-v6-c-menu__item,
147
- .pf-m-visible-on-2xl.pf-v6-c-menu__item-main,
148
- .pf-m-visible-on-2xl.pf-v6-c-menu__breadcrumb,
149
- .pf-m-visible-on-2xl.pf-v6-c-menu__item-check,
150
- .pf-m-visible-on-2xl.pf-v6-c-menu__item-action,
151
- .pf-m-visible-on-2xl.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-2xl.pf-v6-c-menu,
152
- .pf-m-visible-on-2xl.pf-v6-c-menu__list,
56
+ .pf-m-visible-on-2xl.pf-v6-c-menu__item, .pf-m-visible-on-2xl.pf-v6-c-menu__list,
153
57
  .pf-m-visible-on-2xl.pf-v6-c-menu__group {
154
58
  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
155
59
  }
@@ -248,21 +152,19 @@
248
152
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--Zindex--xs);
249
153
  }
250
154
 
251
- .pf-v6-c-menu,
252
- .pf-v6-c-menu__list,
253
- .pf-v6-c-menu__group {
254
- --pf-v5-hidden-visible--visible--Display: grid;
255
- }
256
-
257
155
  .pf-v6-c-menu__content,
258
156
  .pf-v6-c-menu__list-item,
259
- .pf-v6-c-menu__item,
260
157
  .pf-v6-c-menu__item-main,
261
158
  .pf-v6-c-menu__breadcrumb,
262
159
  .pf-v6-c-menu__item-check,
263
160
  .pf-v6-c-menu__item-action,
264
161
  .pf-v6-c-menu__item-action-icon {
265
- --pf-v5-hidden-visible--visible--Display: flex;
162
+ display: flex;
163
+ }
164
+
165
+ .pf-v6-c-menu__list,
166
+ .pf-v6-c-menu__group {
167
+ --pf-v5-hidden-visible--visible--Display: grid;
266
168
  }
267
169
 
268
170
  .pf-v6-c-menu__list,
@@ -287,6 +189,7 @@
287
189
  }
288
190
 
289
191
  .pf-v6-c-menu {
192
+ display: grid;
290
193
  row-gap: var(--pf-v6-c-menu--RowGap);
291
194
  width: var(--pf-v6-c-menu--Width);
292
195
  min-width: var(--pf-v6-c-menu--MinWidth);
@@ -495,10 +398,12 @@
495
398
  .pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) {
496
399
  padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd);
497
400
  }
498
- .pf-v6-c-menu__list-item:has(> :hover) {
401
+ .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
499
402
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
500
403
  }
501
- .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
404
+ .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
405
+ .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
406
+ .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
502
407
  .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon {
503
408
  opacity: 1;
504
409
  }
@@ -520,15 +425,20 @@
520
425
  background-color: var(--pf-v6-c-menu__item--BackgroundColor);
521
426
  border: 0;
522
427
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
428
+ --pf-v5-hidden-visible--visible--Display: flex;
523
429
  }
430
+ :where(label).pf-v6-c-menu__item {
431
+ cursor: pointer;
432
+ }
433
+
524
434
  .pf-v6-c-menu__item.pf-m-selected {
525
435
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
526
436
  }
527
- .pf-v6-c-menu__item:is(:hover, :focus, :active, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
528
- .pf-v6-c-menu__item:is(:hover, :focus, :active, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
437
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
438
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
529
439
  opacity: 1;
530
440
  }
531
- .pf-v6-c-menu__item:is(:hover, :focus, :active, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
441
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
532
442
  color: var(--pf-v6-c-menu__item-external--Color);
533
443
  }
534
444
 
@@ -568,11 +478,6 @@
568
478
  .pf-v6-c-menu__item-check .pf-v6-c-check {
569
479
  --pf-v5-c-check__input--TranslateY: none;
570
480
  }
571
- .pf-v6-c-menu__item-check .pf-v6-c-check input::before {
572
- position: absolute;
573
- inset: 0;
574
- content: "";
575
- }
576
481
 
577
482
  .pf-v6-c-menu__item-toggle-icon {
578
483
  color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
@@ -52,6 +52,7 @@ declare const _default: {
52
52
  "load": "pf-m-load",
53
53
  "loading": "pf-m-loading",
54
54
  "danger": "pf-m-danger",
55
+ "focus": "pf-m-focus",
55
56
  "selected": "pf-m-selected",
56
57
  "favorited": "pf-m-favorited"
57
58
  }
@@ -54,6 +54,7 @@ exports.default = {
54
54
  "load": "pf-m-load",
55
55
  "loading": "pf-m-loading",
56
56
  "danger": "pf-m-danger",
57
+ "focus": "pf-m-focus",
57
58
  "selected": "pf-m-selected",
58
59
  "favorited": "pf-m-favorited"
59
60
  }
@@ -52,6 +52,7 @@ export default {
52
52
  "load": "pf-m-load",
53
53
  "loading": "pf-m-loading",
54
54
  "danger": "pf-m-danger",
55
+ "focus": "pf-m-focus",
55
56
  "selected": "pf-m-selected",
56
57
  "favorited": "pf-m-favorited"
57
58
  }
@@ -29,6 +29,8 @@
29
29
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
30
30
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
31
31
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
32
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
33
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
32
34
  --pf-v6-c-menu-toggle--m-button--PaddingLeft: var(--pf-t--global--spacer--md);
33
35
  --pf-v6-c-menu-toggle--m-button--PaddingRight: var(--pf-t--global--spacer--md);
34
36
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -103,6 +105,8 @@
103
105
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
104
106
  --pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
105
107
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
108
+ --pf-v6-c-menu-toggle--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
109
+ --pf-v6-c-menu-toggle--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
106
110
  }
107
111
 
108
112
  .pf-v6-c-menu-toggle {
@@ -230,6 +234,10 @@
230
234
  .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
231
235
  border: 0;
232
236
  }
237
+ .pf-v6-c-menu-toggle.pf-m-small {
238
+ --pf-v6-c-menu-toggle--PaddingTop: var(--pf-v6-c-menu-toggle--m-small--PaddingTop);
239
+ --pf-v6-c-menu-toggle--PaddingBottom: var(--pf-v6-c-menu-toggle--m-small--PaddingBottom);
240
+ }
233
241
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
234
242
  background-color: transparent;
235
243
  }
@@ -340,11 +348,6 @@
340
348
  padding-inline-start: 0;
341
349
  }
342
350
 
343
- .pf-v6-c-menu-toggle__icon {
344
- flex-shrink: 0;
345
- align-self: center;
346
- }
347
-
348
351
  .pf-v6-c-menu-toggle__text {
349
352
  overflow: hidden;
350
353
  text-overflow: ellipsis;
@@ -357,14 +360,25 @@
357
360
  flex-wrap: nowrap;
358
361
  }
359
362
 
360
- .pf-v6-c-menu-toggle__controls {
363
+ .pf-v6-c-menu-toggle__icon,
364
+ .pf-v6-c-menu-toggle__controls,
365
+ .pf-v6-c-menu-toggle__toggle-icon {
361
366
  display: flex;
362
367
  align-items: center;
363
368
  justify-content: center;
369
+ }
370
+
371
+ .pf-v6-c-menu-toggle__icon {
372
+ flex-shrink: 0;
373
+ min-height: var(--pf-v6-c-menu-toggle__icon--MinHeight);
374
+ }
375
+
376
+ .pf-v6-c-menu-toggle__controls {
364
377
  min-width: var(--pf-v6-c-menu-toggle__controls--MinWidth);
365
378
  margin-inline-start: auto;
366
379
  }
367
380
 
368
381
  .pf-v6-c-menu-toggle__toggle-icon {
382
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
369
383
  color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
370
384
  }
@@ -19,6 +19,7 @@ declare const _default: {
19
19
  "expanded": "pf-m-expanded",
20
20
  "active": "pf-m-active",
21
21
  "disabled": "pf-m-disabled",
22
+ "small": "pf-m-small",
22
23
  "splitButton": "pf-m-split-button",
23
24
  "action": "pf-m-action",
24
25
  "typeahead": "pf-m-typeahead"
@@ -21,6 +21,7 @@ exports.default = {
21
21
  "expanded": "pf-m-expanded",
22
22
  "active": "pf-m-active",
23
23
  "disabled": "pf-m-disabled",
24
+ "small": "pf-m-small",
24
25
  "splitButton": "pf-m-split-button",
25
26
  "action": "pf-m-action",
26
27
  "typeahead": "pf-m-typeahead"
@@ -19,6 +19,7 @@ export default {
19
19
  "expanded": "pf-m-expanded",
20
20
  "active": "pf-m-active",
21
21
  "disabled": "pf-m-disabled",
22
+ "small": "pf-m-small",
22
23
  "splitButton": "pf-m-split-button",
23
24
  "action": "pf-m-action",
24
25
  "typeahead": "pf-m-typeahead"